diff options
| author | Joris | 2021-01-08 07:45:07 +0100 |
|---|---|---|
| committer | Joris | 2021-01-08 07:45:07 +0100 |
| commit | 35a4827376395dd030f80128bd35b876f7adced4 (patch) | |
| tree | b61489f7c3e7459f1f98c3e9cab5ac0ab42e85ac | |
| parent | b46814d35b662f9db869c560a1db2eca688971ee (diff) | |
Improve page readability
| -rw-r--r-- | public/index.html | 6 | ||||
| -rw-r--r-- | public/projects.html | 6 | ||||
| -rw-r--r-- | 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 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="Joris Guyonvarch"> - <meta name="description" content="I am a developer using functional programming. Here are my resume and projects."> + <meta name="description" content="I am a developer using functional programming. View my resume and projects."> <title>Joris Guyonvarch</title> <link rel="stylesheet" href="style.css" /> <link rel="icon" href="icon.png" /> @@ -12,7 +12,7 @@ <body> <header class="g-Header"> - <a href="" class="g-Header__Link g-Header__Link--Current">Resume</a> + <a href="/" class="g-Header__Link g-Header__Link--Current">Resume</a> <a href="projects.html" class="g-Header__Link ">Projects</a> </header> 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 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="Joris Guyonvarch"> - <meta name="description" content="I’m a developer using functional programming. View my resume and projects."> + <meta name="description" content="I am a developer using functional programming. View my resume and projects."> <title>Joris Guyonvarch</title> <link rel="stylesheet" href="style.css" /> <link rel="icon" href="icon.png" /> @@ -12,7 +12,7 @@ <body> <header class="g-Header"> - <a href="index.html" class="g-Header__Link ">Resume</a> + <a href="/" class="g-Header__Link ">Resume</a> <a href="projects.html" class="g-Header__Link g-Header__Link--Current">Projects</a> </header> 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; } |