From 9bb235133b7258ae37fa06bc8e2cd03f1b160967 Mon Sep 17 00:00:00 2001 From: sup39 Date: Sat, 5 Nov 2022 01:39:51 +0900 Subject: [PATCH] make css external --- pages/_document.tsx | 13 ++ styles/a.sass | 27 ----- styles/code.sass | 23 ---- styles/heading.sass | 35 ------ styles/index.sass | 11 -- styles/menu-toggle.sass | 37 ------ styles/misc.sass | 261 ---------------------------------------- styles/nav.pc.sass | 32 ----- styles/nav.sass | 107 ---------------- styles/span.sass | 29 ----- styles/vars.sass | 10 -- 11 files changed, 13 insertions(+), 572 deletions(-) create mode 100644 pages/_document.tsx delete mode 100644 styles/a.sass delete mode 100644 styles/code.sass delete mode 100644 styles/heading.sass delete mode 100644 styles/menu-toggle.sass delete mode 100644 styles/misc.sass delete mode 100644 styles/nav.pc.sass delete mode 100644 styles/nav.sass delete mode 100644 styles/span.sass delete mode 100644 styles/vars.sass diff --git a/pages/_document.tsx b/pages/_document.tsx new file mode 100644 index 0000000..2dfc69b --- /dev/null +++ b/pages/_document.tsx @@ -0,0 +1,13 @@ +import {Html, Head, Main, NextScript} from 'next/document'; + +export default function Document() { + return + + + + +
+ + + ; +} diff --git a/styles/a.sass b/styles/a.sass deleted file mode 100644 index e477158..0000000 --- a/styles/a.sass +++ /dev/null @@ -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 diff --git a/styles/code.sass b/styles/code.sass deleted file mode 100644 index e8b711a..0000000 --- a/styles/code.sass +++ /dev/null @@ -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 diff --git a/styles/heading.sass b/styles/heading.sass deleted file mode 100644 index e26999b..0000000 --- a/styles/heading.sass +++ /dev/null @@ -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 diff --git a/styles/index.sass b/styles/index.sass index 2f63339..e69de29 100644 --- a/styles/index.sass +++ b/styles/index.sass @@ -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' diff --git a/styles/menu-toggle.sass b/styles/menu-toggle.sass deleted file mode 100644 index b57facc..0000000 --- a/styles/menu-toggle.sass +++ /dev/null @@ -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 diff --git a/styles/misc.sass b/styles/misc.sass deleted file mode 100644 index 7730057..0000000 --- a/styles/misc.sass +++ /dev/null @@ -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 diff --git a/styles/nav.pc.sass b/styles/nav.pc.sass deleted file mode 100644 index 1b128a6..0000000 --- a/styles/nav.pc.sass +++ /dev/null @@ -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 diff --git a/styles/nav.sass b/styles/nav.sass deleted file mode 100644 index b66bb37..0000000 --- a/styles/nav.sass +++ /dev/null @@ -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 diff --git a/styles/span.sass b/styles/span.sass deleted file mode 100644 index bdb3b86..0000000 --- a/styles/span.sass +++ /dev/null @@ -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 diff --git a/styles/vars.sass b/styles/vars.sass deleted file mode 100644 index 3b7fa0a..0000000 --- a/styles/vars.sass +++ /dev/null @@ -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