style: fix style and layout, add mobile theme

apossiblespace · Nov 20, 2024 · e024def · e024def
1 parent 04b3563
commit e024def
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 42 deletions.
diff --git a/resources/public/css/style.css b/resources/public/css/style.css
@@ -14,7 +14,14 @@
     box-sizing: border-box;
 }
 
+html,
 body {
+    height: 100%;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
     font-family:
         system-ui,
         -apple-system,
@@ -42,10 +49,10 @@ a {
 }
 
 header {
-    svg.logo {
-        max-width: 200px;
-        #parts-text {
-            fill: black;
+    .logo {
+        color: black;
+        img {
+            max-width: 200px;
         }
     }
     .content {
@@ -54,19 +61,27 @@ header {
 }
 
 footer {
-    background-color: var(--color-text);
+    background-color: var(--color-primary);
     color: var(--color-bg);
     font-size: 0.8em;
     line-height: 1.2em;
     width: 100%;
     gap: 1rem;
+    flex: 1;
     .content {
         padding: 4rem 0rem;
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         justify-content: space-between;
     }
+
+    a,
+    a:visited,
+    a:hover {
+        color: var(--color-bg);
+        font-weight: bold;
+    }
 }
 
 .container {
@@ -234,7 +249,6 @@ footer {
     footer .content {
         flex-direction: column;
         gap: 0;
-        padding-top: 2rem;
-        padding-bottom: 4rem;
+        padding: 2rem 0rem;
     }
 }
diff --git a/resources/public/images/parts-logo-horizontal.svg b/resources/public/images/parts-logo-horizontal.svg
diff --git a/src/tools/ifs/parts/layouts/main.clj b/src/tools/ifs/parts/layouts/main.clj
@@ -11,6 +11,7 @@
      [:meta {:charset "utf-8"}]
      [:meta {:name "viewport" :content "width=device-width, initial-scale=1"}]
      [:meta {:name "description" :content "Parts is a mapping tool for IFS practitioners to keep track of, visualise, and explore the relationships between their clients’ parts."}]
+     [:meta {:name "theme-color" :content "#62a294"}]
      [:link {:rel "icon" :sizes "192x192" :href "/images/icons/favicon.png"}]
      [:link {:rel "apple-touch-icon" :href "/images/icons/favicon.png"}]
      [:title (str title " — Parts")]

diff --git a/src/tools/ifs/parts/layouts/partials.clj b/src/tools/ifs/parts/layouts/partials.clj
@@ -7,25 +7,8 @@
   []
   [:header.container
    [:div.content
-    [:p
-     [:svg.logo {:xmlns "http://www.w3.org/2000/svg" :width "324" :height "44" :viewBox "0 0 324 44" :fill "none"}
-      [:g {:id "Logo horizontal"}
-       [:g {:id "parts-text"}
-        [:path {:id "Vector" :d "M159.828 39.576C156.884 39.576 154.388 39.08 152.34 38.088C150.292 37.064 148.548 35.752 147.108 34.152L151.908 29.304C154.18 31.864 156.98 33.144 160.308 33.144C162.1 33.144 163.428 32.776 164.292 32.04C165.156 31.304 165.588 30.328 165.588 29.112C165.588 28.184 165.332 27.416 164.82 26.808C164.308 26.168 163.268 25.736 161.7 25.512L158.388 25.08C154.836 24.632 152.228 23.56 150.564 21.864C148.932 20.168 148.116 17.912 148.116 15.096C148.116 13.592 148.404 12.216 148.98 10.968C149.556 9.71998 150.372 8.64798 151.428 7.75198C152.516 6.85598 153.828 6.16798 155.364 5.68798C156.932 5.17598 158.708 4.91998 160.692 4.91998C163.22 4.91998 165.444 5.31998 167.364 6.11998C169.284 6.91998 170.932 8.08798 172.308 9.62398L167.46 14.52C166.66 13.592 165.684 12.84 164.532 12.264C163.412 11.656 161.988 11.352 160.26 11.352C158.628 11.352 157.412 11.64 156.612 12.216C155.812 12.792 155.412 13.592 155.412 14.616C155.412 15.768 155.716 16.6 156.324 17.112C156.964 17.624 157.988 17.992 159.396 18.216L162.708 18.744C166.164 19.288 168.724 20.36 170.388 21.96C172.052 23.528 172.884 25.768 172.884 28.68C172.884 30.28 172.596 31.752 172.02 33.096C171.444 34.44 170.596 35.592 169.476 36.552C168.388 37.512 167.028 38.264 165.396 38.808C163.764 39.32 161.908 39.576 159.828 39.576Z"}]
-        [:path {:id "Vector_2" :d "M128.28 11.976V39H120.984V11.976H111.912V5.49597H137.352V11.976H128.28Z"}]
-        [:path {:id "Vector_3" :d "M83.2358 39H75.9398V5.49597H91.8278C93.3638 5.49597 94.7558 5.75197 96.0038 6.26397C97.2518 6.77597 98.3078 7.51197 99.1718 8.47197C100.068 9.39997 100.756 10.52 101.236 11.832C101.716 13.144 101.956 14.6 101.956 16.2C101.956 18.472 101.444 20.456 100.42 22.152C99.4278 23.848 97.9078 25.08 95.8598 25.848L102.436 39H94.3238L88.4678 26.712H83.2358V39ZM90.9158 20.568C92.0038 20.568 92.8518 20.296 93.4598 19.752C94.0998 19.176 94.4198 18.344 94.4198 17.256V15.144C94.4198 14.056 94.0998 13.24 93.4598 12.696C92.8518 12.12 92.0038 11.832 90.9158 11.832H83.2358V20.568H90.9158Z"}]
-        [:path {:id "Vector_4" :d "M56.5204 39L54.1204 31.032H42.9364L40.5364 39H33.1444L44.1844 5.49597H53.2084L64.1044 39H56.5204ZM48.6004 12.12H48.3604L44.6644 24.84H52.3444L48.6004 12.12Z"}]
-        [:path {:id "Vector_5" :d "M0.696045 39V5.49597H16.536C18.104 5.49597 19.512 5.76797 20.76 6.31197C22.008 6.82397 23.064 7.54397 23.928 8.47197C24.824 9.39997 25.512 10.536 25.992 11.88C26.472 13.192 26.712 14.632 26.712 16.2C26.712 17.8 26.472 19.256 25.992 20.568C25.512 21.88 24.824 23 23.928 23.928C23.064 24.856 22.008 25.592 20.76 26.136C19.512 26.648 18.104 26.904 16.536 26.904H7.99205V39H0.696045ZM7.99205 20.568H15.672C16.76 20.568 17.608 20.296 18.216 19.752C18.856 19.176 19.176 18.344 19.176 17.256V15.144C19.176 14.056 18.856 13.24 18.216 12.696C17.608 12.12 16.76 11.832 15.672 11.832H7.99205V20.568Z"}]]
-       [:g {:id "Group 1"}
-        [:g {:id "Manager node"}
-         [:path {:d "M253.588 2.25555C255.115 1.39238 256.982 1.39238 258.509 2.25555L271.478 9.58701C273.047 10.4741 274.017 12.1371 274.017 13.9396V28.4216C274.017 30.2242 273.047 31.8872 271.478 32.7743L258.509 40.1057C256.982 40.9689 255.115 40.9689 253.588 40.1057L240.619 32.7743C239.05 31.8872 238.08 30.2242 238.08 28.4216V13.9396C238.08 12.1371 239.05 10.4741 240.619 9.58701L253.588 2.25555Z" :fill "#D1B43C"}]
-         [:path {:d "M253.588 2.25555C255.115 1.39238 256.982 1.39238 258.509 2.25555L271.478 9.58701C273.047 10.4741 274.017 12.1371 274.017 13.9396V28.4216C274.017 30.2242 273.047 31.8872 271.478 32.7743L258.509 40.1057C256.982 40.9689 255.115 40.9689 253.588 40.1057L240.619 32.7743C239.05 31.8872 238.08 30.2242 238.08 28.4216V13.9396C238.08 12.1371 239.05 10.4741 240.619 9.58701L253.588 2.25555Z" :stroke "#D1B43C"}]]
-        [:g {:id "Firefighter node"}
-         [:path {:d "M300.843 1.87651C301.643 0.904367 303.131 0.904366 303.931 1.87651L307.665 6.4134C308.088 6.92768 308.74 7.19753 309.403 7.13315L315.251 6.56519C316.504 6.44349 317.557 7.49602 317.435 8.74915L316.867 14.5973C316.803 15.2602 317.072 15.9117 317.587 16.3349L322.124 20.0686C323.096 20.8686 323.096 22.3572 322.124 23.1572L317.587 26.8909C317.072 27.3141 316.803 27.9656 316.867 28.6285L317.435 34.4767C317.557 35.7298 316.504 36.7823 315.251 36.6606L309.403 36.0927C308.74 36.0283 308.088 36.2981 307.665 36.8124L303.931 41.3493C303.131 42.3214 301.643 42.3214 300.843 41.3493L297.109 36.8124C296.686 36.2981 296.034 36.0283 295.372 36.0927L289.523 36.6606C288.27 36.7823 287.218 35.7298 287.339 34.4767L287.907 28.6285C287.972 27.9656 287.702 27.3141 287.188 26.8909L282.651 23.1572C281.679 22.3572 281.679 20.8686 282.651 20.0686L287.188 16.3349C287.702 15.9117 287.972 15.2602 287.907 14.5973L287.339 8.74915C287.218 7.49603 288.27 6.44349 289.523 6.56519L295.372 7.13315C296.034 7.19753 296.686 6.92768 297.109 6.4134L300.843 1.87651Z" :fill "#F2BE56"}]
-         [:path {:d "M300.843 1.87651C301.643 0.904367 303.131 0.904366 303.931 1.87651L307.665 6.4134C308.088 6.92768 308.74 7.19753 309.403 7.13315L315.251 6.56519C316.504 6.44349 317.557 7.49602 317.435 8.74915L316.867 14.5973C316.803 15.2602 317.072 15.9117 317.587 16.3349L322.124 20.0686C323.096 20.8686 323.096 22.3572 322.124 23.1572L317.587 26.8909C317.072 27.3141 316.803 27.9656 316.867 28.6285L317.435 34.4767C317.557 35.7298 316.504 36.7823 315.251 36.6606L309.403 36.0927C308.74 36.0283 308.088 36.2981 307.665 36.8124L303.931 41.3493C303.131 42.3214 301.643 42.3214 300.843 41.3493L297.109 36.8124C296.686 36.2981 296.034 36.0283 295.372 36.0927L289.523 36.6606C288.27 36.7823 287.218 35.7298 287.339 34.4767L287.907 28.6285C287.972 27.9656 287.702 27.3141 287.188 26.8909L282.651 23.1572C281.679 22.3572 281.679 20.8686 282.651 20.0686L287.188 16.3349C287.702 15.9117 287.972 15.2602 287.907 14.5973L287.339 8.74915C287.218 7.49603 288.27 6.44349 289.523 6.56519L295.372 7.13315C296.034 7.19753 296.686 6.92768 297.109 6.4134L300.843 1.87651Z" :stroke "#F2BE56"}]]
-        [:g {:id "Exile node"}
-         [:circle {:cx "209.019" :cy "21.6129" :r "19.0194" :fill "#62A294"}]
-         [:circle {:cx "209.019" :cy "21.6129" :r "19.0194" :stroke "#62A294"}]]]]]]]])
+    [:p.logo
+     [:img {:src "/images/parts-logo-horizontal.svg"}]]]])
 
 (defn footer
   "Site footer"