From 35a4827376395dd030f80128bd35b876f7adced4 Mon Sep 17 00:00:00 2001
From: Joris
Date: Fri, 8 Jan 2021 07:45:07 +0100
Subject: Improve page readability
---
public/index.html | 6 +++---
public/projects.html | 6 +++---
public/style.css | 41 ++++++++++++++++++++++++++++-------------
3 files changed, 34 insertions(+), 19 deletions(-)
diff --git a/public/index.html b/public/index.html
index 9aac4ed..7c8411a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,10 +1,10 @@
-
+
-
+
Joris Guyonvarch
@@ -12,7 +12,7 @@
diff --git a/public/projects.html b/public/projects.html
index ec4e311..2743614 100644
--- a/public/projects.html
+++ b/public/projects.html
@@ -1,10 +1,10 @@
-
+
-
+
Joris Guyonvarch
@@ -12,7 +12,7 @@
diff --git a/public/style.css b/public/style.css
index 999fb7c..cd207a5 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,3 +1,16 @@
+/* Constants */
+
+:root {
+ /* Colors */
+ --color-brown: #A56D35;
+ --color-dark-brown: #6A4115;
+ --color-blue: #515170;
+ --color-light-gray: #EEEEEE;
+ --color-dark-gray: #666666;
+}
+
+/* Animation */
+
@keyframes appear {
0.0% {
transform: translateX(0.8rem);
@@ -8,6 +21,8 @@
}
}
+/* Media */
+
@media screen and (max-width: 500px) {
html {
font-size: 90%;
@@ -26,6 +41,8 @@
}
}
+/* Style */
+
body {
overflow-x: hidden;
margin: 0;
@@ -62,7 +79,7 @@ ul {
.g-List__Item::before {
content: "•";
- color: #bf7f3f;
+ color: var(--color-brown);
display: inline-block;
margin-right: 0.5rem;
}
@@ -72,7 +89,7 @@ ul {
}
.g-Image {
- border: solid 1px #646464;
+ border: solid 1px var(--color-dark-gray);
border-radius: 0.5rem;
margin-bottom: 1rem;
width: 100%;
@@ -80,15 +97,14 @@ ul {
}
.g-Header {
- background-color: #bf7f3f;
- font-size: 2.5rem;
+ background-color: var(--color-brown);
display: flex;
- font-variant: small-caps;
}
.g-Header__Link {
display: flex;
- font-size: 0.6em;
+ font-size: 1.5rem;
+ font-weight: bold;
justify-content: center;
align-items: center;
flex-grow: 1;
@@ -103,12 +119,12 @@ ul {
.g-Header__Link:hover,
.g-Header__Link:focus,
.g-Header__Link--Current {
- border-bottom: #9a5f20 solid 0.6rem;
+ border-bottom: var(--color-dark-brown) solid 0.6rem;
}
.g-IconLink__Link {
text-decoration: none;
- color: #515170;
+ color: var(--color-blue);
transition: color 0.3s ease-out 0.0s;
display: inline-flex;
align-items: center;
@@ -134,18 +150,17 @@ ul {
.g-Resume__Title > em {
font-style: normal;
- border-bottom: solid 0.2rem #bf7f3f;
+ border-bottom: solid 0.2rem var(--color-brown);
}
.g-Section__Title {
- color: #bf7f3f;
+ color: var(--color-brown);
font-size: 1.8rem;
font-weight: lighter;
margin-bottom: 2rem;
margin-top: 3.5rem;
- border-bottom: 0.1rem solid #bf7f3f;
+ border-bottom: 0.2rem solid var(--color-brown);
padding-bottom: 0.5rem;
- font-variant: small-caps;
letter-spacing: 0.1rem;
}
@@ -164,7 +179,7 @@ ul {
font-size: 0.8rem;
margin-right: 1rem;
margin-bottom: 0.5rem;
- background-color: #EEEEEE;
+ background-color: var(--color-light-gray);
border-radius: 0.1rem;
padding: 0 0.5rem;
}
--
cgit v1.2.3