More polish to session page design

GaiwanTeam · Sep 3, 2024 · cad5503 · cad5503
1 parent 8e60574
commit cad5503
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/resources/public/css/styles.css b/resources/public/css/styles.css
@@ -30,7 +30,7 @@
     --workshop-color: var(--teal-8);
     --office-hours-color: var(--red-9);
     --activity-color: var(--red-9);
-    --highlight-yellow: var(--yellow-9);
+    --highlight-yellow: var(--teal-12);
     --highlight: var(--hoc-pink-4);
   }
 
@@ -640,7 +640,7 @@ body {
 }
 
 .sessions-session_detail .three-box {
-  background: var(--activity-color);
+  position: relative;
   font-size: var(--size-6);
   margin-top: var(--size-4);
   margin-bottom: var(--size-4);
@@ -668,6 +668,19 @@ body {
   font-weight: 700;
 }
 
+.sessions-session_detail .three-box:before {
+  width: 90%;
+  top: 0;
+  height: 110%;
+  transform: rotate(1deg);
+  position: absolute;
+  z-index: -1;
+  content: '';
+  background-color: var(--activity-color);
+  border-radius: 900px;
+  left: 5%;
+}
+
 .sessions-session_list .sessions {
   display: grid;
   gap: var(--size-3);

diff --git a/src/co/gaiwan/compass/css/tokens.clj b/src/co/gaiwan/compass/css/tokens.clj
@@ -42,7 +42,7 @@
     --workshop-color     --teal-2
     --office-hours-color --red-2
     --activity-color     --red-2
-    --highlight-yellow      --yellow-2
+    --highlight-yellow   --yellow-2
     --highlight          --hoc-pink-1}]
 
   (gs/at-media
@@ -52,5 +52,5 @@
      --workshop-color     --teal-8
      --office-hours-color --red-9
      --activity-color     --red-9
-     --highlight-yellow      --yellow-9
+     --highlight-yellow   --teal-12
      --highlight          --hoc-pink-4}]))
diff --git a/src/co/gaiwan/compass/html/sessions.clj b/src/co/gaiwan/compass/html/sessions.clj
@@ -198,11 +198,25 @@
    [:>p :font-semibold]
    [:.datetime :font-size-7 :font-bold]
    ]
-  [:.three-box {:background t/--activity-color}
+  [:.three-box #_{:background t/--activity-color}
+   :relative
    :font-size-6 :my-4 :flex :p-4 :gap-4
    [:>div :border-8 :font-semibold :p-4 :w-33% :text-center
     [:>.small :font-size-3 :uppercase :tracking-widest]
-    [:>.large :font-size-7 :font-bold]]]
+    [:>.large :font-size-7 :font-bold]]
+   [:&:before
+    {:content "''"
+     :position "absolute"
+     :top "0"
+     :left "5%"
+     :width "90%"
+     :height "110%"
+     :z-index -1
+     :background-color t/--activity-color
+     :border-radius "900px"
+     :transform "rotate(1deg)"}
+    ]]
+
   ([{:session/keys [type title subtitle organized
                     time location image capacity
                     signup-count description