From 9b826fde5fe965b0dc1e58ca0802168a40290880 Mon Sep 17 00:00:00 2001 From: Yasuaki Uechi Date: Fri, 7 Feb 2020 12:37:31 +0900 Subject: [PATCH] chore: update style --- _layouts/post.html | 10 +++++----- _posts/2020-02-07-secure-dev-server.md | 4 ++-- _sass/post.scss | 8 ++++---- css/index.scss | 27 ++++++++++++-------------- 4 files changed, 23 insertions(+), 26 deletions(-) diff --git a/_layouts/post.html b/_layouts/post.html index 5c08c4b..a5c04ab 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -50,12 +50,12 @@ layout: default - - - - + + + + \ No newline at end of file diff --git a/_posts/2020-02-07-secure-dev-server.md b/_posts/2020-02-07-secure-dev-server.md index 5f9df3e..bd10b8c 100644 --- a/_posts/2020-02-07-secure-dev-server.md +++ b/_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 diff --git a/_sass/post.scss b/_sass/post.scss index fb180b0..561e29c 100644 --- a/_sass/post.scss +++ b/_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; diff --git a/css/index.scss b/css/index.scss index 1dc0410..03b5d4c 100644 --- a/css/index.scss +++ b/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'; - -webkit-font-feature-settings: 'kern', 'palt', 'pwid'; - -moz-font-feature-settings: 'kern', 'palt', 'pwid'; - -moz-font-feature-settings: 'kern=1', 'palt', 'pwid'; + 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=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-size: 14px; - padding: 12px 16px; - line-height: 1.8em; + // font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; + // font-size: 14px; + padding: 12px 18px !important; + line-height: 1.6em !important; } 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";