Overhaul of stylegen

lib/stylegen/base.css

@@ -1,14 +1,29 @@
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
-@tailwind utilities;
 
 @layer base {
     html,
     container,
     body {
-        height: 100%;
+        height: 100% !important;
-        width: 100%;
+        width: 100% !important;
-        overflow-y: auto;
+        overflow-y: auto !important;
-        position: fixed;
+        position: fixed !important;
+    }
+
+    main {
+        margin-left: auto !important;
+        margin-right: auto !important;
+        width: 100% !important;
+        max-width: 100% !important;
+        text-align: center !important;
+    }
+
+    .container {
+        margin-left: auto !important;
+        margin-right: auto !important;
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        justify-content: center !important;
     }
 }

lib/stylegen/gen.sh

@@ -67,7 +67,7 @@ echo "Detected Architecture: $ARCH"
 
 # Function to construct the binary download URL based on version, OS, and architecture
 get_binary_url() {
-  echo "https://github.com/tailwindlabs/tailwindcss/releases/download/$VERSION/tailwindcss-extra-$OS-$ARCH"
+  echo "https://github.com/tailwindlabs/tailwindcss/releases/download/$VERSION/tailwindcss-$OS-$ARCH"
 }
 
 # Create the 'tw' directory for storing the downloaded binary
@@ -101,37 +101,12 @@ echo "Extensions: $EXTENSIONS"
 echo "Directory: $DIRECTORY"
 echo "Output Directory: $OUTPUT_DIR"
 
-# Initialize an array for name conditions
+# Generate the minified version for production
-name_conditions=()
+echo "Generating minified CSS for production..."
+"$BINARY" -i "${SCRIPT_DIR}/base.css" -o "${OUTPUT_DIR}/styles.css" --minify
 
-# Assuming $EXTENSIONS is a comma-separated list of extensions
+# Create empty daisyui.css and themes.css files if they don't exist
-IFS=',' read -ra ADDR <<< "$EXTENSIONS"
+touch "${OUTPUT_DIR}/daisyui.css"
-for ext in "${ADDR[@]}"; do
+touch "${OUTPUT_DIR}/themes.css"
-    name_conditions+=(-name "*.$ext")
-done
 
-# Use find with the array of conditions
+echo "All CSS files generated"
-INCLUDE_FILES=$(find "$DIRECTORY" -type f \( "${name_conditions[@]}" \))
-
-echo "Files found: $INCLUDE_FILES"
-
-INCLUDE_FILES_ARRAY=$(echo "$INCLUDE_FILES" | awk '{printf "\"%s\",", $0}' | sed 's/,$//')
-
-# Generate Tailwind config in script directory
-CONFIG_FILE="${SCRIPT_DIR}/tailwind.config.js"
-echo "module.exports = {
-  content: [$INCLUDE_FILES_ARRAY],
-  theme: {
-    extend: {},
-  },
-  daisyui: {
-    themes: [\"night\"],
-  },
-  plugins: [require('daisyui'), require('@tailwindcss/typography')],
-}" > "$CONFIG_FILE"
-
-# Run the binary with the generated config
-"$BINARY" build -i "${SCRIPT_DIR}/base.css" -c "$CONFIG_FILE" -o "${OUTPUT_DIR}/styles.css" --minify
-
-# Wait for all background processes to finish
-wait

pages/templates/layouts/base.html

@@ -8,9 +8,9 @@
     <title>{{template "title" .}}</title>
     <meta name="description" content="{{template "description" .}}">
     <script defer src="https://analytics.atri.dad/script.js" data-website-id="0206740c-245f-402a-b433-125d6d48945a"></script>
-    <link href="/public/css/styles.css" rel="stylesheet" type="text/css" />
     <link href="/public/css/daisyui.css" rel="stylesheet" type="text/css" />
     <link href="/public/css/themes.css" rel="stylesheet" type="text/css" />
+    <link href="/public/css/styles.css" rel="stylesheet" type="text/css" />
     {{template "head" .}}
   </head>
 

pages/templates/layouts/post.html

@@ -9,19 +9,20 @@
   <title>{{template "title" .}}</title>
   <meta name="description" content="{{template "description" .}}">
   <script defer src="https://analytics.atri.dad/script.js" data-website-id="0206740c-245f-402a-b433-125d6d48945a"></script>
-  <link href="/public/css/styles.css" rel="stylesheet" type="text/css" />
   <link href="/public/css/daisyui.css" rel="stylesheet" type="text/css" />
+  <link href="/public/css/styles.css" rel="stylesheet" type="text/css" />
   <link href="/public/css/themes.css" rel="stylesheet" type="text/css" />
+  <link href="/public/css/markdown.css" rel="stylesheet" type="text/css" />
   {{template "head" .}}
 </head>
 
 <body class="block h-[100%]">
   {{template "header" .}}
 
-  <main class="prose prose-invert mx-auto p-4">
+  <main class="mx-auto p-4 max-w-3xl">
     <article>
-      <h1 class="title">{{.Name}}</h1>
+      <h1 class="mx-auto text-2xl sm:text-4xl font-bold tracking-tight text-center mb-4 max-w-[65ch]">{{.Name}}</h1>
-      <div class="flex flex-row flex-wrap gap-4">
+      <div class="flex flex-row flex-wrap justify-center gap-4 mb-6">
         {{if .Date}}
         <p>
         <div class="flex flex-row flex-wrap items-center gap-1 text-md">
@@ -74,9 +75,10 @@
           Back
         </a>
       </div>
-      <hr />
+      <hr class="my-6 border-t border-white w-full max-w-2xl mx-auto" />
-      {{template "main" .}}
+      <div class="markdown text-left mx-auto max-w-2xl">
-
+        {{template "main" .}}
+      </div>
     </article>
   </main>
   <script src="/public/js/htmx.base.js"></script>

pages/templates/partials/cardlinks.html

@@ -31,7 +31,7 @@
               role="button"
               href={{.Href}}
               aria-label={{.Name}}
-              class="btn btn-circle btn-base-100 text-primary hover:btn-accent hover:text-neutral"
+              class="btn btn-circle btn-base-100 btn-outline"
               preload="mouseover"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
@@ -41,7 +41,7 @@
               role="button"
               href={{.Href}}
               aria-label={{.Name}}
-              class="btn btn-circle btn-base-100 text-primary hover:btn-accent hover:text-neutral"
+              class="btn btn-circle btn-base-100 btn-outline"
               target="_blank"
               rel="noopener noreferrer"
               >

public/css/markdown.css

@@ -0,0 +1,180 @@
+/* Markdown styling */
+.markdown {
+  color: #fff;
+  line-height: 1.6;
+}
+
+/* Headings */
+.markdown h1, 
+.markdown h2, 
+.markdown h3, 
+.markdown h4, 
+.markdown h5, 
+.markdown h6 {
+  font-weight: 700;
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+  color: #fff;
+}
+
+.markdown h1 {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.markdown h2 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.markdown h3 {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.markdown h4 {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+/* Paragraphs */
+.markdown p {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+/* Links */
+.markdown a {
+  color: #60a5fa;
+  text-decoration: none;
+}
+
+.markdown a:hover {
+  text-decoration: underline;
+}
+
+/* Strong/Bold */
+.markdown strong,
+.markdown b {
+  font-weight: 700;
+  color: #fff;
+}
+
+/* Code blocks and inline code */
+.markdown code {
+  background-color: rgba(55, 65, 81, 0.5);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.25rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.875rem;
+}
+
+.markdown pre {
+  background-color: rgba(55, 65, 81, 0.5);
+  border-radius: 0.375rem;
+  padding: 1rem;
+  margin: 1rem 0;
+  overflow-x: auto;
+}
+
+.markdown pre code {
+  background-color: transparent;
+  padding: 0;
+  font-size: 0.875rem;
+  color: #f1f5f9;
+  display: block;
+}
+
+/* Lists */
+.markdown ul {
+  list-style-type: disc;
+  padding-left: 1.5rem;
+  margin: 1rem 0;
+}
+
+.markdown ol {
+  list-style-type: decimal;
+  padding-left: 1.5rem;
+  margin: 1rem 0;
+}
+
+.markdown li {
+  margin: 0.25rem 0;
+}
+
+.markdown li > ul,
+.markdown li > ol {
+  margin: 0;
+}
+
+/* Blockquotes */
+.markdown blockquote {
+  border-left: 4px solid #60a5fa;
+  padding-left: 1rem;
+  margin: 1rem 0;
+  font-style: italic;
+  color: #d1d5db;
+}
+
+/* Images */
+.markdown img {
+  max-width: 100%;
+  height: auto;
+  margin: 1rem auto;
+  border-radius: 0.375rem;
+  display: block;
+}
+
+/* Horizontal rule */
+.markdown hr {
+  border: 0;
+  border-top: 1px solid #fff;
+  margin: 1.5rem 0;
+}
+
+/* Tables */
+.markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+}
+
+.markdown th {
+  background-color: rgba(55, 65, 81, 0.5);
+  padding: 0.5rem;
+  border: 1px solid #4b5563;
+  text-align: left;
+}
+
+.markdown td {
+  padding: 0.5rem;
+  border: 1px solid #4b5563;
+}
+
+.markdown tr:nth-child(even) {
+  background-color: rgba(55, 65, 81, 0.3);
+}
+
+/* Adjustments for code with line numbers */
+.markdown .chroma {
+  background-color: rgba(55, 65, 81, 0.5);
+  border-radius: 0.375rem;
+}
+
+.markdown .lntable {
+  width: 100%;
+  border: none;
+}
+
+.markdown .lntd {
+  padding: 0;
+  border: none;
+}
+
+.markdown .lntd:first-child {
+  width: 10px;
+  text-align: right;
+  padding-right: 10px;
+  color: #6b7280;
+  user-select: none;
+}