Update theme for 2019

source/css/header.css

@@ -10,24 +10,6 @@
     background: #252627;
   }
 
-  .bulb {
-    &-on {
-      display: none;
-
-      .dark-theme & {
-        display: block;
-      }
-    }
-
-    &-off {
-      display: block;
-
-      .dark-theme & {
-        display: none;
-      }
-    }
-  }
-
   &__right {
     display: flex;
     flex-direction: row;
@@ -49,5 +31,13 @@
 }
 
 .theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
   cursor: pointer;
 }
+
+.theme-toggler {
+  fill: currentColor;
+}

source/css/inter-ui.css

@@ -16,14 +16,14 @@
 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
-  font-weight: 500;
+  font-weight: 600;
   src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"),
        url("../fonts/Inter-UI-Medium.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
-  font-weight: 500;
+  font-weight: 600;
   src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
        url("../fonts/Inter-UI-MediumItalic.woff") format("woff");
 }
@@ -31,29 +31,14 @@
 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
-  font-weight: 700;
+  font-weight: 800;
   src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"),
        url("../fonts/Inter-UI-Bold.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
-  font-weight: 700;
+  font-weight: 800;
   src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
        url("../fonts/Inter-UI-BoldItalic.woff") format("woff");
 }
-
-@font-face {
-  font-family: 'Inter UI';
-  font-style:  normal;
-  font-weight: 900;
-  src: url("../fonts/Inter-UI-Black.woff2") format("woff2"),
-       url("../fonts/Inter-UI-Black.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter UI';
-  font-style:  italic;
-  font-weight: 900;
-  src: url("../fonts/Inter-UI-BlackItalic.woff2") format("woff2"),
-       url("../fonts/Inter-UI-BlackItalic.woff") format("woff");
-}

source/css/logo.css

@@ -12,13 +12,17 @@
     margin-right: 5px;
   }
 
+  &__text {
+    font-size: 1.125rem;
+  }
+
   &__cursor {
     display: inline-block;
-    width: 2px;
+    width: 10px;
     height: 1rem;
     background: #fe5186;
     margin-left: 5px;
-    border-radius: 2px;
+    border-radius: 1px;
     animation: cursor 1s infinite;
   }
 }

source/css/main.css

@@ -12,7 +12,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",  Helvetica, Arial, sans-serif;
-  font-size: 18px;
+  font-size: 1rem;
   line-height: 1.54;
   background-color: var(--light-background);
   color: var(--light-color);
@@ -146,10 +146,10 @@ code {
 }
 
 pre {
-  background: #1a1a1d;
+  background: #212020;
   padding: 20px;
   border-radius: 8px;
-  font-size: 1rem;
+  font-size: .95rem;
   overflow: auto;
 
   @media (--phone) {
@@ -163,6 +163,10 @@ pre {
     margin: 0;
     padding: 0;
     font-size: inherit;
+
+    .dark-theme & {
+      color: inherit;
+    }
   }
 }
 

source/css/menu.css

@@ -1,7 +1,7 @@
 .menu {
   background: #fafafa;
   border-right: 1px solid;
-  margin-right: 10px;
+  margin-right: 18px;
 
   .dark-theme & {
     background: #252627;
@@ -27,11 +27,7 @@
     list-style: none;
 
     li {
-      margin: 0 10px;
-
-      &:last-of-type {
-        margin-right: 0;
-      }
+      margin: 0 12px;
     }
 
     @media (--phone) {

source/css/pagination.css

@@ -1,6 +1,6 @@
 .pagination {
   margin-top: 50px;
-  
+
   &__title {
     display: flex;
     text-align: center;
@@ -37,11 +37,60 @@
 
   &__buttons {
     display: flex;
-    justify-content: space-around;
+    align-items: center;
+    justify-content: center;
+    width: 1024px;
+    max-width: 100%;
 
     a {
       text-decoration: none;
       font-weight: bold;
     }
   }
-}
+}
+
+.button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--light-background-secondary);
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: 8px;
+  max-width: 40%;
+  padding: 0;
+  cursor: pointer;
+  appearance: none;
+
+  .dark-theme & {
+    background: var(--dark-background-secondary);
+  }
+
+  + .button {
+    margin-left: 10px;
+  }
+
+  a {
+    display: flex;
+    padding: 8px 16px;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &__text {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &.next .button__icon {
+    margin-left: 8px;
+  }
+
+  &.previous .button__icon {
+    margin-right: 8px;
+  }
+}

source/css/prism.css

@@ -38,7 +38,7 @@ pre[class*="language-"] {
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-	background: #1a1a1d !important;
+	background: #212020 !important;
 	border-radius: 8px;
 }