Refactor css

.github/workflows/generate_css.yml

@@ -15,7 +15,9 @@ jobs:
       run: npm install
 
     - name: Generate TailwindCSS
-      run: npx tailwindcss -m -i ./assets/css/tailwind.css -o ./static/tailwind.css
+      run: |
+        npx sass assets/css/tailwind/tailwind.scss assets/css/tailwind.css
+        npx tailwindcss -m -i ./assets/css/tailwind.css -o ./static/tailwind.css
 
     - name: Commit changes
       uses: EndBug/add-and-commit@v9

assets/css/_base.scss

@@ -2,15 +2,6 @@ html {
     scroll-behavior: smooth;
 }
 
-a {
-    font-weight: 500;
-    text-decoration: underline;
-
-    &:hover {
-        color: var(--global-theme-color);
-    }
-}
-
 #TableOfContents {
     ul {
         li {

assets/css/distill.scss

@@ -24,11 +24,19 @@ d-article d-byline a {
 }
 
 d-title {
+    margin-top: 6rem;
+
     h1 {
         color: var(--global-text-color-primary) !important;
     }
 }
 
+@media (min-width: 768px) {
+    d-title {
+        margin-top: 3.5rem;
+    }
+}
+
 d-article {
     border-top-color: var(--global-divider-color) !important;
     p,
@@ -158,3 +166,9 @@ d-appendix {
         }
     }
 }
+
+.comments {
+    max-width: 800px;
+    margin: 0 auto 2rem auto;
+    padding: 0 0 2rem 0;
+}

assets/css/tailwind/footer.scss

@@ -0,0 +1,12 @@
+> footer {
+    @apply fixed;
+    @apply inset-x-0;
+    @apply bottom-0;
+    @apply p-2;
+    @apply text-center;
+    @apply text-xs;
+    @apply text-primary;
+    @apply bg-footer;
+    @apply border-t;
+    @apply border-divider;
+}

assets/css/tailwind/main.scss

@@ -0,0 +1,168 @@
+> main {
+    @apply mt-24;
+    @apply mb-12;
+    @apply px-4;
+    @apply py-8;
+    @apply space-y-8;
+
+    @apply md:mt-14;
+    @apply md:mb-8;
+
+    > header {
+        @apply space-y-2;
+
+        h1 {
+            @apply text-4xl;
+            @apply font-medium;
+        }
+
+        h2 {
+            @apply font-medium;
+        }
+    }
+
+    .blog-header {
+        h1 {
+            @apply text-6xl;
+            @apply text-center;
+            @apply text-theme;
+        }
+
+        h2 {
+            @apply text-2xl;
+            @apply text-center;
+        }
+    }
+
+    .index-fig {
+        @apply w-3/4
+        mx-auto
+        space-y-4
+
+        sm:w-1/3
+        sm:float-right
+        sm:ml-4
+
+        md:w-1/4;
+
+        img {
+            @apply rounded;
+        }
+
+        address {
+            @apply font-medium
+            text-center
+            space-y-2;
+
+            .e-mail {
+                @apply not-italic
+                font-mono;
+            }
+
+            .index-social {
+                @apply text-3xl
+                overflow-auto;
+            }
+        }
+    }
+
+    .recent {
+        @apply space-y-1;
+
+        h3 a {
+            @apply text-2xl text-primary font-semibold no-underline;
+        }
+
+        table {
+            @apply text-left;
+
+            tr {
+                th {
+                    @apply pr-2 py-1;
+                }
+
+                td {
+                    @apply pl-2 py-1;
+                }
+            }
+        }
+    }
+
+    .post-date {
+        @apply text-sm;
+        @apply font-mono;
+    }
+
+    .post-tags {
+        @apply text-sm;
+        @apply italic;
+        @apply text-secondary;
+
+        a {
+            @apply text-secondary;
+            @apply no-underline;
+        }
+    }
+
+    .post-list {
+        @apply border-t;
+        @apply border-dashed;
+        @apply border-divider;
+
+        li {
+            @apply py-4;
+            @apply space-y-2;
+            @apply border-b;
+            @apply border-dashed;
+            @apply border-divider;
+
+            hgroup h3 a {
+                @apply text-2xl;
+                @apply font-medium;
+                @apply text-primary;
+                @apply no-underline;
+
+                @apply hover:text-theme hover:underline;
+            }
+        }
+    }
+
+    .taxonomy-list {
+        @apply flex
+        flex-row
+        flex-wrap
+        space-x-4
+        justify-center;
+
+        li a {
+            @apply text-theme
+            no-underline
+            hover:underline;
+        }
+    }
+
+    .toc {
+        @apply 2xl:fixed
+        2xl:top-14
+        2xl:left-0
+        2xl:p-4
+        2xl:w-[256px];
+
+        details {
+            @apply p-2
+            text-secondary
+            text-sm
+            border
+            border-dashed
+            border-secondary
+            cursor-zoom-in
+            open:cursor-zoom-out
+            max-h-[80vh]
+            overflow-auto;
+
+            summary {
+                @apply text-lg;
+            }
+        }
+    }
+}

assets/css/tailwind/nav.scss

@@ -0,0 +1,87 @@
+> header {
+    @apply fixed;
+    @apply inset-x-0;
+    @apply top-0;
+    @apply text-primary;
+    @apply bg-header;
+    @apply z-10;
+    @apply border-b;
+    @apply border-divider;
+
+    nav {
+        @apply mx-auto;
+        @apply p-4;
+        @apply text-base;
+        @apply font-medium;
+        @apply flex;
+        @apply flex-col;
+
+        @apply md:flex-row;
+
+        .nav-logo {
+            @apply flex;
+            @apply flex-row;
+
+            a {
+                @apply whitespace-nowrap;
+                @apply font-bold;
+                @apply no-underline;
+                @apply text-primary;
+
+                @apply hover:text-theme;
+            }
+
+            .nav-social {
+                @apply ml-auto;
+                @apply pl-4;
+                @apply text-[1.25em];
+                @apply overflow-x-auto;
+                @apply overflow-y-hidden;
+            }
+        }
+
+        .nav-menu {
+            @apply flex;
+            @apply flex-row;
+            @apply mt-4;
+
+            @apply md:ml-auto;
+            @apply md:mt-0;
+
+            ul {
+                @apply flex;
+                @apply flex-row;
+                @apply flex-nowrap;
+                @apply space-x-4;
+                @apply overflow-auto;
+
+                @apply md:w-fit;
+
+                a {
+                    @apply whitespace-nowrap;
+                    @apply no-underline;
+                    @apply text-primary;
+
+                    @apply hover:text-theme
+                    hover:underline;
+                }
+
+                .active {
+                    @apply text-theme;
+                }
+            }
+
+            #theme-toggle {
+                @apply hover:text-theme;
+
+                @apply absolute;
+                @apply top-4;
+                @apply right-4;
+
+                @apply md:static;
+                @apply md:ml-4;
+                @apply md:mt-0;
+            }
+        }
+    }
+}

assets/css/tailwind/tailwind.scss

@@ -0,0 +1,34 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    body {
+        @apply mx-auto;
+        @apply text-primary;
+        @apply bg-background;
+
+        @import 'nav.scss';
+        @import 'main.scss';
+        @import 'footer.scss';
+    }
+
+    a {
+        @apply text-theme;
+        @apply hover:underline;
+    }
+
+    .social {
+        @apply flex;
+        @apply flex-row;
+        @apply flex-nowrap;
+        @apply space-x-4;
+        @apply justify-center;
+
+        a {
+            @apply text-primary;
+
+            @apply hover:text-theme;
+        }
+    }
+}

exampleSite/config/_default/params.yaml

@@ -7,6 +7,10 @@ description: Albert Einstein's personal website powered by the Academic Folio th
 
 favicon: ⚛️ # You can either enter an emoji or the name of an image file present in `assets/img` folder
 
+footerText: >
+  Powered by <a href="https://gohugo.io">Hugo</a> with
+  <a href="https://github.com/rohandebsarkar/academic-folio">Academic Folio</a> theme
+
 tags: # these tags would be added as keywords in metadata for website
 - academic-folio
 - academic-website

layouts/404.html

@@ -1,10 +1,10 @@
 {{ define "main" }}
-    <header class="space-y-2">
-        <h1 class="text-4xl font-medium">
+    <header>
+        <h1>
             Page not found!
         </h1>
 
-        <h2 class="font-medium">
+        <h2>
             Sorry, but the page you are looking for does not exist.
         </h2>
     </header>