UPDATE: blog style & content

1 files changed, 40 insertions, 25 deletions

diff --git a/assets/style/style.css b/assets/style/style.css
index b2e7eb0..e06fb1b 100644
--- a/assets/style/style.css
+++ b/assets/style/style.css
@@ -1,19 +1,24 @@
+@font-face {
+  font-family: "BlockZone";
+  src: url("../fonts/BlockZone.ttf") format("truetype");
+}
+
 /* Root */
 :root 
 {
     /* Dark mode */
-    --dark-bg: #0d0d0d;
-    --dark-text: #ffdab9;
-    --dark-link: black;
+    --dark-bg: #191919;
+    --dark-text: #BBBBBB;
+    --dark-link: #191919;
     --dark-link-bg: #f08080;
     --dark-title: #f08080;
 
     /* Light mode */
     --light-bg: #ffdab9;
-    --light-text: #0d0d0d;
-    --light-link: black;
-    --light-link-bg: #f08080;
-    --light-title: #f08080;
+    --light-text: #191919;
+    --light-link: #191919;
+    --light-link-bg: #DE6E7C;
+    --light-title: #DE6E7C;
 
     /* Default mode */
     --bg-color: var(--dark-bg);
@@ -31,9 +36,11 @@ body
     color: var(--text-color);
     border: 1px solid var(--link-bg-color);
 
+	font-size: calc(10px + 0.390625vw);
+	font-family: "BlockZone";
+
     width: 90vw;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0 auto;
     text-align: center;
 }
 
@@ -123,7 +130,16 @@ h1, h2, h3, h4 {
 }
 
 h1 {
-    border-bottom: 1px solid var(--title-color);
+	width: 80%;
+	margin: 0 auto;
+
+	text-align: center;
+    border: 1px solid var(--title-color);
+}
+
+main div.h1-content {
+	width: 80%;
+	margin: 0 auto;
 }
 
 #contact ul 
@@ -131,21 +147,20 @@ h1 {
     margin-bottom: 2vh;
 }
 
-/* Responsive design */
 @media screen and (max-width: 700px) 
 {
     body 
     {
-	font-size: 10px;
+		font-size: 10px;
     }
 }
 
-@media screen and (max-width: 500px) 
+@media screen and (max-width: 600px) 
 {
     nav ul, #contact ul
     {
-	flex-direction: column;
-	gap: 0.5rem;
+		flex-direction: column;
+		gap: 0.5rem;
     }
 }
 
@@ -154,11 +169,11 @@ h1 {
 {
     :root 
     {
-	--bg-color: var(--dark-bg);
-	--text-color: var(--dark-text);
-	--link-color: var(--dark-link);
-	--link-bg-color: var(--dark-link-bg);
-	--title-color: var(--dark-title);
+		--bg-color: var(--dark-bg);
+		--text-color: var(--dark-text);
+		--link-color: var(--dark-link);
+		--link-bg-color: var(--dark-link-bg);
+		--title-color: var(--dark-title);
     }
 }
 
@@ -167,10 +182,10 @@ h1 {
 {
     :root
     {
-	--bg-color: var(--light-bg);
-	--text-color: var(--light-text);
-	--link-color: var(--light-link);
-	--link-bg-color: var(--light-link-bg);
-	--title-color: var(--light-title);
+		--bg-color: var(--light-bg);
+		--text-color: var(--light-text);
+		--link-color: var(--light-link);
+		--link-bg-color: var(--light-link-bg);
+		--title-color: var(--light-title);
     }
 }