Website redesign

website/styles/content.css

@@ -0,0 +1,63 @@
+@layer base {
+    .content {
+        @apply leading-relaxed text-left;
+    }
+
+    .content h1:not(.no-default) {
+        @apply text-4xl font-serif font-bold mt-6 mb-3 py-1 border-b dark:border-stone-800 text-stone-700 dark:text-stone-200;
+    }
+    .content h2:not(.no-default) {
+        @apply text-3xl font-serif font-semibold mt-6 py-1  text-stone-700 dark:text-stone-200;
+    }
+    .content h3:not(.no-default) {
+        @apply text-2xl font-medium mt-3 py-1 text-stone-700 dark:text-stone-200 ;
+    }
+
+    .content p:not(.no-default) {
+        @apply mt-1 mb-2;
+    }
+
+    .content ul:not(.no-default) {
+      @apply list-disc list-outside pl-6;
+    }
+    .content ol:not(.no-default) {
+      @apply list-decimal list-outside pl-6;
+    }
+    .content :not(li) > ul:not(.no-default) {
+      @apply my-4;
+    }
+    .content :not(li) > ol:not(.no-default) {
+      @apply my-4;
+    }
+
+    .content pre:not(.no-default) {
+        @apply font-mono py-4 px-4 rounded overflow-auto max-w-full;
+    }
+    .content :not(li) > pre:not(.no-default) {
+        @apply my-4;
+    }
+
+    .content a:not(.no-default) {
+        @apply dark:text-cyan-400 dark:hover:text-cyan-300 text-indigo-400 hover:text-indigo-500 font-medium;
+    }
+
+    .content .box-shadow {
+        @apply shadow dark:shadow-stone-700;
+    }
+
+    .content figure:not(.no-default) {
+        @apply outline outline-stone-200 dark:outline-stone-500 rounded mx-6 my-4 shadow dark:shadow-stone-600;
+    }
+
+    .content figure > img:not(.no-default) {
+        @apply rounded block w-full;
+    }
+
+    .content :not(pre) > code:not(.no-default) {
+        @apply bg-stone-100 dark:bg-black my-1 mx-1 px-1 text-stone-800 dark:text-stone-100;
+    }
+
+    .content .button1 {
+        @apply  px-6 py-3 rounded cursor-pointer border text-center text-indigo-50 bg-indigo-400 hover:bg-indigo-500 dark:bg-cyan-400 dark:bg-opacity-20 dark:border-cyan-400 dark:text-cyan-400 dark:hover:bg-opacity-80 dark:hover:text-stone-900;
+    }
+}

website/styles/custom-components.css

@@ -0,0 +1,74 @@
+@layer components {
+  .label {
+      @apply flex flex-row items-center px-2 py-0.5 rounded border;
+  }
+
+  .button {
+      @apply  px-6 py-3 rounded text-center ;
+  }
+
+  .info {
+      @apply bg-blue-800 hover:bg-blue-700;
+  }
+
+  .primary {
+      @apply bg-red-800 hover:bg-red-700;
+  }
+
+  .hero-header {
+      @apply py-4 sm:py-10 px-8 text-4xl bg-gradient-to-r from-yellow-800 to-yellow-900 text-gray-100 font-bold;
+  }
+
+  .link {
+      @apply text-blue-600 hover:text-blue-800;
+  }
+
+  .blue-message {
+      @apply px-4 py-4 bg-blue-50 text-blue-500 border rounded border-blue-100;
+  }
+  .green-message {
+      @apply border border-green-600 bg-green-50 text-green-600 px-4 py-2 rounded;
+  }
+  .green-message a {
+      @apply underline;
+  }
+
+
+  .markdown-view pre {
+      @apply font-mono py-4 px-4 bg-zinc-600 text-gray-100;
+  }
+  .markdown-view ul {
+      @apply list-disc list-outside;
+  }
+  .markdown-view ol {
+      @apply list-decimal list-outside;
+  }
+  .markdown-view a {
+      @apply link;
+  }
+  .markdown-view li {
+      @apply my-2;
+  }
+  .markdown-view p code {
+      @apply font-mono pl-1 pr-1 bg-gray-100 text-black;
+  }
+
+  .footer {
+      @apply py-12 bg-gray-100 mt-1 bg-opacity-60;
+  }
+
+  /*
+//josh-rose-trYl7JYATH0-unsplash
+//tersius-van-rhyn-xcQWMPm9fG8-unsplash
+//cassie-boca-x-tbVqkfQCU-unsplash
+//jf-martin-Ofs3LjEUcrk-unsplash
+  //  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)), url(img/jf-martin-Ofs3LjEUcrk-unsplash.jpg)
+//jesse-gardner-EqdpXeemf58-unsplash
+*/
+  .main-background {
+      background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1)), url('img/jf-martin-Ofs3LjEUcrk-unsplash.jpg');
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+  }
+
+}

website/styles/custom-utilities.css

@@ -0,0 +1,19 @@
+@layer utilities {
+    .disabled {
+        @apply opacity-50 cursor-not-allowed;
+    }
+    .h-screen-12 {
+        height: calc(100vh - 3rem);
+    }
+    .max-h-screen-12 {
+        max-height: calc(100vh - 3rem);
+    }
+
+    .dark-block {
+        @apply hidden dark:block;
+    }
+    .light-block {
+        @apply block dark:hidden;
+    }
+
+}

website/styles/input.css

@@ -0,0 +1,41 @@
+@import "@fontsource/spectral";
+@import "@fontsource/spectral/latin";
+
+@import "@fontsource/montserrat";
+@import "@fontsource/montserrat/latin";
+
+@import "@fontsource/source-code-pro";
+
+@import "@fortawesome/fontawesome-free/css/all";
+
+
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "./custom-components.css";
+@import "./custom-utilities.css";
+@import "./content.css";
+
+a.zola-anchor {
+    padding-left: 0.75rem;
+    display: none;
+    font-family: mono;
+    font-size: smaller;
+}
+
+h1:hover a.zola-anchor {
+    display: inline;
+}
+
+h2:hover a.zola-anchor {
+    display: inline
+}
+
+h3:hover a.zola-anchor {
+    display: inline
+}
+
+h4:hover a.zola-anchor {
+  display: inline
+}