3 files changed, 51 insertions, 11 deletions

diff --git a/wpisy/_header.html b/wpisy/_header.html
index c81a50f..9b6c740 100644
--- a/wpisy/_header.html
+++ b/wpisy/_header.html
@@ -28,7 +28,7 @@
           <a href="/">19 PDH <strong>PUSZCZA</strong></a>
         </div>
         <nav>
-          <a href="/">Strona główna</a>
+          <!-- <a href="/">Strona główna</a> -->
           <a href="/do-pobrania">Do pobrania</a>
           <a href="/kontakt">Kontakt</a>
           <a href="/kronika">Kronika</a>
diff --git a/wpisy/kronika.css b/wpisy/kronika.css
index 32f7860..8428772 100644
--- a/wpisy/kronika.css
+++ b/wpisy/kronika.css
@@ -1,7 +1,7 @@
 .post-link {
   margin: 20px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
-  background: #ffffff;
+  box-shadow: 0px 0px 10px var(--shade);
+  /* background: #ffffff; */
   text-align: left;
   transition: all 300ms ease-in-out;
 }
@@ -12,7 +12,7 @@
 }
 
 .post-link:hover {
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0 20px var(--shade-2);
   transform: scale(1.02);
 }
 
@@ -26,12 +26,12 @@
 }
 
 .post-link .post-title {
-  color: #181818;
+  color: var(--primary-alt-1);
   font-size: 1.3em;
 }
 
 .post-link .post-description {
-  color: #484848;
+  color: var(--primary-alt-2);
   font-size: 0.9em;
 }
 
diff --git a/wpisy/style.css b/wpisy/style.css
index 905b566..30ce0ba 100644
--- a/wpisy/style.css
+++ b/wpisy/style.css
@@ -1,11 +1,30 @@
 :root {
   --primary: #000;
   --bg-primary: #fff;
+  --primary-alt-1: #181818;
+  --primary-alt-2: #484848;
   --secondary: #fff;
   --bg-secondary: #507b34;
+  --shade: rgba(0, 0, 0, 0.25);
+  --shade-2: rgba(0, 0, 0, 0.15);
+  --hover: #507b34;
 
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primary: #fff;
+    --primary-alt-1: #eee;
+    --primary-alt-2: #ddd;
+    --bg-primary: #140C0E;
+    --secondary: #fff;
+    --bg-secondary: #204b04;
+    --shade: rgba(225, 205, 205, 0.25);
+    --shade2: rgba(225, 205, 205, 0.15)
+    --hover: #709b54;
+  }
+}
+
 * {
   box-sizing: border-box;
 }
@@ -15,6 +34,8 @@ html, body {
   padding: 0;
   font-family: "Roboto Slab", sans-serif;
   height: 100%;
+  background-color: var(--bg-primary);
+  color: var(--primary);
 }
 
 nav a {
@@ -27,7 +48,7 @@ a:visited {
 }
 
 a:hover {
-  color: var(--bg-secondary);
+  color: var(--hover);
 }
 
 body {
@@ -41,7 +62,7 @@ main {
 }
 
 header {
-  box-shadow: 0 0 20px rgb(0 0 0 / 10%);
+  box-shadow: 0 0 20px var(--shade);
   padding: 2ex 1ex;
 }
 
@@ -68,7 +89,7 @@ main > p {
   text-align: center;
 }
 
-main img {
+article img {
   display: block;
   margin: 0 auto;
   width: 100%;
@@ -93,8 +114,10 @@ footer > * {
   padding: 1ex;
 }
 
-nav ul {
-  list-style: none;
+nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
 }
 
 footer {
@@ -127,3 +150,20 @@ footer img {
 .secondary a:hover {
   color: #eee;
 }
+
+@media (max-width: 580px) {
+  header > div {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  header > div > * {
+    margin: 10px;
+  }
+}
+
+@media (max-width: 470px) {
+  nav {
+    flex-direction: column;
+  }
+}