176 lines
3.8 KiB
CSS
176 lines
3.8 KiB
CSS
@font-face {
|
||
font-family: 'PoetsenOne';
|
||
src: url('/fonts/PoetsenOne-Regular.woff') format('woff');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
:root {
|
||
--font-title: PoetsenOne, "Noto Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||
--font-sans: "Noto Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||
--font-mono: 'Noto Mono', monospace;
|
||
--font-jp: "Source Han Sans", "源ノ角ゴシック", "Hiragino Sans", "HiraKakuProN-W3", "Hiragino Kaku Gothic ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Noto Sans", "Noto Sans CJK JP", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;
|
||
--box-shadow: 0 2px 6px rgba(#000, 25%), 0 8px 24px rgba(#000, 33%), 0 16px 32px rgba(#000, 33%);
|
||
--font-size: 1em;
|
||
--accent-color: deeppink;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-sans);
|
||
font-size: var(--font-size);
|
||
}
|
||
|
||
*::selection {
|
||
color: white;
|
||
background-color: var(--accent-color);
|
||
}
|
||
|
||
/*/
|
||
:root {
|
||
--accent: #2337ff;
|
||
--accent-dark: #000d8a;
|
||
--black: 15, 18, 25;
|
||
--gray: 96, 115, 159;
|
||
--gray-light: 229, 233, 240;
|
||
--gray-dark: 34, 41, 57;
|
||
--gray-gradient: rgba(var(--gray-light), 50%), #fff;
|
||
--box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
|
||
0 16px 32px rgba(var(--gray), 33%);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson';
|
||
src: url('/fonts/atkinson-regular.woff') format('woff');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson';
|
||
src: url('/fonts/atkinson-bold.woff') format('woff');
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
body {
|
||
font-family: 'Atkinson', sans-serif;
|
||
margin: 0;
|
||
padding: 0;
|
||
text-align: left;
|
||
background: linear-gradient(var(--gray-gradient)) no-repeat;
|
||
background-size: 100% 600px;
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
color: rgb(var(--gray-dark));
|
||
font-size: 20px;
|
||
line-height: 1.7;
|
||
}
|
||
main {
|
||
width: 720px;
|
||
max-width: calc(100% - 2em);
|
||
margin: auto;
|
||
padding: 3em 1em;
|
||
}
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
margin: 0 0 0.5rem 0;
|
||
color: rgb(var(--black));
|
||
line-height: 1.2;
|
||
}
|
||
h1 {
|
||
font-size: 3.052em;
|
||
}
|
||
h2 {
|
||
font-size: 2.441em;
|
||
}
|
||
h3 {
|
||
font-size: 1.953em;
|
||
}
|
||
h4 {
|
||
font-size: 1.563em;
|
||
}
|
||
h5 {
|
||
font-size: 1.25em;
|
||
}
|
||
strong,
|
||
b {
|
||
font-weight: 700;
|
||
}
|
||
a {
|
||
color: var(--accent);
|
||
}
|
||
a:hover {
|
||
color: var(--accent);
|
||
}
|
||
p {
|
||
margin-bottom: 1em;
|
||
}
|
||
.prose p {
|
||
margin-bottom: 2em;
|
||
}
|
||
textarea {
|
||
width: 100%;
|
||
font-size: 16px;
|
||
}
|
||
input {
|
||
font-size: 16px;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
}
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
border-radius: 8px;
|
||
}
|
||
code {
|
||
padding: 2px 5px;
|
||
background-color: rgb(var(--gray-light));
|
||
border-radius: 2px;
|
||
}
|
||
pre {
|
||
padding: 1.5em;
|
||
border-radius: 8px;
|
||
}
|
||
pre > code {
|
||
all: unset;
|
||
}
|
||
blockquote {
|
||
border-left: 4px solid var(--accent);
|
||
padding: 0 0 0 20px;
|
||
margin: 0px;
|
||
font-size: 1.333em;
|
||
}
|
||
hr {
|
||
border: none;
|
||
border-top: 1px solid rgb(var(--gray-light));
|
||
}
|
||
@media (max-width: 720px) {
|
||
body {
|
||
font-size: 18px;
|
||
}
|
||
main {
|
||
padding: 1em;
|
||
}
|
||
}
|
||
|
||
.sr-only {
|
||
border: 0;
|
||
padding: 0;
|
||
margin: 0;
|
||
position: absolute !important;
|
||
height: 1px;
|
||
width: 1px;
|
||
overflow: hidden;
|
||
clip: rect(1px 1px 1px 1px);
|
||
clip: rect(1px, 1px, 1px, 1px);
|
||
clip-path: inset(50%);
|
||
white-space: nowrap;
|
||
}
|
||
/*/
|