Import basic sassy SCSS styles
This commit is contained in:
parent
d874269b96
commit
0baabcc83e
|
|
@ -11,5 +11,8 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"astro": "^2.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.61.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,12 @@ lockfileVersion: '6.0'
|
|||
dependencies:
|
||||
astro:
|
||||
specifier: ^2.2.0
|
||||
version: 2.2.0
|
||||
version: 2.2.0(sass@1.61.0)
|
||||
|
||||
devDependencies:
|
||||
sass:
|
||||
specifier: ^1.61.0
|
||||
version: 1.61.0
|
||||
|
||||
packages:
|
||||
|
||||
|
|
@ -47,7 +52,7 @@ packages:
|
|||
astro: ^2.2.0
|
||||
dependencies:
|
||||
'@astrojs/prism': 2.1.1
|
||||
astro: 2.2.0
|
||||
astro: 2.2.0(sass@1.61.0)
|
||||
github-slugger: 1.5.0
|
||||
import-meta-resolve: 2.2.2
|
||||
rehype-raw: 6.1.1
|
||||
|
|
@ -755,7 +760,6 @@ packages:
|
|||
dependencies:
|
||||
normalize-path: 3.0.0
|
||||
picomatch: 2.3.1
|
||||
dev: false
|
||||
|
||||
/argparse@1.0.10:
|
||||
resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
|
||||
|
|
@ -767,7 +771,7 @@ packages:
|
|||
resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==}
|
||||
dev: false
|
||||
|
||||
/astro@2.2.0:
|
||||
/astro@2.2.0(sass@1.61.0):
|
||||
resolution: {integrity: sha512-7ggQHIyWadnjRY+Jo7nZmYF5xspeAWCjQV+fPkad7u86hj0qjhU+8WvCZI1q7cvJo9o0DMzaI+3vH1voIK7Czg==}
|
||||
engines: {node: '>=16.12.0', npm: '>=6.14.0'}
|
||||
hasBin: true
|
||||
|
|
@ -826,7 +830,7 @@ packages:
|
|||
typescript: 5.0.3
|
||||
unist-util-visit: 4.1.2
|
||||
vfile: 5.3.7
|
||||
vite: 4.2.1
|
||||
vite: 4.2.1(sass@1.61.0)
|
||||
vitefu: 0.2.4(vite@4.2.1)
|
||||
yargs-parser: 21.1.1
|
||||
zod: 3.21.4
|
||||
|
|
@ -851,7 +855,6 @@ packages:
|
|||
/binary-extensions@2.2.0:
|
||||
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
|
||||
engines: {node: '>=8'}
|
||||
dev: false
|
||||
|
||||
/bl@5.1.0:
|
||||
resolution: {integrity: sha512-tv1ZJHLfTDnXE6tMHv73YgSJaWR2AFuPwMntBe7XL/GBFHnT0CLnsHMogfk5+GzCDC5ZWarSCYaIGATZt9dNsQ==}
|
||||
|
|
@ -880,7 +883,6 @@ packages:
|
|||
engines: {node: '>=8'}
|
||||
dependencies:
|
||||
fill-range: 7.0.1
|
||||
dev: false
|
||||
|
||||
/browserslist@4.21.5:
|
||||
resolution: {integrity: sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==}
|
||||
|
|
@ -967,7 +969,6 @@ packages:
|
|||
readdirp: 3.6.0
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.2
|
||||
dev: false
|
||||
|
||||
/ci-info@3.8.0:
|
||||
resolution: {integrity: sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==}
|
||||
|
|
@ -1237,7 +1238,6 @@ packages:
|
|||
engines: {node: '>=8'}
|
||||
dependencies:
|
||||
to-regex-range: 5.0.1
|
||||
dev: false
|
||||
|
||||
/find-up@4.1.0:
|
||||
resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
|
||||
|
|
@ -1267,7 +1267,6 @@ packages:
|
|||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
||||
os: [darwin]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/function-bind@1.1.1:
|
||||
|
|
@ -1297,7 +1296,6 @@ packages:
|
|||
engines: {node: '>= 6'}
|
||||
dependencies:
|
||||
is-glob: 4.0.3
|
||||
dev: false
|
||||
|
||||
/globals@11.12.0:
|
||||
resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
|
||||
|
|
@ -1441,6 +1439,9 @@ packages:
|
|||
resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
|
||||
dev: false
|
||||
|
||||
/immutable@4.3.0:
|
||||
resolution: {integrity: sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==}
|
||||
|
||||
/import-meta-resolve@2.2.2:
|
||||
resolution: {integrity: sha512-f8KcQ1D80V7RnqVm+/lirO9zkOxjGxhaTC1IPrBGd3MEfNgmNG67tSUO9gTi2F3Blr2Az6g1vocaxzkVnWl9MA==}
|
||||
dev: false
|
||||
|
|
@ -1454,7 +1455,6 @@ packages:
|
|||
engines: {node: '>=8'}
|
||||
dependencies:
|
||||
binary-extensions: 2.2.0
|
||||
dev: false
|
||||
|
||||
/is-buffer@2.0.5:
|
||||
resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
|
||||
|
|
@ -1487,7 +1487,6 @@ packages:
|
|||
/is-extglob@2.1.1:
|
||||
resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: false
|
||||
|
||||
/is-fullwidth-code-point@3.0.0:
|
||||
resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
|
||||
|
|
@ -1499,7 +1498,6 @@ packages:
|
|||
engines: {node: '>=0.10.0'}
|
||||
dependencies:
|
||||
is-extglob: 2.1.1
|
||||
dev: false
|
||||
|
||||
/is-interactive@2.0.0:
|
||||
resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
|
||||
|
|
@ -1509,7 +1507,6 @@ packages:
|
|||
/is-number@7.0.0:
|
||||
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
|
||||
engines: {node: '>=0.12.0'}
|
||||
dev: false
|
||||
|
||||
/is-plain-obj@4.1.0:
|
||||
resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
|
||||
|
|
@ -2085,7 +2082,6 @@ packages:
|
|||
/normalize-path@3.0.0:
|
||||
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: false
|
||||
|
||||
/npm-run-path@5.1.0:
|
||||
resolution: {integrity: sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==}
|
||||
|
|
@ -2207,7 +2203,6 @@ packages:
|
|||
/picomatch@2.3.1:
|
||||
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
|
||||
engines: {node: '>=8.6'}
|
||||
dev: false
|
||||
|
||||
/pify@4.0.1:
|
||||
resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
|
||||
|
|
@ -2291,7 +2286,6 @@ packages:
|
|||
engines: {node: '>=8.10.0'}
|
||||
dependencies:
|
||||
picomatch: 2.3.1
|
||||
dev: false
|
||||
|
||||
/rehype-parse@8.0.4:
|
||||
resolution: {integrity: sha512-MJJKONunHjoTh4kc3dsM1v3C9kGrrxvA3U8PxZlP2SjH8RNUSrb+lF7Y0KVaUDnGH2QZ5vAn7ulkiajM9ifuqg==}
|
||||
|
|
@ -2458,6 +2452,15 @@ packages:
|
|||
suf-log: 2.5.3
|
||||
dev: false
|
||||
|
||||
/sass@1.61.0:
|
||||
resolution: {integrity: sha512-PDsN7BrVkNZK2+dj/dpKQAWZavbAQ87IXqVvw2+oEYI+GwlTWkvbQtL7F2cCNbMqJEYKPh1EcjSxsnqIb/kyaQ==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
chokidar: 3.5.3
|
||||
immutable: 4.3.0
|
||||
source-map-js: 1.0.2
|
||||
|
||||
/section-matter@1.0.0:
|
||||
resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
|
||||
engines: {node: '>=4'}
|
||||
|
|
@ -2519,7 +2522,6 @@ packages:
|
|||
/source-map-js@1.0.2:
|
||||
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: false
|
||||
|
||||
/source-map@0.7.4:
|
||||
resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
|
||||
|
|
@ -2667,7 +2669,6 @@ packages:
|
|||
engines: {node: '>=8.0'}
|
||||
dependencies:
|
||||
is-number: 7.0.0
|
||||
dev: false
|
||||
|
||||
/trim-lines@3.0.1:
|
||||
resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
|
||||
|
|
@ -2837,7 +2838,7 @@ packages:
|
|||
vfile-message: 3.1.4
|
||||
dev: false
|
||||
|
||||
/vite@4.2.1:
|
||||
/vite@4.2.1(sass@1.61.0):
|
||||
resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
hasBin: true
|
||||
|
|
@ -2866,6 +2867,7 @@ packages:
|
|||
postcss: 8.4.21
|
||||
resolve: 1.22.2
|
||||
rollup: 3.20.2
|
||||
sass: 1.61.0
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.2
|
||||
dev: false
|
||||
|
|
@ -2878,7 +2880,7 @@ packages:
|
|||
vite:
|
||||
optional: true
|
||||
dependencies:
|
||||
vite: 4.2.1
|
||||
vite: 4.2.1(sass@1.61.0)
|
||||
dev: false
|
||||
|
||||
/vscode-css-languageservice@6.2.4:
|
||||
|
|
|
|||
15
src/layouts/BaseLayout.astro
Normal file
15
src/layouts/BaseLayout.astro
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
import '../styles/styles.scss';
|
||||
---
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>My Astro Site</h1>
|
||||
</body>
|
||||
</html>
|
||||
15
src/pages/about.astro
Normal file
15
src/pages/about.astro
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>My Astro Sitess</h1>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,15 +1,8 @@
|
|||
---
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Astro</h1>
|
||||
</body>
|
||||
</html>
|
||||
<BaseLayout>
|
||||
<h1>My Astro Site</h1>
|
||||
</BaseLayout>
|
||||
|
||||
|
|
|
|||
63
src/styles/_base.scss
Normal file
63
src/styles/_base.scss
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
@use 'consts';
|
||||
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
font-family: var(--san-serif);
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--c-bg-main);
|
||||
color: var(--c-text);
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
|
||||
@media screen and (min-width: consts.$bp-md) {
|
||||
--fs-xs: 0.833rem;
|
||||
--fs-sm: 1rem;
|
||||
--fs-md: 1.2rem;
|
||||
--fs-lg: 1.44rem;
|
||||
--fs-xl: 1.728rem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* BASE STYLES
|
||||
*/
|
||||
|
||||
ol, ul {
|
||||
margin: 1em 0em 1em 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--fs-xl);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--fs-lg);
|
||||
}
|
||||
h3, h4, h5, h6 {
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
h4, h6 {
|
||||
font-style: italic;
|
||||
}
|
||||
h5, h6 {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: var(--c-primary);
|
||||
}
|
||||
5
src/styles/_consts.scss
Normal file
5
src/styles/_consts.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
// breakpoints
|
||||
$bp-sm: 640px;
|
||||
$bp-md: 768px;
|
||||
$bp-lg: 1024px;
|
||||
$bp-xl: 1280px;
|
||||
142
src/styles/_markdown.scss
Normal file
142
src/styles/_markdown.scss
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
|
||||
.md {
|
||||
&_anchor {
|
||||
margin-left: 0.2em;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
opacity: 1;
|
||||
}
|
||||
&__icon {
|
||||
display: inline;
|
||||
max-height: 0.8em;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&_youtube {
|
||||
position:relative;
|
||||
height:0;
|
||||
margin: 1em 0;
|
||||
padding-bottom:56.25%;
|
||||
overflow:hidden;
|
||||
|
||||
> iframe {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
border:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markdown {
|
||||
> h1, > h2, > h3, > h4, > h5, > h6 {
|
||||
margin: 1em 0 0.5em 0;
|
||||
}
|
||||
|
||||
//> img,
|
||||
//> p > img {
|
||||
// display: block;
|
||||
// max-width: 100%;
|
||||
// max-height: 50vh;
|
||||
// margin-left: auto;
|
||||
// margin-right: auto;
|
||||
//}
|
||||
|
||||
> table {
|
||||
margin: 1em auto 1em auto;
|
||||
border-collapse: collapse;
|
||||
|
||||
|
||||
th, td {
|
||||
padding: 0.2em 0.5em;
|
||||
border: 1px solid #dbdbdb;
|
||||
|
||||
p {
|
||||
white-space: pre-line;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
&.albums .images {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* BLOCKQUOTE
|
||||
*/
|
||||
blockquote {
|
||||
position: relative;
|
||||
margin: 1em 2em;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: var(--c-secondary);
|
||||
left: -1em;
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* CODE
|
||||
*/
|
||||
code {
|
||||
font-family: var(--monospace);
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
pre > code {
|
||||
display: block;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.highlight {
|
||||
margin: 1em 0;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #e1e2e1;
|
||||
|
||||
> pre {
|
||||
padding: 0.2em;
|
||||
|
||||
&[style] { // default styles chroma
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
code:not(.highlight code) {
|
||||
padding: 0.1em;
|
||||
border: 1px solid #e1e2e1;
|
||||
border-radius: 3px;
|
||||
background-color: #f6f6f6;
|
||||
color: #2f3337;
|
||||
}
|
||||
.highlight {
|
||||
.lntable {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
.lntd {
|
||||
padding: 0 0.5rem;
|
||||
|
||||
&:first-of-type {
|
||||
min-width: 1rem;
|
||||
border-right: 1px solid #e1e2e1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
*:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
31
src/styles/_reset.scss
Normal file
31
src/styles/_reset.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
*:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
img, picture, video, canvas, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
49
src/styles/_root.scss
Normal file
49
src/styles/_root.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
:root {
|
||||
/* Colors */
|
||||
--c-primary-d: hsl(240, 21%, 35%);
|
||||
--c-primary: hsl(240, 21%, 45%);
|
||||
--c-primary-l: hsl(240, 21%, 55%);
|
||||
--c-secondary: hsl(2, 58%, 52%);
|
||||
--c-white: hsl(0, 0%, 98%);
|
||||
--c-purewhite: hsl(0, 0%, 100%);
|
||||
--c-black: hsl(0, 0%, 7%);
|
||||
--c-text: hsl(0, 0%, 13%);
|
||||
--c-text-muted: hsl(0, 0%, 40%);
|
||||
--c-footer-bg: hsl(0, 0%, 93%);
|
||||
--c-footer-text: hsl(0, 0%, 35%);
|
||||
--c-timeline-bg: hsl(0, 0%, 78%);
|
||||
--c-shadow: 0deg 0% 76%;
|
||||
--c-bg-main: hsl(0, 0%, 98%);
|
||||
|
||||
|
||||
/* Fonts */
|
||||
|
||||
// size
|
||||
--fs-xs: 0.694rem;
|
||||
--fs-sm: 0.833rem;
|
||||
--fs-md: 1rem;
|
||||
--fs-lg: 1.2rem;
|
||||
--fs-xl: 1.44rem;
|
||||
|
||||
// typeface
|
||||
--san-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;
|
||||
--serif: Cambria, Georgia, serif;
|
||||
--monospace: "monaco", monospace;
|
||||
|
||||
// shadow
|
||||
--shadow-l:
|
||||
0.7px 0.6px 0.9px hsl(var(--c-shadow) / 0.39),
|
||||
2.2px 1.9px 2.9px -3.2px hsl(var(--c-shadow) / 0.3);
|
||||
--shadow-m:
|
||||
0.7px 0.6px 0.9px hsl(var(--c-shadow) / 0.37),
|
||||
2.6px 2.3px 3.5px -1.6px hsl(var(--c-shadow) / 0.31),
|
||||
10.8px 9.6px 14.6px -3.2px hsl(var(--c-shadow) / 0.25);
|
||||
--shadow-h:
|
||||
0.7px 0.6px 0.9px hsl(var(--c-shadow) / 0.41),
|
||||
3.3px 2.9px 4.4px -0.8px hsl(var(--c-shadow) / 0.37),
|
||||
8.2px 7.4px 11.2px -1.6px hsl(var(--c-shadow) / 0.33),
|
||||
19.4px 17.3px 26.3px -2.4px hsl(var(--c-shadow) / 0.3),
|
||||
40.4px 36px 54.8px -3.2px hsl(var(--c-shadow) / 0.26);
|
||||
|
||||
--momiji: url("/static/svg/momiji.svg") 0 0, url("/static/svg/momiji.svg") 16px 16px;
|
||||
}
|
||||
91
src/styles/_utils.scss
Normal file
91
src/styles/_utils.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
.readable {
|
||||
line-height: 1.6em;
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
/**
|
||||
* MARKER
|
||||
*/
|
||||
|
||||
$marker-color: 5px solid var(--c-secondary);
|
||||
$marker-offset: -0.7rem;
|
||||
|
||||
%article-marker {
|
||||
content: "";
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.marker {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
border-left: $marker-color;
|
||||
border-top: $marker-color;
|
||||
left: $marker-offset;
|
||||
top: $marker-offset;
|
||||
@extend %article-marker;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-right: $marker-color;
|
||||
border-bottom: $marker-color;
|
||||
right: $marker-offset;
|
||||
bottom: $marker-offset;
|
||||
@extend %article-marker;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* OTHER
|
||||
*/
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
|
||||
&-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
&-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.justify {
|
||||
&-center {
|
||||
justify-content: center;
|
||||
}
|
||||
&-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.items {
|
||||
&-center {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.font {
|
||||
&-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
&-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
&-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
42
src/styles/components/_map.scss
Normal file
42
src/styles/components/_map.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
.leaflet-popup-content-wrapper {
|
||||
border-radius: 8px !important;
|
||||
padding: 1px !important;
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
margin: 2px !important;
|
||||
|
||||
.popup {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a, img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 8px;
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.meta {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 32px 8px 4px 8px;
|
||||
background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgba(0,0,0,0.7));
|
||||
color: var(--c-white);
|
||||
opacity: 0.8;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
a.leaflet-popup-close-button {
|
||||
padding: 6px 20px 0 0 !important;
|
||||
color: white !important;
|
||||
transition: color 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: darkgray !important;
|
||||
}
|
||||
}
|
||||
43
src/styles/layouts/_article.scss
Normal file
43
src/styles/layouts/_article.scss
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
@use '../consts' as consts;
|
||||
|
||||
|
||||
.l-article {
|
||||
position: relative;
|
||||
padding: 1.5em;
|
||||
|
||||
@media (min-width: consts.$bp-lg) {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: "left main";
|
||||
gap: 1.5em;
|
||||
}
|
||||
|
||||
@media (min-width: consts.$bp-xl) {
|
||||
grid-template-columns: 15em 1fr 15em;
|
||||
}
|
||||
|
||||
&__aside {
|
||||
display: none;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: fit-content;
|
||||
max-height: 100vh;
|
||||
width: fit-content;
|
||||
max-width: 15em;
|
||||
margin: -1.5em 0;
|
||||
padding: 1.5em 1.5em 1.5em 0;
|
||||
overflow-y: auto;
|
||||
|
||||
@media (min-width: consts.$bp-lg) {
|
||||
display: block;
|
||||
grid-area: left;
|
||||
}
|
||||
}
|
||||
|
||||
&__article {
|
||||
grid-area: main;
|
||||
width: 100%;
|
||||
max-width: 40em;
|
||||
margin: 0 auto auto auto;
|
||||
}
|
||||
}
|
||||
34
src/styles/layouts/_home.scss
Normal file
34
src/styles/layouts/_home.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
@use '../consts' as consts;
|
||||
|
||||
|
||||
.l-home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 1.5em;
|
||||
|
||||
@media (min-width: consts.$bp-lg) {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__aside {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
max-width: 40em;
|
||||
margin-top: 3em;
|
||||
|
||||
@media (min-width: consts.$bp-lg) {
|
||||
width: 24em;
|
||||
margin-top: 0;
|
||||
margin-left: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
&__article {
|
||||
max-width: 40em;
|
||||
}
|
||||
}
|
||||
8
src/styles/layouts/_pages.scss
Normal file
8
src/styles/layouts/_pages.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
.l-pages {
|
||||
padding: 1.5em;
|
||||
|
||||
&__list {
|
||||
max-width: 40em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
44
src/styles/partials/_card.scss
Normal file
44
src/styles/partials/_card.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
.p-card {
|
||||
padding: 1em;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
box-shadow: var(--shadow-l);
|
||||
|
||||
&__header {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&-latest {
|
||||
&__pages {
|
||||
display: grid;
|
||||
grid-template-columns: 4em 1fr;
|
||||
row-gap: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&-image {
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-contact {
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 3em 1fr;
|
||||
row-gap: 0.5em;
|
||||
}
|
||||
|
||||
&__image {
|
||||
max-width: 2em;
|
||||
height: auto;
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
11
src/styles/partials/_date.scss
Normal file
11
src/styles/partials/_date.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.p_date {
|
||||
margin-right: 0.5em;
|
||||
|
||||
&__icon {
|
||||
display: inline;
|
||||
max-height: 1.2em;
|
||||
line-height: 1em;
|
||||
width: auto;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
9
src/styles/partials/_footer.scss
Normal file
9
src/styles/partials/_footer.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.p-footer {
|
||||
padding: 0.5em;
|
||||
background-color: var(--c-footer-bg);
|
||||
|
||||
&__info {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--c-footer-text);
|
||||
}
|
||||
}
|
||||
38
src/styles/partials/_github.scss
Normal file
38
src/styles/partials/_github.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
.p-github {
|
||||
overflow: hidden;
|
||||
|
||||
&:hover .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
fill:#151513;
|
||||
color:#fff;
|
||||
border: 0;
|
||||
border-radius: 0 5px 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
&:hover .octo-arm {
|
||||
animation: none;
|
||||
}
|
||||
.octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes octocat-wave {
|
||||
0%, 100% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
20%, 60% {
|
||||
transform: rotate(-25deg);
|
||||
}
|
||||
40%, 80% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
}
|
||||
32
src/styles/partials/_header.scss
Normal file
32
src/styles/partials/_header.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.p-header {
|
||||
margin-bottom: 1em;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 5px;
|
||||
box-shadow: var(--shadow-l);
|
||||
background: var(--momiji);
|
||||
background-color: var(--c-purewhite);
|
||||
|
||||
&__heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
font-size: var(--fs-sm);
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
&-tech {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
padding: 0.5em;
|
||||
|
||||
&__logo {
|
||||
max-height: 2em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
156
src/styles/partials/_nav.scss
Normal file
156
src/styles/partials/_nav.scss
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
@use '../consts' as consts;
|
||||
|
||||
|
||||
%burger-line {
|
||||
height: 0.15em;
|
||||
width: 100%;
|
||||
background-color: var(--c-white);
|
||||
}
|
||||
|
||||
%burger-wing {
|
||||
content: "";
|
||||
position: absolute;
|
||||
transition: transform 100ms ease-in-out;
|
||||
}
|
||||
|
||||
#p-nav-toggle:checked {
|
||||
~ .p-nav__bar .p-nav__burger-icon {
|
||||
background-color: transparent;
|
||||
|
||||
&::before {
|
||||
transform: translateY(0.8rem) rotateZ(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translateY(-0.8rem) rotateZ(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
~ .p-nav__menu {
|
||||
display: block;
|
||||
|
||||
@media (min-width: consts.$bp-md) {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-nav {
|
||||
background: var(--momiji);
|
||||
background-color: var(--c-primary);
|
||||
|
||||
@media (min-width: consts.$bp-md) {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
&__bar {
|
||||
display: flex;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
margin-right: auto;
|
||||
padding: 0.5em;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
|
||||
&-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-main {
|
||||
font-size: 2rem;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
&-sub {
|
||||
align-self: flex-start;
|
||||
max-width: max-content;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: 0.675rem;
|
||||
line-height: 1.2em;
|
||||
animation:
|
||||
typing 1.25s steps(20, end) forwards,
|
||||
blink-caret .75s step-end 4;
|
||||
}
|
||||
}
|
||||
|
||||
&__menu {
|
||||
display: none;
|
||||
list-style-type: none;
|
||||
|
||||
@media (min-width: consts.$bp-md) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
&-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-link {
|
||||
display: block;
|
||||
padding: 0.2em 0.3em;
|
||||
font-size: 1.2rem;
|
||||
text-decoration: none;
|
||||
color: var(--c-white);
|
||||
|
||||
@media (min-width: consts.$bp-md) {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(0, 0%, 0%, 0.20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__burger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 4em;
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
|
||||
@media (min-width: consts.$bp-md) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
position: relative;
|
||||
transition: background-color 100ms linear;
|
||||
@extend %burger-line;
|
||||
|
||||
&::before {
|
||||
top: -0.8rem;
|
||||
@extend %burger-line;
|
||||
@extend %burger-wing;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 0.8rem;
|
||||
@extend %burger-line;
|
||||
@extend %burger-wing;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from { width: 0; }
|
||||
to { width: 100%; }
|
||||
}
|
||||
|
||||
@keyframes blink-caret {
|
||||
from, to { border-right: 2px solid white; }
|
||||
50% { border-right: transparent; }
|
||||
}
|
||||
39
src/styles/partials/_pagelist.scss
Normal file
39
src/styles/partials/_pagelist.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
.p-pagelist {
|
||||
display: grid;
|
||||
grid-template-columns: 8em 1fr;
|
||||
column-gap: 0.3em;
|
||||
row-gap: 0.3em;
|
||||
margin-top: 1em;
|
||||
|
||||
&-tech {
|
||||
grid-template-columns: 8em 1fr auto;
|
||||
|
||||
.tech {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 0.3em;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-aoc {
|
||||
grid-template-columns: 3em 1fr auto;
|
||||
|
||||
.tech {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 0.3em;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
34
src/styles/partials/_tags.scss
Normal file
34
src/styles/partials/_tags.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
.p_tags {
|
||||
display: inline;
|
||||
line-height: 1em;
|
||||
|
||||
&__icon {
|
||||
display: inline;
|
||||
max-height: 1.2em;
|
||||
width: auto;
|
||||
margin-right: 0.25em;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
border-radius: 0.4em;
|
||||
padding: 0.1em 0.25em;
|
||||
margin-right: 0.25em;
|
||||
text-decoration: none;
|
||||
line-height: 1em;
|
||||
font-size: var(--fs-xs);
|
||||
background-color: var(--c-purewhite);
|
||||
border: 2px solid var(--c-primary);
|
||||
}
|
||||
}
|
||||
23
src/styles/partials/_toc.scss
Normal file
23
src/styles/partials/_toc.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
.p-toc {
|
||||
#TableOfContents > ul {
|
||||
list-style: hiragana-iroha;
|
||||
margin-left: 2em;
|
||||
|
||||
li {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
line-height: 1.2;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
11
src/styles/shortcodes/_collection.scss
Normal file
11
src/styles/shortcodes/_collection.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.sc-coll {
|
||||
&__title {
|
||||
min-width: 10em;
|
||||
}
|
||||
&__yeah {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
&__nope {
|
||||
background-color: lightcoral;
|
||||
}
|
||||
}
|
||||
24
src/styles/shortcodes/_gallery.scss
Normal file
24
src/styles/shortcodes/_gallery.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
.sc-gallery {
|
||||
&__container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 5.5em;
|
||||
height: 5.5em;
|
||||
transition: transform 50ms ease-in-out;
|
||||
|
||||
&:focus-within,
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
4
src/styles/shortcodes/_icon.scss
Normal file
4
src/styles/shortcodes/_icon.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.sc_icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
28
src/styles/shortcodes/_sidenote.scss
Normal file
28
src/styles/shortcodes/_sidenote.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
@use '../consts' as consts;
|
||||
|
||||
|
||||
$border: 1px dashed gray;
|
||||
|
||||
.sc-sidenote {
|
||||
margin: 1em 2em;
|
||||
padding: 0.5em 1em;
|
||||
border-top: $border;
|
||||
border-bottom: $border;
|
||||
color: gray;
|
||||
line-height: normal;
|
||||
font-size: var(--fs-sm);
|
||||
|
||||
@media (min-width: consts.$bp-sm) {
|
||||
float: right;
|
||||
clear: right;
|
||||
max-width: 15em;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@media (min-width: consts.$bp-xl) {
|
||||
max-width: 15em;
|
||||
margin: 0.5em -16em;
|
||||
border-left: $border;
|
||||
border-style: none none none dashed;
|
||||
}
|
||||
}
|
||||
68
src/styles/shortcodes/_timeline.scss
Normal file
68
src/styles/shortcodes/_timeline.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
.sc-timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
position: relative;
|
||||
max-width: fit-content;
|
||||
margin: 1em auto;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 3.5em;
|
||||
z-index: 1;
|
||||
width: 0.15em;
|
||||
height: 100%;
|
||||
margin-top: 0.7em;
|
||||
background: var(--c-timeline-bg);
|
||||
}
|
||||
|
||||
&__year {
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
position: relative;
|
||||
|
||||
&-header {
|
||||
position: sticky;
|
||||
top: 1em;
|
||||
align-self: flex-start;
|
||||
margin: 0;
|
||||
font-size: var(--fs-lg);
|
||||
color: var(--c-primary);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 3.25em;
|
||||
top: 0.5em;
|
||||
z-index: 2;
|
||||
width: 0.6em;
|
||||
height: 0.6em;
|
||||
border-radius: 9999px;
|
||||
background: var(--c-primary);
|
||||
border: 2px solid var(--c-white);
|
||||
}
|
||||
}
|
||||
&__month {
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
&-header {
|
||||
margin: 0;
|
||||
color: var(--c-text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
margin-top: 0;
|
||||
max-width: 28em;
|
||||
list-style-type: none;
|
||||
|
||||
&-item::before {
|
||||
content: '·';
|
||||
margin-left: -0.5rem;
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
37
src/styles/shortcodes/_tooltip.scss
Normal file
37
src/styles/shortcodes/_tooltip.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
.sc-tooltip {
|
||||
position: relative;
|
||||
text-decoration: underline dotted;
|
||||
|
||||
&__box {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
visibility: hidden;
|
||||
width: max-content;
|
||||
max-width: min(50vw, 20em);
|
||||
padding: 0.5em;
|
||||
z-index: 2;
|
||||
border-radius: 0.5em;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
color: white;
|
||||
line-height: normal;
|
||||
font-size: var(--fs-sm);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -0.3em;
|
||||
border-width: 0.3em;
|
||||
border-style: solid;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .sc-tooltip__box {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
33
src/styles/styles.scss
Normal file
33
src/styles/styles.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
// Config
|
||||
@use 'root';
|
||||
@use 'reset';
|
||||
@use 'base';
|
||||
@use 'utils';
|
||||
@use 'markdown';
|
||||
|
||||
// Components
|
||||
@use 'components/map';
|
||||
|
||||
// Partials
|
||||
@use 'partials/nav';
|
||||
@use 'partials/footer';
|
||||
@use 'partials/github';
|
||||
@use 'partials/card';
|
||||
@use 'partials/header';
|
||||
@use 'partials/pagelist';
|
||||
@use 'partials/toc';
|
||||
@use 'partials/date';
|
||||
@use 'partials/tags';
|
||||
|
||||
// Shortcodes
|
||||
@use 'shortcodes/timeline';
|
||||
@use 'shortcodes/gallery';
|
||||
@use 'shortcodes/tooltip';
|
||||
@use 'shortcodes/sidenote';
|
||||
@use 'shortcodes/collection';
|
||||
@use 'shortcodes/icon';
|
||||
|
||||
// Layouts
|
||||
@use 'layouts/home';
|
||||
@use 'layouts/pages';
|
||||
@use 'layouts/article';
|
||||
Loading…
Reference in a new issue