From 41a354fdc3c3da1da52e542152858247d04b8887 Mon Sep 17 00:00:00 2001 From: Joris Date: Sat, 13 Nov 2021 09:57:23 +0100 Subject: Improve readability --- public/main.css | 31 ++++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) (limited to 'public/main.css') diff --git a/public/main.css b/public/main.css index 62cae6e..02572aa 100644 --- a/public/main.css +++ b/public/main.css @@ -3,9 +3,7 @@ :root { --color-brown: #915f2d; --color-dark-brown: #6A4115; - --color-blue: #515170; - --color-light-gray: #EEEEEE; - --color-dark-gray: #666666; + --color-blue: #1F6F9E; --size-bee: 0.2rem; --size-mouse: 0.5rem; @@ -35,15 +33,15 @@ /* Media */ @media screen and (max-width: 500px) { - html { font-size: 15px; } + html { font-size: 16px; } } @media screen and (min-width: 500px) and (max-width: 900px) { - html { font-size: 16px; } + html { font-size: 18px; } } @media screen and (min-width: 900px) { - html { font-size: 17px; } + html { font-size: 20px; } } /* Body */ @@ -113,7 +111,7 @@ ol.sub-sections > li { /* Images */ img:not(.icon) { - border: solid 1px var(--color-dark-gray); + border: solid 1px var(--color-dark-brown); border-radius: var(--size-mouse); margin-bottom: var(--size-dog); width: 100%; @@ -133,30 +131,32 @@ p { /* Title */ h1 { - color: var(--color-brown); - font-size: var(--size-horse); - font-weight: lighter; - border-bottom: var(--size-bee) solid var(--color-brown); + color: var(--color-dark-brown); + font-size: var(--size-bear); + 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: #1F6F9E; + color: var(--color-blue); text-decoration: none; + font-weight: normal; font-size: 75%; } h1 a:hover { - color: #29A8F3; + text-decoration: underline; } h2 { + display: inline-block; font-size: var(--size-dog); margin-top: var(--size-dog); margin-bottom: var(--size-lion); font-weight: normal; - text-decoration: underline; + border-bottom: 0.1rem solid var(--color-brown); color: var(--color-brown); } @@ -194,7 +194,8 @@ ul.technos { ul.technos > li { margin: var(--size-bee) var(--size-cat) var(--size-mouse) 0; - background-color: var(--color-light-gray); + border: 1px solid var(--color-brown); + color: var(--color-dark-brown); border-radius: var(--size-bee); padding: 0 var(--size-mouse); font-size: 80%; -- cgit v1.2.3