update styles

bguzryanto · Feb 18, 2020 · d121c8c · d121c8c
1 parent c832983
commit d121c8c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -7,7 +7,7 @@ import Menu from "./Menu";
 const Layout = styled.div`
   max-width: 70rem;
   text-align: justify;
-  font-family: "Roboto Mono", monospace;
+  font-size: 1.6rem;
 
   ${breakpoint("mobile")`
     margin: 2.5rem 2rem 0 2rem;
@@ -16,9 +16,9 @@ const Layout = styled.div`
   ${breakpoint("desktop")`
     margin: 7.5rem 0 0 7.5rem;
   `};
-
+  
   p {
-    font-size: 1.35rem;
+    font-size: 2rem;
     line-height: 2.2rem;
     color: #000;
     text-align: justify;
@@ -35,12 +35,27 @@ const Layout = styled.div`
 
   ul li {
     font-weight: normal;
+
+    ${breakpoint("desktop")`
+      font-size: 1.6rem;
+      line-height: 2.9rem;
+    `}
   }
 
   a {
     text-decoration: underline;
     color: rgb(220, 40, 40);
   }
+
+  @media (prefers-color-scheme: dark) {
+    p {
+      color: #ddd;
+    }
+
+    ul li a:active {
+      color: #fff;
+    }
+  }
 `;
 
 export default ({ children }) => (

diff --git a/pages/_document.js b/pages/_document.js
@@ -17,8 +17,14 @@ const GlobalStyle = createGlobalStyle`
     background-color: rgba(255, 255, 255, 1);
   }
 
-  h1, h2,h3,h4, h5, h6 {
-    font-family: "europa",sans-serif;
+  @media (prefers-color-scheme: dark) {
+    html {
+      color: #fff;
+      background-color: #222;
+    }
+  }
+
+  h1, h2, h3, h4, h5, h6 {
   }
 
   p {
@@ -64,7 +70,7 @@ export default class MyDocument extends Document {
             name="viewport"
             content="width=device-width, initial-scale=1.0"
           />
-          <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville|Roboto+Mono&display=swap" rel="stylesheet" />
+          <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville|Roboto+Mono&display=fallback" rel="stylesheet" />
           <GlobalStyle />
           {this.props.style}
           <script