fix: Replace position absolute with grid templates (#17)

* Revert "Hack: Prevent type foredrag to overflow program title" This reverts commit 1df30a0. * fix: Replace position absolute with grid templates Signed-off-by: Tim Hårek Andreassen <[email protected]> --------- Signed-off-by: Tim Hårek Andreassen <[email protected]>
fribyte-code · Oct 11, 2023 · dd061fd · dd061fd
1 parent 4b17786
commit dd061fd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 26 deletions.
diff --git a/sass/main.scss b/sass/main.scss
@@ -8,13 +8,9 @@
   --hover-bg-color: #f5f5f5;
   --theme-switcher-button: #fff;
 
-  --font-sans: -apple-system, BlinkMacSystemFont, Segoe UI, avenir next, avenir,
-    helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
-  --font-mono: FMono-Regular, Consolas, DejaVu Sans Mono, Liberation Mono, Menlo,
-    monospace;
-  --font-serif: Iowan Old Style, Apple Garamond, Baskerville, Georgia,
-    Times New Roman, Droid Serif, Times, Source Serif Pro, serif,
-    Apple Color Emoji;
+  --font-sans: -apple-system, BlinkMacSystemFont, Segoe UI, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+  --font-mono: FMono-Regular, Consolas, DejaVu Sans Mono, Liberation Mono, Menlo, monospace;
+  --font-serif: Iowan Old Style, Apple Garamond, Baskerville, Georgia, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji;
 
   --font-size-desktop: 18px;
   --font-size-mobile: 15px;
@@ -24,13 +20,14 @@
 
   --bp-medium: 600px;
   --bp-large: 768px;
+
 }
 
 [data-theme="dark"] {
-  --background-color: #1c1f20;
+  --background-color: #1C1F20;
   --font-color: white;
   --logo-font-color: black;
-  --primary-color: #00f5c9;
+  --primary-color: #00F5C9;
   --button-text: #171717;
   --odd-bg-color: #323536;
   --hover-bg-color: #141414;
@@ -161,6 +158,7 @@ section.program ul {
   padding: 0;
 
   li {
+
     &:nth-child(even) {
       background-color: var(--odd-bg-color);
     }
@@ -170,13 +168,18 @@ section.program ul {
     display: grid;
     grid-template-columns: 0.5fr 0.5fr 1fr 0.25fr;
     grid-template-areas: "time heading description type";
-    position: relative;
+    column-gap: 0.25rem;
+    padding: calc(var(--default-padding) / 2);
 
     @media screen and (max-width: 640px) {
-      display: block;
+      grid-template-areas:
+        "heading heading heading type"
+        "time time time time"
+        "description description description description"
+      ;
     }
 
-    & > * {
+    &>* {
       padding: var(--default-padding);
 
       @media screen and (max-width: 640px) {
@@ -187,20 +190,23 @@ section.program ul {
     h3 {
       grid-area: heading;
       margin: 0;
-      max-width: calc(
-        100vw - 155px
-      ); // FIXME: this is a hack to prevent program title to be under the "foredrag" type box
+      padding-top: 0;
+      padding-inline: 0;
     }
 
-    .time {
+    .event-time {
       grid-area: time;
+      padding-inline: 0;
     }
 
     p {
+      grid-area: description;
       margin: 0;
+      padding-inline: 0;
     }
 
     .type {
+      grid-area: type;
       width: max-content;
       height: max-content;
       padding: calc(var(--default-padding) / 2);
@@ -220,12 +226,6 @@ section.program ul {
       &.lightning {
         background-color: blue;
       }
-
-      @media screen and (max-width: 640px) {
-        position: absolute;
-        top: var(--default-padding);
-        right: var(--default-padding);
-      }
     }
   }
 }
@@ -273,4 +273,4 @@ section.program ul {
     font-size: 1.75rem;
     text-align: center;
   }
-}
+}
diff --git a/templates/macros.html b/templates/macros.html
@@ -24,9 +24,7 @@ <h3 class="">{{ event.title }}</h3>
       </time>
     </div>
     <p class="">{{ event.description }}</p>
-    <div>
-      <div class="type {{ event.type }}" aria-label="Type: {{ type }}">{{ type }}</div>
-    </div>
+    <div class="type {{ event.type }}" aria-label="Type: {{ type }}">{{ type }}</div>
   </article>
 {% endmacro event %}