diff --git a/fira.css b/fira.css
deleted file mode 100644
index e45a726..0000000
--- a/fira.css
+++ /dev/null
@@ -1,48 +0,0 @@
-@font-face {
- font-family: 'Fira Code';
- src: url('fonts/FiraCode-Light.woff2') format('woff2'),
- url("fonts/FiraCode-Light.woff") format("woff");
- font-weight: 300;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'Fira Code';
- src: url('fonts/FiraCode-Regular.woff2') format('woff2'),
- url("fonts/FiraCode-Regular.woff") format("woff");
- font-weight: 400;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'Fira Code';
- src: url('fonts/FiraCode-Medium.woff2') format('woff2'),
- url("fonts/FiraCode-Medium.woff") format("woff");
- font-weight: 500;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'Fira Code';
- src: url('fonts/FiraCode-SemiBold.woff2') format('woff2'),
- url("fonts/FiraCode-SemiBold.woff") format("woff");
- font-weight: 600;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'Fira Code';
- src: url('fonts/FiraCode-Bold.woff2') format('woff2'),
- url("fonts/FiraCode-Bold.woff") format("woff");
- font-weight: 700;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'Fira Code VF';
- src: url('fonts/FiraCode-VF.woff2') format('woff2-variations'),
- url('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;
-}
diff --git a/index.html b/index.php
similarity index 84%
rename from index.html
rename to index.php
index e1510a5..3ac8edd 100644
--- a/index.html
+++ b/index.php
@@ -4,7 +4,7 @@
-
+
~floppy
@@ -20,7 +20,7 @@
"My life is a living nightmare!"
- 
- 19 y/o, British
@@ -35,7 +35,8 @@
diff --git a/master.css b/master.css
deleted file mode 100644
index e32512a..0000000
--- a/master.css
+++ /dev/null
@@ -1,104 +0,0 @@
-@import url('fira.css');
-
-:root {
- --background: #11111b;
- --foreground: #cdd6f4;
- --drop-shadow-color: #cdd6f43c;
- --drop-shadow-size: 8px 8px;
- --links: #89b4fa;
- --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;
-}
-
-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;
-}
diff --git a/res/css/fira.css b/res/css/fira.css
new file mode 100644
index 0000000..6598f4b
--- /dev/null
+++ b/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;
+}
diff --git a/res/css/master.css b/res/css/master.css
new file mode 100644
index 0000000..0146669
--- /dev/null
+++ b/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;
+}
diff --git a/fonts/FiraCode-Bold.woff b/res/fonts/FiraCode-Bold.woff
similarity index 100%
rename from fonts/FiraCode-Bold.woff
rename to res/fonts/FiraCode-Bold.woff
diff --git a/fonts/FiraCode-Bold.woff2 b/res/fonts/FiraCode-Bold.woff2
similarity index 100%
rename from fonts/FiraCode-Bold.woff2
rename to res/fonts/FiraCode-Bold.woff2
diff --git a/fonts/FiraCode-Light.woff b/res/fonts/FiraCode-Light.woff
similarity index 100%
rename from fonts/FiraCode-Light.woff
rename to res/fonts/FiraCode-Light.woff
diff --git a/fonts/FiraCode-Light.woff2 b/res/fonts/FiraCode-Light.woff2
similarity index 100%
rename from fonts/FiraCode-Light.woff2
rename to res/fonts/FiraCode-Light.woff2
diff --git a/fonts/FiraCode-Medium.woff b/res/fonts/FiraCode-Medium.woff
similarity index 100%
rename from fonts/FiraCode-Medium.woff
rename to res/fonts/FiraCode-Medium.woff
diff --git a/fonts/FiraCode-Medium.woff2 b/res/fonts/FiraCode-Medium.woff2
similarity index 100%
rename from fonts/FiraCode-Medium.woff2
rename to res/fonts/FiraCode-Medium.woff2
diff --git a/fonts/FiraCode-Regular.woff b/res/fonts/FiraCode-Regular.woff
similarity index 100%
rename from fonts/FiraCode-Regular.woff
rename to res/fonts/FiraCode-Regular.woff
diff --git a/fonts/FiraCode-Regular.woff2 b/res/fonts/FiraCode-Regular.woff2
similarity index 100%
rename from fonts/FiraCode-Regular.woff2
rename to res/fonts/FiraCode-Regular.woff2
diff --git a/fonts/FiraCode-SemiBold.woff b/res/fonts/FiraCode-SemiBold.woff
similarity index 100%
rename from fonts/FiraCode-SemiBold.woff
rename to res/fonts/FiraCode-SemiBold.woff
diff --git a/fonts/FiraCode-SemiBold.woff2 b/res/fonts/FiraCode-SemiBold.woff2
similarity index 100%
rename from fonts/FiraCode-SemiBold.woff2
rename to res/fonts/FiraCode-SemiBold.woff2
diff --git a/fonts/FiraCode-VF.woff b/res/fonts/FiraCode-VF.woff
similarity index 100%
rename from fonts/FiraCode-VF.woff
rename to res/fonts/FiraCode-VF.woff
diff --git a/fonts/FiraCode-VF.woff2 b/res/fonts/FiraCode-VF.woff2
similarity index 100%
rename from fonts/FiraCode-VF.woff2
rename to res/fonts/FiraCode-VF.woff2
diff --git a/profile-image.png b/res/images/profile.png
similarity index 100%
rename from profile-image.png
rename to res/images/profile.png