werc-1.5.0-tweaks

commit c0c0c6cdb228897374edbae57551c44f4042474d
parent a3ed2202bbff137c7bd76d65fef8c830841469b6
Author: Nuno Sempere <nuno.semperelh@protonmail.com>
Date:   Sat, 17 Jun 2023 05:41:38 +0000

feat: further code reorgs!

Diffstat:
M
pub/style/style.css
 | 
119
++++++++++++++++++++++++++++++++++++++++++-------------------------------------

1 file changed, 64 insertions(+), 55 deletions(-)
diff --git a/pub/style/style.css b/pub/style/style.css
@@ -45,12 +45,13 @@ header h1 span {
   */
 }
 
-/* Navigation bar */
-header nav {
+header nav { /* Not used by me, but used by suckless.org */
   display: flex;
   justify-content: space-between;
 }
 
+/* Navigation bar */
+
 nav {
   display: flex;
   flex-basis: 20%;
@@ -89,8 +90,7 @@ nav li a {
   padding: 0.3em 2em 0.8ex 1em;
 }
 
-/* Other sections */
-
+/* article */
 article{
   flex-basis: 70%;
   max-width: 70%;
@@ -100,6 +100,7 @@ article{
   /* padding: 0.3em 0 0 0; */
 }
 
+/* footer */
 footer {
   /* display: block; */
   flex-grow: 1;
@@ -129,10 +130,15 @@ figcaption {
   font-size: 16px;
 }
 
+.img-frontpage-center,
+.img-medium-center,
 img {
   display: block;
   margin-left: auto;
   margin-right: auto;
+}
+
+img {
   width: 80%;
 }
 
@@ -192,6 +198,7 @@ li{
 }
 
 /* Tables */
+/* old style:
 table {
   border-collapse: collapse;
   margin-left: auto;
@@ -211,33 +218,33 @@ th {
   background: var(--accent-bg);
   font-weight: bold;
 }
+*/
 
-/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
-@media screen and (max-width: 1400px) {
-  body {
-    display: block;
-  }
-  .hidden-mobile {
-    display: none;
-  }
-  article {
-    flex-basis: 100%;
-    max-width: 100%;
-    min-width: 100%;
-    padding: 5px;
-  }
-  header h1 {
-    margin-left: 0;
-  }
-  .img-frontpage-center {
-    width: 28%; /* 40% * 70%, so that the relative size stays the same*/
-  }
+table {
+    border: 3px solid #005386;
+    border-collapse: collapse;
+    table-layout: fixed;
+    text-align: left;
+    width: 100%;
 }
 
-@media screen and (min-width: 1400px) {
-  .hide-not-mobile {
-    display: none;
-  }
+table thead {
+     /* position: sticky;
+     top: 0; */
+}
+
+table tbody tr:nth-child(even) {
+     background: #E9F1F4;
+}
+
+table th {
+     background: #005386;
+     color: #fcfcfc;
+     font-weight: bold;
+}
+ table th, table td {
+     padding: 1em 1em 1em 1em;
+     /* border: 3px solid #005386; */
 }
 
 /* Newsletter stuff */
@@ -265,6 +272,7 @@ th {
   border: 1px solid #ddd;
   font-size: 20px;
 }
+
 input:focus {
   border-color: #0055d4;
 }
@@ -283,33 +291,6 @@ img + em {
   font-size: 1em;
 }
 
-/* Table */
-
-table {
-    border: 3px solid #005386;
-    border-collapse: collapse;
-    table-layout: fixed;
-    text-align: left;
-    width: 100%;
-}
-
-table thead {
-     /* position: sticky;
-     top: 0; */
-}
- table tbody tr:nth-child(even) {
-     background: #E9F1F4;
-}
- table th {
-     background: #005386;
-     color: #fcfcfc;
-     font-weight: bold;
-}
- table th, table td {
-     padding: 1em 1em 1em 1em;
-     /* border: 3px solid #005386; */
-}
-
 /* Isso comments */
 /* You  can see the general comments style: <https://comments.nunosempere.com/css/isso.css> */
 
@@ -322,3 +303,31 @@ table thead {
   resize: vertical !important;
 
 }
+
+/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
+@media screen and (max-width: 1400px) {
+  body {
+    display: block;
+  }
+  .hidden-mobile {
+    display: none;
+  }
+  article {
+    flex-basis: 100%;
+    max-width: 100%;
+    min-width: 100%;
+    padding: 5px;
+  }
+  header h1 {
+    margin-left: 0;
+  }
+  .img-frontpage-center {
+    width: 28%; /* 40% * 70%, so that the relative size stays the same*/
+  }
+}
+
+@media screen and (min-width: 1400px) {
+  .hide-not-mobile {
+    display: none;
+  }
+}