diff --git a/sass/_code.scss b/sass/_code.scss
new file mode 100644
index 0000000..8d880a8
--- /dev/null
+++ b/sass/_code.scss
@@ -0,0 +1,25 @@
+pre {
+ margin-top: 25px;
+ margin-bottom: 25px;
+ border: 1px solid var(--metaColor);
+ padding: 1rem;
+ font-style: monospace;
+ text-align: left;
+ white-space: pre-wrap;
+
+ code {
+ padding: 0;
+ border-radius: 0;
+ color: inherit;
+ background-color: inherit;
+ }
+}
+
+p code,
+li code,
+div code {
+ padding: 0 .2rem 0 .2rem;
+ border-radius: .3rem;
+ color: var(--bgColor);
+ background-color: var(--linkColor);
+}
diff --git a/sass/_colors.scss b/sass/_colors.scss
new file mode 100644
index 0000000..d6faacd
--- /dev/null
+++ b/sass/_colors.scss
@@ -0,0 +1,62 @@
+:root,
+:root.light {
+ --bgColor: #EEEEEE;
+ --fgColor: #41474E;
+ --metaColor: var(--orange);
+ --headColor: #;
+ --linkColor: var(--blue);
+ --dimLinkcolor: var(--dimBlue);
+ --hovColor: var(--dimGreen);
+ --bgSelect: var(--yellow);
+ --bgUrl: url(https://i.ibb.co/Qpkrw4V/tile-Light.webp) repeat;
+ /* veqev colors */
+ --red: #D26878;
+ --dimRed: #623039;
+ --orange: #e08f67;
+ --dimOrange: #926048;
+ --yellow: #FFFAE1;
+ --dimYellow: #D5C5A1;
+ --green: #56AFA0;
+ --dimGreen: #22453F;
+ --blue: #5690AF;
+ --dimBlue: #223844;
+ --purple: #9271D6;
+ --dimPurple: #47356C;
+ --grey: #CBCDCD;
+ --dimGrey: #646868;
+ /* ftbsc colors (TODO: come up with variants) */
+ --ftbscGreen: #2E8757;
+ --ftbscOrange: #FF4D17;
+ --ftbscReddish: #BF616A;
+}
+
+:root.dark {
+ --bgColor: #222529;
+ --fgColor: #D6D6D6;
+ --metaColor: var(--ftbscOrange);
+ --headColor: #;
+ --linkColor: var(--yellow);
+ --dimLinkColor: var(--dimYellow);
+ --hovColor: var(--orange);
+ --bgSelect: var(--dimGrey);
+ --bgUrl: url(https://i.ibb.co/LzrFBFJ/tileDark.webp) repeat;
+ /* veqev colors */
+ --red: #CD909B;
+ --dimRed: #684249;
+ --orange: #E2AEA2;
+ --dimOrange: #704941;
+ --yellow: #DBD5BC;
+ --dimYellow: #6F6847;
+ --green: #78B6AD;
+ --dimGreen: #3E615C;
+ --blue: #87C9E5;
+ --dimBlue: #38494F;
+ --purple: #CEA7DE;
+ --dimPurple: #5E406A;
+ --grey: #CBCDCD;
+ --dimGrey: #464949;
+ /* ftbsc colors */
+ --ftbscGreen: #2E8757;
+ --ftbscOrange: #FF4D17;
+ --ftbscReddish: #BF616A;
+}
diff --git a/sass/_home.scss b/sass/_home.scss
new file mode 100644
index 0000000..492eb37
--- /dev/null
+++ b/sass/_home.scss
@@ -0,0 +1,21 @@
+div.home {
+ margin-top: 35%;
+ margin-bottom: 15%;
+ text-align: center;
+
+ h1 {
+ margin: 0;
+ font-size: 4rem;
+ color: var(--fgColor);
+ background-color: var(--bgColor);
+
+ &::before {
+ content: none;
+ }
+ }
+}
+
+a.socialIcon {
+ padding: .2em .3em 0 .3em;
+ font-size: 32px;
+}
diff --git a/sass/logo.scss b/sass/_logo.scss
similarity index 100%
rename from sass/logo.scss
rename to sass/_logo.scss
diff --git a/sass/_main.scss b/sass/_main.scss
new file mode 100644
index 0000000..ce69609
--- /dev/null
+++ b/sass/_main.scss
@@ -0,0 +1,251 @@
+::-moz-selection, ::selection {
+ color: var(--bgColor);
+ background: var(--fgCOlor);
+}
+
+html {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ font-size: 62.5%;
+ scrollbar-color: var(--metaColor) var(--bgColor);
+ scrollbar-width: thin;
+}
+
+body {
+ font-family: monospace;
+ font-size: 1.6rem;
+ line-height: 1.35;
+ max-width: 50%;
+ margin: auto;
+ overflow-wrap: break-word;
+ background: var(--bgColor);
+ color: var(--fgColor);
+ text-align: justify;
+}
+
+h1 {
+ font-size: 2.4rem;
+ color: var(--bgColor);
+ background-color: var(--metaColor);
+ text-align: center;
+ text-wrap: balance;
+
+ &::before {
+ color: var(--bgColor);
+ content: '# ';
+ }
+}
+
+h2, h3, h4, h5, h6 {
+ text-align: left;
+
+ &::before {
+ color: var(--metaColor);
+ content: '# ';
+ }
+}
+
+a {
+ text-decoration: none;
+ padding: 0 .2rem 0 .2rem;
+ border-radius: .3rem;
+ color: var(--linkColor);
+
+ &:focus , &:hover {
+ background-color: var(--linkColor);
+ color: var(--bgColor);
+ }
+
+ span.postDate {
+ color: var(--dimLinkColor);
+ }
+}
+
+ul {
+ list-style: none;
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+
+ li::marker {
+ content: '» ';
+ color: var(--metaColor);
+ }
+
+ li:hover::marker {
+ content: '# ';
+ font-weight: 700;
+ color: var(--linkColor);
+ }
+}
+
+li {
+ margin-bottom: .25rem;
+}
+
+blockquote {
+ border-left: .5rem solid var(--metaColor);
+ margin: 1rem;
+ padding: 0 0 0 1rem;
+}
+
+textarea {
+ border: 2px dotted;
+ outline: 0;
+ resize: none;
+ overflow: auto;
+ background-color: var(--bgColor);
+ color: var(--metaColor);
+}
+
+hr {
+ border: 1px dashed;
+ color: var(--metaColor);
+}
+
+img {
+ max-width: 90%;
+ height: auto;
+ margin: .2rem;
+ padding: .2rem;
+ border: dashed .2rem var(--metaColor);
+ border-radius: 15px;
+}
+
+iframe {
+ max-width: 90%;
+}
+
+footer {
+ text-align: left;
+}
+
+.center {
+ text-align: center;
+}
+
+.metaData, .themeButton {
+ color: var(--metaColor);
+}
+
+/* Site Specific Styling */
+.wrapper {
+ min-height: 100vh;
+ min-height: 100svh;
+ display: grid;
+ grid-template-rows: auto 1fr auto;
+ gap: 2rem;
+}
+
+/* Icons settings */
+.icons {
+ width: 2.0rem;
+ height: 2.0rem;
+ aspect-ratio: 1/1;
+ display: inline-block;
+ vertical-align: middle;
+ color: var(--fgColor);
+ fill: var(--fgColor);
+ background-color: transparent;
+}
+
+.icons__background:hover {
+ background-color: transparent;
+ color: var(--metaColor);
+}
+
+.navBar {
+ padding: 1rem 0 0 0;
+ gap: .4rem;
+ flex-wrap: wrap;
+}
+
+.navBar a {
+ float: right;
+}
+
+.themeButton {
+ cursor: pointer;
+ border: none;
+ background-color: transparent;
+ float: right;
+}
+
+.dark .themeButton.dark,
+.themeButton.light {
+ display: none
+}
+
+.dark .themeButton.light {
+ display: block
+}
+
+.tagsData {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ align-items: flex-start;
+ align-content: flex-end
+}
+
+.titleList li {
+ margin-bottom: .75rem;
+}
+
+.footnote-definition {
+ margin: 0 0 0 2rem;
+}
+
+.footnote-definition-label {
+ color: var(--metaColor);
+}
+
+.footnote-definition p {
+ display: inline;
+ padding: 0 0 0 1rem;
+}
+
+.footContainer {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.noStyle {
+ padding: 0;
+ margin: 0;
+ border: none;
+ border-radius: 0
+}
+
+.textCenter {
+ text-align: center;
+}
+
+.floatRight {
+ float: right
+}
+
+.floatLeft {
+ float: left
+}
+
+.webring {
+ margin: 0.5rem;
+}
+
+div.toc {
+ margin-bottom: 2.5rem;
+}
+
+/* Add Padding */
+@media (max-width: 650px) {
+ body {
+ max-width: 100%;
+ }
+
+ .wrapper {
+ margin: 1rem;
+ }
+}
diff --git a/sass/_table.scss b/sass/_table.scss
new file mode 100644
index 0000000..f88bce7
--- /dev/null
+++ b/sass/_table.scss
@@ -0,0 +1,26 @@
+table {
+ table-layout: fixed;
+ width: 100%;
+ border-collapse: collapse;
+ border: none;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 1rem;
+ line-height: 1.1
+}
+
+thead th:first-child {
+ width: 20%
+}
+
+th {
+ font-weight: 400
+}
+
+td,
+th {
+ padding: .5rem;
+ border: dashed .1rem var(--metaColor);
+ text-align: left;
+}
+
diff --git a/sass/style.scss b/sass/style.scss
new file mode 100644
index 0000000..3540ac5
--- /dev/null
+++ b/sass/style.scss
@@ -0,0 +1,6 @@
+@import 'colors';
+@import 'main';
+@import 'home';
+@import 'code';
+@import 'table';
+@import 'logo';
diff --git a/static/css/style.css b/static/css/style.css
deleted file mode 100644
index ac94a3e..0000000
--- a/static/css/style.css
+++ /dev/null
@@ -1,352 +0,0 @@
-:root,
-:root.light {
- --bgColor: #EEEEEE;
- --fgColor: #41474E;
- --metaColor: #D26878;
- --headColor: #;
- --linkColor: #5690AF;
- --hovColor: #22453F;
- --bgSelect: #FFFAE1;
- --bgUrl: url(https://i.ibb.co/Qpkrw4V/tile-Light.webp) repeat;
- --red: #D26878;
- --dimRed: #623039;
- --orange: #e08f67;
- --dimOrange: #926048;
- --yellow: #FFFAE1;
- --dimYellow: #D5C5A1;
- --green: #56AFA0;
- --dimGreen: #22453F;
- --blue: #5690AF;
- --dimBlue: #223844;
- --purple: #9271D6;
- --dimPurple: #47356C;
- --grey: #CBCDCD;
- --dimGrey: #646868
-}
-
-:root.dark {
- --bgColor: #222529;
- --fgColor: #D6D6D6;
- --metaColor: #78B6AD;
- --headColor: #;
- --linkColor: #DBD5BC;
- --hovColor: #E2AEA2;
- --bgSelect: #464949;
- --bgUrl: url(https://i.ibb.co/LzrFBFJ/tileDark.webp) repeat;
- --red: #CD909B;
- --dimRed: #684249;
- --orange: #E2AEA2;
- --dimOrange: #704941;
- --yellow: #DBD5BC;
- --dimYellow: #6F6847;
- --green: #78B6AD;
- --dimGreen: #3E615C;
- --blue: #87C9E5;
- --dimBlue: #38494F;
- --purple: #CEA7DE;
- --dimPurple: #5E406A;
- --grey: #CBCDCD;
- --dimGrey: #464949
-}
-
-::-moz-selection {
- color: var(--bgColor);
- background: var(--metaColor)
-}
-
-::selection {
- color: var(--bgColor);
- background: var(--metaColor)
-}
-
-html {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- font-size: 62.5%;
- scrollbar-color: var(--metaColor) var(--bgColor);
- scrollbar-width: thin;
-}
-
-body {
- font-family: monospace;
- font-size: 1.6rem;
- line-height: 1.35;
- max-width: 64rem;
- margin: auto;
- overflow-wrap: break-word;
- background: var(--bgColor);
- color: var(--fgColor);
-}
-
-h1 {
- font-size: 2.4rem;
- color: var(--bgColor);
- background-color: var(--metaColor);
- text-align: center;
- text-wrap: balance;
-}
-
-h1::before {
- color: var(--bgColor);
- content: '# '
-}
-
-h2::before,
-h3::before,
-h4::before,
-h5::before,
-h6::before {
- color: var(--metaColor);
- content: '# '
-}
-
-a {
- text-decoration: none;
- padding: 0 .2rem 0 .2rem;
- border-radius: .3rem;
- color: var(--linkColor);
-}
-
-a:focus,
-a:hover {
- background-color: var(--linkColor);
- color: var(--bgColor)
-}
-
-ul {
- list-style: none;
- margin-top: .5rem;
- margin-bottom: .5rem;
-}
-
-li {
- margin-bottom: .25rem;
-}
-
-ul li::marker {
- content: '» ';
- color: var(--metaColor)
-}
-
-ul li:hover::marker {
- content: '# ';
- font-weight: 700;
- color: var(--linkColor)
-}
-
-blockquote {
- border-left: .5rem solid var(--metaColor);
- margin: 1rem;
- padding: 0 0 0 1rem
-}
-
-textarea {
- border: 2px dotted;
- outline: 0;
- resize: none;
- overflow: auto;
- background-color: var(--bgColor)
-}
-
-hr {
- border: 1px dashed
-}
-
-img {
- max-width: 90%;
- height: auto;
- margin: .2rem;
- padding: .2rem;
- border: dashed .2rem var(--metaColor);
- border-radius: 15px
-}
-
-pre {
- border: 1px solid var(--metaColor);
- padding: 1rem;
- overflow-x: auto;
- font-style: monospace;
- white-space: pre-wrap;
- word-break: break-word;
-}
-
-p code,
-li code,
-div code {
- padding: 0 .2rem 0 .2rem;
- border-radius: .3rem;
- color: var(--bgColor);
- background-color: var(--fgColor);
-}
-
-pre code {
- padding: 0;
- border-radius: 0;
- color: inherit;
- background-color: inherit;
-}
-
-iframe {
- max-width: 90%;
-}
-
-table {
- table-layout: fixed;
- width: 100%;
- border-collapse: collapse;
- border: none;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 1rem;
- line-height: 1.1
-}
-
-thead th:first-child {
- width: 20%
-}
-
-th {
- font-weight: 400
-}
-
-td,
-th {
- padding: .5rem;
- border: dashed .1rem var(--metaColor)
-}
-
-footer {
- font-size: 1.4rem;
- clear: both;
- color: var(--footColor)
-}
-
-footer,
-td,
-th {
- text-align: left
-}
-
-.metaData,
-.themeButton,
-hr,
-textarea {
- color: var(--metaColor)
-}
-
-/* Site Specific Styling */
-.wrapper {
- min-height: 100vh;
- min-height: 100svh;
- display: grid;
- grid-template-rows: auto 1fr auto;
- gap: 2rem;
-
-}
-
-/* Icons settings */
-.icons {
- width: 2.0rem;
- height: 2.0rem;
- aspect-ratio: 1/1;
- display: inline-block;
- vertical-align: middle;
- color: var(--fgColor);
- fill: var(--fgColor);
- background-color: transparent;
-}
-
-.icons__background:hover {
- background-color: transparent;
- color: var(--metaColor);
-}
-
-.navBar {
- padding: 1rem 0 0 0;
- display: flex;
- flex-direction: row;
- gap: .4rem;
- flex-wrap: wrap;
- justify-content: flex-end;
- align-items: center;
- align-content: flex-end
-}
-
-.themeButton {
- cursor: pointer;
- border: none;
- font-size: 1.8rem;
- background-color: transparent
-}
-
-.dark .themeButton.dark,
-.themeButton.light {
- display: none
-}
-
-.dark .themeButton.light {
- display: block
-}
-
-.tagsData {
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- justify-content: flex-end;
- align-items: flex-start;
- align-content: flex-end
-}
-
-.titleList li {
- margin-bottom: .75rem;
-}
-
-.footnote-definition {
- margin: 0 0 0 2rem;
-}
-
-.footnote-definition-label {
- color: var(--metaColor);
-}
-
-.footnote-definition p {
- display: inline;
- padding: 0 0 0 1rem;
-}
-
-.footContainer {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- align-items: center;
-}
-
-.noStyle {
- padding: 0;
- margin: 0;
- border: none;
- border-radius: 0
-}
-
-.textCenter {
- text-align: center;
-}
-
-.floatRight {
- float: right
-}
-
-.floatLeft {
- float: left
-}
-
-.webring {
- margin: 0.5rem;
-}
-
-/* Add Padding */
-@media (max-width: 650px) {
- .wrapper {
- margin: 1rem;
- }
-}
\ No newline at end of file
diff --git a/templates/head.html b/templates/head.html
index 289a825..d715e48 100644
--- a/templates/head.html
+++ b/templates/head.html
@@ -95,8 +95,7 @@
{% endblock feed %}
{% endif %}
{% block css %}
-
-
+
{% endblock css %}