From 6682ff4644ab422da760b90934ee42dc62df9bb6 Mon Sep 17 00:00:00 2001 From: Joris Date: Sun, 10 Jan 2021 10:59:02 +0100 Subject: Simplify HTML tags --- public/main.css | 263 ++++++++++++++++++++++++++++++++------------------------ 1 file changed, 149 insertions(+), 114 deletions(-) (limited to 'public/main.css') diff --git a/public/main.css b/public/main.css index a6a68e5..3a0d3f4 100644 --- a/public/main.css +++ b/public/main.css @@ -1,185 +1,220 @@ /* Constants */ :root { - /* Colors */ --color-brown: #A56D35; --color-dark-brown: #6A4115; --color-blue: #515170; --color-light-gray: #EEEEEE; --color-dark-gray: #666666; + + --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(0.8rem); - opacity: 0; - } - 100.0% { - transform: translateX(0); - } + 0.0% { + transform: translateX(var(--size-cat)); + opacity: 0; + } + 100.0% { + transform: translateX(0); + } } /* Media */ @media screen and (max-width: 500px) { - html { - font-size: 90%; - } + html { font-size: 15px; } } @media screen and (min-width: 500px) and (max-width: 900px) { - html { - font-size: 100%; - } + html { font-size: 16px; } } @media screen and (min-width: 900px) { - html { - font-size: 110%; - } + html { font-size: 17px; } } -/* Style */ +/* Body */ body { - overflow-x: hidden; - margin: 0; - line-height: 1.8rem; + margin: 0; + line-height: var(--size-bear); } -.g-Main { - animation-name: appear; - animation-duration: 0.2s; - animation-timing-function: ease-in; - animation-iteration-count: 1; - width: 80%; - margin: 0 auto; +/* Header */ + +header { + display: flex; + background-color: var(--color-brown); + margin-bottom: var(--size-camel); } -svg { - width: inherit; - height: inherit; +header > a { + 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; } -ul { - list-style-type: none; - padding-left: 0; +header > a:hover, +header > a:focus, +header > a.current { + border-bottom: var(--color-dark-brown) solid var(--size-mouse); +} + +/* Sections */ + +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; +} + +ol.sections > li { + margin-bottom: var(--size-camel); } -.g-Paragraph { - margin-bottom: 1rem; +/* Sub-sections */ + +ol.sub-sections { + list-style-type: none; + padding-left: 0; +} + +ol.sub-sections > li { + margin-bottom: var(--size-lion); } -.g-List { - padding-left: 0; - margin: 0.5rem 0 1rem 0.5rem; +/* Images */ + +img:not(.icon) { + border: solid 1px var(--color-dark-gray); + border-radius: var(--size-mouse); + margin-bottom: var(--size-dog); + width: 100%; + max-width: 800px; } -.g-List__Item::before { - content: "•"; - color: var(--color-brown); - display: inline-block; - margin-right: 0.5rem; +img.icon { + margin-right: var(--size-cat); } -.g-List__Item { - padding: 0.2rem 0; +/* Paragraphs */ + +p { + margin-bottom: var(--size-bear); } -.g-Image { - border: solid 1px var(--color-dark-gray); - border-radius: 0.5rem; - margin-bottom: 1rem; - width: 100%; - max-width: 900px; +/* Title */ + +h1 { + color: var(--color-brown); + font-size: var(--size-horse); + font-weight: lighter; + border-bottom: var(--size-bee) solid var(--color-brown); + margin-bottom: var(--size-horse); + padding-bottom: var(--size-mouse); } -.g-Header { - background-color: var(--color-brown); - display: flex; +h2 { + font-size: var(--size-dog); + margin-top: 0; + margin-bottom: var(--size-lion); + font-weight: normal; + text-decoration: underline; + color: var(--color-brown); } -.g-Header__Link { - display: flex; - font-size: 1.5rem; - font-weight: bold; - justify-content: center; - align-items: center; - flex-grow: 1; - flex-basis: 0; - height: 3.5rem; - text-decoration: none; - padding: 0; - text-align: center; - color: #ffffff; +/* Lists */ + +ul { + list-style-type: none; + padding-left: 0; } -.g-Header__Link:hover, -.g-Header__Link:focus, -.g-Header__Link--Current { - border-bottom: var(--color-dark-brown) solid 0.6rem; +ul.bullets { + margin-bottom: var(--size-dog); } -.g-IconLink__Link { - text-decoration: none; - color: var(--color-blue); - transition: color 0.3s ease-out 0.0s; - display: inline-flex; - align-items: center; +ul.bullets > li::before { + content: "•"; + color: var(--color-brown); + display: inline-block; + margin-right: var(--size-mouse); } -.g-IconLink__Link:focus { - outline: solid 0 #ffffff; +ul.bullets > li { + padding: var(--size-bee) 0; } -.g-IconLink__Link:hover, -.g-IconLink__Link:focus { - text-decoration: underline; +ul.technos { + display: flex; + flex-wrap: wrap; + margin-bottom: var(--size-dog); + padding-left: 0; } -.g-IconLink__Icon { - margin-right: 1rem; - height: 1.2rem; +ul.technos > li { + margin-right: var(--size-dog); + margin-bottom: var(--size-mouse); + background-color: var(--color-light-gray); + border-radius: var(--size-bee); + padding: 0 var(--size-mouse); + font-size: 80%; } -.g-Resume__Title { - margin: 2.5rem 0 0.5rem; +ul.links { + margin-bottom: var(--size-lion); } -.g-Resume__Title > em { - font-style: normal; - border-bottom: solid 0.2rem var(--color-brown); +ul.links > li { + display: flex; + align-items: center; + margin-bottom: var(--size-cat); } -.g-Section__Title { - color: var(--color-brown); - font-size: 1.8rem; - font-weight: lighter; - margin-bottom: 2rem; - margin-top: 3.5rem; - border-bottom: 0.2rem solid var(--color-brown); - padding-bottom: 0.5rem; - letter-spacing: 0.1rem; +ul.links a { + text-decoration: none; + color: var(--color-blue); + transition: color 0.3s ease-out 0.0s; + align-items: center; } -.g-Section__Entries { - padding-left: 0; +ul.links a:focus { + outline: solid 0 #ffffff; } -.g-Skills { - display: flex; - flex-wrap: wrap; - margin-bottom: 1rem; - padding-left: 0; +ul.links a:hover, +ul.links a:focus { + text-decoration: underline; } -.g-Skills > li { - font-size: 0.8rem; - margin-right: 1rem; - margin-bottom: 0.5rem; - background-color: var(--color-light-gray); - border-radius: 0.1rem; - padding: 0 0.5rem; +ul.links svg { + margin-right: var(--size-dog); + height: var(--size-lion); } -- cgit v1.2.3