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