website

commit 6a09406b1a1bcc6a5c31c9a8e7f773786694f334
parent f252b0b9b0265d6bdd9f6b68e219761fe78cd68c
Author: Michael Neuper <michael@michaelneuper.com>
Date:   Tue, 31 Oct 2023 20:59:52 +0200

Cleanup styles.css

Diffstat:
M
static/css/styles.css
 | 
258
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------

1 file changed, 187 insertions(+), 71 deletions(-)
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -31,117 +31,233 @@
 
 body {
   background-color: var(--background);
-  color: var(--text);
+  color: var(--text-emphasized);
 }
 
 hr {
   background-color: var(--text-secondary);
+  margin-top: 20px;
+  margin-bottom: 10px;
+  border: 0;
+  height: 2px;
 }
 
-#wrapper {
+table {
+  margin: auto;
   background-color: var(--background);
+  border-top: 1px solid var(--text-emphasized);
+  border-bottom: 1px solid var(--text-emphasized);
+  border-collapse: collapse;
+  border: none;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-#main {
-  .toc {
-    background-color: var(--background-secondary);
-  }
+table thead th {
+  border-bottom: 1px solid var(--text-secondary);
+}
+
+th {
+  background: var(--background-secondary) !important;
+  color: var(--base1) !important;
+}
+
+th,
+td {
+  padding: 5px;
 }
 
 blockquote {
   background: var(--background-secondary);
 }
 
-.content {
-  pre {
-    background-color: var(--background-secondary) !important;
-    color: var(--text);
-  }
+pre {
+  position: relative;
+}
+
+.content pre {
+  background-color: var(--background-secondary) !important;
+  color: var(--text-emphasized);
 }
 
 code {
-  background-color: var(--background) !important;
-  color: var(--text-emphasized) !important;
+  background-color: var(--background-secondary) !important;
+  color: var(--text) !important;
 }
 
-button.copyButton {
+#wrapper {
   background-color: var(--background);
-  color: var(--text-secondary);
-}
+  padding-left: 100px;
+  padding-right: 100px;
 
-a {
-  &:link {
-    color: var(--blue);
-  }
-  &:visited {
-    color: var(--violet);
-  }
-  &:hover {
-    color: var(--violet);
+  @media (max-width: 767px) {
+    padding-left: 40px;
+    padding-right: 40px; /* TODO fix padding */
   }
 }
 
-nav {
-  a {
-    color: var(--text-emphasized) !important;
-    &:after {
-      background-color: var(--text);
-    }
+main {
+  display: flex;
+}
+
+main.grid-container {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  gap: 20px;
+
+  @media (max-width: 767px) {
+    grid-template-columns: 1fr;
   }
 }
 
-h2 {
-  a {
-    color: var(--text-emphasized) !important;
+#main .toc {
+  background-color: var(--background-secondary);
+  color: var(--text-secondary)
+  /* TODO fix border */
+}
+
+.index {
+  flex: 3;
+  padding-right: 10px;
+  padding-left: 10px;
+
+  @media (max-width: 767px) {
+    padding-left: 10px;
+    padding-right: 10px;
   }
-  &.header {
-    a {
-      &:hover,
-      &:visited,
-      &.current {
-        color: var(--text-emphasized);
-      }
-    }
+}
+
+.sidebar {
+  flex: 1;
+
+  @media (max-width: 767px) {
+    order: 1;
+    padding-left: 10px;
+    padding-right: 10px;
   }
 }
 
+.sidebar ul {
+  list-style: none;
+  padding: 0;
+}
+
+.sidebar ul li a {
+  text-decoration: none;
+  display: block;
+  padding: 2px 12px;
+  color: var(--text-emphasized);
+
+  transition: color 0.3s, background-color 0.3s;
+}
+
+.sidebar ul li a:hover {
+  color: var(--base1);
+  background-color: var(--background-secondary);
+}
+
+.nav-list {
+  border-color: var(--text-secondary);
+  display: block;
+  padding: 10px 15px;
+  margin: 10px 5px;
+  margin-left: -5px;
+  border: 2px solid;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:link {
+  color: var(--blue);
+}
+
+a:visited {
+  color: var(--violet);
+}
+
+a:hover {
+  color: var(--violet);
+}
+
+h2 a {
+  color: var(--base1) !important;
+}
+
+nav a.link {
+  color: var(--text-emphasized);
+  text-decoration: none;
+  display: inline-block;
+  position: relative;
+}
+
+nav a:after {
+  background-color: var(--text-emphasized);
+  content: "";
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+nav a:hover:after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
+
+header a:hover,
+header a:visited,
+header .current a {
+  color: var(--text-emphasized);
+}
+
+.post-group a {
+  text-decoration: none;
+  transition: text-decoration 0.3s ease;
+}
+
+.post-group a:hover {
+  text-decoration: underline;
+}
+
 time {
   color: var(--text-secondary);
 }
 
-table {
-  margin: auto;
+button.copyButton {
   background-color: var(--background);
-  border-top: 1px solid var(--text);
-  border-bottom: 1px solid var(--text);
-  thead {
-    th {
-      border-bottom: 1px solid var(--text);
-    }
-  }
-  th {
-    background: var(--background-secondary) !important;
-    color: var(--text-emphasized) !important;
-  }
-  td {
-    padding: 5px;
-  }
+  color: var(--text-emphasized);
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  opacity: 0.7;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: opacity 0.3s;
 }
 
-.nav-list {
-  border-color: var(--text-secondary);
+button.copyButton:hover {
+  opacity: 1;
 }
 
-.sidebar {
-  ul {
-    li {
-      a {
-        color: var(--text);
-        &:hover {
-          color: var(--text-emphasized);
-          background-color: var(--background-secondary);
-        }
-      }
-    }
+/* TODO fix this */
+.main-content {
+  flex: 1;
+  max-width: 80%;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding-left: 300px;
+
+  @media (max-width: 768px) {
+    padding-left: 0;
+    margin: 20px;
   }
 }