Style ticker

assets/style.css

@@ -647,6 +647,11 @@ video {
   margin-right: auto;
 }
 
+.-mx-6 {
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+}
+
 .my-16 {
   margin-top: 4rem;
   margin-bottom: 4rem;
@@ -688,6 +693,10 @@ video {
   margin-top: 0.5rem;
 }
 
+.-mb-24 {
+  margin-bottom: -6rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -742,6 +751,10 @@ video {
   flex-direction: column;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -754,13 +767,8 @@ video {
   gap: 0.5rem;
 }
 
-.gap-x-6 {
-  -moz-column-gap: 1.5rem;
-       column-gap: 1.5rem;
-}
-
-.gap-y-4 {
-  row-gap: 1rem;
+.gap-y-6 {
+  row-gap: 1.5rem;
 }
 
 .gap-x-8 {
@@ -768,8 +776,13 @@ video {
        column-gap: 2rem;
 }
 
-.gap-y-6 {
-  row-gap: 1.5rem;
+.gap-x-6 {
+  -moz-column-gap: 1.5rem;
+       column-gap: 1.5rem;
+}
+
+.gap-y-4 {
+  row-gap: 1rem;
 }
 
 .self-start {
@@ -794,6 +807,10 @@ video {
   white-space: nowrap;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -849,6 +866,10 @@ video {
   padding-bottom: 3rem;
 }
 
+.pb-24 {
+  padding-bottom: 6rem;
+}
+
 .font-main {
   font-family: Spline Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@@ -867,16 +888,6 @@ video {
   line-height: 2.25rem;
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -908,21 +919,6 @@ video {
   color: rgb(24 24 27 / 0.5);
 }
 
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(39 39 42 / var(--tw-text-opacity));
-}
-
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(82 82 91 / var(--tw-text-opacity));
-}
-
-.text-gray-400 {
-  --tw-text-opacity: 1;
-  color: rgb(161 161 170 / var(--tw-text-opacity));
-}
-
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(113 113 122 / var(--tw-text-opacity));
@@ -1149,50 +1145,6 @@ html:not(.dark) .light\:hidden {
 }
 
 @media (min-width: 768px) {
-  .md\:col-span-2 {
-    grid-column: span 2 / span 2;
-  }
-
-  .md\:col-span-7 {
-    grid-column: span 7 / span 7;
-  }
-
-  .md\:col-span-5 {
-    grid-column: span 5 / span 5;
-  }
-
-  .md\:col-span-4 {
-    grid-column: span 4 / span 4;
-  }
-
-  .md\:col-span-8 {
-    grid-column: span 8 / span 8;
-  }
-
-  .md\:col-start-7 {
-    grid-column-start: 7;
-  }
-
-  .md\:col-start-8 {
-    grid-column-start: 8;
-  }
-
-  .md\:col-start-9 {
-    grid-column-start: 9;
-  }
-
-  .md\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .md\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .md\:grid-cols-12 {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-  }
-
   .md\:text-\[22px\] {
     font-size: 22px;
   }
@@ -1242,11 +1194,24 @@ html:not(.dark) .light\:hidden {
     position: static;
   }
 
+  .lg\:col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+
+  .lg\:col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+
   .lg\:mx-auto {
     margin-left: auto;
     margin-right: auto;
   }
 
+  .lg\:mx-0 {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
   .lg\:mb-4 {
     margin-bottom: 1rem;
   }
@@ -1260,6 +1225,10 @@ html:not(.dark) .light\:hidden {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
+  .lg\:grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
   .lg\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -1288,6 +1257,10 @@ html:not(.dark) .light\:hidden {
     padding-bottom: 0.5rem;
   }
 
+  .lg\:pb-6 {
+    padding-bottom: 1.5rem;
+  }
+
   .lg\:text-\[24px\] {
     font-size: 24px;
   }

layouts/index.html

@@ -3,8 +3,8 @@
 {{ define "main" -}}
 <main>
   <section class="container mx-auto px-6 mb-6 mt-6">
-    <div class="grid grid-cols-1 md:grid-cols-12 gap-y-6 gap-x-8">
-      <div class="prose md:col-span-8">{{ .Content }}</div>
+    <div class="grid grid-cols-1 lg:grid-cols-12 gap-y-6 gap-x-8 items-start">
+      <div class="prose lg:col-span-7">{{ .Content }}</div>
       {{ partial "ticker.html" }}
     </div>
   </section>

layouts/partials/ticker.html

@@ -1,8 +1,8 @@
-<div class="md:col-span-4">
+<div class="lg:col-span-5 bg-gray-100 dark:bg-gray-800 rounded-xl px-6 pt-6 pb-24 lg:pb-6 -mx-6 lg:mx-0 -mb-24">
   <h2 class="mb-4 font-bold">Novinky</h2>
   <ol
     x-data="{ posts: [] }"
-    x-init="posts = await fetch('https://ticker.nolog.cz/v1/timeline?origin=demo.ticker.nolog.cz&limit=5')
+    x-init="posts = await fetch('https://ticker.nolog.cz/v1/timeline?origin=demo.ticker.nolog.cz&limit=3')
       .then(res => res.json())
       .then(json => json.data.messages)"
   >