Add theme css files

static/css/base.css

@@ -0,0 +1,213 @@
+/* global base styles */
+@layer base {
+    html,
+    body{
+        background-color: #b19fb3;
+        @apply h-screen
+    }
+    a{
+        @apply text-purple-400 font-semibold underline;
+    }
+    a[rel] {
+        @apply whitespace-nowrap;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    #site-title {
+        @apply font-bold font-mono;
+    }
+
+    h1 {
+        @apply text-3xl;
+    }
+    h2 {
+        @apply text-2xl;
+    }
+    h3 {
+        @apply text-xl;
+    }
+    h4 {
+        @apply text-lg;
+    }
+
+    textarea {
+        @apply w-full h-24 p-2 bg-white border border-gray-400 rounded;
+    }
+
+    ol {
+        @apply list-decimal list-inside;
+    }
+    ul {
+        @apply list-disc list-inside;
+    }
+    li > ol,
+    li > ul {
+        @apply pl-4;
+    }
+
+    pre {
+        @apply w-full my-2 p-2 bg-gray-50 rounded;
+    }
+    code {
+        @apply inline-block px-1 bg-gray-50 rounded-sm;
+    }
+
+    hr {
+        @apply w-full border-gray-700 mt-4 mb-2;
+    }
+
+
+    .form {
+        /* filler */
+    }
+    .form label {
+        @apply block text-lg font-semibold;
+    }
+    .form label .desc {
+        @apply text-xs lowercase;
+    }
+    .form label .desc::before {
+        content: "(";
+    }
+    .form label .desc::after {
+        content: ")";
+    }
+    .form input,
+    .form select {
+        @apply inline-block w-full max-w-screen-lg border border-gray-400 rounded;
+    }
+
+    .form .input-prefix {
+        @apply flex w-full max-w-screen-lg border border-gray-400 rounded overflow-hidden;
+    }
+    .form .input-prefix::before {
+        @apply bg-gray-200 pl-2 pr-1;
+        content: attr(data-prefix);
+    }
+    .form .input-prefix input {
+        @apply border-none rounded-none;
+    }
+
+    /* tables */
+    table {
+        @apply w-full bg-purple-200 border-2;
+    }
+    table a {
+        @apply text-black;
+    }
+    table thead,
+    table tbody,
+    table thead tr,
+    table tbody tr {
+        @apply flex w-full;
+    }
+    table thead {
+        @apply bg-gray-100 border-b-2 border-black;
+    }
+    table thead th {
+        @apply text-left;
+    }
+
+    table tbody {
+        @apply flex-col items-center justify-between overflow-y-auto max-h-80;
+    }
+    table thead tr *,
+    table tbody tr * {
+        @apply flex-1;
+    }
+    table tbody tr:nth-child(even){
+        @apply bg-purple-100;
+    }
+    table tbody tr{
+        @apply hover:bg-white;
+    }
+
+    table thead th:first-child,
+    table tbody td:first-child {
+        @apply pl-2;
+    }
+    table thead th:last-child,
+    table tbody td:last-child {
+        @apply pr-2;
+    }
+}
+
+@layer components {
+    /* standard classes */
+    .btn {
+        @apply inline-block bg-white p-2 border border-black rounded text-black font-normal no-underline;
+    }
+    
+    .panel {
+        @apply w-full my-2 border border-black p-2 rounded bg-gray-200 relative;
+    }
+
+    .fullscreen {
+        @apply block w-screen h-screen;
+    }
+
+    /* wrap an image such that it is only minimally scaled to fit a desired area. */
+    /* actual size it left to be applied to the element. */
+    .image-wrapper {
+        @apply inline-block items-center justify-items-center overflow-hidden;
+    }
+    .image-wrapper img {
+        @apply w-full h-full object-cover;
+    }
+
+    /* Navbar styles */
+    #sidebar
+    {
+        @apply w-screen xl:w-1/6 lg:max-w-xs bg-pink-500 border-r border-black;
+        background-image: linear-gradient(to bottom, rgba(123,100,127,0) 0%, rgba(123,100,127,0.25) 5%, rgba(123,100,127,0.75) 25%, rgba(123,100,127,1) 90%), url("/imgs/hex_500_1000_10.png");
+    }
+    #sidebar h1,
+    #sidebar div,
+    #sidebar p {
+        @apply mx-auto my-4 px-6 py-4 bg-opacity-50 bg-white rounded text-center;
+    }
+    #sidebar h1 {
+        @apply w-max bg-opacity-70;
+    }
+    #sidebar p,
+    #sidebar div {
+        @apply mx-8;
+    }
+
+    #sidebar #site-title {
+        @apply text-3xl;
+    }
+
+    #nav {
+        @apply flex justify-around;
+    }
+
+    #nav a {
+        @apply text-black;
+    }
+
+    /* Blog */
+    .blog-post {
+        @apply w-full md:w-3/4 xl:w-1/2 max-w-3xl mx-auto;
+    }
+    .blog-post--body {
+        @apply px-2;
+    }
+    .blog-post--body h2 {
+        @apply mt-4;
+    }
+    .blog-post--body p {
+        @apply my-2;
+    }
+    .blog-post--body blockquote {
+        @apply pl-2 border-l-8 border-gray-600 italic;
+    }
+    .blog-post--footer {
+        @apply mt-8 p-2 font-mono text-sm border-t border-black;
+    }
+}

static/css/components.css

@@ -0,0 +1,71 @@
+@layer components {
+    /* Styles for the Info Panel */
+    .infopanel {
+        @apply max-w-sm md:max-w-lg lg:max-w-none my-2 mx-4 rounded bg-white border border-gray-500 absolute right-0;
+        z-index: 1;
+    }
+
+    .infopanel .infopanel-head {
+        @apply m-2 grid grid-cols-2 font-bold text-2xl text-black;
+    }
+    .infopanel .infopanel-head .infopanel-closer--container {
+        @apply text-right;
+    }
+    .infopanel .infopanel-head .infopanel-closer {
+        @apply cursor-pointer
+    }
+    .infopanel .infopanel-body {
+        @apply my-2 mx-4;
+    }
+    .infopanel .infopanel-body div,
+    .infopanel .infopanel-body p{
+        @apply py-2;
+    }
+
+    .infopanel.closed .infopanel-body {
+        @apply hidden;
+    }
+    .infopanel.closed .infopanel-head {
+        @apply block;
+    }
+    .infopanel.closed .infopanel-head .infopanel-title {
+        @apply hidden;
+    }
+
+    .spoiler {
+        @apply p-4 bg-black hover:bg-gray-200 transition-colors duration-700 rounded-lg;
+    }
+    .spoiler:not(:hover) * {
+        background-color: inherit;
+    }
+
+    /* Styles for modals */
+    .modal-overlay {
+        @apply absolute bg-black bg-opacity-60 bottom-0 left-0 right-0 top-0 z-20;
+    }
+
+    .modal {
+        @apply w-10/12 md:max-w-lg lg:max-w-3xl p-4 bg-white rounded absolute left-1/2 top-10 transform -translate-x-1/2;
+    }
+
+    .modal .modal-header {
+        @apply flex justify-between mb-2 pb-2 border-b-2 border-gray-400;
+    }
+
+    .modal .modal-header .modal-title,
+    .modal .modal-header .modal-closer {
+        @apply inline-block font-bold text-xl;
+    }
+    
+    .modal .modal-header .modal-title {
+        @apply font-bold text-xl;
+    }
+    .modal .modal-header .modal-closer {
+        @apply cursor-pointer text-right;
+    }
+
+    .modal-body {
+        @apply overflow-y-auto;
+        max-height: 60vh;
+    }
+}

static/css/landingpage.css

@@ -0,0 +1,71 @@
+@layer components {
+    #blog-flex,
+    #project-flex {
+        @apply flex flex-col md:flex-row flex-wrap justify-between max-w-screen-lg mx-auto md:space-x-8 py-4;
+    }
+    #blog-flex--old,
+    #project-flex--old {
+        @apply w-2/3 md:w-auto max-w-screen-lg grid auto-cols-min grid-cols-1 sm:grid-cols-2 md:grid-cols-4 mx-auto py-5 gap-0 sm:gap-10
+    }
+
+    .project-item{
+        @apply panel bg-gray-300 rounded flex-1 relative text-center md:w-1/4 mt-44 md:mt-32;
+    }
+    .project-item .project-title{
+        @apply w-full text-xl font-mono text-center;
+    }
+    .project-item .project-title a{
+        @apply text-black;
+    }
+    .project-item img{
+        @apply absolute w-32 border border-gray-300 rounded z-10 transform left-1/2 -translate-x-1/2 -translate-y-3/4;
+    }
+    .project-item .project-body {
+        @apply z-0 pt-12;
+    }
+    .project-item .project-description{
+        @apply text-center text-base px-2 mb-2;
+    }
+    .project-item .project-status{
+        font-variant: small-caps;
+        @apply absolute bottom-1 inset-x-1/3 text-center text-sm font-sans whitespace-nowrap;
+    }
+    .project-item .project-status.dead{
+        @apply text-red-900;
+    }
+    .project-item .project-status.active{
+        @apply text-purple-400;
+    }
+    .project-item .project-status.done{
+        @apply text-green-600;
+    }
+
+    .project-item-old{
+        @apply panel bg-gray-300 rounded-2xl;
+    }
+    .project-item-old .project-title{
+        @apply w-full text-xl font-mono text-center;
+    }
+    .project-item-old .project-title a{
+        @apply text-black;
+    }
+    .project-item-old img{
+        @apply w-20 h-32 mx-auto my-4 border border-gray-300 rounded;
+    }
+    .project-item-old .project-description{
+        @apply text-center text-base px-2 mb-8;
+    }
+    .project-item-old .project-status{
+        font-variant: small-caps;
+        @apply absolute bottom-1 inset-x-1/3 text-center text-sm font-sans whitespace-nowrap;
+    }
+    .project-item-old .project-status.dead{
+        @apply text-red-900;
+    }
+    .project-item-old .project-status.active{
+        @apply text-purple-400;
+    }
+    .project-item-old .project-status.done{
+        @apply text-green-600;
+    }
+}

static/css/master.css

@@ -0,0 +1,8 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+
+@import "./base.css";
+@import "./components.css";
+@import "./landingpage.css";
+
+@import "tailwindcss/utilities";