Redesign

root/css/base.css

@@ -1,7 +1,18 @@
+:root {
+  --foreground: #aa998fff; /*cinereous*/
+  --background: hsl(20, 12%, 75%);
+  --text: #454545ff; /*onyx*/
+  --tea-green: #e0fbb1ff;
+  --celestial-blue: #20a4f3ff;
+  --rust: #bc3908ff;
+}
+
 body {
   padding: 0;
   margin: 0;
   font-family: Roboto;
+  color: var(--text);
+  background: var(--background);
 }
 
 @font-face {
@@ -10,71 +21,81 @@ body {
 }
 
 .darkerbar {
-  background: lightgrey;
+  background: var(--foreground);
   width: 100%;
 }
 
-#content > p {
-  text-align: justify;
-}
-
-#topbar {
+header {
   display: inline-block;
   height: 5em;
   border-bottom: grey 1px solid;
 }
 
-#content {
+main {
   padding: 1em;
 }
 
-a.item {
-  text-decoration: none;
-  display: inline-flex;
-  flex: 0 2 80em;
+main > p {
+  text-align: justify;
+}
+
+#links-container {
+  justify-content: center;
+  display: flex;
+  width: 100%;
 }
 
 div.item {
-  background: lightgrey;
+  margin: 0 0.4em;
   display: flex;
-  flex: 0 2 80em;
-  margin: 0.1em;
-  padding: 0em 0.4em;
-  border: 1px grey solid; 
-  border-radius: 0.5em;
-  box-sizing: border-box;
-  vertical-align: middle;
+  position: relative;
+  width: min-content;
+  background: var(--foreground);
+  border: solid grey 2px;
+  border-radius: 15pt;
+}
+
+div.item > a {
+  border-radius: inherit;
+  position: absolute;
+  height: 100%;
+  width: 100%;
 }
 
 div.item:hover {
-  background: beige;
+  animation:hover 0.2s forwards; 
 }
 
-h2.item {
-  text-decoration: none;
-  white-space: nowrap;
-  color: black;
-  min-width: 7em;
-  margin: 1em 0;
+@keyframes hover {
+  0% {background: var(--foreground)}
+  100% {background: var(--tea-green)}
 }
 
-.desc {
-  text-decoration: none;
-  font-size: 1em;
-  color: black;
-  margin: 0 3em;
+img.item {
+  height: inherit;
+}
+
+div.image {
+  border-radius: 15pt;
+  height: 58pt;
+  width: auto;
+  display: inline-block;
+  padding: 5pt;
+  margin: 12pt 10pt 12pt 12pt;
+  background: white;
+}
+
+div.desc {
+  margin: auto 6pt auto 0;
   text-align: center;
-  align-self: center;
-}
-
-div.item-list {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
+  font-weight: 700;
+  font-size:15pt;
 }
 
 footer {
-  display: block;
+  position: fixed;
+  display: flex;
+  left: 0;
   bottom: 0;
   height: 10em;
   border-top: grey 1px solid;