-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
separate common stylesheet from each html
- Loading branch information
Showing
11 changed files
with
333 additions
and
340 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,311 @@ | ||
| /************ common style ************/ | ||
|
|
||
| html { | ||
| background-color: #f9f9f9; | ||
| background-image: linear-gradient(90deg, #0000 0, #0000 9.8mm, #eee 9.8mm, #eee 10mm), linear-gradient(0deg, #0000 0, #0000 9.8mm, #eee 9.8mm, #eee 10mm); | ||
| background-size: 10mm 10mm; | ||
| color: #322; | ||
| } | ||
| body { | ||
| display: flex; | ||
| flex-direction: column; | ||
| min-height: 100dvh; | ||
| box-sizing: border-box; | ||
| margin: 0 auto; | ||
| padding: 0 8px; | ||
| max-width: 1200px; | ||
| line-break: strict; | ||
| } | ||
| body > div { | ||
| flex: 1; | ||
| } | ||
| a { | ||
| color: #43e; | ||
| } | ||
|
|
||
| header { | ||
| margin: 48px 0; | ||
| padding: 0 8px; | ||
| } | ||
| nav { | ||
| text-align: center; | ||
| font-size: 120%; | ||
| } | ||
| nav .site-name { | ||
| font-size: 120%; | ||
| font-weight: bold; | ||
| } | ||
| nav ul { | ||
| display: block; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| nav li { | ||
| display: inline-block; | ||
| margin: 0 4px; | ||
| padding: 0; | ||
| } | ||
| nav a { | ||
| color: inherit; | ||
| text-decoration: none; | ||
| } | ||
| nav li > a { | ||
| padding: 0 8px; | ||
| } | ||
| .pageqr { | ||
| display: none; | ||
| } | ||
|
|
||
| main { | ||
| padding: 0 8px; | ||
| } | ||
|
|
||
| h1, h2, h3, h4, h5, h6 { | ||
| word-break: auto-phrase; | ||
| } | ||
| h2 a, h3 a, h4 a, h5 a, h6 a { | ||
| color: inherit; | ||
| text-decoration: none; | ||
| } | ||
| h1 { | ||
| font-weight: normal; | ||
| font-size: 250%; | ||
| margin: 0 0 8px; | ||
| } | ||
| h2 { | ||
| font-size: 180%; | ||
| font-weight: normal; | ||
| margin: 1.5em 0 .5em; | ||
| } | ||
| article h2::before { | ||
| content: '# '; | ||
| opacity: .3; | ||
| } | ||
| h3 { | ||
| font-size: 150%; | ||
| font-weight: normal; | ||
| margin: 1.5em 0 0; | ||
| } | ||
| article h3::before { | ||
| content: '## '; | ||
| opacity: .3; | ||
| } | ||
| article h4::before { | ||
| content: '### '; | ||
| opacity: .3; | ||
| } | ||
| article h5::before { | ||
| content: '#### '; | ||
| opacity: .3; | ||
| } | ||
| article h6::before { | ||
| content: '##### '; | ||
| opacity: .3; | ||
| } | ||
|
|
||
| img { | ||
| display: inline-block; | ||
| background-color: #eeea; | ||
| max-width: 100%; | ||
| height: auto; | ||
| } | ||
|
|
||
| .bread-crumbs { | ||
| display: block; | ||
| margin: 0 0 -4px; | ||
| padding: 0; | ||
| font-size: 90%; | ||
| } | ||
| .bread-crumbs li { | ||
| display: inline-block; | ||
| } | ||
| .bread-crumbs li::after { | ||
| content: '>'; | ||
| margin: 0 0.5em; | ||
| opacity: .7; | ||
| } | ||
| .bread-crumbs a { | ||
| color: inherit; | ||
| text-decoration: none; | ||
| } | ||
| footer { | ||
| text-align: center; | ||
| font-size: 80%; | ||
| margin: 52px 0 4px; | ||
| opacity: .8; | ||
| } | ||
| footer > a { | ||
| color: inherit; | ||
| margin-right: 4px; | ||
| } | ||
|
|
||
| @media (hover: hover) { | ||
| nav a:hover, .bread-crumbs a:hover { | ||
| text-decoration: underline; | ||
| } | ||
| } | ||
| @media (hover: none) { | ||
| header { | ||
| margin: 24px 0 32px; | ||
| } | ||
| header > nav > ul { | ||
| margin-top: 8px; | ||
| } | ||
| header > nav li > a { | ||
| padding: 8px; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (prefers-color-scheme: dark) { | ||
| html { | ||
| background-color: #484040; | ||
| background-image: linear-gradient(90deg, #0000 0, #0000 9.8mm, #4f4a4a 9.8mm, #4f4a4a 10mm), linear-gradient(0deg, #0000 0, #0000 9.8mm, #4f4a4a 9.8mm, #4f4a4a 10mm); | ||
| color: #eee; | ||
| } | ||
| a { | ||
| color: #aaf; | ||
| } | ||
| img { | ||
| background-color: #666; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (prefers-color-scheme: light) and (prefers-contrast: more) { | ||
| html { | ||
| background-color: #fff; | ||
| background-image: none; | ||
| color: #000; | ||
| } | ||
| a { | ||
| color: #00a; | ||
| } | ||
| } | ||
| @media screen and (prefers-color-scheme: dark) and (prefers-contrast: more) { | ||
| html { | ||
| background-color: #000; | ||
| background-image: none; | ||
| color: #fff; | ||
| } | ||
| a { | ||
| color: #aaf; | ||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
||
| /************ for blog post ************/ | ||
|
|
||
| .metadata { | ||
| margin: 0 0 48px; | ||
| text-align: center; | ||
| } | ||
| .tags { | ||
| display: inline; | ||
| padding: 0; | ||
| } | ||
| .tags li { | ||
| display: inline-block; | ||
| margin: 0 0 0 8px; | ||
| padding: 0; | ||
| } | ||
| .tags a { | ||
| text-decoration: none; | ||
| } | ||
| .tags a::before { | ||
| content: '#'; | ||
| } | ||
|
|
||
| article table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| } | ||
| article table th { | ||
| background-color: rgba(160,160,160,.2); | ||
| } | ||
| article table th, article table td { | ||
| padding: 4px 12px; | ||
| border: 1px solid rgba(160,160,160,.8); | ||
| } | ||
|
|
||
| .chroma { | ||
| overflow-x: auto; | ||
| padding: 16px 12px; | ||
| border: 1px solid #433; | ||
| line-height: 1.5; | ||
| font-family: monospace, sans-serif; | ||
| } | ||
| code { | ||
| padding: 2px 8px; | ||
| background-color: rgba(160,160,160,.2); | ||
| } | ||
|
|
||
| ins { | ||
| display: block; | ||
| border: 1px solid #655; | ||
| padding: 1em 1em .5em; | ||
| margin: .5em 0; | ||
| text-decoration: none; | ||
| } | ||
| ins h1, ins h2, ins h3, ins h4, ins h5, ins h6 { | ||
| font-size: 120%; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .share { | ||
| margin: 32px 0 0; | ||
| text-align: center; | ||
| } | ||
| .share > a, .share > button { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin: 0 8px; | ||
| padding: 8px 24px; | ||
| background-color: #666; | ||
| text-decoration: none; | ||
| font-size: inherit; | ||
| cursor: pointer; | ||
| border: none; | ||
| } | ||
| .share svg { | ||
| height: 2em; | ||
| width: auto; | ||
| } | ||
| .share path { | ||
| fill: #eee; | ||
| } | ||
| @media screen and (max-width: 33em) { | ||
| .share { | ||
| display: flex; | ||
| } | ||
| .share > a, .share > button { | ||
| flex: 1 1 0; | ||
| margin: 0 4px; | ||
| padding: 8px 12px; | ||
| } | ||
| .share svg { | ||
| height: auto; | ||
| max-height: 2em; | ||
| width: 100%; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (prefers-color-scheme: dark) { | ||
| .chroma { | ||
| border: none; | ||
| } | ||
| .share > a, .share > button { | ||
| background-color: #ccc; | ||
| } | ||
| .share path { | ||
| fill: #444; | ||
| } | ||
| ins { | ||
| border-color: #aaa; | ||
| } | ||
| } | ||
| @media (hover: hover) { | ||
| .tags a:hover { | ||
| text-decoration: underline; | ||
| } | ||
| } |
Oops, something went wrong.