chore: update style

This commit is contained in:
uetchy 2020-02-07 12:37:31 +09:00
parent d8cac182fc
commit 9b826fde5f
4 changed files with 23 additions and 26 deletions

View File

@ -50,12 +50,12 @@ layout: default
<!-- Syntax Highlight --> <!-- Syntax Highlight -->
<link <link
rel="stylesheet" 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> <script>
hljs.initHighlightingOnLoad() hljs.initHighlightingOnLoad()
</script> </script>

View File

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

View File

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

View File

@ -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-small: 500px;
$break-large: 840px; $break-large: 840px;
@ -10,13 +10,13 @@ body {
width: 900px; width: 900px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px; 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; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; 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) { @media screen and (max-width: $break-large) {
width: auto; width: auto;
@ -31,13 +31,11 @@ body {
// Highlight.js // Highlight.js
.hljs { .hljs {
border: 1px solid #d7d7d7;
border-radius: 3px; 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 { code {
padding: 0 12px; padding: 0 12px;
@ -76,13 +74,12 @@ hr {
.header { .header {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
// justify-content: space-between;
align-items: center; align-items: center;
margin-top: 50px; margin-top: 50px;
padding: 15px 0; padding: 15px 0;
// border-bottom: 1px solid #efefef;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
margin-top: 0px;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
} }
@ -141,4 +138,4 @@ hr {
} }
} }
@import './post'; @import "./post";