Implemented theming, cards, footer

css/digui.css

@@ -5,19 +5,137 @@
 
 /* Main structure */
 
+:root {
+    /* Default is nebula-light */
+    --font-family: sans-serif;
+    --background-color: #fff;
+    --secondary-background-color: #ccc;
+    --button-color: #eee;
+    --button-text: var(--text-color);
+    --text-color: #121416d8;
+    --secondary-text-color: #121416d8;
+    --link-color: #543fd7;
+
+    --nav-background-color: #FFF;
+    --nav-color: var(--text-color);
+
+    --highlight-color: #fb8c00;
+    --border-color: #d5d9d9;
+    --border-width: 1px;
+    --border-radius: 8px;
+    --shadow-color: rgba(213, 217, 217, .5);
+    --global-theme-toggle-content: ' 🌞';
+
+    --danger-color: #e03131;
+    --warning-color: orange;
+    --error-color: var(--danger-color);
+
+    --padding: .5rem;
+}
+
+html[data-theme='nebula'] {
+    --background-color: #fff;
+    --secondary-background-color: #ccc;
+    --text-color: #121416d8;
+    --secondary-text-color: #121416d8;
+    --link-color: #543fd7;
+    --highlight-color: #fb8c00;
+
+    --nav-background-color: #FFF;
+    --nav-color: var(--text-color);
+
+    --border-color: #d5d9d9;
+    --border-width: 1px;
+    --border-radius: 8px;
+    --shadow-color: rgba(213, 217, 217, .5);
+    --global-theme-toggle-content: ' 🌞';
+}
+
+html[data-theme='nebula-dark'] {
+    --background-color: #29292c;
+    --secondary-background-color: #29292c;
+    --button-color: #29292c;
+    --button-text: var(--text-color);
+    --text-color: #F7F8F8;
+    --secondary-text-color: #ddd;
+    --link-color: #ffe7a3;
+    --highlight-color: #e03131;
+
+    --nav-background-color: #FF9800;
+    --nav-color: var(--text-color);
+
+    --border-color: #333;
+    --border-width: 1px;
+    --border-radius: 8px;
+    --shadow-color: rgba(3, 3, 3, .5);
+    --global-theme-toggle-content: ' 🌝';
+}
+
+html[data-theme='bbs'] {
+    --font-family: monospace;
+    --background-color: #FFF;
+    --secondary-background-color: #ccc;
+    --button-color: #FFFFFF;
+    --button-text: var(--text-color);
+    --text-color: #000;
+    --secondary-text-color: #000;
+    --link-color: #543fd7;
+    --highlight-color: #e03131;
+
+    /*--nav-background-color: #ccc;*/
+    /*--nav-color: var(--text-color);*/
+
+    --border-color: #333;
+    --border-width: 2px;
+    --border-radius: 0;
+    --global-theme-toggle-content: ' 🖥️';
+}
+
+html[data-theme='silo'] {
+    --font-family: monospace;
+    /*--background-color: #003eaa;*/
+    --background-color: #1d212c;
+    --secondary-background-color: var(--highlight-color);
+    --button-color: #FFFFFF;
+    --button-text: var(--text-color);
+    --text-color: #FFF;
+    --secondary-text-color: #29292c;
+    --link-color: #FF9800;
+    --highlight-color: #23B0FF;
+
+    /*--nav-background-color: #003eaa;*/
+    /*--nav-background-color: #23B0FF;*/
+    /*--nav-color: var(--text-color);*/
+    --nav-background-color: var(--background-color);
+
+    --border-color: #23B0FF;
+    /*--border-color: #003eaa;*/
+    --border-width: 2px;
+    --border-radius: 0;
+    --global-theme-toggle-content: ' ⌨️';
+}
+
+/* AlpineJS blip-preventer */
+[x-cloak] {
+    display: none !important;
+}
+
 body {
+    background: var(--background-color);
+    color: var(--text-color);
     height: 125vh;
-    font-family: sans-serif;
+    font-family: var(--font-family), sans-serif;
     margin-top: 3rem;
-    padding: 30px;
+    /*padding: 30px;*/
 }
 
 main {
-    color: black;
+    color: var(--text-color);
+    padding-top: .5em;
 }
 
 header {
-    background-color: white;
+    background-color: var(--nav-background-color);
     position: fixed;
     top: 0;
     left: 0;
@@ -26,7 +144,8 @@ header {
     display: flex;
     align-items: center;
     /*box-shadow: 0 0 5px 0 rgba(213, 217, 217, .5);*/
-    box-shadow: 0 0 5px 0 #999;
+    /*box-shadow: 0 0 5px 0 #999;*/
+    box-shadow: 0 0 5px var(--shadow-color);
 }
 
 header * {
@@ -34,7 +153,7 @@ header * {
 }
 
 header li {
-    margin: 20px;
+    /*margin: 10px;*/
 }
 
 header li a {
@@ -42,49 +161,206 @@ header li a {
     text-decoration: none;
 }
 
+header li h1 {
+    font-weight: bold;
+    font-size: 1.2rem;
+    vertical-align: middle;
+    margin-right: 3rem;
+}
+
+[data-theme='silo'] header nav::after {
+    content: '';
+    background: repeating-linear-gradient(90deg, #23B0FF, #23B0FF 2px, transparent 0, transparent 10px);
+    display: block;
+    width: 100%;
+    right: 10px;
+}
+
+[data-theme='silo'] header {
+    border-bottom: 3px dotted #23B0FF;
+}
+
+a, a:hover, a:visited, a:active {
+    text-decoration: none;
+}
+
+a {
+    color: var(--link-color);
+}
+
+a:hover {
+    text-decoration: underline;
+    filter: brightness(80%);
+}
+
 /* Active element, e.g. a button */
 .active {
-    background-color: #cccccc;
+    background-color: var(--highlight-color);
+    color: var(--text-color);
+}
+
+/* Special button */
+.theme-toggle::after {
+    content: var(--global-theme-toggle-content);
 }
 
 /* Buttons */
-button {
+button, input {
-    background-color: #fff;
+    border: var(--border-width) solid var(--border-color);
-    border: 1px solid #d5d9d9;
+    border-radius: var(--border-radius);
-    border-radius: 8px;
-    box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
     box-sizing: border-box;
-    color: #0f1111;
+    color: var(--secondary-text-color);
+    background-color: var(--button-color);
     cursor: pointer;
     display: inline-block;
     font-size: 13px;
     line-height: 29px;
     padding: 0 10px 0 11px;
     position: relative;
-    text-align: center;
+    text-align: left;
     text-decoration: none;
     user-select: none;
     -webkit-user-select: none;
     touch-action: manipulation;
     vertical-align: middle;
-    /*width: 100px;*/
 }
 
 button:hover {
-    background-color: #f7fafa;
+    /*background-color: #f7fafa;*/
+    /*background-color: #d57803;*/
+    background-color: var(--highlight-color);
+    filter: brightness(80%);
 }
 
 button:focus {
-    border-color: #008296;
+    /*border-color: #008296;*/
-    box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
+    /*box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;*/
     outline: 0;
+    /*border-color: #d57803;*/
 }
 
 /* Cards */
 .cards {
     display: grid;
+    grid-column-gap: 1rem;
+    grid-row-gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
 }
 
 .card {
     display: inline-grid;
+    border-radius: var(--border-radius);
+    border: var(--border-width) solid var(--border-color);
+    /*margin: 1em;*/
+    /*padding: 1em;*/
+}
+
+[data-theme='nebula'] .card,
+[data-theme='nebula'] button,
+[data-theme='nebula-dark'] .card,
+[data-theme='nebula-dark'] button {
+    box-shadow: var(--shadow-color) 0 2px 5px 0;
+}
+
+.card .card-header {
+
+}
+
+.card-body {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 1rem;
+    padding: 1em;
+}
+
+.card-body > * {
+    /*padding-left: 1em;*/
+}
+
+.card .card-image {
+    width: 100%;
+}
+
+.card .card-image img {
+    width: 100%;
+    border-radius: var(--border-radius);
+}
+
+.card .card-thumb {
+    width: 72px;
+    /*min-width: 60px;*/
+    /*max-width: 100px;*/
+    /*position: relative;*/
+    /*box-sizing: inherit;*/
+}
+
+.card .card-thumb img {
+    width: 72px;
+}
+
+.card .card-action {
+    padding: .5em;
+}
+
+.card .meta {
+    filter: brightness(80%);
+    color: var(--text-color);
+}
+
+.card .card-footer {
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 1rem;
+    align-items: center;
+
+    padding: .3em;
+}
+
+/*
+.card button {
+    border: none;
+    background: none;
+}
+*/
+
+/** Tags/chips */
+.chip {
+    font-size: .8rem;
+    border-radius: var(--border-radius);
+    background-color: var(--secondary-background-color);
+    color: var(--secondary-text-color);
+    /*color: var(--text-color);*/
+    padding: .2rem .5rem;
+    margin-left: .5rem;
+}
+
+.chip .button {
+    border-radius: var(--border-radius);
+}
+
+/** Status */
+.error {
+    color: var(--error-color);
+}
+
+
+footer {
+    /*background-color: var(--secondary-background-color);*/
+    margin-top: 1rem;
+    padding: 2rem 1rem;
+
+    display: grid;
+    grid-column-gap: 1rem;
+    grid-row-gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+}
+
+footer .column {
+    display: inline-grid;
+}
+
+footer h2 {
+    text-align: left;
+    margin-bottom: 0;
 }