re-arrange site resources

res/css/fira.css

@@ -0,0 +1,48 @@
+@font-face {
+  font-family: "Fira Code";
+  src: url("/res/fonts/FiraCode-Light.woff2") format("woff2"),
+    url("/res/fonts/FiraCode-Light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Fira Code";
+  src: url("/res/fonts/FiraCode-Regular.woff2") format("woff2"),
+    url("/res/fonts/FiraCode-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Fira Code";
+  src: url("/res/fonts/FiraCode-Medium.woff2") format("woff2"),
+    url("/res/fonts/FiraCode-Medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Fira Code";
+  src: url("/res/fonts/FiraCode-SemiBold.woff2") format("woff2"),
+    url("/res/fonts/FiraCode-SemiBold.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Fira Code";
+  src: url("/res/fonts/FiraCode-Bold.woff2") format("woff2"),
+    url("/res/fonts/FiraCode-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Fira Code VF";
+  src: url("/res/fonts/FiraCode-VF.woff2") format("woff2-variations"),
+    url("/res/fonts/FiraCode-VF.woff") format("woff-variations");
+  /* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
+  font-weight: 300 700;
+  font-style: normal;
+}

res/css/master.css

@@ -0,0 +1,104 @@
+@import url("fira.css");
+
+:root {
+  --background: hsl(282, 23%, 9%);
+  --foreground: hsl(271, 64%, 88%);
+  --drop-shadow-color: hsla(271, 64%, 88%, 0.235);
+  --drop-shadow-size: 8px 8px;
+  --links: hsl(267, 84%, 81%);
+  --profile-image-size: 200px;
+  --page-width: 520px;
+}
+
+body {
+  color: var(--foreground);
+  background-color: var(--background);
+  font-family: "Fira Code";
+  font-size: 13px;
+}
+
+h1,
+p {
+  margin: 0;
+}
+
+a {
+  color: var(--links);
+  text-decoration: underline dotted;
+}
+
+a:hover {
+  text-decoration: underline solid;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: square;
+  list-style-position: inside;
+}
+
+ul.social {
+  list-style: none;
+}
+
+li {
+  padding-left: 0;
+  text-indent: 1em;
+}
+
+/* 
+li:before {
+    content: "-";
+    padding-right: 5px;
+} */
+
+div.page-container {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  text-align: center;
+  width: var(--page-width);
+}
+
+div.grid {
+  display: grid;
+  grid-template-columns: var(--profile-image-size) auto;
+  grid-template-rows: auto auto;
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+  border: 1px solid var(--foreground);
+  background-color: var(--background);
+  padding: 10px;
+  filter: drop-shadow(var(--drop-shadow-size) var(--drop-shadow-color));
+}
+
+div.grid div:nth-child(2) {
+  margin: auto 0;
+  text-align: right;
+  text-overflow: ellipsis;
+}
+
+div.grid div:nth-child(4) {
+  vertical-align: middle;
+  margin: auto 0;
+}
+
+div.grid div:last-child {
+  grid-column: span 2;
+}
+
+div.grid > div {
+  text-align: left;
+}
+
+img.profile-image {
+  width: var(--profile-image-size);
+  border: 2px solid var(--foreground);
+}
+
+p.social-heading {
+  margin-top: 0.75em;
+}