chore: update style

_layouts/post.html

@@ -50,12 +50,12 @@ layout: default
 <!-- Syntax Highlight -->
 <link
   rel="stylesheet"
-  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"
+  href="https://unpkg.com/highlight.js@9.18.1/styles/night-owl.css"
 />
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+<script src="https://unpkg.com/highlight.js@9.18.1/lib/highlight.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js"></script>
+<script src="https://unpkg.com/highlight.js@9.18.1/lib/languages/go.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/scss.min.js"></script>
+<script src="https://unpkg.com/highlight.js@9.18.1/lib/languages/scss.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/lua.min.js"></script>
+<script src="https://unpkg.com/highlight.js@9.18.1/lib/languages/lua.js"></script>
 <script>
   hljs.initHighlightingOnLoad()
 </script>

_posts/2020-02-07-secure-dev-server.md

@@ -7,14 +7,14 @@ Sometimes you want to interact with a local webserver with https support because
 
 You can easily create a self-signed TLS cert for development purposes with [`mkcert`](https://github.com/FiloSottile/mkcert).
 
-```shell
+```bash
 brew install mkcert
 mkcert -install # Install the local CA in the OS keychain
 ```
 
 After installing `mkcert` and generating system-wide local CA cert, you can create a certificate for each project.
 
-```
+```bash
 cd awesome-website
 mkcert localhost # this will generate ./localhost.pem and ./localhost-key.pem
 npm install -g serve

_sass/post.scss

@@ -23,7 +23,7 @@ a.article-list__item__button {
   border: 1px solid #989898;
   border-radius: 3px;
   color: #989898;
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
   font-size: 14px;
   display: inline-block;
   margin: 10px 0;
@@ -73,7 +73,7 @@ a.article-list__item__button {
 }
 
 .article__title {
-  font-size: 80px;
+  font-size: 70px;
   letter-spacing: -0.5px;
 
   @media screen and (max-width: $break-small) {
@@ -87,7 +87,7 @@ a.article-list__item__button {
   font-size: 14px;
   font-weight: normal;
   font-family: sans-serif;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   border: 1px solid #989898;
   display: inline-block;
   padding: 5px 20px;
@@ -103,7 +103,7 @@ a.article-list__item__button {
     font-size: 20px;
     font-weight: normal;
     line-height: 1.666em;
-    margin: 35px 0;
+    margin: 25px 0;
 
     @media screen and (max-width: $break-small) {
       font-size: 20px;

css/index.scss

@@ -1,7 +1,7 @@
 ---
 ---
 
-@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');
+@import url("https://fonts.googleapis.com/css?family=PT+Sans:400,700");
 
 $break-small: 500px;
 $break-large: 840px;
@@ -10,13 +10,13 @@ body {
   width: 900px;
   margin: 0 auto;
   padding: 0 20px;
-  font-family: 'PT Sans', 'Hiragino Sans', 'Hiragino Mincho ProN', serif;
+  font-family: "PT Sans", "Hiragino Sans", "Hiragino Mincho ProN", serif;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-feature-settings: 'kern', 'palt', 'pwid';
+  font-feature-settings: "kern", "palt", "pwid";
-  -webkit-font-feature-settings: 'kern', 'palt', 'pwid';
+  -webkit-font-feature-settings: "kern", "palt", "pwid";
-  -moz-font-feature-settings: 'kern', 'palt', 'pwid';
+  -moz-font-feature-settings: "kern", "palt", "pwid";
-  -moz-font-feature-settings: 'kern=1', 'palt', 'pwid';
+  -moz-font-feature-settings: "kern=1", "palt", "pwid";
 
   @media screen and (max-width: $break-large) {
     width: auto;
@@ -31,13 +31,11 @@ body {
 
 // Highlight.js
 .hljs {
-  border: 1px solid #d7d7d7;
   border-radius: 3px;
-  background-color: #fff;
+  // font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  // font-size: 14px;
-  font-size: 14px;
+  padding: 12px 18px !important;
-  padding: 12px 16px;
+  line-height: 1.6em !important;
-  line-height: 1.8em;
 }
 code {
   padding: 0 12px;
@@ -76,13 +74,12 @@ hr {
 .header {
   display: flex;
   flex-wrap: wrap;
-  // justify-content: space-between;
   align-items: center;
   margin-top: 50px;
   padding: 15px 0;
-  // border-bottom: 1px solid #efefef;
 
   @media screen and (max-width: $break-small) {
+    margin-top: 0px;
     justify-content: center;
     flex-direction: column;
   }
@@ -141,4 +138,4 @@ hr {
   }
 }
 
-@import './post';
+@import "./post";