cleanup stylesheet

Signed-off-by: Robert Günzler <r@gnzler.io>

1 files changed, 34 insertions, 200 deletions

diff --git a/links/main.css b/links/main.css
index abe0379..9cf95db 100644
--- a/links/main.css
+++ b/links/main.css
@@ -8,6 +8,7 @@
 
   --body-spacing: 45px;
   --body-line-height: 1.3;
+  --body-inline-padding: 15px;
 
   color-scheme: light dark;
 }
@@ -17,7 +18,10 @@
   opacity: 1.0;
   color: var(--black);
   padding: 10px;
-  /* Safari */
+}
+
+a {
+  color: var(--fg);
 }
 
 body {
@@ -74,7 +78,6 @@ main {
 main img {
   width: 100%;
   max-width: 700px;
-  margin-bottom: 15px;
 }
 
 main>* {
@@ -106,62 +109,37 @@ main p {
   margin-top: 0px;
 }
 
-main>ul {
-  line-height: var(--body-line-height);
-}
-
 figure {
   margin: 0;
-  padding-bottom: 20px
+  padding-bottom: var(--body-inline-padding);
 }
 
 figcaption {
+  text-align: end;
   font-size: smaller;
   padding: 2px
 }
 
-code.button {
-  background: var(--fg);
-  color: var(--bg);
-  font-size: smaller;
-  display: inline-block;
-  padding: 0px 6px;
-  font-weight: bold;
-  border-radius: 2px;
-  line-height: var(--body-line-height);
-}
-
 main hr {
   border-color: color-mix(in srgb, var(--fg) 20%, var(--bg));
   clear: both;
 }
 
-main>ul.jump {
-  columns: 2;
-  line-height: var(--body-line-height);
-}
-
-main>ul.jump li {
-  list-style-type: decimal-leading-zero;
-  list-style-position: inside;
-  text-transform: capitalize;
-}
-
-main img.medium {
-  max-width: 300px;
-  padding: 10px
+main img.sm {
+  max-width: 192px;
 }
 
-main img.normal {
-  max-width: 192px;
+main img.left {
+  float: left;
+  padding-right: var(--body-inline-padding);
 }
 
-main img.sm {
-  max-width: 88px
+main img.right {
+  float: right;
+  padding-left: var(--body-inline-padding);
 }
 
 main>q {
-  /*font-size: 20px;*/
   max-width: 500px;
   display: block;
   margin-left: 30px;
@@ -171,17 +149,16 @@ main>pre {
   font-family: monospace;
   background: var(--fg);
   color: var(--bg);
-  padding: 15px;
+  padding: var(--body-inline-padding);
 }
 
 main>code {
   font-family: monospace;
-  /*font-size: 12px;*/
   margin-bottom: 30px;
   display: block;
   background: var(--fg);
   color: var(--bg);
-  padding: 15px;
+  padding: var(--body-inline-padding);
   white-space: pre
 }
 
@@ -189,19 +166,24 @@ main>code comment {
   color: #777
 }
 
+main ol,
+main ul {
+  margin-bottom: 30px;
+  line-height: var(--body-line-height);
+}
+
+main ol {
+  list-style-type: decimal-leading-zero;
+}
+
+
 main ul.gallery {
-  background: none
+  padding: 0;
 }
 
 main ul.gallery li {
   clear: both;
   display: block;
-  height: 260px;
-  margin-top: -2px
-}
-
-main ul.gallery li:last-child {
-  border-bottom: 0px
 }
 
 main ul.gallery li a {
@@ -210,146 +192,7 @@ main ul.gallery li a {
 }
 
 main ul.gallery li img {
-  width: 250px;
   display: block;
-  margin-right: 15px;
-}
-
-main .project {
-  border-left: 2px solid var(--fg);
-  padding-left: 30px;
-  max-width: 555px;
-}
-
-main .project>* {
-  margin-bottom: 30px
-}
-
-main .project p {
-  padding: 0px;
-  margin-top: 0px;
-  margin-bottom: 30px;
-}
-
-main .project img {
-  display: block;
-  max-width: 100%;
-}
-
-main .button {
-  background-color: #000;
-  border: 2px solid var(--fg);
-  color: var(--bg);
-  padding: 13px 28px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  /*font-size: 14px;*/
-  border-radius: 200px;
-  font-weight: bold;
-  margin-right: 15px;
-  margin-bottom: 30px;
-}
-
-main .button:hover {
-  background-color: #333 !important;
-  color: var(--bg);
-  cursor: pointer;
-}
-
-main .button small {
-  color: var(--fg);
-}
-
-body select {
-  color: var(--fg);
-  margin-bottom: 20px
-}
-
-main table.drpdown {
-  padding-bottom: 15px;
-  /*font-size: 18px*/
-}
-
-main table.drpdown td {
-  padding-bottom: 15px;
-  color: var(--fg);
-}
-
-main>table.col tr th {
-  text-align: left
-}
-
-main>table.col tr td {
-  border-right: 1.5px solid var(--fg)
-}
-
-main>table.col tr>* {
-  padding: 5px 20px
-}
-
-main>table.col tr td:last-child {
-  border-right: 0px
-}
-
-main>table.col tr>*:first-child {
-  padding-left: 0px
-}
-
-main>table.col b {
-  font-weight: bold
-}
-
-main .progress {
-  padding: 2px;
-  width: 100%;
-  max-width: 100%;
-  border: 1px solid grey
-}
-
-main .progress>div {
-  height: 100%;
-  width: 100%;
-  background-color: var(--fg)
-}
-
-main .progress>div>span {
-  color: var(--bg);
-  padding: 0px 2px
-}
-
-main img.detail {
-  max-width: 64px;
-  border: 1px solid #777;
-  padding: 20px;
-  margin: 0px 20px 20px 0px;
-  border-radius: 3px;
-}
-
-main .shortcut,
-main kbd {
-  background: var(--bg);
-  color: var(--fg);
-  display: inline-block;
-  padding: 2px 5px;
-  margin: 0px;
-  /*font-size: 12px;*/
-  line-height: var(--body-line-height);
-  border-radius: 2px;
-  font-weight: bold
-}
-
-main .shortcut-list dt,
-main .shortcut-list dd {
-  display: inline;
-  line-height: var(--body-line-height);
-  margin-left: 0;
-  margin-right: 10px;
-}
-
-main>table.logbook tr td {
-  padding-bottom: 15px;
-  padding-top: 15px;
 }
 
 main>table img {
@@ -359,7 +202,7 @@ main>table img {
 }
 
 main>table tr th {
-  text-align: left;
+  text-align: start;
   font-weight: bold
 }
 
@@ -419,16 +262,7 @@ details[open]>*:not(summary) {
   margin: 1ex 0 0 0;
 }
 
-/* Modular */
-
-a {
-  color: var(--fg);
-}
-
-ol,
-ul {
-  margin: 0px 0px 30px 0px;
-}
+/* modular */
 
 .col2 {
   columns: 2
@@ -443,7 +277,7 @@ ul {
 }
 
 .notice {
-  padding: 15px;
+  padding: var(--body-inline-padding);
   border: 1px solid var(--ac);
   background-color: color-mix(in srgb, var(--ac) 10%, var(--bg));
   color: color-mix(in srgb, var(--fg) 90%, var(--bg));
@@ -468,7 +302,7 @@ ul.nobull li {
   display: none
 }
 
-/* Theme */
+/* theme */
 
 @media (prefers-color-scheme: dark) {
   :root {
@@ -481,7 +315,7 @@ ul.nobull li {
   }
 }
 
-/* Mobile */
+/* mobile */
 
 @media (max-width: 1100px) {
   :root {