Simplify HTML tags

1 files changed, 149 insertions, 114 deletions

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);
 }