diff --git a/assets/_fonts.scss b/assets/_fonts.scss
deleted file mode 100644
index f3f7ec6..0000000
--- a/assets/_fonts.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@font-face{
- font-family: FiraCode;
- src: url(fonts/FiraCode-Regular.ttf);
-}
diff --git a/assets/_me.scss b/assets/_me.scss
deleted file mode 100644
index fd67ca9..0000000
--- a/assets/_me.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@use "variables" as vars;
-
-.home {
- display: flex;
- flex-direction: column;
- width: 100%;
- align-items: center;
-
- &__content {
- text-align: justify;
- max-width: 850px;
-
- img {
- border-radius: 16px;
- float: left;
- margin: 0 24px 16px 0;
- }
- }
-}
-
-@media only screen and (max-width: 500px) {
- .home {
- &__content {
- img {
- width: 100%;
- }
- }
- }
-}
diff --git a/assets/_posts.scss b/assets/_posts.scss
deleted file mode 100644
index 462119b..0000000
--- a/assets/_posts.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@use "variables" as vars;
-
-.single {
- &__title {
- margin-bottom: 0;
- padding-bottom: 0;
- color: vars.$color-orange-dark;
- }
-
- &__date {
- color: vars.$color-yellow-dark;
- }
-}
diff --git a/assets/_services.scss b/assets/_services.scss
deleted file mode 100644
index f1e9f5f..0000000
--- a/assets/_services.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@use "variables" as vars;
-
-.services {
- display: flex;
- flex-direction: column;
-
- // &__title {
- // }
-
- &__list {
- width: 100%;
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
-
- .service {
- width: 45%;
- align-self: center;
- margin: 8px 0;
-
- h2 {
- margin: 0;
- }
-
- &__text {
- padding: 2px;
- line-height: 24px;
- background: vars.$color-bg0_h;
- }
- }
- }
-}
diff --git a/assets/_sidebar.scss b/assets/_sidebar.scss
deleted file mode 100644
index c198021..0000000
--- a/assets/_sidebar.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@use "variables" as vars;
-
-.sidebar {
- width: 25%;
- max-width: 400px;
- // background-color: green;
-
- ul {
- list-style: none;
-
- li {
- margin-left: -48px;
- padding: 8px;;
- }
- }
-}
-
-@media screen and (max-width: 800px) {
- .sidebar {
- width: 100%;
- max-width: 100%;
- }
-}
diff --git a/assets/_variables.scss b/assets/_variables.scss
deleted file mode 100644
index 56f9b62..0000000
--- a/assets/_variables.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-// Colour
-$color-bg: #282828;
-$color-fg: #ebdbb2;
-$color-red-dark: #cc241d;
-$color-green-dark: #98971a;
-$color-yellow-dark: #d79921;
-$color-blue-dark: #458588;
-$color-purple-dark: #b16286;
-$color-aqua-dark: #689d6a;
-$color-grey-dark: #928374;
-$color-orange-dark: #d65d0e;
-$color-red: #fb4934;
-$color-green: #b8bb26;
-$color-yellow: #fabd2f;
-$color-blue: #83a598;
-$color-purple: #d3869b;
-$color-aqua: #8ec07c;
-$color-grey: #a89984;
-$color-orange: #fe8019;
-$color-bg0_h: #1d2021;
-$color_bg0_s: #32302f;
-$color-bg0: $color-bg;
-$color-bg1: #3c3836;
-$color-bg2: #504845;
-$color-bg3: #665c54;
-$color-bg4: #7c6f64;
-$color-fg0: #fbf1c7;
-$color-fg1: $color-fg;
-$color-fg2: #d5c4a1;
-$color-fg3: #bdae93;
-$color-fg4: #a89984;
-
-// Layout
-$content-width-norm: 50%;
-$content-width-mid: 60%;
-$content-width-narrow: 80%;
diff --git a/assets/style.scss b/assets/style.scss
deleted file mode 100644
index 8577806..0000000
--- a/assets/style.scss
+++ /dev/null
@@ -1,165 +0,0 @@
-@use "variables" as vars;
-
-@import "services";
-@import "me";
-@import "posts";
-@import "sidebar";
-@import "fonts";
-
-body {
- color: vars.$color-fg;
- background: vars.$color-bg;
- font-family: FiraCode, monospace;
-}
-
-code {
- font-family: FiraCode, monospace;
-}
-
-pre code { white-space: pre-wrap; }
-
-.content-wrapper {
- width: vars.$content-width-norm;
- padding: 0 calc((100% - #{vars.$content-width-norm}) / 2);
-}
-
-img {
- max-width: 100%;
-}
-
-@media only screen and (max-width: 1000px) {
- .content-wrapper {
- width: vars.$content-width-mid;
- padding: 0 calc((100% - #{vars.$content-width-mid}) / 2);
- }
-}
-
-@media only screen and (max-width: 800px) {
- .content-wrapper {
- width: vars.$content-width-narrow;
- padding: 0 calc((100% - #{vars.$content-width-narrow}) / 2);
- }
-
- .main {
- flex-direction: column;
-
- &__content {
- width: 100% !important;
- }
- }
-}
-
-.header {
- display: block;
- // background-color: red;
-
- &__title {
- a,
- a:link,
- a:hover,
- a:visited {
- color: vars.$color-orange-dark !important;
- }
- }
-
- &__nav {
- &__list {
- display: flex;
- flex-wrap:wrap;
-
- &__item {
- margin-right: 32px;
- list-style: none;
- }
- }
- }
-}
-
-.main {
- justify-content: space-between;
- display: flex;
-
- &__content {
- width: 70%;
- // background-color: blue;
- }
-}
-
-.summary {
- &__title {
- a,
- a:link,
- a:visited {
- color: vars.$color-orange-dark;
- }
-
- a:hover {
- color: vars.$color-orange;
- }
- }
-
- &__date {
- margin-bottom: 8px;
-
- &__time {
- &--created {
- color: vars.$color-aqua;
- }
-
- &--edited {
- color: vars.$color-aqua-dark;
- }
- }
- }
-
- h2 {
- padding-bottom: 0;
- margin-bottom: 0;
- }
-}
-
-.list {
- display: flex;
- flex-direction: column;
-
- &__title {
- display: flex;
-
- h1 {
- display: inline;
- }
-
- a {
- margin: auto 0 28px 4px;
- }
- }
-}
-
-.footer {
- // background: purple;
- text-align: center;
-}
-
-.pagination {
- width: 100%;
- text-align: center;
- padding-top: 16px;
-}
-
-a,
-a:visited,
-a:hover {
- text-decoration: none;
- color: vars.$color-blue-dark;
-}
-
-a:hover {
- color: vars.$color-blue;
-}
-
-h1,
-h2,
-h3,
-h4 {
- color: vars.$color-green-dark;
-}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 44774d7..7b40164 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -10,7 +10,7 @@
{{ end }}
{{ with .Site.Params.author }}
{{ end }}
-
+
{{ with .OutputFormats.Get "RSS" -}}
{{ printf `
` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
diff --git a/static/assets/style.css b/static/assets/style.css
new file mode 100644
index 0000000..81721f7
--- /dev/null
+++ b/static/assets/style.css
@@ -0,0 +1,279 @@
+:root {
+ --color-bg: #282828;
+ --color-fg: #ebdbb2;
+ --color-red-dark: #cc241d;
+ --color-green-dark: #98971a;
+ --color-yellow-dark: #d79921;
+ --color-blue-dark: #458588;
+ --color-purple-dark: #b16286;
+ --color-aqua-dark: #689d6a;
+ --color-grey-dark: #928374;
+ --color-orange-dark: #d65d0e;
+ --color-red: #fb4934;
+ --color-green: #b8bb26;
+ --color-yellow: #fabd2f;
+ --color-blue: #83a598;
+ --color-purple: #d3869b;
+ --color-aqua: #8ec07c;
+ --color-grey: #a89984;
+ --color-orange: #fe8019;
+ --color-bg0_h: #1d2021;
+ --color_bg0_s: #32302f;
+ --color-bg0: #282828;
+ --color-bg1: #3c3836;
+ --color-bg2: #504845;
+ --color-bg3: #665c54;
+ --color-bg4: #7c6f64;
+ --color-fg0: #fbf1c7;
+ --color-fg1: #ebdbb2;
+ --color-fg2: #d5c4a1;
+ --color-fg3: #bdae93;
+ --color-fg4: #a89984;
+}
+
+@font-face {
+ font-family: FiraCode;
+ src: url(/fonts/FiraCode-Regular.ttf);
+}
+
+body {
+ color: var(--color-fg);
+ background: var(--color-bg);
+ font-family: FiraCode, monospace;
+}
+
+code {
+ font-family: FiraCode, monospace;
+}
+
+pre code {
+ white-space: pre-wrap;
+}
+
+.content-wrapper {}
+
+img {
+ max-width: 100%;
+}
+
+.header {
+ display: block;
+
+ .header__title {
+
+ a,
+ a:link,
+ a:hover,
+ a:visited {
+ color: var(--color-orange-dark) !important;
+ }
+ }
+
+ .header__nav {
+ .header__nav__list {
+ padding-left: 0;
+ display: flex;
+ gap: 1rem;
+
+ .header__nav__list__item {
+ list-style: none;
+ }
+ }
+ }
+}
+
+.main {
+ justify-content: space-between;
+}
+
+.summary {
+ .summary__title {
+
+ a,
+ a:link,
+ a:visited {
+ color: var(--color-orange-dark);
+ }
+
+ a:hover {
+ color: var(--color-orange);
+ }
+ }
+
+ .summary__date {
+ margin-bottom: 8px;
+
+ .summary__date__time {
+ .summary__date__time--created {
+ color: var(--color-aqua);
+ }
+
+ .summary__date__time--edited {
+ color: var(--color-aqua-dark);
+ }
+ }
+ }
+
+ h2 {
+ padding-bottom: 0;
+ margin-bottom: 0;
+ }
+}
+
+.list {
+ display: flex;
+ flex-direction: column;
+
+ .list__title {
+ display: flex;
+
+ h1 {
+ display: inline;
+ }
+
+ a {
+ margin: auto 0 28px 4px;
+ }
+ }
+}
+
+.footer {
+ text-align: center;
+}
+
+.pagination {
+ width: 100%;
+ text-align: center;
+ padding-top: 16px;
+}
+
+a,
+a:visited,
+a:hover {
+ text-decoration: none;
+ color: var(--color-blue-dark);
+}
+
+a:hover {
+ color: var(--color-blue);
+}
+
+h1,
+h2,
+h3,
+h4 {
+ color: var(--color-green-dark);
+}
+
+/* ME */
+
+.home {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ align-items: center;
+
+ .home__content {
+ text-align: justify;
+ max-width: 850px;
+
+ img {
+ border-radius: 16px;
+ float: left;
+ margin: 0 24px 16px 0;
+ }
+ }
+}
+
+/* POSTS */
+
+.single {
+ .single__title {
+ margin-bottom: 0;
+ padding-bottom: 0;
+ color: var(--color-orange-dark);
+ }
+
+ .single__date {
+ color: var(--color-yellow-dark);
+ }
+}
+
+/* SIDEBAR */
+
+.sidebar {
+ ul {
+ list-style: none;
+
+ li {
+ margin-left: -48px;
+ padding: 8px;
+ ;
+ }
+ }
+}
+
+/* SERVICES */
+
+.services {
+ display: flex;
+ flex-direction: column;
+
+ /* .services__title {} */
+
+ .services__list {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ .service {
+ width: 45%;
+ align-self: center;
+ margin: 8px 0;
+
+ h2 {
+ margin: 0;
+ }
+
+ .service__text {
+ padding: 2px;
+ line-height: 24px;
+ background: var(--color-bg0_h);
+ }
+ }
+ }
+}
+
+@media (min-width: 600px) {
+ .main {
+ display: flex;
+ justify-content: space-between;
+
+ .main__content {
+ width: 70%;
+ }
+ }
+
+ .sidebar {
+ width: 25%;
+ max-width: 300px;
+ }
+}
+
+@media (min-width: 800px) {
+ .main {
+ .main__content {
+ width: 74%;
+ }
+ }
+}
+
+@media (min-width: 1000px) {
+ .content-wrapper {
+ max-width: 1000px;
+ margin: 0 auto;
+ }
+}
+
+;