From 0baabcc83e890557430ffbac5e30bf4e18e07466 Mon Sep 17 00:00:00 2001 From: Maciej Jur Date: Fri, 7 Apr 2023 01:11:08 +0200 Subject: [PATCH] Import basic sassy SCSS styles --- package.json | 3 + pnpm-lock.yaml | 46 ++++---- src/layouts/BaseLayout.astro | 15 +++ src/pages/about.astro | 15 +++ src/pages/index.astro | 17 +-- src/styles/_base.scss | 63 ++++++++++ src/styles/_consts.scss | 5 + src/styles/_markdown.scss | 142 ++++++++++++++++++++++ src/styles/_reset.scss | 31 +++++ src/styles/_root.scss | 49 ++++++++ src/styles/_utils.scss | 91 +++++++++++++++ src/styles/components/_map.scss | 42 +++++++ src/styles/layouts/_article.scss | 43 +++++++ src/styles/layouts/_home.scss | 34 ++++++ src/styles/layouts/_pages.scss | 8 ++ src/styles/partials/_card.scss | 44 +++++++ src/styles/partials/_date.scss | 11 ++ src/styles/partials/_footer.scss | 9 ++ src/styles/partials/_github.scss | 38 ++++++ src/styles/partials/_header.scss | 32 +++++ src/styles/partials/_nav.scss | 156 +++++++++++++++++++++++++ src/styles/partials/_pagelist.scss | 39 +++++++ src/styles/partials/_tags.scss | 34 ++++++ src/styles/partials/_toc.scss | 23 ++++ src/styles/shortcodes/_collection.scss | 11 ++ src/styles/shortcodes/_gallery.scss | 24 ++++ src/styles/shortcodes/_icon.scss | 4 + src/styles/shortcodes/_sidenote.scss | 28 +++++ src/styles/shortcodes/_timeline.scss | 68 +++++++++++ src/styles/shortcodes/_tooltip.scss | 37 ++++++ src/styles/styles.scss | 33 ++++++ 31 files changed, 1161 insertions(+), 34 deletions(-) create mode 100644 src/layouts/BaseLayout.astro create mode 100644 src/pages/about.astro create mode 100644 src/styles/_base.scss create mode 100644 src/styles/_consts.scss create mode 100644 src/styles/_markdown.scss create mode 100644 src/styles/_reset.scss create mode 100644 src/styles/_root.scss create mode 100644 src/styles/_utils.scss create mode 100644 src/styles/components/_map.scss create mode 100644 src/styles/layouts/_article.scss create mode 100644 src/styles/layouts/_home.scss create mode 100644 src/styles/layouts/_pages.scss create mode 100644 src/styles/partials/_card.scss create mode 100644 src/styles/partials/_date.scss create mode 100644 src/styles/partials/_footer.scss create mode 100644 src/styles/partials/_github.scss create mode 100644 src/styles/partials/_header.scss create mode 100644 src/styles/partials/_nav.scss create mode 100644 src/styles/partials/_pagelist.scss create mode 100644 src/styles/partials/_tags.scss create mode 100644 src/styles/partials/_toc.scss create mode 100644 src/styles/shortcodes/_collection.scss create mode 100644 src/styles/shortcodes/_gallery.scss create mode 100644 src/styles/shortcodes/_icon.scss create mode 100644 src/styles/shortcodes/_sidenote.scss create mode 100644 src/styles/shortcodes/_timeline.scss create mode 100644 src/styles/shortcodes/_tooltip.scss create mode 100644 src/styles/styles.scss diff --git a/package.json b/package.json index c5413ea..6da6dec 100644 --- a/package.json +++ b/package.json @@ -11,5 +11,8 @@ }, "dependencies": { "astro": "^2.2.0" + }, + "devDependencies": { + "sass": "^1.61.0" } } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f0c3b7e..40814a9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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: diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro new file mode 100644 index 0000000..8696272 --- /dev/null +++ b/src/layouts/BaseLayout.astro @@ -0,0 +1,15 @@ +--- +import '../styles/styles.scss'; +--- + + + + + + + Astro + + +

My Astro Site

+ + diff --git a/src/pages/about.astro b/src/pages/about.astro new file mode 100644 index 0000000..9f8db0c --- /dev/null +++ b/src/pages/about.astro @@ -0,0 +1,15 @@ +--- +--- + + + + + + + + Astro + + +

My Astro Sitess

+ + diff --git a/src/pages/index.astro b/src/pages/index.astro index 7264ff5..2173b68 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,15 +1,8 @@ --- +import BaseLayout from "../layouts/BaseLayout.astro"; --- - - - - - - - Astro - - -

Astro

- - + +

My Astro Site

+ + diff --git a/src/styles/_base.scss b/src/styles/_base.scss new file mode 100644 index 0000000..9fa56f9 --- /dev/null +++ b/src/styles/_base.scss @@ -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); +} diff --git a/src/styles/_consts.scss b/src/styles/_consts.scss new file mode 100644 index 0000000..6ee3d0a --- /dev/null +++ b/src/styles/_consts.scss @@ -0,0 +1,5 @@ +// breakpoints +$bp-sm: 640px; +$bp-md: 768px; +$bp-lg: 1024px; +$bp-xl: 1280px; diff --git a/src/styles/_markdown.scss b/src/styles/_markdown.scss new file mode 100644 index 0000000..0cbf67b --- /dev/null +++ b/src/styles/_markdown.scss @@ -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; + } +} diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss new file mode 100644 index 0000000..f23991a --- /dev/null +++ b/src/styles/_reset.scss @@ -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; +} diff --git a/src/styles/_root.scss b/src/styles/_root.scss new file mode 100644 index 0000000..4288205 --- /dev/null +++ b/src/styles/_root.scss @@ -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; +} \ No newline at end of file diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss new file mode 100644 index 0000000..88e4146 --- /dev/null +++ b/src/styles/_utils.scss @@ -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; + } +} diff --git a/src/styles/components/_map.scss b/src/styles/components/_map.scss new file mode 100644 index 0000000..8f93b68 --- /dev/null +++ b/src/styles/components/_map.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/styles/layouts/_article.scss b/src/styles/layouts/_article.scss new file mode 100644 index 0000000..e5ec9a8 --- /dev/null +++ b/src/styles/layouts/_article.scss @@ -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; + } +} diff --git a/src/styles/layouts/_home.scss b/src/styles/layouts/_home.scss new file mode 100644 index 0000000..5839bbe --- /dev/null +++ b/src/styles/layouts/_home.scss @@ -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; + } +} diff --git a/src/styles/layouts/_pages.scss b/src/styles/layouts/_pages.scss new file mode 100644 index 0000000..b610b8b --- /dev/null +++ b/src/styles/layouts/_pages.scss @@ -0,0 +1,8 @@ +.l-pages { + padding: 1.5em; + + &__list { + max-width: 40em; + margin: 0 auto; + } +} diff --git a/src/styles/partials/_card.scss b/src/styles/partials/_card.scss new file mode 100644 index 0000000..08763f1 --- /dev/null +++ b/src/styles/partials/_card.scss @@ -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; + } + } +} diff --git a/src/styles/partials/_date.scss b/src/styles/partials/_date.scss new file mode 100644 index 0000000..21fc945 --- /dev/null +++ b/src/styles/partials/_date.scss @@ -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; + } +} diff --git a/src/styles/partials/_footer.scss b/src/styles/partials/_footer.scss new file mode 100644 index 0000000..5ade48d --- /dev/null +++ b/src/styles/partials/_footer.scss @@ -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); + } +} diff --git a/src/styles/partials/_github.scss b/src/styles/partials/_github.scss new file mode 100644 index 0000000..8f21967 --- /dev/null +++ b/src/styles/partials/_github.scss @@ -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); + } +} diff --git a/src/styles/partials/_header.scss b/src/styles/partials/_header.scss new file mode 100644 index 0000000..0ae039b --- /dev/null +++ b/src/styles/partials/_header.scss @@ -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; + } + } +} diff --git a/src/styles/partials/_nav.scss b/src/styles/partials/_nav.scss new file mode 100644 index 0000000..3559ec9 --- /dev/null +++ b/src/styles/partials/_nav.scss @@ -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; } +} diff --git a/src/styles/partials/_pagelist.scss b/src/styles/partials/_pagelist.scss new file mode 100644 index 0000000..ae19107 --- /dev/null +++ b/src/styles/partials/_pagelist.scss @@ -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; + } + } +} diff --git a/src/styles/partials/_tags.scss b/src/styles/partials/_tags.scss new file mode 100644 index 0000000..9a58145 --- /dev/null +++ b/src/styles/partials/_tags.scss @@ -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); + } +} diff --git a/src/styles/partials/_toc.scss b/src/styles/partials/_toc.scss new file mode 100644 index 0000000..21dd258 --- /dev/null +++ b/src/styles/partials/_toc.scss @@ -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; + } + } +} diff --git a/src/styles/shortcodes/_collection.scss b/src/styles/shortcodes/_collection.scss new file mode 100644 index 0000000..11bdcba --- /dev/null +++ b/src/styles/shortcodes/_collection.scss @@ -0,0 +1,11 @@ +.sc-coll { + &__title { + min-width: 10em; + } + &__yeah { + background-color: lightgreen; + } + &__nope { + background-color: lightcoral; + } +} diff --git a/src/styles/shortcodes/_gallery.scss b/src/styles/shortcodes/_gallery.scss new file mode 100644 index 0000000..76cc504 --- /dev/null +++ b/src/styles/shortcodes/_gallery.scss @@ -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%; + } +} \ No newline at end of file diff --git a/src/styles/shortcodes/_icon.scss b/src/styles/shortcodes/_icon.scss new file mode 100644 index 0000000..e6f3750 --- /dev/null +++ b/src/styles/shortcodes/_icon.scss @@ -0,0 +1,4 @@ +.sc_icon { + display: inline-block; + vertical-align: middle; +} diff --git a/src/styles/shortcodes/_sidenote.scss b/src/styles/shortcodes/_sidenote.scss new file mode 100644 index 0000000..ef93744 --- /dev/null +++ b/src/styles/shortcodes/_sidenote.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/styles/shortcodes/_timeline.scss b/src/styles/shortcodes/_timeline.scss new file mode 100644 index 0000000..9a63414 --- /dev/null +++ b/src/styles/shortcodes/_timeline.scss @@ -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; + } + } +} diff --git a/src/styles/shortcodes/_tooltip.scss b/src/styles/shortcodes/_tooltip.scss new file mode 100644 index 0000000..7d17a8a --- /dev/null +++ b/src/styles/shortcodes/_tooltip.scss @@ -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; + } +} diff --git a/src/styles/styles.scss b/src/styles/styles.scss new file mode 100644 index 0000000..149ba03 --- /dev/null +++ b/src/styles/styles.scss @@ -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';