Style stuff

SGOTI2 · SGOTI2 · commit b17d1c3bd6aa · 2025-09-26T12:45:24.000Z
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -11,11 +11,9 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/java.min.js"></script>
   
   </head>
-  <body class="bg-zinc-900 !text-white">
-    <div class="p-3 px-5 bg-zinc-800 rounded-full m-3 flex gap-3">
-      <a href="../index.html" class="text-blue-500">1511 Teaching Resources</a>
-    </div>
-    <main class="mdStyle m-3">
+  <body class="bg-zinc-900 !text-white max-w-4xl mx-auto lg:my-8">
+    <a href="../index.html" class="text-blue-500 text-xs ps-3 pt-6 block">< 1511 Teaching Resources</a>
+    <main class="mdStyle m-4 mt-0">
       {{ content }}
     </main>
     <script defer>
diff --git a/_layouts/homepage.html b/_layouts/homepage.html
@@ -6,9 +6,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ "/assets/css/styles.css" | relative_url }}">
   </head>
-  <body class="bg-zinc-900 !text-white m-5">
-    <main class="mdStyle">
+  <body class="bg-zinc-900 !text-white max-w-4xl mx-auto lg:my-8 p-5">
+    <main class="homepage">
       {{ content }}
     </main>
+    <script defer>
+      document.querySelectorAll('a').forEach(link => {
+        link.addEventListener('click', event => {
+          event.currentTarget.classList.add('clicked');
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/_tailwind.css b/_tailwind.css
@@ -6,7 +6,6 @@
 @utility mdStyle {
   & h1 {
     font-size: 2.5rem;
-    margin-top: 1.5rem;
     font-weight: bold;
   }
 
@@ -119,4 +118,6 @@
     padding: 0.5rem;
     font-size: 1.1rem;
   }
-}
+}
+
+@import "./homepage.css"
diff --git a/homepage.css b/homepage.css
@@ -0,0 +1,23 @@
+
+@utility homepage {
+  & h1 {
+    @apply text-4xl font-bold mb-8 tracking-tight;
+  }
+  & h2, & h3 {
+    @apply text-zinc-400 font-semibold mt-8 mb-4 text-lg;
+  }
+  & ul {
+    @apply list-none p-0 mb-8;
+  }
+  & li {
+    @apply mb-4;
+  }
+  & a {
+    transition: color 50ms, background-color 50ms, margin 200ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
+    @apply block bg-zinc-800 text-blue-500 no-underline px-6 py-4 rounded-xl text-lg font-medium shadow-md motion-reduce:transition-none;
+    @apply hover:bg-blue-500 hover:text-zinc-900 hover:ms-4 focus:bg-blue-400 focus:text-zinc-900 focus:ms-4 ;
+  }
+  & a.clicked {
+    @apply ms-0;
+  }
+}
diff --git a/index.md b/index.md
@@ -1,5 +1,5 @@
 ---
-layout: main
+layout: homepage
 title: Teaching Resources
 ---
 

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,6 @@`
`6`	`6`	`@utility mdStyle {`
`7`	`7`	`& h1 {`
`8`	`8`	`font-size: 2.5rem;`
`9`		`- margin-top: 1.5rem;`
`10`	`9`	`font-weight: bold;`
`11`	`10`	`}`
`12`	`11`
`@@ -119,4 +118,6 @@`
`119`	`118`	`padding: 0.5rem;`
`120`	`119`	`font-size: 1.1rem;`
`121`	`120`	`}`
`122`		`-}`
	`121`	`+}`
	`122`	`+`
	`123`	`+@import "./homepage.css"`