From 435f9b59373643a8a131ecbe324b81a21653e5f8 Mon Sep 17 00:00:00 2001
From: Joris
Date: Tue, 3 May 2022 09:17:10 +0200
Subject: Improve design

- Ease readability
- Bring projects on the index page
- Add contact
---
 public/main.css | 238 ++++++++++++++++++++++++++++++--------------------------
 1 file changed, 126 insertions(+), 112 deletions(-)

(limited to 'public/main.css')

diff --git a/public/main.css b/public/main.css
index 02572aa..cf80c8e 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,46 +1,45 @@
 /* Constants */
 
 :root {
-  --color-brown: #915f2d;
-  --color-dark-brown: #6A4115;
-  --color-blue: #1F6F9E;
-
-  --size-bee: 0.2rem;
-  --size-mouse: 0.5rem;
-  --size-cat: 0.75rem;
-  --size-dog: 1rem;
-  --size-lion: 1.25rem;
-  --size-bear: 1.5rem;
-  --size-horse: 2rem;
-  --size-camel: 2.625rem;
-  --size-rhino: 3.375rem;
-  --size-elephant: 4.25rem;
-  --size-mammoth: 5.25rem;
-}
-
-/* Animation */
-
-@keyframes appear {
-  0.0% {
-    transform: translateX(var(--size-cat));
-    opacity: 0;
-  }
-  100.0% {
-    transform: translateX(0);
-  }
+  --color-header: #68c64e;
+  --color-title: #68c64e;
+  --color-bullet: #68c64e;
+  --color-border: #bebebe;
+  --color-light-background: #eee;
+  --color-link: #0377bb;
+
+  --font-size-cat: 0.75rem;
+  --font-size-dog: 1rem;
+  --font-size-lion: 1.25rem;
+  --font-size-bear: 1.5rem;
+  --font-size-cow: 1.75rem;
+
+  --spacing-mouse: 0.25rem;
+  --spacing-cat: 0.5rem;
+  --spacing-dog: 1rem;
+  --spacing-horse: 2rem;
+  --spacing-elephant: 4rem;
+
+  --border-radius-bee: 0.2rem;
+  --border-radius-mouse: 0.4rem;
+  --border-radius-cat: 0.8rem;
+
+  --border-width-ant: 0.1rem;
+  --border-width-beetle: 0.2rem;
+  --border-width-mouse: 0.4rem;
 }
 
 /* Media */
 
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 499px) {
   html { font-size: 16px; }
 }
 
-@media screen and (min-width: 500px) and (max-width: 900px) {
+@media screen and (min-width: 500px) and (max-width: 799px) {
   html { font-size: 18px; }
 }
 
-@media screen and (min-width: 900px) {
+@media screen and (min-width: 800px) {
   html { font-size: 20px; }
 }
 
@@ -48,102 +47,84 @@
 
 body {
   margin: 0;
-  line-height: var(--size-bear);
+  line-height: var(--font-size-bear);
+  font-family: sans-serif;
+  max-width: 800px;
+  margin: 0 auto;
 }
 
 /* Header */
 
 header {
   display: flex;
-  background-color: var(--color-brown);
-  margin-bottom: var(--size-camel);
-}
-
-header > a {
+  background-color: var(--color-header);
+  color: white;
+  margin-bottom: var(--spacing-horse);
+  padding: var(--spacing-dog);
+  font-size: var(--font-size-lion);
   display: flex;
-  font-size: var(--size-bear);
-  font-weight: bold;
   justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-  flex-basis: 0;
-  height: var(--size-rhino);
-  text-decoration: none;
-  padding: 0;
-  text-align: center;
-  color: #ffffff;
 }
 
-header > a:hover,
-header > a:focus,
-header > a.current {
-  border-bottom: var(--color-dark-brown) solid var(--size-mouse);
+@media screen and (min-width: 800px) {
+  header { 
+    border-bottom-left-radius: var(--border-radius-bee);
+    border-bottom-right-radius: var(--border-radius-bee);
+  }
 }
 
-/* Sections */
+/* Main */
 
-ol.sections {
-  animation-name: appear;
-  animation-duration: 0.2s;
-  animation-timing-function: ease-in;
-  animation-iteration-count: 1;
-  width: 80%;
-  margin: 0 auto;
-  list-style-type: none;
-  padding-left: 0;
+@media screen and (max-width: 799px) {
+  main { 
+    margin-left: var(--spacing-dog);
+    margin-right: var(--spacing-dog);
+  }
 }
 
-ol.sections > li {
-  margin-bottom: var(--size-camel);
+/* Sections */
+
+section {
+  margin-bottom: var(--spacing-horse);
 }
 
-/* Sub-sections */
+/* Contact */
 
-ol.sub-sections {
-  list-style-type: none;
-  padding-left: 0;
+.contact {
+  font-size: var(--font-size-cat);
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.contact a {
+  display: flex;
+  align-items: center;
+  margin-right: var(--spacing-dog);
 }
 
-ol.sub-sections > li {
-  margin-bottom: var(--size-lion);
+.contact svg {
+  margin-right: var(--spacing-mouse);
 }
 
 /* Images */
 
-img:not(.icon) {
-  border: solid 1px var(--color-dark-brown);
-  border-radius: var(--size-mouse);
-  margin-bottom: var(--size-dog);
+img {
+  border: solid 1px var(--color-border);
+  border-radius: var(--border-radius-mouse);
+  margin-bottom: var(--spacing-dog);
   width: 100%;
   max-width: 800px;
 }
 
-img.icon {
-  margin-right: var(--size-cat);
-}
-
-/* Paragraphs */
-
-p {
-  margin-bottom: var(--size-bear);
-}
-
 /* Title */
 
 h1 {
-  color: var(--color-dark-brown);
-  font-size: var(--size-bear);
+  color: var(--color-title);
+  font-size: var(--font-size-lion);
   font-weight: bold;
-  border-bottom: 0.1rem solid var(--color-dark-brown);
-  margin-bottom: var(--size-horse);
-  padding-bottom: var(--size-mouse);
-}
-
-h1 a {
-  color: var(--color-blue);
-  text-decoration: none;
-  font-weight: normal;
-  font-size: 75%;
+  border-bottom: 0.1rem solid var(--color-title);
+  margin: 0 0 var(--spacing-horse);
 }
 
 h1 a:hover {
@@ -152,12 +133,33 @@ h1 a:hover {
 
 h2 {
   display: inline-block;
-  font-size: var(--size-dog);
-  margin-top: var(--size-dog);
-  margin-bottom: var(--size-lion);
-  font-weight: normal;
-  border-bottom: 0.1rem solid var(--color-brown);
-  color: var(--color-brown);
+  font-size: var(--font-size-lion);
+  margin: 0;
+  font-weight: bold;
+}
+
+/* Paragraphs */
+
+p {
+  margin: 0 0 var(--spacing-dog);
+  font-family: serif;
+}
+
+.subtitle {
+  font-style: italic;
+  font-size: var(--font-size-cat);
+  font-family: sans-serif;
+}
+
+/* Links */
+
+a {
+  font-style: normal;
+  color: var(--color-link);
+}
+
+a:hover {
+  filter: brightness(150%);
 }
 
 /* Lists */
@@ -165,38 +167,50 @@ h2 {
 ul {
   list-style-type: none;
   padding-left: 0;
+  font-family: serif;
+  margin: 0;
 }
 
-ul.bullets {
-  margin-bottom: var(--size-dog);
+ul:not(.technos) {
+  margin-bottom: var(--spacing-dog);
 }
 
 ul.bullets > li {
   position: relative;
-  padding: var(--size-bee) 0 var(--size-bee) var(--size-lion);
+  padding-left: var(--spacing-dog);
 }
 
 ul.bullets > li::before {
   position: absolute;
   left: 0;
   content: "•";
-  color: var(--color-brown);
+  color: var(--color-bullet);
   display: inline-block;
-  margin-right: var(--size-mouse);
 }
 
 ul.technos {
   display: flex;
   flex-wrap: wrap;
   padding-left: 0;
+  font-family: sans-serif;
 }
 
-
 ul.technos > li {
-  margin: var(--size-bee) var(--size-cat) var(--size-mouse) 0;
-  border: 1px solid var(--color-brown);
-  color: var(--color-dark-brown);
-  border-radius: var(--size-bee);
-  padding: 0 var(--size-mouse);
-  font-size: 80%;
+  background-color: var(--color-light-background);
+  margin: var(--spacing-mouse) var(--spacing-cat) var(--spacing-mouse) 0;
+  border-radius: var(--border-radius-bee);
+  padding: 0 var(--spacing-mouse);
+  font-size: 0.7rem;
+}
+
+/* Project footer */
+
+.project-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.project-footer a {
+  font-size: var(--font-size-cat);
 }
-- 
cgit v1.2.3