wip: project view

less/site.less

@@ -2,16 +2,18 @@
 
 @offwhite: #F8F8F8;
 @blackish: #0A0608;
+@reddish: #fbb4ae;
 @lightgray: #C5C5C5;
 @darkgray: #606060;
+@background: rgba(242, 236, 225, 1);
 
 html {
   height: 100%;
 }
 
 body {
   color: @blackish;
-  background-color: rgba(242, 236, 225, 1);
+  background-color: @background;
   margin: 0;
   height: 100%;
   @media screen and (min-width: 500px) {
@@ -38,20 +40,16 @@ body {
 
 h1 {
   font-weight: 400;
-  font-size: 2.5em;
+  font-size: 2em;
 }
 
 h2, h3 {
   font-weight: 300;
 }
 
-h2 {
-  padding: 2px 8px 2px 6px;
-}
-
 a {
   text-decoration: underline;
-  color: @offwhite;
+  color: @reddish;
 }
 
 .projects-gallery {
@@ -65,6 +63,10 @@ a {
   text-align: center;
   width: 470px;
   height: 630px;
+  @media screen and (max-width: 500px) {
+    width: 317px;
+    height: 450px;
+  }
 }
 
 .category-projects {
@@ -74,50 +76,52 @@ a {
 .bubble-wrap-outer {
   position: absolute;
   top: 0;
+
   width: 252px;
   height: 252px;
+
+  @media screen and (max-width: 500px) {
+    width: 170px;
+    height: 170px;
+    font-size: 0.8em;
+  }
+
   &:hover {
     z-index: 15;
   }
   &:nth-child(1) {
     transform: translate(43%, 0);
     .label-bubble {
-      align-items: flex-start;
       justify-content: center;
     }
   }
   &:nth-child(2) {
     transform: translate(86%, 25%);
     .label-bubble {
-      align-items: center;
       justify-content: flex-end;
     }
   }
   &:nth-child(3) {
     transform: translate(86%, 75%);
     .label-bubble {
-      align-items: center;
       justify-content: flex-end;
     }
   }
   &:nth-child(4) {
     transform: translate(43%, 100%);
     .label-bubble {
-      align-items: flex-end;
       justify-content: center;
     }
   }
   &:nth-child(5) {
     transform: translate(0, 75%);
     .label-bubble {
-      align-items: center;
       justify-content: flex-start;
     }
   }
   &:nth-child(6) {
     transform: translate(0, 25%);
     .label-bubble {
-      align-items: center;
       justify-content: flex-start;
     }
   }
@@ -168,10 +172,26 @@ a {
 .label-bubble {
   display: flex;
   flex-flow: row wrap;
+  align-items: center;
   padding: 0.9em;
   .label { width: 100% }
 }
 
+.project-view-wrap {
+  display: flex;
+  flex-flow: row wrap;
+
+  .project-view-details {
+    margin: 1.75em 2em 0 2em;
+  }
+
+  .project-view-image {
+    width: 252px;
+    height: 252px;
+    margin: 2em 0 0 2em;
+  }
+}
+
 header {
   text-align: center;
   .img-wrapper {

project.clj

@@ -7,11 +7,13 @@
                  [org.clojure/core.async "0.2.391"]
                  [re-com "1.0.0"]
                  [secretary "1.2.3"]
+                 [camel-snake-kebab "0.4.0"]
                  [cljsjs/jquery "2.2.4-0"]
                  [cljsjs/photoswipe "4.1.1-0"]
                  [compojure "1.6.0"]
                  [ring "1.6.0"]
                  [cljs-ajax "0.6.0"]
+                 [environ "1.1.0"]
                  [day8.re-frame/http-fx "0.1.3"]
                  [adzerk/env "0.4.0"]]
 
@@ -26,13 +28,13 @@
 
   :min-lein-version "2.5.3"
 
-  :source-paths ["src/clj"]
+  :source-paths ["src/clj" "src/cljs"]
 
   :clean-targets ^{:protect false} ["resources/public/js/compiled" "target"
                                     "test/js"]
 
   :figwheel {:css-dirs     ["resources/public/css"]
-             :ring-handler mmm.handler/dev-handler}
+             :ring-handler mmm-clj.handler/dev-handler}
 
   :less {:source-paths ["less"]
          :target-path  "resources/public/css"}
@@ -42,13 +44,14 @@
    {:dependencies [[binaryage/devtools "0.8.2"]]
 
     :plugins      [[lein-figwheel "0.5.8"]
+                   [environ "1.0.1"]
                    [lein-doo "0.1.7"]]}}
 
 
   :cljsbuild
   {:builds
    [{:id           "dev"
-     :source-paths ["src/cljs"]
+     :source-paths ["src/clj" "src/cljs"]
      :figwheel     {:on-jsload "mmm.core/mount-root"}
      :compiler     {:main                 mmm.core
                     :output-to            "resources/public/js/compiled/app.js"
@@ -60,7 +63,7 @@
 
 
     {:id           "min"
-     :source-paths ["src/cljs"]
+     :source-paths ["src/clj" "src/cljs"]
      :jar          true
      :compiler     {:main            mmm.core
                     :output-to       "resources/public/js/compiled/app.js"
@@ -69,14 +72,14 @@
                     :pretty-print    false}}
 
     {:id           "test"
-     :source-paths ["src/cljs" "test/cljs"]
+     :source-paths ["src/clj" "src/cljs" "test/cljs"]
      :compiler     {:main          mmm.runner
                     :output-to     "resources/public/js/compiled/test.js"
                     :output-dir    "resources/public/js/compiled/test/out"
                     :optimizations :none}}]}
 
-  :main mmm.server
+  :main mmm-clj.server
 
-  :aot [mmm.server]
+  :aot [mmm-clj.server]
 
   :prep-tasks [["cljsbuild" "once" "min"] "compile"])

resources/public/css/site.css

@@ -22,18 +22,15 @@ body {
 }
 h1 {
   font-weight: 400;
-  font-size: 2.5em;
+  font-size: 2em;
 }
 h2,
 h3 {
   font-weight: 300;
 }
-h2 {
-  padding: 2px 8px 2px 6px;
-}
 a {
   text-decoration: underline;
-  color: #f8f8f8;
+  color: #fbb4ae;
 }
 .projects-gallery {
   width: 100%;
@@ -46,6 +43,12 @@ a {
   width: 470px;
   height: 630px;
 }
+@media screen and (max-width: 500px) {
+  .category-wrap {
+    width: 317px;
+    height: 450px;
+  }
+}
 .category-projects {
   position: relative;
 }
@@ -55,49 +58,50 @@ a {
   width: 252px;
   height: 252px;
 }
+@media screen and (max-width: 500px) {
+  .bubble-wrap-outer {
+    width: 170px;
+    height: 170px;
+    font-size: 0.8em;
+  }
+}
 .bubble-wrap-outer:hover {
   z-index: 15;
 }
 .bubble-wrap-outer:nth-child(1) {
   transform: translate(43%, 0);
 }
 .bubble-wrap-outer:nth-child(1) .label-bubble {
-  align-items: flex-start;
   justify-content: center;
 }
 .bubble-wrap-outer:nth-child(2) {
   transform: translate(86%, 25%);
 }
 .bubble-wrap-outer:nth-child(2) .label-bubble {
-  align-items: center;
   justify-content: flex-end;
 }
 .bubble-wrap-outer:nth-child(3) {
   transform: translate(86%, 75%);
 }
 .bubble-wrap-outer:nth-child(3) .label-bubble {
-  align-items: center;
   justify-content: flex-end;
 }
 .bubble-wrap-outer:nth-child(4) {
   transform: translate(43%, 100%);
 }
 .bubble-wrap-outer:nth-child(4) .label-bubble {
-  align-items: flex-end;
   justify-content: center;
 }
 .bubble-wrap-outer:nth-child(5) {
   transform: translate(0, 75%);
 }
 .bubble-wrap-outer:nth-child(5) .label-bubble {
-  align-items: center;
   justify-content: flex-start;
 }
 .bubble-wrap-outer:nth-child(6) {
   transform: translate(0, 25%);
 }
 .bubble-wrap-outer:nth-child(6) .label-bubble {
-  align-items: center;
   justify-content: flex-start;
 }
 .bubble-wrap-inner {
@@ -139,11 +143,24 @@ a {
 .label-bubble {
   display: flex;
   flex-flow: row wrap;
+  align-items: center;
   padding: 0.9em;
 }
 .label-bubble .label {
   width: 100%;
 }
+.project-view-wrap {
+  display: flex;
+  flex-flow: row wrap;
+}
+.project-view-wrap .project-view-details {
+  margin: 1.75em 2em 0 2em;
+}
+.project-view-wrap .project-view-image {
+  width: 252px;
+  height: 252px;
+  margin: 2em 0 0 2em;
+}
 header {
   text-align: center;
 }

src/clj/mmm_clj/core.clj

@@ -0,0 +1,2 @@
+(ns mmm-clj.core
+  (:gen-class))

src/clj/mmm_clj/env.clj

@@ -0,0 +1,9 @@
+(ns mmm-clj.env
+  (:require [environ.core :refer [env]]
+            [adzerk.env :as env]))
+
+(env/def mmm-contentful-server-space-id (System/getenv "MMM_CONTENTFUL_SERVER_SPACE_ID"))
+
+(env/def mmm-contentful-server-access-token (System/getenv "MMM_CONTENTFUL_SERVER_ACCESS_TOKEN"))
+
+(defmacro get-env [k] (get env k))

src/clj/mmm/handler.clj → src/clj/mmm_clj/handler.clj

@@ -1,4 +1,4 @@
-(ns mmm.handler
+(ns mmm-clj.handler
   (:require [compojure.core :refer [GET defroutes]]
             [compojure.route :refer [resources]]
             [ring.util.response :refer [resource-response]]

src/clj/mmm/server.clj → src/clj/mmm_clj/server.clj

@@ -1,4 +1,4 @@
-(ns mmm.server
+(ns mmm-clj.server
   (:require [mmm.handler :refer [handler]]
             [config.core :refer [env]]
             [ring.adapter.jetty :refer [run-jetty]])

src/cljs/mmm/db.cljs

@@ -2,6 +2,7 @@
 
 (def default-db
   {:active-view nil
+   :project-in-view nil
    :view-titles {:title    "mmmanyfold"
                  :subtitle "web + app dev studio"}
    :content-css-class "default-content"