make css external
This commit is contained in:
sup39
parent
2d083d8918
commit
9bb235133b
11 changed files with 13 additions and 572 deletions
13
pages/_document.tsx
Normal file
13
pages/_document.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import {Html, Head, Main, NextScript} from 'next/document';
|
||||||
|
|
||||||
|
export default function Document() {
|
||||||
|
return <Html>
|
||||||
|
<Head>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.sup39.dev/css/index.css" />
|
||||||
|
</Head>
|
||||||
|
<body>
|
||||||
|
<Main />
|
||||||
|
<NextScript />
|
||||||
|
</body>
|
||||||
|
</Html>;
|
||||||
|
}
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
// SPDX-License-Identifier: MIT
|
|
||||||
// Copyright (c) 2022 sup39
|
|
||||||
|
|
||||||
a, .link
|
|
||||||
color: #72E5DB
|
|
||||||
text-decoration: none
|
|
||||||
cursor: pointer
|
|
||||||
a:hover, .link:hover
|
|
||||||
color: #72E5DB
|
|
||||||
text-decoration: underline
|
|
||||||
a:active, .link:active
|
|
||||||
color: #A0E5DF
|
|
||||||
text-decoration: underline
|
|
||||||
|
|
||||||
a.anchor
|
|
||||||
float: left
|
|
||||||
padding-right: 4px
|
|
||||||
margin-left: -24px
|
|
||||||
a.anchor:before
|
|
||||||
content: ""
|
|
||||||
background-image: url("https://cdn.sup39.dev/img/anchor.svg")
|
|
||||||
width: 16px
|
|
||||||
height: 16px
|
|
||||||
vertical-align: middle
|
|
||||||
margin: 0 0 4px 0
|
|
||||||
display: inline-block
|
|
||||||
visibility: hidden
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
// SPDX-License-Identifier: MIT
|
|
||||||
// Copyright (c) 2022 sup39
|
|
||||||
|
|
||||||
code
|
|
||||||
font-family: Menlo, Monaco, Consolas, "Courier New", "Hiragino Kaku Gothic ProN", monospace
|
|
||||||
padding: 2px 4px
|
|
||||||
margin: 0 1px 0 0
|
|
||||||
font-size: 90%
|
|
||||||
font-variant-numeric: slashed-zero
|
|
||||||
background-color: #4a4a4a
|
|
||||||
border-radius: 4px
|
|
||||||
white-space: nowrap
|
|
||||||
pre code
|
|
||||||
white-space: break-spaces
|
|
||||||
background: unset
|
|
||||||
padding: 0
|
|
||||||
margin: 0
|
|
||||||
pre
|
|
||||||
background: #333
|
|
||||||
color: #fff
|
|
||||||
border-radius: 4px
|
|
||||||
overflow-x: auto
|
|
||||||
padding: 0.6em
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
// SPDX-License-Identifier: MIT
|
|
||||||
// Copyright (c) 2022 sup39
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6
|
|
||||||
margin: 0
|
|
||||||
h1
|
|
||||||
font-size: 2.5em
|
|
||||||
font-weight: 600
|
|
||||||
line-height: 1.3
|
|
||||||
margin-bottom: 0.5em
|
|
||||||
h2
|
|
||||||
font-size: 1.8em
|
|
||||||
font-weight: 500
|
|
||||||
line-height: 1.3
|
|
||||||
padding-bottom: 0.1em
|
|
||||||
border-bottom: 1px solid var(--bd)
|
|
||||||
margin-top: 1.0em
|
|
||||||
margin-bottom: 0.25em
|
|
||||||
h3
|
|
||||||
font-size: 1.5em
|
|
||||||
font-weight: bold
|
|
||||||
line-height: 1.6
|
|
||||||
margin-top: 0.5em
|
|
||||||
h4
|
|
||||||
font-size: 1.2em
|
|
||||||
font-weight: 600
|
|
||||||
margin-top: 1em
|
|
||||||
h5
|
|
||||||
font-size: 1.1em
|
|
||||||
font-weight: 500
|
|
||||||
margin-top: 1em
|
|
||||||
h6
|
|
||||||
font-size: 1em
|
|
||||||
font-weight: 400
|
|
||||||
margin-top: 1em
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
@import './vars.sass'
|
|
||||||
@import './nav.sass'
|
|
||||||
@import './menu-toggle.sass'
|
|
||||||
@import './heading.sass'
|
|
||||||
@import './span.sass'
|
|
||||||
@import './a.sass'
|
|
||||||
@import './code.sass'
|
|
||||||
@import './misc.sass'
|
|
||||||
|
|
||||||
@media only screen and (min-width: 768px)
|
|
||||||
@import './nav.pc.sass'
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
// SPDX-License-Identifier: MIT
|
|
||||||
// Copyright (c) 2022 sup39
|
|
||||||
|
|
||||||
.menu-toggle
|
|
||||||
width: 20px
|
|
||||||
height: 20px
|
|
||||||
display: block
|
|
||||||
cursor: pointer
|
|
||||||
.menu-toggle:before
|
|
||||||
top: 30%
|
|
||||||
.menu-toggle:after
|
|
||||||
top: 70%
|
|
||||||
|
|
||||||
.menu-toggle:before,
|
|
||||||
.menu-toggle:after
|
|
||||||
position: absolute
|
|
||||||
content: ""
|
|
||||||
width: 100%
|
|
||||||
height: 2px
|
|
||||||
transform: translate(0, -50%)
|
|
||||||
background: var(--fg)
|
|
||||||
transition: all .25s ease-out
|
|
||||||
|
|
||||||
.open
|
|
||||||
.menu-toggle:before
|
|
||||||
transform: translate(0, -50%) rotate(135deg)
|
|
||||||
.menu-toggle:after
|
|
||||||
transform: translate(0, -50%) rotate(-135deg)
|
|
||||||
.menu-toggle:before,
|
|
||||||
.menu-toggle:after
|
|
||||||
top: 50%
|
|
||||||
left: -10%
|
|
||||||
width: 120%
|
|
||||||
|
|
||||||
@media only screen and (min-width: 768px)
|
|
||||||
.menu-toggle
|
|
||||||
display: none
|
|
||||||
261
styles/misc.sass
261
styles/misc.sass
|
|
@ -1,261 +0,0 @@
|
||||||
// SPDX-License-Identifier: MIT
|
|
||||||
// Copyright (c) 2022 sup39
|
|
||||||
|
|
||||||
html
|
|
||||||
font-size: 16px
|
|
||||||
body
|
|
||||||
color: var(--fg)
|
|
||||||
background: var(--bg)
|
|
||||||
line-height: 1.6
|
|
||||||
font-weight: 300
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, Verdana, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
|
|
||||||
font-variant-numeric: tabular-nums
|
|
||||||
margin: 0
|
|
||||||
*
|
|
||||||
box-sizing: border-box
|
|
||||||
|
|
||||||
/**** font ****/
|
|
||||||
html:lang(zh-TW) body
|
|
||||||
font-family: "SF Pro TC","SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif
|
|
||||||
|
|
||||||
/**** image ****/
|
|
||||||
article img
|
|
||||||
max-width: 100%
|
|
||||||
height: auto
|
|
||||||
margin: 1em 0
|
|
||||||
|
|
||||||
#icon-link
|
|
||||||
text-decoration: none
|
|
||||||
> *
|
|
||||||
float: left
|
|
||||||
.icon
|
|
||||||
width: 72px
|
|
||||||
height: 72px
|
|
||||||
.icon-text
|
|
||||||
height: 72px
|
|
||||||
font-size: 27px
|
|
||||||
font-weight: 600
|
|
||||||
line-height: 1.2
|
|
||||||
padding-left: 16px
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
text-align: center
|
|
||||||
.pink
|
|
||||||
font-size: 24px
|
|
||||||
#icon-link:link
|
|
||||||
color: unset
|
|
||||||
|
|
||||||
/**** main ****/
|
|
||||||
main
|
|
||||||
padding: 24px
|
|
||||||
article
|
|
||||||
font-weight: 300
|
|
||||||
h3
|
|
||||||
+ table, + h4
|
|
||||||
margin-top: 0.5em
|
|
||||||
h4 + table
|
|
||||||
margin-top: 0.5em
|
|
||||||
table
|
|
||||||
margin-block-start: 1em
|
|
||||||
margin-block-end: 1em
|
|
||||||
table,
|
|
||||||
table th,
|
|
||||||
table td
|
|
||||||
border: solid 1px var(--bd)
|
|
||||||
border-collapse: collapse
|
|
||||||
padding: 4px
|
|
||||||
> ul
|
|
||||||
padding-inline-start: 2em
|
|
||||||
margin-block-start: 0.5em
|
|
||||||
margin-block-end: 1em
|
|
||||||
ul ul
|
|
||||||
padding-inline-start: 1.25em
|
|
||||||
> h2 + ul
|
|
||||||
padding-inline-start: 1.5em
|
|
||||||
|
|
||||||
footer
|
|
||||||
background: #18181e
|
|
||||||
background: #222
|
|
||||||
font-size: 0.75em
|
|
||||||
line-height: 1em
|
|
||||||
padding: 1.5em 2em
|
|
||||||
margin-top: 1em
|
|
||||||
|
|
||||||
p + *.compact
|
|
||||||
margin-block-start: -1em
|
|
||||||
*.compact
|
|
||||||
margin-block-start: 0em
|
|
||||||
|
|
||||||
/**** table ****/
|
|
||||||
.tac
|
|
||||||
text-align: center
|
|
||||||
.tar
|
|
||||||
text-align: right
|
|
||||||
table.tb-r tbody
|
|
||||||
text-align: right
|
|
||||||
|
|
||||||
/**** form ****/
|
|
||||||
form > div
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
> *
|
|
||||||
margin: 3px
|
|
||||||
|
|
||||||
/**** input ****/
|
|
||||||
input, textarea
|
|
||||||
color: var(--fg)
|
|
||||||
background: #222
|
|
||||||
border: var(--bd) solid 1px
|
|
||||||
font-size: 1em
|
|
||||||
input[invalid]
|
|
||||||
background: #600
|
|
||||||
input[type="number"]
|
|
||||||
text-align: right
|
|
||||||
|
|
||||||
/**** button ****/
|
|
||||||
button,
|
|
||||||
input[type="button"],
|
|
||||||
input[type="submit"],
|
|
||||||
input[type="reset"]
|
|
||||||
color: var(--fg)
|
|
||||||
background: #2a8
|
|
||||||
border: #2a8 1px solid
|
|
||||||
border-radius: 4px
|
|
||||||
font-size: 14px
|
|
||||||
cursor: pointer
|
|
||||||
button:hover,
|
|
||||||
input[type="button"]:hover,
|
|
||||||
input[type="submit"]:hover,
|
|
||||||
input[type="reset"]:hover
|
|
||||||
border: #197 1px solid
|
|
||||||
background: #197
|
|
||||||
button:active,
|
|
||||||
input[type="button"]:active,
|
|
||||||
input[type="submit"]:active,
|
|
||||||
input[type="reset"]:active
|
|
||||||
border: #075 1px solid
|
|
||||||
background: #075
|
|
||||||
|
|
||||||
button:disabled
|
|
||||||
background: #444
|
|
||||||
border: #555 1px solid
|
|
||||||
cursor: not-allowed
|
|
||||||
button[variant="warning"]
|
|
||||||
background: #c87603
|
|
||||||
border: #c87603 1px solid
|
|
||||||
button[variant="warning"]:enabled:hover
|
|
||||||
background: #b60
|
|
||||||
border: #b60 1px solid
|
|
||||||
button[variant="warning"]:enabled:active
|
|
||||||
background: #a50
|
|
||||||
border: #b60 1px solid
|
|
||||||
button[variant="danger"]:enabled
|
|
||||||
background: #c32
|
|
||||||
border: #c32 1px solid
|
|
||||||
button[variant="danger"]:enabled:hover
|
|
||||||
background: #b21
|
|
||||||
border: #b21 1px solid
|
|
||||||
button[variant="danger"]:enabled:active
|
|
||||||
background: #a10
|
|
||||||
border: #b21 1px solid
|
|
||||||
button.sm
|
|
||||||
font-size: 12px
|
|
||||||
|
|
||||||
/**** div.bt ****/
|
|
||||||
div.bt-plus, div.bt-minus
|
|
||||||
position: relative
|
|
||||||
width: 1.2em
|
|
||||||
height: 1.2em
|
|
||||||
border: #2ee5b8 1px solid
|
|
||||||
border-radius: 4px
|
|
||||||
cursor: pointer
|
|
||||||
user-select: none
|
|
||||||
-webkit-user-select: none
|
|
||||||
-moz-user-select: none
|
|
||||||
-khtml-user-select: none
|
|
||||||
-ms-user-select: none
|
|
||||||
div.bt-plus:before,
|
|
||||||
div.bt-plus:after,
|
|
||||||
div.bt-minus:before
|
|
||||||
content: ""
|
|
||||||
position: absolute
|
|
||||||
top: 50%
|
|
||||||
left: 50%
|
|
||||||
transform: translate(-50%, -50%)
|
|
||||||
width: 50%
|
|
||||||
height: 1px
|
|
||||||
background: var(--fg)
|
|
||||||
div.bt-plus:after
|
|
||||||
width: 1px
|
|
||||||
height: 50%
|
|
||||||
|
|
||||||
/**** variant ****/
|
|
||||||
span.danger
|
|
||||||
color: #f66
|
|
||||||
button.danger
|
|
||||||
background: #a33
|
|
||||||
|
|
||||||
/**** details ****/
|
|
||||||
details
|
|
||||||
border: 1px solid
|
|
||||||
padding: 0.5em 1em
|
|
||||||
margin-block-start: 0.5em
|
|
||||||
margin-block-end: 0.5em
|
|
||||||
> summary
|
|
||||||
padding: 4px 0.5em
|
|
||||||
margin: -0.5em -1em -0.5em
|
|
||||||
details[open]
|
|
||||||
padding-bottom: 0
|
|
||||||
> summary
|
|
||||||
border-bottom: 1px solid
|
|
||||||
margin: -0.5em -1em 0
|
|
||||||
> ul, > ol
|
|
||||||
padding-inline-start: 1.5em
|
|
||||||
|
|
||||||
/**** misc ****/
|
|
||||||
video
|
|
||||||
max-width: 100%
|
|
||||||
.noselect
|
|
||||||
-webkit-touch-callout: none // iOS Safari
|
|
||||||
-webkit-user-select: none // Safari
|
|
||||||
-khtml-user-select: none // Konqueror HTML
|
|
||||||
-moz-user-select: none // Old versions of Firefox
|
|
||||||
-ms-user-select: none // Internet Explorer/Edge
|
|
||||||
user-select: none // Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox
|
|
||||||
|
|
||||||
/**** hide ****/
|
|
||||||
div.hide-ctn
|
|
||||||
position: relative
|
|
||||||
color: #fff
|
|
||||||
margin-block-start: -1em
|
|
||||||
margin-block-end: 2em
|
|
||||||
z-index:-1
|
|
||||||
*
|
|
||||||
position: absolute
|
|
||||||
font-size: 0.25em
|
|
||||||
color: #0000
|
|
||||||
|
|
||||||
/**** highlight ****/
|
|
||||||
table.code-lnum
|
|
||||||
padding: 0
|
|
||||||
margin: 0
|
|
||||||
width: 100%
|
|
||||||
border: none
|
|
||||||
td
|
|
||||||
border: none
|
|
||||||
td:first-child
|
|
||||||
padding-left: 0.5em
|
|
||||||
padding-right: 1em
|
|
||||||
text-align: right
|
|
||||||
td:last-child
|
|
||||||
width: 100%
|
|
||||||
white-space: pre
|
|
||||||
.hljs-comment
|
|
||||||
color: #7d6
|
|
||||||
.hljs-keyword
|
|
||||||
color: #ffa
|
|
||||||
font-weight: bold
|
|
||||||
.hljs-number, .hljs-string
|
|
||||||
color: #ffb7e7
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
// SPDX-License-Identifier: MIT
|
|
||||||
// Copyright (c) 2022 sup39
|
|
||||||
|
|
||||||
nav
|
|
||||||
width: var(--nav-width)
|
|
||||||
overflow: auto
|
|
||||||
position: fixed
|
|
||||||
left: 0
|
|
||||||
top: 0
|
|
||||||
bottom: 0
|
|
||||||
border-bottom: none
|
|
||||||
border-right: 1px solid var(--bd)
|
|
||||||
padding: 1em 1em
|
|
||||||
header
|
|
||||||
margin-bottom: 1em
|
|
||||||
.menu-toggle
|
|
||||||
display: none
|
|
||||||
.nav-root
|
|
||||||
height: auto
|
|
||||||
opacity: 1
|
|
||||||
visibility: visible
|
|
||||||
|
|
||||||
main, footer
|
|
||||||
margin-left: var(--nav-width)
|
|
||||||
main
|
|
||||||
padding: 24px 32px
|
|
||||||
|
|
||||||
*:hover > a.anchor:before
|
|
||||||
visibility: visible
|
|
||||||
|
|
||||||
.mobile-only
|
|
||||||
display: none
|
|
||||||
107
styles/nav.sass
107
styles/nav.sass
|
|
@ -1,107 +0,0 @@
|
||||||
// SPDX-License-Identifier: MIT
|
|
||||||
// Copyright (c) 2022 sup39
|
|
||||||
|
|
||||||
$yellow: #ff9
|
|
||||||
$bd: var(--bd)
|
|
||||||
|
|
||||||
/** mobile */
|
|
||||||
nav
|
|
||||||
width: 100%
|
|
||||||
background: #28282e
|
|
||||||
border-bottom: 1px solid var(--bd)
|
|
||||||
border-right: none
|
|
||||||
padding: 1.25em 1.25em
|
|
||||||
|
|
||||||
header
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
.menu-toggle
|
|
||||||
position: absolute
|
|
||||||
top: 50%
|
|
||||||
right: 1em
|
|
||||||
transform: translate(-50%, -50%)
|
|
||||||
|
|
||||||
.nav-root
|
|
||||||
height: 0
|
|
||||||
// opacity: 0
|
|
||||||
visibility: hidden
|
|
||||||
|
|
||||||
*
|
|
||||||
padding: 0
|
|
||||||
margin: 0
|
|
||||||
|
|
||||||
a
|
|
||||||
display: block
|
|
||||||
color: #eee
|
|
||||||
|
|
||||||
.nav-dir-child
|
|
||||||
padding-left: 1em
|
|
||||||
|
|
||||||
.nav-here, .nav-here a,
|
|
||||||
.nav-here + ul, .nav-here + ul a
|
|
||||||
color: $yellow
|
|
||||||
ul
|
|
||||||
list-style-type: square
|
|
||||||
margin-block-start: 0
|
|
||||||
margin-block-end: 0
|
|
||||||
padding-inline-start: 24px
|
|
||||||
|
|
||||||
.nav-root
|
|
||||||
> div
|
|
||||||
border-top: 1px solid $bd
|
|
||||||
padding: 0.5em 0.5em
|
|
||||||
|
|
||||||
/** heading list */
|
|
||||||
> ul
|
|
||||||
border-top: 1px solid $bd
|
|
||||||
padding-top: 0.75em
|
|
||||||
// margin-bottom: 0.5em
|
|
||||||
|
|
||||||
|
|
||||||
/** here */
|
|
||||||
.nav-here
|
|
||||||
font-weight: bold
|
|
||||||
|
|
||||||
|
|
||||||
/** container of entry */
|
|
||||||
.nav-entry
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
> a
|
|
||||||
flex-grow: 1
|
|
||||||
|
|
||||||
> svg
|
|
||||||
stroke: #9ff
|
|
||||||
fill: none
|
|
||||||
stroke-width: 1
|
|
||||||
stroke-linecap: round
|
|
||||||
stroke-linejoin: round
|
|
||||||
width: 1.2em
|
|
||||||
height: 1.2em
|
|
||||||
cursor: pointer
|
|
||||||
border-radius: 50%
|
|
||||||
> svg:hover
|
|
||||||
background: #18181e
|
|
||||||
|
|
||||||
|
|
||||||
/** folder hide */
|
|
||||||
.nav-dir-child
|
|
||||||
display: none
|
|
||||||
|
|
||||||
.nav-fold-open > .nav-dir-child
|
|
||||||
display: block
|
|
||||||
|
|
||||||
.nav-fold-open > .nav-entry > svg
|
|
||||||
rotate: 180deg
|
|
||||||
|
|
||||||
nav.open
|
|
||||||
header
|
|
||||||
margin-bottom: 1.25em
|
|
||||||
.nav-root
|
|
||||||
height: auto
|
|
||||||
opacity: 1
|
|
||||||
visibility: visible
|
|
||||||
// transition: opacity 0.4s ease-in-out
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
// SPDX-License-Identifier: MIT
|
|
||||||
// Copyright (c) 2022 sup39
|
|
||||||
|
|
||||||
.mint
|
|
||||||
color: var(--mint)
|
|
||||||
.pink
|
|
||||||
color: var(--pink)
|
|
||||||
.kw
|
|
||||||
color: #9ff
|
|
||||||
font-weight: bold
|
|
||||||
.mk
|
|
||||||
color: #ff99e5
|
|
||||||
font-weight: bold
|
|
||||||
.y
|
|
||||||
color: #ff7
|
|
||||||
font-weight: bold
|
|
||||||
.note
|
|
||||||
color: #777
|
|
||||||
.arg
|
|
||||||
color: #da8cff
|
|
||||||
font-weight: bold
|
|
||||||
.u
|
|
||||||
text-decoration: underline
|
|
||||||
font-weight: bold
|
|
||||||
.mono
|
|
||||||
font-family: monospace
|
|
||||||
span[title]
|
|
||||||
cursor: help
|
|
||||||
text-decoration: dotted underline
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
// SPDX-License-Identifier: MIT
|
|
||||||
// Copyright (c) 2022 sup39
|
|
||||||
|
|
||||||
:root
|
|
||||||
--bg: #222228
|
|
||||||
--fg: #eee
|
|
||||||
--bd: #777
|
|
||||||
--mint: #2ee5b8
|
|
||||||
--pink: #e58acf
|
|
||||||
--nav-width: 256px
|
|
||||||
Loading…
Reference in a new issue