Cleanup

assets/css/main.css

@@ -4,6 +4,7 @@
 @import 'dark.css';
 @import 'hero.css';
 @import 'project.css';
+@import 'single.css';
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Inter:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');
 
 @layer components {
@@ -25,10 +26,10 @@
     @apply w-5 h-5;
   }
   .social a, #theme-toggle {
-    @apply text-slate-700 p-1.5 rounded-md
+    @apply text-slate-700 p-1.5 rounded-md transition-all duration-300
   }
   .social a:hover {
-    @apply shadow-lg
+    @apply shadow-lg scale-110
   }
   .social a:hover svg path {
     @apply fill-white
@@ -82,7 +83,7 @@
   /* Content */
 
   #content.single {
-    @apply prose w-full max-w-none
+    @apply w-full max-w-none
   }
 
 

assets/css/project.css

@@ -81,7 +81,7 @@
 
   /* Background */
   #split {
-    @apply flex flex-row mt-24 md:gap-20;
+    @apply flex flex-row md:gap-20;
   }
   #split .col {
     @apply w-full;
@@ -107,4 +107,5 @@
   #split .detail.inline .company {
     @apply mt-0;
   }
+
 }

assets/css/single.css

@@ -0,0 +1,18 @@
+@layer components {
+  .single .title {
+    @apply text-8xl mb-4 font-extrabold m-0 pt-24 !important;
+  }
+  .single .description {
+    @apply text-xl font-medium;
+  }
+  .single separator {
+    height: 1px;
+    @apply w-full block mt-8 mb-8 bg-current opacity-10
+  }
+  .single img, .single video {
+    @apply w-full h-full rounded-lg shadow-lg mt-12 mb-12
+  }
+  .single h1 {
+    @apply text-4xl font-bold mb-4 mt-20
+  }
+}

layouts/_default/single.html

@@ -3,6 +3,8 @@
 <div id="content" class="single">
     <p class="title">{{ .Title }}</p>
     <p class="description">{{ .Description }}</p>
+    {{/*  <h1>{{ .Title }}</h1>
+    <h2>{{ .Description }}</h2>  */}}
     <separator></separator>
     {{ .Content }}
 </div>

tailwind.config.js

@@ -76,6 +76,5 @@ module.exports = {
   },
   variants: {},
   plugins: [
-    require('@tailwindcss/typography')
   ]
 };