Setup more sober stylemain

1 files changed, 20 insertions, 26 deletions

diff --git a/public/main.css b/public/main.css
index 4b9a933..6f2c44e 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,16 +1,15 @@
 /* Constants */
 
 :root {
-  --color-green: #22a200;
 
-  --color-header: var(--color-green);
-  --color-title: var(--color-green);
-  --color-border: #bebebe;
   --color-light-background: #eee;
+  --color-light-foreground: #282828;
   --color-link: #0377bb;
+  --color-border: #dadada;
 
   --font-size-cat: 0.75rem;
   --font-size-dog: 1rem;
+  --font-size-bigdog: 1.125rem;
   --font-size-lion: 1.25rem;
   --font-size-bear: 1.5rem;
   --font-size-cow: 1.75rem;
@@ -49,7 +48,7 @@
 body {
   margin: 0;
   line-height: var(--font-size-bear);
-  font-family: sans-serif;
+  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   max-width: calc(800px - var(--spacing-dog));
   margin: 0 auto;
 }
@@ -58,22 +57,14 @@ body {
 
 header {
   display: flex;
-  background-color: var(--color-header);
-  color: white;
-  margin-bottom: var(--spacing-horse);
+  font-weight: lighter;
+  text-align: center;
   padding: var(--spacing-dog);
-  font-size: var(--font-size-lion);
+  font-size: var(--font-size-dog);
   display: flex;
   justify-content: center;
 }
 
-@media screen and (min-width: 800px) {
-  header {
-    border-bottom-left-radius: var(--border-radius-bee);
-    border-bottom-right-radius: var(--border-radius-bee);
-  }
-}
-
 /* Main */
 
 @media screen and (max-width: 799px) {
@@ -113,7 +104,7 @@ section {
 img:not(.contact) {
   border: solid 1px var(--color-border);
   border-radius: var(--border-radius-mouse);
-  margin-bottom: var(--spacing-dog);
+  margin-bottom: var(--spacing-mouse);
   width: 100%;
   max-width: 800px;
 }
@@ -121,10 +112,10 @@ img:not(.contact) {
 /* Title */
 
 h1 {
-  color: var(--color-title);
-  font-size: var(--font-size-lion);
-  font-weight: bold;
-  border-bottom: 0.1rem solid var(--color-title);
+  font-size: var(--font-size-bigdog);
+  text-align: center;
+  padding-bottom: var(--spacing-cat);
+  border-bottom: 2px dashed var(--color-border);
   margin: 0 0 var(--spacing-horse);
 }
 
@@ -136,8 +127,8 @@ h2 {
   display: inline-block;
   font-size: var(--font-size-lion);
   margin: 0;
-  font-weight: bold;
-  margin: 0 0 var(--spacing-dog);
+  font-weight: normal;
+  margin: 0 0 var(--spacing-cat);
 }
 
 .subtitle {
@@ -162,7 +153,7 @@ a {
 }
 
 a:hover {
-  filter: brightness(150%);
+  filter: brightness(130%);
 }
 
 /* Lists */
@@ -207,9 +198,12 @@ ul.technos {
 ul.technos > li {
   background-color: var(--color-light-background);
   border-radius: var(--border-radius-bee);
-  padding: 0 var(--spacing-cat);
-  font-size: var(--font-size-cat);
+  padding: 0 var(--spacing-mouse);
+  font-size: 0.6rem;
   line-height: var(--font-size-lion);
+  border: 1px solid var(--color-border);
+  text-transform: lowercase;
+  color: var(--color-light-foreground);
 }
 
 /* Project footer */