From de8f2188a5131055a9340886205e0d65a9bda58f Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sun, 24 Jul 2022 23:42:28 +0300 Subject: [PATCH 1/6] feat: added colors for themes --- public/assets/dark.css | 19 ++++++++++ public/assets/light.css | 19 ++++++++++ src/components/ArticlePost/ArticlePost.scss | 2 +- src/components/BaseHead.astro | 4 +- src/components/Header/Header.scss | 5 ++- src/components/SearchInput/SearchInput.scss | 4 +- src/components/TagsList/TagsList.tsx | 7 +--- .../ThemeSwticher/ThemeSwitcher.astro | 4 +- src/layouts/article.astro | 9 ++--- src/layouts/default.astro | 8 ++-- src/pages/contacts.astro | 1 - src/styles/global.scss | 37 +++++-------------- 12 files changed, 69 insertions(+), 50 deletions(-) create mode 100644 public/assets/dark.css create mode 100644 public/assets/light.css diff --git a/public/assets/dark.css b/public/assets/dark.css new file mode 100644 index 0000000..a4b81bd --- /dev/null +++ b/public/assets/dark.css @@ -0,0 +1,19 @@ +:root { + /* Fonts */ + --font-color: var(--color-white); + --font-color-gray: var(--color-gray-100); + --font-color-grayer: var(--color-gray-200); + + /* Border */ + --border-color: var(--color-gray-700); + --border-color-hover: var(--color-gray-600); + + /* Elements */ + --background-body-color: var(--color-gray-900); + --background-header-color: var(--color-gray-900); + --background-inline-code: var(--color-gray-800); + --background-color-hover: var(--color-gray-800); + --background-btn-link: var(--color-gray-800); + --background-btn-link-active: var(--color-gray-700); + --background-inputs-color: var(--color-gray-800); +} diff --git a/public/assets/light.css b/public/assets/light.css new file mode 100644 index 0000000..7e40887 --- /dev/null +++ b/public/assets/light.css @@ -0,0 +1,19 @@ +:root { + /* Fonts */ + --font-color: var(--color-black); + --font-color-gray: var(--color-gray-500); + --font-color-grayer: var(--color-gray-700); + + /* Border */ + --border-color: var(--color-gray-100); + --border-color-hover: var(--color-gray-400); + + /* Elements */ + --background-body-color: var(--color-white); + --background-header-color: var(--color-white); + --background-inline-code: rgba(0, 0, 0, 0.05); + --background-color-hover: var(--color-gray-50); + --background-btn-link: var(--color-white); + --background-btn-link-active: var(--color-white); + --background-inputs-color: var(--color-white); +} diff --git a/src/components/ArticlePost/ArticlePost.scss b/src/components/ArticlePost/ArticlePost.scss index 1ec4c44..b61fae7 100644 --- a/src/components/ArticlePost/ArticlePost.scss +++ b/src/components/ArticlePost/ArticlePost.scss @@ -27,7 +27,7 @@ & h1 { font-weight: 600; - font-size: 2.25rem; + font-size: 2.125rem; } & p { diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro index bc28aed..f7d9cdb 100644 --- a/src/components/BaseHead.astro +++ b/src/components/BaseHead.astro @@ -12,6 +12,8 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props; + + @@ -19,4 +21,4 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props; {title} - + diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index 049cc0e..40bbdf9 100644 --- a/src/components/Header/Header.scss +++ b/src/components/Header/Header.scss @@ -6,6 +6,7 @@ padding-top: 15px; padding-bottom: 15px; user-select: none; + z-index: 9999; & .container { display: flex; @@ -81,7 +82,7 @@ position: absolute; height: 3px; width: 100%; - background: var(--color-black); + background: var(--font-color); border-radius: 7px; opacity: 1; left: 0; @@ -125,7 +126,7 @@ body[data-is-mobile-open='true'] { & .header { - background-color: var(--color-white); + background-color: var(--background-header-color); position: fixed; right: 0; left: 0; diff --git a/src/components/SearchInput/SearchInput.scss b/src/components/SearchInput/SearchInput.scss index db15dad..1ba730e 100644 --- a/src/components/SearchInput/SearchInput.scss +++ b/src/components/SearchInput/SearchInput.scss @@ -12,12 +12,14 @@ } & input { padding-left: 40px; - color: var(--font-color-grayer); + color: var(--font-color-gray); background-color: var(--background-color-hover); } & span { font-size: var(--font-size-lg); font-weight: 500; color: var(--font-color-grayer); + min-width: 20px; + text-align: center; } } diff --git a/src/components/TagsList/TagsList.tsx b/src/components/TagsList/TagsList.tsx index 472a5b3..0e0a252 100644 --- a/src/components/TagsList/TagsList.tsx +++ b/src/components/TagsList/TagsList.tsx @@ -86,12 +86,7 @@ const TagsList: Component = (props) => { ( -
  • +
  • {tag}
    • )} diff --git a/src/components/ThemeSwticher/ThemeSwitcher.astro b/src/components/ThemeSwticher/ThemeSwitcher.astro index 360fe7f..915d7c0 100644 --- a/src/components/ThemeSwticher/ThemeSwitcher.astro +++ b/src/components/ThemeSwticher/ThemeSwitcher.astro @@ -1,8 +1,8 @@ --- import './ThemeSwitcher.scss'; -import { Icon } from 'astro-icon' +import { Icon } from 'astro-icon'; --- diff --git a/src/layouts/article.astro b/src/layouts/article.astro index f923464..4b34305 100644 --- a/src/layouts/article.astro +++ b/src/layouts/article.astro @@ -2,12 +2,11 @@ import type { Props as BaseHeadProps } from '@root/components/BaseHead.astro'; import type { ArticleType } from '@root/types'; -import '@styles/global.scss'; -import BaseHead from '@root/components/BaseHead.astro'; +import BaseHead from '@components/BaseHead.astro'; import BaseLayout from '@components/BaseLayout'; -import { DateFormatter } from '@root/utils'; -import ArticleContent from '@root/components/ArticleContent'; -import ArticlePost from '@root/components/ArticlePost'; +import ArticleContent from '@components/ArticleContent'; +import ArticlePost from '@components/ArticlePost'; +import '@styles/global.scss'; export interface Props extends BaseHeadProps { lang?: string | undefined; diff --git a/src/layouts/default.astro b/src/layouts/default.astro index 08a3d64..44ed720 100644 --- a/src/layouts/default.astro +++ b/src/layouts/default.astro @@ -1,11 +1,11 @@ --- -import type { Props as BaseHeadProps } from '@root/components/BaseHead.astro'; +import type { Props as BaseHeadProps } from '@components/BaseHead.astro'; -import '@styles/global.scss'; -import BaseHead from '@root/components/BaseHead.astro'; +import BaseHead from '@components/BaseHead.astro'; import BaseLayout from '@components/BaseLayout'; import { SITE_METADATA } from '@root/config'; -import PageHeading from '@root/components/PageHeading'; +import PageHeading from '@components/PageHeading'; +import '@styles/global.scss'; export interface Props extends BaseHeadProps { lang?: string | undefined; diff --git a/src/pages/contacts.astro b/src/pages/contacts.astro index 509d701..82caea4 100644 --- a/src/pages/contacts.astro +++ b/src/pages/contacts.astro @@ -1,6 +1,5 @@ --- import PageLayout from '@layouts/default.astro'; -import PageHeading from '@components/PageHeading'; import ContactForm from '@components/ContactForm'; import ContactsList from '@components/ContactsList'; --- diff --git a/src/styles/global.scss b/src/styles/global.scss index 1e14a15..3b2e08b 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,10 +1,9 @@ :root { + color-scheme: light dark; + /* Fonts */ --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; --font-family-base: 'Rubik', var(--font-fallback); - --font-color: var(--color-black); - --font-color-gray: var(--color-gray-500); - --font-color-grayer: var(--color-gray-700); --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; @@ -75,11 +74,7 @@ --color-yellow-800: #4b2900; --color-yellow-900: #341a00; - --background-color-hover: var(--color-gray-50); - /* Border */ - --border-color: var(--color-gray-100); - --border-color-hover: var(--color-gray-400); --border-radius-md: 3px; --border-radius-lg: 5px; @@ -87,12 +82,7 @@ --content-width: 760px; --content-padding: 24px; - /* Elements */ - --background-body-color: var(--color-white); - --background-header-color: var(--color-white); - --background-scrollbar-track-color: #eff1f5; - --background-scrollbar-thumb-color: var(--color-gray-100); - --background-inline-code: rgba(0, 0, 0, 0.05); + --outline-color: var(--color-blue-500); --opacity-hover: 0.7; } @@ -102,19 +92,6 @@ color: var(--color-black); } -::-webkit-scrollbar { - width: 10px; - height: 10px; -} - -::-webkit-scrollbar-track { - background: var(--background-scrollbar-track-color); -} - -::-webkit-scrollbar-thumb { - background: var(--background-scrollbar-thumb-color); -} - html, body { box-sizing: border-box; @@ -168,6 +145,7 @@ body { align-items: center; column-gap: 5px; padding: 3px 10px; + background-color: var(--background-btn-link); border-radius: var(--border-radius-md); border: 1px solid var(--border-color); text-decoration: none; @@ -181,6 +159,10 @@ body { color: inherit; border-color: var(--border-color-hover); } + &[data-active='true'] { + background-color: var(--background-btn-link-active); + border-color: var(--border-color-hover); + } } li::marker { @@ -217,9 +199,10 @@ textarea { padding: 8px 15px; border: 1px solid var(--border-color); border-radius: var(--border-radius-md); + background-color: var(--background-inputs-color); font-size: var(--font-size-sm); width: 100%; - outline-color: var(--color-blue-500); + outline-color: var(--outline-color); resize: vertical; } From 768d34fabb6286cc802ab06c63337d3d24b21687 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Mon, 25 Jul 2022 16:44:22 +0300 Subject: [PATCH 2/6] setup prism theme --- public/assets/prism-one-dark.min.css | 1 + public/assets/prism-one-light.min.css | 1 + src/components/ArticleItem/ArticleItem.scss | 8 +- src/components/BaseHead.astro | 1 + src/components/Footer/Footer.scss | 64 +-- src/components/Header/Header.astro | 2 +- src/layouts/article.astro | 5 +- src/pages/[article].astro | 1 - src/styles/global.scss | 4 +- src/styles/prism-one-dark.css | 440 -------------------- src/styles/prism-one-light.css | 428 ------------------- 11 files changed, 43 insertions(+), 912 deletions(-) create mode 100644 public/assets/prism-one-dark.min.css create mode 100644 public/assets/prism-one-light.min.css delete mode 100644 src/styles/prism-one-dark.css delete mode 100644 src/styles/prism-one-light.css diff --git a/public/assets/prism-one-dark.min.css b/public/assets/prism-one-dark.min.css new file mode 100644 index 0000000..2339ae7 --- /dev/null +++ b/public/assets/prism-one-dark.min.css @@ -0,0 +1 @@ +code[class*=language-],pre[class*=language-]{background:#111b27;color:#aab1bf;text-shadow:0 1px rgba(0,0,0,.3);font-family:'Fira Code','Fira Mono',Menlo,Consolas,'DejaVu Sans Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection{background:#3e4450;color:inherit;text-shadow:none}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection{background:#3e4450;color:inherit;text-shadow:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-]{padding:.2em .3em;border-radius:.3em;white-space:normal}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}.token.cdata,.token.comment,.token.prolog{color:#5b6270}.token.doctype,.token.entity,.token.punctuation{color:#aab1bf}.token.atrule,.token.attr-name,.token.boolean,.token.class-name,.token.constant,.token.number{color:#d19965}.token.keyword{color:#c578dd}.token.deleted,.token.important,.token.property,.token.symbol,.token.tag{color:#df6b75}.token.attr-value,.token.attr-value>.token.punctuation,.token.builtin,.token.char,.token.inserted,.token.regex,.token.selector,.token.string{color:#97c279}.token.function,.token.operator,.token.variable{color:#61afef}.token.url{color:#56b5c2}.token.attr-value>.token.punctuation.attr-equals,.token.special-attr>.token.attr-value>.token.value.css{color:#aab1bf}.language-css .token.selector{color:#df6b75}.language-css .token.property{color:#aab1bf}.language-css .token.function,.language-css .token.url>.token.function{color:#56b5c2}.language-css .token.url>.token.string.url{color:#97c279}.language-css .token.atrule .token.rule,.language-css .token.important{color:#c578dd}.language-javascript .token.operator{color:#c578dd}.language-javascript .token.template-string>.token.interpolation>.token.interpolation-punctuation.punctuation{color:#be5046}.language-json .token.operator{color:#aab1bf}.language-json .token.null.keyword{color:#d19965}.language-markdown .token.url,.language-markdown .token.url-reference.url>.token.string,.language-markdown .token.url>.token.operator{color:#aab1bf}.language-markdown .token.url>.token.content{color:#61afef}.language-markdown .token.url-reference.url,.language-markdown .token.url>.token.url{color:#56b5c2}.language-markdown .token.blockquote.punctuation,.language-markdown .token.hr.punctuation{color:#5b6270;font-style:italic}.language-markdown .token.code-snippet{color:#97c279}.language-markdown .token.bold .token.content{color:#d19965}.language-markdown .token.italic .token.content{color:#c578dd}.language-markdown .token.list.punctuation,.language-markdown .token.strike .token.content,.language-markdown .token.strike .token.punctuation,.language-markdown .token.title.important>.token.punctuation{color:#df6b75}.token.bold{font-weight:700}.token.comment,.token.italic{font-style:italic}.token.entity{cursor:help}.token.namespace{opacity:.8}.token.token.cr:before,.token.token.lf:before,.token.token.space:before,.token.token.tab:not(:empty):before{color:hsla(220,14%,71%,.15);text-shadow:none}div.code-toolbar>.toolbar.toolbar>.toolbar-item{margin-right:.4em}div.code-toolbar>.toolbar.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar.toolbar>.toolbar-item>span{background:#393f4a;color:#818896;padding:.1em .4em;border-radius:.3em}div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:hover{background:#3e4450;color:#aab1bf}.line-highlight.line-highlight{background:hsla(220,100%,80%,.04)}.line-highlight.line-highlight:before,.line-highlight.line-highlight[data-end]:after{background:#393f4a;color:#aab1bf;padding:.1em .6em;border-radius:.3em;box-shadow:0 2px 0 0 rgba(0,0,0,.2)}pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows>span:hover:before{background-color:hsla(220,100%,80%,.04)}.command-line .command-line-prompt,.line-numbers.line-numbers .line-numbers-rows{border-right-color:hsla(220,14%,71%,.15)}.command-line .command-line-prompt>span:before,.line-numbers .line-numbers-rows>span:before{color:#626d82}.rainbow-braces .token.token.punctuation.brace-level-1,.rainbow-braces .token.token.punctuation.brace-level-5,.rainbow-braces .token.token.punctuation.brace-level-9{color:#df6b75}.rainbow-braces .token.token.punctuation.brace-level-10,.rainbow-braces .token.token.punctuation.brace-level-2,.rainbow-braces .token.token.punctuation.brace-level-6{color:#97c279}.rainbow-braces .token.token.punctuation.brace-level-11,.rainbow-braces .token.token.punctuation.brace-level-3,.rainbow-braces .token.token.punctuation.brace-level-7{color:#61afef}.rainbow-braces .token.token.punctuation.brace-level-12,.rainbow-braces .token.token.punctuation.brace-level-4,.rainbow-braces .token.token.punctuation.brace-level-8{color:#c578dd}pre.diff-highlight>code .token.token.deleted:not(.prefix),pre>code.diff-highlight .token.token.deleted:not(.prefix){background-color:hsla(353,100%,66%,.15)}pre.diff-highlight>code .token.token.deleted:not(.prefix) ::-moz-selection,pre.diff-highlight>code .token.token.deleted:not(.prefix)::-moz-selection,pre>code.diff-highlight .token.token.deleted:not(.prefix) ::-moz-selection,pre>code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection{background-color:hsla(353,95%,66%,.25)}pre.diff-highlight>code .token.token.deleted:not(.prefix) ::selection,pre.diff-highlight>code .token.token.deleted:not(.prefix)::selection,pre>code.diff-highlight .token.token.deleted:not(.prefix) ::selection,pre>code.diff-highlight .token.token.deleted:not(.prefix)::selection{background-color:hsla(353,95%,66%,.25)}pre.diff-highlight>code .token.token.inserted:not(.prefix),pre>code.diff-highlight .token.token.inserted:not(.prefix){background-color:hsla(137,100%,55%,.15)}pre.diff-highlight>code .token.token.inserted:not(.prefix) ::-moz-selection,pre.diff-highlight>code .token.token.inserted:not(.prefix)::-moz-selection,pre>code.diff-highlight .token.token.inserted:not(.prefix) ::-moz-selection,pre>code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection{background-color:hsla(135,73%,55%,.25)}pre.diff-highlight>code .token.token.inserted:not(.prefix) ::selection,pre.diff-highlight>code .token.token.inserted:not(.prefix)::selection,pre>code.diff-highlight .token.token.inserted:not(.prefix) ::selection,pre>code.diff-highlight .token.token.inserted:not(.prefix)::selection{background-color:hsla(135,73%,55%,.25)}.prism-previewer-gradient.prism-previewer-gradient div,.prism-previewer.prism-previewer:before{border-color:#252830}.prism-previewer-color.prism-previewer-color:before,.prism-previewer-easing.prism-previewer-easing:before,.prism-previewer-gradient.prism-previewer-gradient div{border-radius:.3em}.prism-previewer.prism-previewer:after{border-top-color:#252830}.prism-previewer-flipped.prism-previewer-flipped.after{border-bottom-color:#252830}.prism-previewer-angle.prism-previewer-angle:before,.prism-previewer-easing.prism-previewer-easing,.prism-previewer-time.prism-previewer-time:before{background:#30353f}.prism-previewer-angle.prism-previewer-angle circle,.prism-previewer-time.prism-previewer-time circle{stroke:#aab1bf;stroke-opacity:1}.prism-previewer-easing.prism-previewer-easing circle,.prism-previewer-easing.prism-previewer-easing line,.prism-previewer-easing.prism-previewer-easing path{stroke:#aab1bf}.prism-previewer-easing.prism-previewer-easing circle{fill:transparent} \ No newline at end of file diff --git a/public/assets/prism-one-light.min.css b/public/assets/prism-one-light.min.css new file mode 100644 index 0000000..37a3b9d --- /dev/null +++ b/public/assets/prism-one-light.min.css @@ -0,0 +1 @@ +code[class*=language-],pre[class*=language-]{background:#f9f9f9;color:#383942;font-family:'Fira Code','Fira Mono',Menlo,Consolas,'DejaVu Sans Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection{background:#e5e5e5;color:inherit}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection{background:#e5e5e5;color:inherit}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-]{padding:.2em .3em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.prolog{color:#9fa0a6}.token.doctype,.token.entity,.token.punctuation{color:#383942}.token.atrule,.token.attr-name,.token.boolean,.token.class-name,.token.constant,.token.number{color:#b66a00}.token.keyword{color:#a625a4}.token.deleted,.token.important,.token.property,.token.symbol,.token.tag{color:#e35549}.token.attr-value,.token.attr-value>.token.punctuation,.token.builtin,.token.char,.token.inserted,.token.regex,.token.selector,.token.string{color:#50a04f}.token.function,.token.operator,.token.variable{color:#4078f1}.token.url{color:#0083bb}.token.attr-value>.token.punctuation.attr-equals,.token.special-attr>.token.attr-value>.token.value.css{color:#383942}.language-css .token.selector{color:#e35549}.language-css .token.property{color:#383942}.language-css .token.function,.language-css .token.url>.token.function{color:#0083bb}.language-css .token.url>.token.string.url{color:#50a04f}.language-css .token.atrule .token.rule,.language-css .token.important{color:#a625a4}.language-javascript .token.operator{color:#a625a4}.language-javascript .token.template-string>.token.interpolation>.token.interpolation-punctuation.punctuation{color:#c91142}.language-json .token.operator{color:#383942}.language-json .token.null.keyword{color:#b66a00}.language-markdown .token.url,.language-markdown .token.url-reference.url>.token.string,.language-markdown .token.url>.token.operator{color:#383942}.language-markdown .token.url>.token.content{color:#4078f1}.language-markdown .token.url-reference.url,.language-markdown .token.url>.token.url{color:#0083bb}.language-markdown .token.blockquote.punctuation,.language-markdown .token.hr.punctuation{color:#9fa0a6;font-style:italic}.language-markdown .token.code-snippet{color:#50a04f}.language-markdown .token.bold .token.content{color:#b66a00}.language-markdown .token.italic .token.content{color:#a625a4}.language-markdown .token.list.punctuation,.language-markdown .token.strike .token.content,.language-markdown .token.strike .token.punctuation,.language-markdown .token.title.important>.token.punctuation{color:#e35549}.token.bold{font-weight:700}.token.comment,.token.italic{font-style:italic}.token.entity{cursor:help}.token.namespace{opacity:.8}.token.token.cr:before,.token.token.lf:before,.token.token.space:before,.token.token.tab:not(:empty):before{color:hsla(230,8%,24%,.2)}div.code-toolbar>.toolbar.toolbar>.toolbar-item{margin-right:.4em}div.code-toolbar>.toolbar.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar.toolbar>.toolbar-item>span{background:#e5e5e5;color:#696b76;padding:.1em .4em;border-radius:.3em}div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:hover{background:#c6c6c7;color:#383942}.line-highlight.line-highlight{background:hsla(230,8%,24%,.05)}.line-highlight.line-highlight:before,.line-highlight.line-highlight[data-end]:after{background:#e5e5e5;color:#383942;padding:.1em .6em;border-radius:.3em;box-shadow:0 2px 0 0 rgba(0,0,0,.2)}pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows>span:hover:before{background-color:hsla(230,8%,24%,.05)}.command-line .command-line-prompt,.line-numbers.line-numbers .line-numbers-rows{border-right-color:hsla(230,8%,24%,.2)}.command-line .command-line-prompt>span:before,.line-numbers .line-numbers-rows>span:before{color:#9d9d9f}.rainbow-braces .token.token.punctuation.brace-level-1,.rainbow-braces .token.token.punctuation.brace-level-5,.rainbow-braces .token.token.punctuation.brace-level-9{color:#e35549}.rainbow-braces .token.token.punctuation.brace-level-10,.rainbow-braces .token.token.punctuation.brace-level-2,.rainbow-braces .token.token.punctuation.brace-level-6{color:#50a04f}.rainbow-braces .token.token.punctuation.brace-level-11,.rainbow-braces .token.token.punctuation.brace-level-3,.rainbow-braces .token.token.punctuation.brace-level-7{color:#4078f1}.rainbow-braces .token.token.punctuation.brace-level-12,.rainbow-braces .token.token.punctuation.brace-level-4,.rainbow-braces .token.token.punctuation.brace-level-8{color:#a625a4}pre.diff-highlight>code .token.token.deleted:not(.prefix),pre>code.diff-highlight .token.token.deleted:not(.prefix){background-color:hsla(353,100%,66%,.15)}pre.diff-highlight>code .token.token.deleted:not(.prefix) ::-moz-selection,pre.diff-highlight>code .token.token.deleted:not(.prefix)::-moz-selection,pre>code.diff-highlight .token.token.deleted:not(.prefix) ::-moz-selection,pre>code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection{background-color:hsla(353,95%,66%,.25)}pre.diff-highlight>code .token.token.deleted:not(.prefix) ::selection,pre.diff-highlight>code .token.token.deleted:not(.prefix)::selection,pre>code.diff-highlight .token.token.deleted:not(.prefix) ::selection,pre>code.diff-highlight .token.token.deleted:not(.prefix)::selection{background-color:hsla(353,95%,66%,.25)}pre.diff-highlight>code .token.token.inserted:not(.prefix),pre>code.diff-highlight .token.token.inserted:not(.prefix){background-color:hsla(137,100%,55%,.15)}pre.diff-highlight>code .token.token.inserted:not(.prefix) ::-moz-selection,pre.diff-highlight>code .token.token.inserted:not(.prefix)::-moz-selection,pre>code.diff-highlight .token.token.inserted:not(.prefix) ::-moz-selection,pre>code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection{background-color:hsla(135,73%,55%,.25)}pre.diff-highlight>code .token.token.inserted:not(.prefix) ::selection,pre.diff-highlight>code .token.token.inserted:not(.prefix)::selection,pre>code.diff-highlight .token.token.inserted:not(.prefix) ::selection,pre>code.diff-highlight .token.token.inserted:not(.prefix)::selection{background-color:hsla(135,73%,55%,.25)}.prism-previewer-gradient.prism-previewer-gradient div,.prism-previewer.prism-previewer:before{border-color:#f2f2f2}.prism-previewer-color.prism-previewer-color:before,.prism-previewer-easing.prism-previewer-easing:before,.prism-previewer-gradient.prism-previewer-gradient div{border-radius:.3em}.prism-previewer.prism-previewer:after{border-top-color:#f2f2f2}.prism-previewer-flipped.prism-previewer-flipped.after{border-bottom-color:#f2f2f2}.prism-previewer-angle.prism-previewer-angle:before,.prism-previewer-easing.prism-previewer-easing,.prism-previewer-time.prism-previewer-time:before{background:#fff}.prism-previewer-angle.prism-previewer-angle circle,.prism-previewer-time.prism-previewer-time circle{stroke:#383942;stroke-opacity:1}.prism-previewer-easing.prism-previewer-easing circle,.prism-previewer-easing.prism-previewer-easing line,.prism-previewer-easing.prism-previewer-easing path{stroke:#383942}.prism-previewer-easing.prism-previewer-easing circle{fill:transparent} \ No newline at end of file diff --git a/src/components/ArticleItem/ArticleItem.scss b/src/components/ArticleItem/ArticleItem.scss index ed35e2b..8a1e6eb 100644 --- a/src/components/ArticleItem/ArticleItem.scss +++ b/src/components/ArticleItem/ArticleItem.scss @@ -7,7 +7,7 @@ align-items: center; column-gap: 10px; color: var(--font-color); - padding: 8px 15px; + padding: 8px 0; & h3 { font-size: var(--font-size-md); font-weight: normal; @@ -22,12 +22,6 @@ white-space: nowrap; margin-bottom: 0; } - &:hover { - text-decoration: none; - } - } - &:hover { - background-color: var(--background-color-hover); } } diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro index f7d9cdb..a24784c 100644 --- a/src/components/BaseHead.astro +++ b/src/components/BaseHead.astro @@ -22,3 +22,4 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props; + diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss index 66ad8de..82847af 100644 --- a/src/components/Footer/Footer.scss +++ b/src/components/Footer/Footer.scss @@ -1,34 +1,34 @@ .footer { - & .container { - margin-top: 5rem; - padding: 25px 0 10px 0; - font-weight: 500; - border-top: 1px solid var(--border-color); - display: flex; - flex-direction: column; - align-items: center; - row-gap: 15px; - user-select: none; - } - &__links { - display: flex; - align-items: center; - column-gap: 25px; - list-style: none; - margin: 0; - padding: 0; - & li { - display: flex; - align-items: center; - column-gap: 7px; - & a { - color: var(--font-color); - font-size: var(--font-size-sm); - } - } - } - &__copy { - text-align: center; - font-size: var(--font-size-xs); - } + & .container { + margin-top: 5rem; + padding: 25px 0 10px 0; + font-weight: 500; + border-top: 1px solid var(--border-color); + display: flex; + flex-direction: column; + align-items: center; + row-gap: 15px; + user-select: none; + } + &__links { + display: flex; + align-items: center; + column-gap: 25px; + list-style: none; + margin: 0; + padding: 0; + & li { + display: flex; + align-items: center; + column-gap: 7px; + & a { + color: var(--font-color); + font-size: var(--font-size-sm); + } + } + } + &__copy { + text-align: center; + font-size: var(--font-size-xs); + } } diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro index c953f40..fdf366e 100644 --- a/src/components/Header/Header.astro +++ b/src/components/Header/Header.astro @@ -40,6 +40,6 @@ const { pathname } = Astro.canonicalURL; - + diff --git a/src/layouts/article.astro b/src/layouts/article.astro index 4b34305..265b5a9 100644 --- a/src/layouts/article.astro +++ b/src/layouts/article.astro @@ -18,7 +18,10 @@ const { lang = 'ru', content } = Astro.props as Props; - + + + + diff --git a/src/pages/[article].astro b/src/pages/[article].astro index 28e79f8..4828f16 100644 --- a/src/pages/[article].astro +++ b/src/pages/[article].astro @@ -1,5 +1,4 @@ --- -import '@root/styles/prism-one-light.css'; import ArticleLayout from '@root/layouts/article.astro'; import { Markdown } from 'astro/components'; diff --git a/src/styles/global.scss b/src/styles/global.scss index 3b2e08b..18c6507 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -210,8 +210,8 @@ button { cursor: pointer; font-family: var(--font-family-base); font-weight: 500; - font-size: var(--font-size-sm); - padding: 4px 15px; + font-size: var(--font-size-md); + padding: 5px 17px; border: 1px solid var(--border-color); border-radius: var(--border-radius-md); background: none; diff --git a/src/styles/prism-one-dark.css b/src/styles/prism-one-dark.css deleted file mode 100644 index 94f23e3..0000000 --- a/src/styles/prism-one-dark.css +++ /dev/null @@ -1,440 +0,0 @@ -/** - * One Dark theme for prism.js - * Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax - */ - -/** - * One Dark colours (accurate as of commit 8ae45ca on 6 Sep 2018) - * From colors.less - * --mono-1: hsl(220, 14%, 71%); - * --mono-2: hsl(220, 9%, 55%); - * --mono-3: hsl(220, 10%, 40%); - * --hue-1: hsl(187, 47%, 55%); - * --hue-2: hsl(207, 82%, 66%); - * --hue-3: hsl(286, 60%, 67%); - * --hue-4: hsl(95, 38%, 62%); - * --hue-5: hsl(355, 65%, 65%); - * --hue-5-2: hsl(5, 48%, 51%); - * --hue-6: hsl(29, 54%, 61%); - * --hue-6-2: hsl(39, 67%, 69%); - * --syntax-fg: hsl(220, 14%, 71%); - * --syntax-bg: hsl(220, 13%, 18%); - * --syntax-gutter: hsl(220, 14%, 45%); - * --syntax-guide: hsla(220, 14%, 71%, 0.15); - * --syntax-accent: hsl(220, 100%, 66%); - * From syntax-variables.less - * --syntax-selection-color: hsl(220, 13%, 28%); - * --syntax-gutter-background-color-selected: hsl(220, 13%, 26%); - * --syntax-cursor-line: hsla(220, 100%, 80%, 0.04); - */ - - code[class*="language-"], - pre[class*="language-"] { - background: hsl(220, 13%, 18%); - color: hsl(220, 14%, 71%); - text-shadow: 0 1px rgba(0, 0, 0, 0.3); - font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - line-height: 1.5; - -moz-tab-size: 2; - -o-tab-size: 2; - tab-size: 2; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - } - - /* Selection */ - code[class*="language-"]::-moz-selection, - code[class*="language-"] *::-moz-selection, - pre[class*="language-"] *::-moz-selection { - background: hsl(220, 13%, 28%); - color: inherit; - text-shadow: none; - } - - code[class*="language-"]::selection, - code[class*="language-"] *::selection, - pre[class*="language-"] *::selection { - background: hsl(220, 13%, 28%); - color: inherit; - text-shadow: none; - } - - /* Code blocks */ - pre[class*="language-"] { - padding: 1em; - margin: 0.5em 0; - overflow: auto; - border-radius: 0.3em; - } - - /* Inline code */ - :not(pre) > code[class*="language-"] { - padding: 0.2em 0.3em; - border-radius: 0.3em; - white-space: normal; - } - - /* Print */ - @media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } - } - - .token.comment, - .token.prolog, - .token.cdata { - color: hsl(220, 10%, 40%); - } - - .token.doctype, - .token.punctuation, - .token.entity { - color: hsl(220, 14%, 71%); - } - - .token.attr-name, - .token.class-name, - .token.boolean, - .token.constant, - .token.number, - .token.atrule { - color: hsl(29, 54%, 61%); - } - - .token.keyword { - color: hsl(286, 60%, 67%); - } - - .token.property, - .token.tag, - .token.symbol, - .token.deleted, - .token.important { - color: hsl(355, 65%, 65%); - } - - .token.selector, - .token.string, - .token.char, - .token.builtin, - .token.inserted, - .token.regex, - .token.attr-value, - .token.attr-value > .token.punctuation { - color: hsl(95, 38%, 62%); - } - - .token.variable, - .token.operator, - .token.function { - color: hsl(207, 82%, 66%); - } - - .token.url { - color: hsl(187, 47%, 55%); - } - - /* HTML overrides */ - .token.attr-value > .token.punctuation.attr-equals, - .token.special-attr > .token.attr-value > .token.value.css { - color: hsl(220, 14%, 71%); - } - - /* CSS overrides */ - .language-css .token.selector { - color: hsl(355, 65%, 65%); - } - - .language-css .token.property { - color: hsl(220, 14%, 71%); - } - - .language-css .token.function, - .language-css .token.url > .token.function { - color: hsl(187, 47%, 55%); - } - - .language-css .token.url > .token.string.url { - color: hsl(95, 38%, 62%); - } - - .language-css .token.important, - .language-css .token.atrule .token.rule { - color: hsl(286, 60%, 67%); - } - - /* JS overrides */ - .language-javascript .token.operator { - color: hsl(286, 60%, 67%); - } - - .language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation { - color: hsl(5, 48%, 51%); - } - - /* JSON overrides */ - .language-json .token.operator { - color: hsl(220, 14%, 71%); - } - - .language-json .token.null.keyword { - color: hsl(29, 54%, 61%); - } - - /* MD overrides */ - .language-markdown .token.url, - .language-markdown .token.url > .token.operator, - .language-markdown .token.url-reference.url > .token.string { - color: hsl(220, 14%, 71%); - } - - .language-markdown .token.url > .token.content { - color: hsl(207, 82%, 66%); - } - - .language-markdown .token.url > .token.url, - .language-markdown .token.url-reference.url { - color: hsl(187, 47%, 55%); - } - - .language-markdown .token.blockquote.punctuation, - .language-markdown .token.hr.punctuation { - color: hsl(220, 10%, 40%); - font-style: italic; - } - - .language-markdown .token.code-snippet { - color: hsl(95, 38%, 62%); - } - - .language-markdown .token.bold .token.content { - color: hsl(29, 54%, 61%); - } - - .language-markdown .token.italic .token.content { - color: hsl(286, 60%, 67%); - } - - .language-markdown .token.strike .token.content, - .language-markdown .token.strike .token.punctuation, - .language-markdown .token.list.punctuation, - .language-markdown .token.title.important > .token.punctuation { - color: hsl(355, 65%, 65%); - } - - /* General */ - .token.bold { - font-weight: bold; - } - - .token.comment, - .token.italic { - font-style: italic; - } - - .token.entity { - cursor: help; - } - - .token.namespace { - opacity: 0.8; - } - - /* Plugin overrides */ - /* Selectors should have higher specificity than those in the plugins' default stylesheets */ - - /* Show Invisibles plugin overrides */ - .token.token.tab:not(:empty):before, - .token.token.cr:before, - .token.token.lf:before, - .token.token.space:before { - color: hsla(220, 14%, 71%, 0.15); - text-shadow: none; - } - - /* Toolbar plugin overrides */ - /* Space out all buttons and move them away from the right edge of the code block */ - div.code-toolbar > .toolbar.toolbar > .toolbar-item { - margin-right: 0.4em; - } - - /* Styling the buttons */ - div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, - div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, - div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { - background: hsl(220, 13%, 26%); - color: hsl(220, 9%, 55%); - padding: 0.1em 0.4em; - border-radius: 0.3em; - } - - div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, - div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, - div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, - div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, - div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, - div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { - background: hsl(220, 13%, 28%); - color: hsl(220, 14%, 71%); - } - - /* Line Highlight plugin overrides */ - /* The highlighted line itself */ - .line-highlight.line-highlight { - background: hsla(220, 100%, 80%, 0.04); - } - - /* Default line numbers in Line Highlight plugin */ - .line-highlight.line-highlight:before, - .line-highlight.line-highlight[data-end]:after { - background: hsl(220, 13%, 26%); - color: hsl(220, 14%, 71%); - padding: 0.1em 0.6em; - border-radius: 0.3em; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ - } - - /* Hovering over a linkable line number (in the gutter area) */ - /* Requires Line Numbers plugin as well */ - pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { - background-color: hsla(220, 100%, 80%, 0.04); - } - - /* Line Numbers and Command Line plugins overrides */ - /* Line separating gutter from coding area */ - .line-numbers.line-numbers .line-numbers-rows, - .command-line .command-line-prompt { - border-right-color: hsla(220, 14%, 71%, 0.15); - } - - /* Stuff in the gutter */ - .line-numbers .line-numbers-rows > span:before, - .command-line .command-line-prompt > span:before { - color: hsl(220, 14%, 45%); - } - - /* Match Braces plugin overrides */ - /* Note: Outline colour is inherited from the braces */ - .rainbow-braces .token.token.punctuation.brace-level-1, - .rainbow-braces .token.token.punctuation.brace-level-5, - .rainbow-braces .token.token.punctuation.brace-level-9 { - color: hsl(355, 65%, 65%); - } - - .rainbow-braces .token.token.punctuation.brace-level-2, - .rainbow-braces .token.token.punctuation.brace-level-6, - .rainbow-braces .token.token.punctuation.brace-level-10 { - color: hsl(95, 38%, 62%); - } - - .rainbow-braces .token.token.punctuation.brace-level-3, - .rainbow-braces .token.token.punctuation.brace-level-7, - .rainbow-braces .token.token.punctuation.brace-level-11 { - color: hsl(207, 82%, 66%); - } - - .rainbow-braces .token.token.punctuation.brace-level-4, - .rainbow-braces .token.token.punctuation.brace-level-8, - .rainbow-braces .token.token.punctuation.brace-level-12 { - color: hsl(286, 60%, 67%); - } - - /* Diff Highlight plugin overrides */ - /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ - pre.diff-highlight > code .token.token.deleted:not(.prefix), - pre > code.diff-highlight .token.token.deleted:not(.prefix) { - background-color: hsla(353, 100%, 66%, 0.15); - } - - pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, - pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, - pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, - pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { - background-color: hsla(353, 95%, 66%, 0.25); - } - - pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, - pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, - pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, - pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { - background-color: hsla(353, 95%, 66%, 0.25); - } - - pre.diff-highlight > code .token.token.inserted:not(.prefix), - pre > code.diff-highlight .token.token.inserted:not(.prefix) { - background-color: hsla(137, 100%, 55%, 0.15); - } - - pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, - pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, - pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, - pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { - background-color: hsla(135, 73%, 55%, 0.25); - } - - pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, - pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, - pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, - pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { - background-color: hsla(135, 73%, 55%, 0.25); - } - - /* Previewers plugin overrides */ - /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */ - /* Border around popup */ - .prism-previewer.prism-previewer:before, - .prism-previewer-gradient.prism-previewer-gradient div { - border-color: hsl(224, 13%, 17%); - } - - /* Angle and time should remain as circles and are hence not included */ - .prism-previewer-color.prism-previewer-color:before, - .prism-previewer-gradient.prism-previewer-gradient div, - .prism-previewer-easing.prism-previewer-easing:before { - border-radius: 0.3em; - } - - /* Triangles pointing to the code */ - .prism-previewer.prism-previewer:after { - border-top-color: hsl(224, 13%, 17%); - } - - .prism-previewer-flipped.prism-previewer-flipped.after { - border-bottom-color: hsl(224, 13%, 17%); - } - - /* Background colour within the popup */ - .prism-previewer-angle.prism-previewer-angle:before, - .prism-previewer-time.prism-previewer-time:before, - .prism-previewer-easing.prism-previewer-easing { - background: hsl(219, 13%, 22%); - } - - /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ - /* For time, this is the alternate colour */ - .prism-previewer-angle.prism-previewer-angle circle, - .prism-previewer-time.prism-previewer-time circle { - stroke: hsl(220, 14%, 71%); - stroke-opacity: 1; - } - - /* Stroke colours of the handle, direction point, and vector itself */ - .prism-previewer-easing.prism-previewer-easing circle, - .prism-previewer-easing.prism-previewer-easing path, - .prism-previewer-easing.prism-previewer-easing line { - stroke: hsl(220, 14%, 71%); - } - - /* Fill colour of the handle */ - .prism-previewer-easing.prism-previewer-easing circle { - fill: transparent; - } \ No newline at end of file diff --git a/src/styles/prism-one-light.css b/src/styles/prism-one-light.css deleted file mode 100644 index 58f651d..0000000 --- a/src/styles/prism-one-light.css +++ /dev/null @@ -1,428 +0,0 @@ -/** - * One Light theme for prism.js - * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax - */ - -/** - * One Light colours (accurate as of commit eb064bf on 19 Feb 2021) - * From colors.less - * --mono-1: hsl(230, 8%, 24%); - * --mono-2: hsl(230, 6%, 44%); - * --mono-3: hsl(230, 4%, 64%) - * --hue-1: hsl(198, 99%, 37%); - * --hue-2: hsl(221, 87%, 60%); - * --hue-3: hsl(301, 63%, 40%); - * --hue-4: hsl(119, 34%, 47%); - * --hue-5: hsl(5, 74%, 59%); - * --hue-5-2: hsl(344, 84%, 43%); - * --hue-6: hsl(35, 99%, 36%); - * --hue-6-2: hsl(35, 99%, 40%); - * --syntax-fg: hsl(230, 8%, 24%); - * --syntax-bg: hsl(230, 1%, 98%); - * --syntax-gutter: hsl(230, 1%, 62%); - * --syntax-guide: hsla(230, 8%, 24%, 0.2); - * --syntax-accent: hsl(230, 100%, 66%); - * From syntax-variables.less - * --syntax-selection-color: hsl(230, 1%, 90%); - * --syntax-gutter-background-color-selected: hsl(230, 1%, 90%); - * --syntax-cursor-line: hsla(230, 8%, 24%, 0.05); - */ - - code[class*="language-"], - pre[class*="language-"] { - background: hsl(230, 1%, 98%); - color: hsl(230, 8%, 24%); - font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - line-height: 1.5; - -moz-tab-size: 2; - -o-tab-size: 2; - tab-size: 2; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - } - - /* Selection */ - code[class*="language-"]::-moz-selection, - code[class*="language-"] *::-moz-selection, - pre[class*="language-"] *::-moz-selection { - background: hsl(230, 1%, 90%); - color: inherit; - } - - code[class*="language-"]::selection, - code[class*="language-"] *::selection, - pre[class*="language-"] *::selection { - background: hsl(230, 1%, 90%); - color: inherit; - } - - /* Code blocks */ - pre[class*="language-"] { - padding: 1em; - margin: 0.5em 0; - overflow: auto; - border-radius: 0.3em; - } - - /* Inline code */ - :not(pre) > code[class*="language-"] { - padding: 0.2em 0.3em; - border-radius: 0.3em; - white-space: normal; - } - - .token.comment, - .token.prolog, - .token.cdata { - color: hsl(230, 4%, 64%); - } - - .token.doctype, - .token.punctuation, - .token.entity { - color: hsl(230, 8%, 24%); - } - - .token.attr-name, - .token.class-name, - .token.boolean, - .token.constant, - .token.number, - .token.atrule { - color: hsl(35, 99%, 36%); - } - - .token.keyword { - color: hsl(301, 63%, 40%); - } - - .token.property, - .token.tag, - .token.symbol, - .token.deleted, - .token.important { - color: hsl(5, 74%, 59%); - } - - .token.selector, - .token.string, - .token.char, - .token.builtin, - .token.inserted, - .token.regex, - .token.attr-value, - .token.attr-value > .token.punctuation { - color: hsl(119, 34%, 47%); - } - - .token.variable, - .token.operator, - .token.function { - color: hsl(221, 87%, 60%); - } - - .token.url { - color: hsl(198, 99%, 37%); - } - - /* HTML overrides */ - .token.attr-value > .token.punctuation.attr-equals, - .token.special-attr > .token.attr-value > .token.value.css { - color: hsl(230, 8%, 24%); - } - - /* CSS overrides */ - .language-css .token.selector { - color: hsl(5, 74%, 59%); - } - - .language-css .token.property { - color: hsl(230, 8%, 24%); - } - - .language-css .token.function, - .language-css .token.url > .token.function { - color: hsl(198, 99%, 37%); - } - - .language-css .token.url > .token.string.url { - color: hsl(119, 34%, 47%); - } - - .language-css .token.important, - .language-css .token.atrule .token.rule { - color: hsl(301, 63%, 40%); - } - - /* JS overrides */ - .language-javascript .token.operator { - color: hsl(301, 63%, 40%); - } - - .language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation { - color: hsl(344, 84%, 43%); - } - - /* JSON overrides */ - .language-json .token.operator { - color: hsl(230, 8%, 24%); - } - - .language-json .token.null.keyword { - color: hsl(35, 99%, 36%); - } - - /* MD overrides */ - .language-markdown .token.url, - .language-markdown .token.url > .token.operator, - .language-markdown .token.url-reference.url > .token.string { - color: hsl(230, 8%, 24%); - } - - .language-markdown .token.url > .token.content { - color: hsl(221, 87%, 60%); - } - - .language-markdown .token.url > .token.url, - .language-markdown .token.url-reference.url { - color: hsl(198, 99%, 37%); - } - - .language-markdown .token.blockquote.punctuation, - .language-markdown .token.hr.punctuation { - color: hsl(230, 4%, 64%); - font-style: italic; - } - - .language-markdown .token.code-snippet { - color: hsl(119, 34%, 47%); - } - - .language-markdown .token.bold .token.content { - color: hsl(35, 99%, 36%); - } - - .language-markdown .token.italic .token.content { - color: hsl(301, 63%, 40%); - } - - .language-markdown .token.strike .token.content, - .language-markdown .token.strike .token.punctuation, - .language-markdown .token.list.punctuation, - .language-markdown .token.title.important > .token.punctuation { - color: hsl(5, 74%, 59%); - } - - /* General */ - .token.bold { - font-weight: bold; - } - - .token.comment, - .token.italic { - font-style: italic; - } - - .token.entity { - cursor: help; - } - - .token.namespace { - opacity: 0.8; - } - - /* Plugin overrides */ - /* Selectors should have higher specificity than those in the plugins' default stylesheets */ - - /* Show Invisibles plugin overrides */ - .token.token.tab:not(:empty):before, - .token.token.cr:before, - .token.token.lf:before, - .token.token.space:before { - color: hsla(230, 8%, 24%, 0.2); - } - - /* Toolbar plugin overrides */ - /* Space out all buttons and move them away from the right edge of the code block */ - div.code-toolbar > .toolbar.toolbar > .toolbar-item { - margin-right: 0.4em; - } - - /* Styling the buttons */ - div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, - div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, - div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { - background: hsl(230, 1%, 90%); - color: hsl(230, 6%, 44%); - padding: 0.1em 0.4em; - border-radius: 0.3em; - } - - div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, - div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, - div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, - div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, - div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, - div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { - background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */ - color: hsl(230, 8%, 24%); - } - - /* Line Highlight plugin overrides */ - /* The highlighted line itself */ - .line-highlight.line-highlight { - background: hsla(230, 8%, 24%, 0.05); - } - - /* Default line numbers in Line Highlight plugin */ - .line-highlight.line-highlight:before, - .line-highlight.line-highlight[data-end]:after { - background: hsl(230, 1%, 90%); - color: hsl(230, 8%, 24%); - padding: 0.1em 0.6em; - border-radius: 0.3em; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ - } - - /* Hovering over a linkable line number (in the gutter area) */ - /* Requires Line Numbers plugin as well */ - pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { - background-color: hsla(230, 8%, 24%, 0.05); - } - - /* Line Numbers and Command Line plugins overrides */ - /* Line separating gutter from coding area */ - .line-numbers.line-numbers .line-numbers-rows, - .command-line .command-line-prompt { - border-right-color: hsla(230, 8%, 24%, 0.2); - } - - /* Stuff in the gutter */ - .line-numbers .line-numbers-rows > span:before, - .command-line .command-line-prompt > span:before { - color: hsl(230, 1%, 62%); - } - - /* Match Braces plugin overrides */ - /* Note: Outline colour is inherited from the braces */ - .rainbow-braces .token.token.punctuation.brace-level-1, - .rainbow-braces .token.token.punctuation.brace-level-5, - .rainbow-braces .token.token.punctuation.brace-level-9 { - color: hsl(5, 74%, 59%); - } - - .rainbow-braces .token.token.punctuation.brace-level-2, - .rainbow-braces .token.token.punctuation.brace-level-6, - .rainbow-braces .token.token.punctuation.brace-level-10 { - color: hsl(119, 34%, 47%); - } - - .rainbow-braces .token.token.punctuation.brace-level-3, - .rainbow-braces .token.token.punctuation.brace-level-7, - .rainbow-braces .token.token.punctuation.brace-level-11 { - color: hsl(221, 87%, 60%); - } - - .rainbow-braces .token.token.punctuation.brace-level-4, - .rainbow-braces .token.token.punctuation.brace-level-8, - .rainbow-braces .token.token.punctuation.brace-level-12 { - color: hsl(301, 63%, 40%); - } - - /* Diff Highlight plugin overrides */ - /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ - pre.diff-highlight > code .token.token.deleted:not(.prefix), - pre > code.diff-highlight .token.token.deleted:not(.prefix) { - background-color: hsla(353, 100%, 66%, 0.15); - } - - pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, - pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, - pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, - pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { - background-color: hsla(353, 95%, 66%, 0.25); - } - - pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, - pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, - pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, - pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { - background-color: hsla(353, 95%, 66%, 0.25); - } - - pre.diff-highlight > code .token.token.inserted:not(.prefix), - pre > code.diff-highlight .token.token.inserted:not(.prefix) { - background-color: hsla(137, 100%, 55%, 0.15); - } - - pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, - pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, - pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, - pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { - background-color: hsla(135, 73%, 55%, 0.25); - } - - pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, - pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, - pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, - pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { - background-color: hsla(135, 73%, 55%, 0.25); - } - - /* Previewers plugin overrides */ - /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */ - /* Border around popup */ - .prism-previewer.prism-previewer:before, - .prism-previewer-gradient.prism-previewer-gradient div { - border-color: hsl(0, 0, 95%); - } - - /* Angle and time should remain as circles and are hence not included */ - .prism-previewer-color.prism-previewer-color:before, - .prism-previewer-gradient.prism-previewer-gradient div, - .prism-previewer-easing.prism-previewer-easing:before { - border-radius: 0.3em; - } - - /* Triangles pointing to the code */ - .prism-previewer.prism-previewer:after { - border-top-color: hsl(0, 0, 95%); - } - - .prism-previewer-flipped.prism-previewer-flipped.after { - border-bottom-color: hsl(0, 0, 95%); - } - - /* Background colour within the popup */ - .prism-previewer-angle.prism-previewer-angle:before, - .prism-previewer-time.prism-previewer-time:before, - .prism-previewer-easing.prism-previewer-easing { - background: hsl(0, 0%, 100%); - } - - /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ - /* For time, this is the alternate colour */ - .prism-previewer-angle.prism-previewer-angle circle, - .prism-previewer-time.prism-previewer-time circle { - stroke: hsl(230, 8%, 24%); - stroke-opacity: 1; - } - - /* Stroke colours of the handle, direction point, and vector itself */ - .prism-previewer-easing.prism-previewer-easing circle, - .prism-previewer-easing.prism-previewer-easing path, - .prism-previewer-easing.prism-previewer-easing line { - stroke: hsl(230, 8%, 24%); - } - - /* Fill colour of the handle */ - .prism-previewer-easing.prism-previewer-easing circle { - fill: transparent; - } \ No newline at end of file From 5f76f318db5bc7bd47c9eba4658fe6d330e35fe9 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Tue, 26 Jul 2022 01:01:56 +0300 Subject: [PATCH 3/6] invert color svg icons --- public/assets/dark.css | 10 ++ public/assets/light.css | 4 + src/components/ContactsList/ContactsList.scss | 4 + src/components/Header/Header.scss | 96 +++++++++---------- .../Header/NavToggle/NavToggle.scss | 14 ++- src/components/Header/NavToggle/NavToggle.tsx | 23 ++++- src/components/SearchInput/SearchInput.scss | 2 + src/icons/email.svg | 2 +- src/icons/socket-io.svg | 8 +- src/styles/global.scss | 4 +- 10 files changed, 105 insertions(+), 62 deletions(-) diff --git a/public/assets/dark.css b/public/assets/dark.css index a4b81bd..b6ec3e2 100644 --- a/public/assets/dark.css +++ b/public/assets/dark.css @@ -16,4 +16,14 @@ --background-btn-link: var(--color-gray-800); --background-btn-link-active: var(--color-gray-700); --background-inputs-color: var(--color-gray-800); + + /* Icons */ + --icon-primary: var(--color-white); + --icon-secondary: var(--color-gray-100); + --icon-filter: invert(100%); +} + +.header svg, +.site-content svg { + filter: var(--icon-filter); } diff --git a/public/assets/light.css b/public/assets/light.css index 7e40887..1daf165 100644 --- a/public/assets/light.css +++ b/public/assets/light.css @@ -16,4 +16,8 @@ --background-btn-link: var(--color-white); --background-btn-link-active: var(--color-white); --background-inputs-color: var(--color-white); + + /* Icons */ + --icon-primary: var(--color-white); + --icon-secondary: var(--color-gray-700); } diff --git a/src/components/ContactsList/ContactsList.scss b/src/components/ContactsList/ContactsList.scss index 9619d4a..feec5f3 100644 --- a/src/components/ContactsList/ContactsList.scss +++ b/src/components/ContactsList/ContactsList.scss @@ -8,4 +8,8 @@ display: flex; column-gap: 5px; } + + & svg { + filter: none; + } } diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index 40bbdf9..b3e246e 100644 --- a/src/components/Header/Header.scss +++ b/src/components/Header/Header.scss @@ -65,55 +65,51 @@ } } &__button { - cursor: pointer; - width: 30px; - height: 21px; - position: relative; - transform: rotate(0deg); - background: none; - border: none; - &:hover { - border: none; - opacity: var(--opacity-hover); - } - & span { - pointer-events: none; - display: block; - position: absolute; - height: 3px; - width: 100%; - background: var(--font-color); - border-radius: 7px; - opacity: 1; - left: 0; - } - & span:nth-child(1) { - top: 2px; - transform-origin: left center; - } - & span:nth-child(2) { - top: 9px; - transform-origin: left center; - } - & span:nth-child(3) { - top: 16px; - transform-origin: left center; - } - &[aria-pressed='true'] { - & span:nth-child(1) { - transform: rotate(45deg); - top: -1px; - left: 5px; - } - & span:nth-child(2) { - display: none; - } - & span:nth-child(3) { - transform: rotate(-45deg); - top: 20px; - left: 5px; - } - } + // cursor: pointer; + // background: none; + // border: none; + // &:hover { + // border: none; + // opacity: var(--opacity-hover); + // } + // & span { + // pointer-events: none; + // display: block; + // position: absolute; + // height: 3px; + // width: 100%; + // background: var(--font-color); + // border-radius: 7px; + // opacity: 1; + // left: 0; + // } + // & span:nth-child(1) { + // top: 2px; + // transform-origin: left center; + // } + // & span:nth-child(2) { + // top: 9px; + // transform-origin: left center; + // } + // & span:nth-child(3) { + // top: 16px; + // transform-origin: left center; + // } + // &[aria-pressed='true'] { + // & span:nth-child(1) { + // transform: rotate(45deg); + // top: -1px; + // left: 5px; + // } + // & span:nth-child(2) { + // display: none; + // } + // & span:nth-child(3) { + // transform: rotate(-45deg); + // top: 20px; + // left: 5px; + // } + // } } } @@ -160,7 +156,7 @@ justify-content: center; } } - &__button { + & .nav-toggle { position: absolute; right: var(--content-padding); } diff --git a/src/components/Header/NavToggle/NavToggle.scss b/src/components/Header/NavToggle/NavToggle.scss index a708442..7ca42f4 100644 --- a/src/components/Header/NavToggle/NavToggle.scss +++ b/src/components/Header/NavToggle/NavToggle.scss @@ -1,5 +1,17 @@ +.nav-toggle { + display: flex; + padding: 0; + cursor: pointer; + // background: none; + border: none; + &:hover { + border: none; + opacity: var(--opacity-hover); + } +} + @media screen and (min-width: 769px) { - #nav-toggle { + .nav-toggle { display: none; } } diff --git a/src/components/Header/NavToggle/NavToggle.tsx b/src/components/Header/NavToggle/NavToggle.tsx index e858b7f..e8ca43a 100644 --- a/src/components/Header/NavToggle/NavToggle.tsx +++ b/src/components/Header/NavToggle/NavToggle.tsx @@ -3,6 +3,23 @@ import type { Component } from 'solid-js'; import { createSignal, createEffect } from 'solid-js'; import './NavToggle.scss'; +const MenuIcon: Component = () => ( + + + +); + +const CloseIcon: Component = () => ( + + + +); + const NavToggle: Component = () => { const [isNavShown, setIsNavShown] = createSignal(false); @@ -20,10 +37,8 @@ const NavToggle: Component = () => { }); return ( - ); }; diff --git a/src/components/SearchInput/SearchInput.scss b/src/components/SearchInput/SearchInput.scss index 1ba730e..a6ffffa 100644 --- a/src/components/SearchInput/SearchInput.scss +++ b/src/components/SearchInput/SearchInput.scss @@ -9,7 +9,9 @@ position: absolute; left: 8px; fill: var(--font-color-grayer); + filter: none; } + & input { padding-left: 40px; color: var(--font-color-gray); diff --git a/src/icons/email.svg b/src/icons/email.svg index 0983d16..7b38190 100644 --- a/src/icons/email.svg +++ b/src/icons/email.svg @@ -1,6 +1,6 @@ - + diff --git a/src/icons/socket-io.svg b/src/icons/socket-io.svg index 6d13e60..b68bfc4 100644 --- a/src/icons/socket-io.svg +++ b/src/icons/socket-io.svg @@ -1,11 +1,9 @@ - - - - + + - + diff --git a/src/styles/global.scss b/src/styles/global.scss index 18c6507..b6d7302 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -211,10 +211,12 @@ button { font-family: var(--font-family-base); font-weight: 500; font-size: var(--font-size-md); - padding: 5px 17px; + color: var(--font-color); + padding: 4px 16px; border: 1px solid var(--border-color); border-radius: var(--border-radius-md); background: none; + font-size: var(--font-size-sm); &:hover { border: 1px solid var(--border-color-hover); } From 75fa8117f66429a5c0640d58922f4898a11d35cf Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Wed, 27 Jul 2022 22:38:43 +0300 Subject: [PATCH 4/6] theme toggling --- package.json | 2 +- public/assets/dark.css | 29 ---- public/assets/light.css | 23 --- src/components/ArticleItem/ArticleItem.tsx | 4 +- src/components/ArticlePost/ArticlePost.astro | 2 - src/components/ArticlesList/ArticlesList.tsx | 1 - src/components/BaseHead.astro | 8 +- .../ContactsList/ContactsList.astro | 6 +- src/components/Header/Header.astro | 2 +- src/components/Header/Header.scss | 50 +------ .../Header/NavToggle/NavToggle.scss | 4 +- src/components/Header/NavToggle/NavToggle.tsx | 13 +- src/components/ProjectItem/ProjectItem.astro | 2 - .../RecentArticles/RecentArticles.astro | 2 - src/components/SearchInput/SearchInput.scss | 2 +- src/components/SearchInput/SearchInput.tsx | 2 +- src/components/SkillsBlock/SkillsBlock.astro | 2 - .../ThemeSwticher/ThemeSwitcher.astro | 8 - .../ThemeSwticher/ThemeSwitcher.scss | 5 + .../ThemeSwticher/ThemeSwitcher.tsx | 62 ++++++++ src/components/ThemeSwticher/index.ts | 2 +- src/config.ts | 4 + src/layouts/article.astro | 1 - src/layouts/default.astro | 2 +- src/pages/articles.astro | 2 - src/pages/index.astro | 2 - src/scripts/detect-theme.astro | 20 +++ src/scripts/index.ts | 1 + src/styles/global.scss | 101 +------------ src/styles/theme.scss | 140 ++++++++++++++++++ src/types/index.ts | 25 ---- src/types/main.d.ts | 39 +++++ src/utils/articles.ts | 2 - tsconfig.json | 3 +- 34 files changed, 304 insertions(+), 269 deletions(-) delete mode 100644 public/assets/dark.css delete mode 100644 public/assets/light.css delete mode 100644 src/components/ThemeSwticher/ThemeSwitcher.astro create mode 100644 src/components/ThemeSwticher/ThemeSwitcher.tsx create mode 100644 src/scripts/detect-theme.astro create mode 100644 src/scripts/index.ts create mode 100644 src/styles/theme.scss delete mode 100644 src/types/index.ts create mode 100644 src/types/main.d.ts diff --git a/package.json b/package.json index fcaa6d9..d6d80cf 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "scripts": { "dev": "astro dev --host", "start": "astro dev", - "build": "astro build", + "build": "astro check && tsc --noEmit && astro build", "preview": "astro preview --host", "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\"", "lint": "eslint '**/*.{js,mjs,ts,tsx}'" diff --git a/public/assets/dark.css b/public/assets/dark.css deleted file mode 100644 index b6ec3e2..0000000 --- a/public/assets/dark.css +++ /dev/null @@ -1,29 +0,0 @@ -:root { - /* Fonts */ - --font-color: var(--color-white); - --font-color-gray: var(--color-gray-100); - --font-color-grayer: var(--color-gray-200); - - /* Border */ - --border-color: var(--color-gray-700); - --border-color-hover: var(--color-gray-600); - - /* Elements */ - --background-body-color: var(--color-gray-900); - --background-header-color: var(--color-gray-900); - --background-inline-code: var(--color-gray-800); - --background-color-hover: var(--color-gray-800); - --background-btn-link: var(--color-gray-800); - --background-btn-link-active: var(--color-gray-700); - --background-inputs-color: var(--color-gray-800); - - /* Icons */ - --icon-primary: var(--color-white); - --icon-secondary: var(--color-gray-100); - --icon-filter: invert(100%); -} - -.header svg, -.site-content svg { - filter: var(--icon-filter); -} diff --git a/public/assets/light.css b/public/assets/light.css deleted file mode 100644 index 1daf165..0000000 --- a/public/assets/light.css +++ /dev/null @@ -1,23 +0,0 @@ -:root { - /* Fonts */ - --font-color: var(--color-black); - --font-color-gray: var(--color-gray-500); - --font-color-grayer: var(--color-gray-700); - - /* Border */ - --border-color: var(--color-gray-100); - --border-color-hover: var(--color-gray-400); - - /* Elements */ - --background-body-color: var(--color-white); - --background-header-color: var(--color-white); - --background-inline-code: rgba(0, 0, 0, 0.05); - --background-color-hover: var(--color-gray-50); - --background-btn-link: var(--color-white); - --background-btn-link-active: var(--color-white); - --background-inputs-color: var(--color-white); - - /* Icons */ - --icon-primary: var(--color-white); - --icon-secondary: var(--color-gray-700); -} diff --git a/src/components/ArticleItem/ArticleItem.tsx b/src/components/ArticleItem/ArticleItem.tsx index b23fe7c..7dd8672 100644 --- a/src/components/ArticleItem/ArticleItem.tsx +++ b/src/components/ArticleItem/ArticleItem.tsx @@ -1,8 +1,6 @@ -import type { ArticleType } from '@root/types'; - -import './ArticleItem.scss'; import { Component } from 'solid-js'; import { DateFormatter } from '@utils/date'; +import './ArticleItem.scss'; export type ArticleItemProps = { data: ArticleType; diff --git a/src/components/ArticlePost/ArticlePost.astro b/src/components/ArticlePost/ArticlePost.astro index 282e96f..9afa411 100644 --- a/src/components/ArticlePost/ArticlePost.astro +++ b/src/components/ArticlePost/ArticlePost.astro @@ -1,6 +1,4 @@ --- -import type { ArticleType } from '@root/types'; - import { DateFormatter } from '@root/utils'; import './ArticlePost.scss'; diff --git a/src/components/ArticlesList/ArticlesList.tsx b/src/components/ArticlesList/ArticlesList.tsx index f12f06e..9f5723f 100644 --- a/src/components/ArticlesList/ArticlesList.tsx +++ b/src/components/ArticlesList/ArticlesList.tsx @@ -1,5 +1,4 @@ import type { Component } from 'solid-js'; -import type { ArticleBlockType } from '@root/types'; import { createSignal, createEffect, For } from 'solid-js'; import { search, selectedTags } from '@stores/searchStore'; diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro index a24784c..f6609a8 100644 --- a/src/components/BaseHead.astro +++ b/src/components/BaseHead.astro @@ -1,5 +1,6 @@ --- import { SITE_METADATA } from '@root/config'; +import { DetectThemeScript } from '@root/scripts'; export interface Props { title?: string | undefined; @@ -12,8 +13,8 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props; - - + + @@ -22,4 +23,7 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props; + + + diff --git a/src/components/ContactsList/ContactsList.astro b/src/components/ContactsList/ContactsList.astro index 08374b5..3ab3f95 100644 --- a/src/components/ContactsList/ContactsList.astro +++ b/src/components/ContactsList/ContactsList.astro @@ -11,14 +11,14 @@ const {
    Email - + Github - + Telegram - +
    diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro index fdf366e..1426d4a 100644 --- a/src/components/Header/Header.astro +++ b/src/components/Header/Header.astro @@ -38,7 +38,7 @@ const { pathname } = Astro.canonicalURL; - + diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index b3e246e..e890755 100644 --- a/src/components/Header/Header.scss +++ b/src/components/Header/Header.scss @@ -7,7 +7,6 @@ padding-bottom: 15px; user-select: none; z-index: 9999; - & .container { display: flex; align-items: center; @@ -64,57 +63,11 @@ } } } - &__button { - // cursor: pointer; - // background: none; - // border: none; - // &:hover { - // border: none; - // opacity: var(--opacity-hover); - // } - // & span { - // pointer-events: none; - // display: block; - // position: absolute; - // height: 3px; - // width: 100%; - // background: var(--font-color); - // border-radius: 7px; - // opacity: 1; - // left: 0; - // } - // & span:nth-child(1) { - // top: 2px; - // transform-origin: left center; - // } - // & span:nth-child(2) { - // top: 9px; - // transform-origin: left center; - // } - // & span:nth-child(3) { - // top: 16px; - // transform-origin: left center; - // } - // &[aria-pressed='true'] { - // & span:nth-child(1) { - // transform: rotate(45deg); - // top: -1px; - // left: 5px; - // } - // & span:nth-child(2) { - // display: none; - // } - // & span:nth-child(3) { - // transform: rotate(-45deg); - // top: 20px; - // left: 5px; - // } - // } - } } @media screen and (max-width: 768px) { .header { + padding: 10px 0; &__nav { display: none; } @@ -122,6 +75,7 @@ body[data-is-mobile-open='true'] { & .header { + padding: 15px 0; background-color: var(--background-header-color); position: fixed; right: 0; diff --git a/src/components/Header/NavToggle/NavToggle.scss b/src/components/Header/NavToggle/NavToggle.scss index 7ca42f4..9db71a9 100644 --- a/src/components/Header/NavToggle/NavToggle.scss +++ b/src/components/Header/NavToggle/NavToggle.scss @@ -1,9 +1,7 @@ .nav-toggle { - display: flex; - padding: 0; cursor: pointer; - // background: none; border: none; + padding: 0; &:hover { border: none; opacity: var(--opacity-hover); diff --git a/src/components/Header/NavToggle/NavToggle.tsx b/src/components/Header/NavToggle/NavToggle.tsx index e8ca43a..8af7531 100644 --- a/src/components/Header/NavToggle/NavToggle.tsx +++ b/src/components/Header/NavToggle/NavToggle.tsx @@ -4,19 +4,14 @@ import { createSignal, createEffect } from 'solid-js'; import './NavToggle.scss'; const MenuIcon: Component = () => ( - - + + ); const CloseIcon: Component = () => ( - - + + ); diff --git a/src/components/ProjectItem/ProjectItem.astro b/src/components/ProjectItem/ProjectItem.astro index a225f63..8c5bf74 100644 --- a/src/components/ProjectItem/ProjectItem.astro +++ b/src/components/ProjectItem/ProjectItem.astro @@ -1,6 +1,4 @@ --- -import type { ProjectType } from '@root/types'; - import './ProjectItem.scss'; import { Icon } from 'astro-icon'; diff --git a/src/components/RecentArticles/RecentArticles.astro b/src/components/RecentArticles/RecentArticles.astro index f495d37..8b5b7bc 100644 --- a/src/components/RecentArticles/RecentArticles.astro +++ b/src/components/RecentArticles/RecentArticles.astro @@ -1,6 +1,4 @@ --- -import type { ArticleType } from '@root/types'; - import './RecentArticles.scss'; import { ArticleItem } from '@components/ArticleItem'; import { sortArtcilesByDate } from '@utils/articles'; diff --git a/src/components/SearchInput/SearchInput.scss b/src/components/SearchInput/SearchInput.scss index a6ffffa..22fac36 100644 --- a/src/components/SearchInput/SearchInput.scss +++ b/src/components/SearchInput/SearchInput.scss @@ -20,7 +20,7 @@ & span { font-size: var(--font-size-lg); font-weight: 500; - color: var(--font-color-grayer); + color: var(--font-color-gray); min-width: 20px; text-align: center; } diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx index d9ef696..9d0a8ad 100644 --- a/src/components/SearchInput/SearchInput.tsx +++ b/src/components/SearchInput/SearchInput.tsx @@ -54,7 +54,7 @@ const SearchInput: Component = (props) => { return (
    - + diff --git a/src/components/SkillsBlock/SkillsBlock.astro b/src/components/SkillsBlock/SkillsBlock.astro index 7e91dec..66db2a3 100644 --- a/src/components/SkillsBlock/SkillsBlock.astro +++ b/src/components/SkillsBlock/SkillsBlock.astro @@ -1,6 +1,4 @@ --- -import type { SkillsType } from '@root/types'; - import { Icon } from 'astro-icon'; import './SkillsBlock.scss'; diff --git a/src/components/ThemeSwticher/ThemeSwitcher.astro b/src/components/ThemeSwticher/ThemeSwitcher.astro deleted file mode 100644 index 915d7c0..0000000 --- a/src/components/ThemeSwticher/ThemeSwitcher.astro +++ /dev/null @@ -1,8 +0,0 @@ ---- -import './ThemeSwitcher.scss'; -import { Icon } from 'astro-icon'; ---- - - diff --git a/src/components/ThemeSwticher/ThemeSwitcher.scss b/src/components/ThemeSwticher/ThemeSwitcher.scss index 2838418..7d7d4fa 100644 --- a/src/components/ThemeSwticher/ThemeSwitcher.scss +++ b/src/components/ThemeSwticher/ThemeSwitcher.scss @@ -6,8 +6,13 @@ cursor: pointer; padding: 0; margin: 0; + opacity: 0; &:hover { opacity: var(--opacity-hover); border: none; } + &.ready { + opacity: 1; + transition: all 0.1s linear 0s; + } } diff --git a/src/components/ThemeSwticher/ThemeSwitcher.tsx b/src/components/ThemeSwticher/ThemeSwitcher.tsx new file mode 100644 index 0000000..120fc20 --- /dev/null +++ b/src/components/ThemeSwticher/ThemeSwitcher.tsx @@ -0,0 +1,62 @@ +import type { Component, JSX } from 'solid-js'; + +import { SITE_SETTINGS } from '@root/config'; +import { createSignal, onMount, Switch, Match } from 'solid-js'; +import './ThemeSwitcher.scss'; + +const MoonIcon: Component = () => ( + + + +); + +const SunIcon: Component = () => ( + + + +); + +const ThemeSwitcher: Component = () => { + const [theme, setTheme] = createSignal(SITE_SETTINGS.defaultTheme); + const [isReady, setIsReady] = createSignal(false); + + const toggleTheme: JSX.EventHandler = (e) => { + const newTheme = theme() === 'light' ? 'dark' : 'light'; + setTheme(newTheme); + localStorage.setItem('theme', newTheme); + document.documentElement.setAttribute('data-theme', newTheme); + }; + + onMount(() => { + setIsReady(true); + if (window.theme) { + setTheme(window.theme); + /* Update theme state on changing OS the,e */ + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches: isDark }) => { + const theme = isDark ? 'dark' : 'light'; + setTheme(theme); + }); + } + }); + + return ( + + ); +}; + +export default ThemeSwitcher; diff --git a/src/components/ThemeSwticher/index.ts b/src/components/ThemeSwticher/index.ts index 50e6b3d..9b6b9ee 100644 --- a/src/components/ThemeSwticher/index.ts +++ b/src/components/ThemeSwticher/index.ts @@ -1 +1 @@ -export { default } from './ThemeSwitcher.astro'; +export { default } from './ThemeSwitcher'; diff --git a/src/config.ts b/src/config.ts index 4e46ed2..ad1320f 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,3 +1,7 @@ +export const SITE_SETTINGS: SiteConfigType = { + defaultTheme: 'dark', +}; + export const SITE_METADATA = { title: 'Sergey Yarkov', name: 'yarkov.tech', diff --git a/src/layouts/article.astro b/src/layouts/article.astro index 265b5a9..8306dce 100644 --- a/src/layouts/article.astro +++ b/src/layouts/article.astro @@ -1,6 +1,5 @@ --- import type { Props as BaseHeadProps } from '@root/components/BaseHead.astro'; -import type { ArticleType } from '@root/types'; import BaseHead from '@components/BaseHead.astro'; import BaseLayout from '@components/BaseLayout'; diff --git a/src/layouts/default.astro b/src/layouts/default.astro index 44ed720..304a553 100644 --- a/src/layouts/default.astro +++ b/src/layouts/default.astro @@ -1,9 +1,9 @@ --- import type { Props as BaseHeadProps } from '@components/BaseHead.astro'; +import { SITE_METADATA } from '@root/config'; import BaseHead from '@components/BaseHead.astro'; import BaseLayout from '@components/BaseLayout'; -import { SITE_METADATA } from '@root/config'; import PageHeading from '@components/PageHeading'; import '@styles/global.scss'; diff --git a/src/pages/articles.astro b/src/pages/articles.astro index 8735f7d..8f2974e 100644 --- a/src/pages/articles.astro +++ b/src/pages/articles.astro @@ -1,6 +1,4 @@ --- -import type { ArticleType } from '@root/types'; - import PageLayout from '@layouts/default.astro'; import ArticlesList from '@components/ArticlesList'; import { transformArticles, formatToArticleBlocks } from '@utils/articles'; diff --git a/src/pages/index.astro b/src/pages/index.astro index 9b474d6..df9c19a 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,6 +1,4 @@ --- -import type { ArticleType } from '@root/types'; - import * as utils from '@utils/index'; import PageLayout from '@layouts/default.astro'; import RecentArticles from '@components/RecentArticles'; diff --git a/src/scripts/detect-theme.astro b/src/scripts/detect-theme.astro new file mode 100644 index 0000000..dddb31e --- /dev/null +++ b/src/scripts/detect-theme.astro @@ -0,0 +1,20 @@ + diff --git a/src/scripts/index.ts b/src/scripts/index.ts new file mode 100644 index 0000000..008a7dc --- /dev/null +++ b/src/scripts/index.ts @@ -0,0 +1 @@ +export { default as DetectThemeScript } from './detect-theme.astro'; diff --git a/src/styles/global.scss b/src/styles/global.scss index b6d7302..6bad530 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,91 +1,4 @@ -:root { - color-scheme: light dark; - - /* Fonts */ - --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; - --font-family-base: 'Rubik', var(--font-fallback); - --font-size-xs: 0.75rem; - --font-size-sm: 0.875rem; - --font-size-md: 1rem; - --font-size-lg: 1.125rem; - --font-size-xl: 1.25rem; - --font-size-2xl: 1.5rem; - --font-size-3xl: 1.875rem; - --font-size-4xl: 2.25rem; - --font-size-5xl: 3rem; - --font-size-6xl: 3.75rem; - --font-size-7xl: 4.5rem; - --font-size-8xl: 6rem; - --font-size-9xl: 8rem; - - /* Line heights */ - --line-height-normal: 'normal'; - --line-height-none: 1; - --line-height-shorter: 1.25; - --line-height-short: 1.375; - --line-height-base: 1.5; - --line-height-tall: 1.625; - - /* Colors */ - --color-white: #ffffff; - --color-black: #010409; - - --color-blue-50: #cae8ff; - --color-blue-100: #a5d6ff; - --color-blue-200: #79c0ff; - --color-blue-300: #58a6ff; - --color-blue-400: #388bfd; - --color-blue-500: #1f6feb; - --color-blue-600: #1158c7; - --color-blue-700: #0d419d; - --color-blue-800: #0c2d6b; - --color-blue-900: #051d4d; - - --color-gray-50: #f0f6fc; - --color-gray-100: #c9d1d9; - --color-gray-200: #b1bac4; - --color-gray-300: #8b949e; - --color-gray-400: #6e7681; - --color-gray-500: #484f58; - --color-gray-600: #30363d; - --color-gray-700: #21262d; - --color-gray-800: #161b22; - --color-gray-900: #0d1117; - - --color-orange-50: #ffdfb6; - --color-orange-100: #ffc680; - --color-orange-200: #ffa657; - --color-orange-300: #f0883e; - --color-orange-400: #db6d28; - --color-orange-500: #bd561d; - --color-orange-600: #9b4215; - --color-orange-700: #762d0a; - --color-orange-800: #5a1e02; - --color-orange-900: #3d1300; - - --color-yellow-50: #f8e3a1; - --color-yellow-100: #f2cc60; - --color-yellow-200: #e3b341; - --color-yellow-300: #d29922; - --color-yellow-400: #bb8009; - --color-yellow-500: #9e6a03; - --color-yellow-600: #845306; - --color-yellow-700: #693e00; - --color-yellow-800: #4b2900; - --color-yellow-900: #341a00; - - /* Border */ - --border-radius-md: 3px; - --border-radius-lg: 5px; - - /* Sizes */ - --content-width: 760px; - --content-padding: 24px; - - --outline-color: var(--color-blue-500); - - --opacity-hover: 0.7; -} +@import './theme.scss'; ::selection { background: var(--color-yellow-100); @@ -115,13 +28,14 @@ html { font-weight: normal; font-kerning: normal; font-family: var(--font-family-base); + background: var(--background-body-color); } body { margin: 0; padding: 0; color: var(--font-color); - background-color: var(--background-body-color); + background: var(--background-body-color); } .container { @@ -197,13 +111,14 @@ textarea { -webkit-appearance: none; font-family: var(--font-family-base); padding: 8px 15px; - border: 1px solid var(--border-color); + border: none; border-radius: var(--border-radius-md); background-color: var(--background-inputs-color); font-size: var(--font-size-sm); width: 100%; - outline-color: var(--outline-color); resize: vertical; + border: 1px solid var(--border-color); + outline-color: var(--color-blue-500); } button { @@ -249,12 +164,12 @@ pre { } a { - color: var(--color-blue-500); + color: var(--color-blue-400); font-weight: 500; text-decoration: none; &:hover { text-decoration: underline; - color: var(--color-blue-500); + color: var(--color-blue-400); } } diff --git a/src/styles/theme.scss b/src/styles/theme.scss new file mode 100644 index 0000000..9f13b2c --- /dev/null +++ b/src/styles/theme.scss @@ -0,0 +1,140 @@ +:root, +:root[data-theme='light'] { + color-scheme: light; + + /* Fonts */ + --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; + --font-family-base: 'Rubik', var(--font-fallback); + --font-size-xs: 0.75rem; + --font-size-sm: 0.875rem; + --font-size-md: 1rem; + --font-size-lg: 1.125rem; + --font-size-xl: 1.25rem; + --font-size-2xl: 1.5rem; + --font-size-3xl: 1.875rem; + --font-size-4xl: 2.25rem; + --font-size-5xl: 3rem; + --font-size-6xl: 3.75rem; + --font-size-7xl: 4.5rem; + --font-size-8xl: 6rem; + --font-size-9xl: 8rem; + + /* Line heights */ + --line-height-normal: 'normal'; + --line-height-none: 1; + --line-height-shorter: 1.25; + --line-height-short: 1.375; + --line-height-base: 1.5; + --line-height-tall: 1.625; + + /* Colors */ + --color-white: #ffffff; + --color-black: #010409; + + --color-blue-50: #cae8ff; + --color-blue-100: #a5d6ff; + --color-blue-200: #79c0ff; + --color-blue-300: #58a6ff; + --color-blue-400: #388bfd; + --color-blue-500: #1f6feb; + --color-blue-600: #1158c7; + --color-blue-700: #0d419d; + --color-blue-800: #0c2d6b; + --color-blue-900: #051d4d; + + --color-gray-50: #f0f6fc; + --color-gray-100: #c9d1d9; + --color-gray-200: #b1bac4; + --color-gray-300: #8b949e; + --color-gray-400: #6e7681; + --color-gray-500: #484f58; + --color-gray-600: #30363d; + --color-gray-700: #21262d; + --color-gray-800: #161b22; + --color-gray-900: #0d1117; + + --color-orange-50: #ffdfb6; + --color-orange-100: #ffc680; + --color-orange-200: #ffa657; + --color-orange-300: #f0883e; + --color-orange-400: #db6d28; + --color-orange-500: #bd561d; + --color-orange-600: #9b4215; + --color-orange-700: #762d0a; + --color-orange-800: #5a1e02; + --color-orange-900: #3d1300; + + --color-yellow-50: #f8e3a1; + --color-yellow-100: #f2cc60; + --color-yellow-200: #e3b341; + --color-yellow-300: #d29922; + --color-yellow-400: #bb8009; + --color-yellow-500: #9e6a03; + --color-yellow-600: #845306; + --color-yellow-700: #693e00; + --color-yellow-800: #4b2900; + --color-yellow-900: #341a00; + + /* Border */ + --border-radius-md: 3px; + --border-radius-lg: 5px; + + /* Sizes */ + --content-width: 760px; + --content-padding: 24px; + + --opacity-hover: 0.7; + + /* Fonts */ + --font-color: var(--color-black); + --font-color-gray: var(--color-gray-500); + --font-color-grayer: var(--color-gray-700); + + /* Border */ + --border-color: var(--color-gray-100); + --border-color-hover: var(--color-gray-400); + + /* Elements */ + --background-body-color: var(--color-white); + --background-header-color: var(--color-white); + --background-inline-code: rgba(0, 0, 0, 0.05); + --background-color-hover: var(--color-gray-50); + --background-btn-link: var(--color-white); + --background-btn-link-active: var(--color-white); + --background-inputs-color: var(--color-white); + + /* Icons */ + --icon-primary: var(--color-white); + --icon-secondary: var(--color-gray-700); +} + +:root[data-theme='dark'] { + color-scheme: dark; + /* Fonts */ + --font-color: var(--color-white); + --font-color-gray: var(--color-gray-100); + --font-color-grayer: var(--color-gray-200); + + /* Border */ + --border-color: var(--color-gray-700); + --border-color-hover: var(--color-gray-600); + + /* Elements */ + --background-body-color: var(--color-gray-900); + --background-header-color: var(--color-gray-900); + --background-inline-code: var(--color-gray-800); + --background-color-hover: var(--color-gray-800); + --background-btn-link: var(--color-gray-800); + --background-btn-link-active: var(--color-gray-700); + --background-inputs-color: var(--color-gray-800); + + /* Icons */ + --icon-primary: var(--color-white); + --icon-secondary: var(--color-gray-100); + --icon-filter: invert(100%); + + & .header svg, + & .site-content svg:not([data-filter='none']) { + filter: var(--icon-filter); + } +} diff --git a/src/types/index.ts b/src/types/index.ts deleted file mode 100644 index 91132d0..0000000 --- a/src/types/index.ts +++ /dev/null @@ -1,25 +0,0 @@ -export type ArticleType = { - title: string; - author: string; - tags: Array; - published_at: string; -}; - -export type ProjectType = { - icon: string; - name: string; - year: string; - description: string; - sourceUrl?: string | undefined; - articleUrl?: string | undefined; - demoUrl?: string | undefined; -}; - -export type SkillsType = { - title: string; - list: Array<{ icon?: string | undefined; name: string }>; -}; - -export type ArticleBlockType = { - [year: number]: ArticleType[]; -}; diff --git a/src/types/main.d.ts b/src/types/main.d.ts new file mode 100644 index 0000000..fa3ff37 --- /dev/null +++ b/src/types/main.d.ts @@ -0,0 +1,39 @@ +export {}; + +declare global { + interface Window { + theme?: ThemeModeType | undefined; + } + + type ArticleType = { + title: string; + author: string; + tags: Array; + published_at: string; + }; + + type ProjectType = { + icon: string; + name: string; + year: string; + description: string; + sourceUrl?: string | undefined; + articleUrl?: string | undefined; + demoUrl?: string | undefined; + }; + + type SkillsType = { + title: string; + list: Array<{ icon?: string | undefined; name: string }>; + }; + + type ArticleBlockType = { + [year: number]: ArticleType[]; + }; + + type ThemeModeType = 'light' | 'dark'; + + type SiteConfigType = { + defaultTheme: ThemeModeType; + }; +} diff --git a/src/utils/articles.ts b/src/utils/articles.ts index f63124b..845d8b6 100644 --- a/src/utils/articles.ts +++ b/src/utils/articles.ts @@ -1,5 +1,3 @@ -import type { ArticleType, ArticleBlockType } from '@root/types'; - import { MarkdownInstance } from 'astro'; export const transformArticles = (articles: MarkdownInstance[]): ArticleType[] => diff --git a/tsconfig.json b/tsconfig.json index 9adedda..cdc34f0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,7 +17,8 @@ "@utils/*": ["./src/utils/*"], "@stores/*": ["./src/stores/*"] }, - "outDir": "./dist" + "outDir": "./dist", + "typeRoots": ["./node_modules/@types", "./src/types"] }, "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts"] } From b0d7490ecb2d577b92c5992719007f096bc8c531 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Thu, 28 Jul 2022 00:05:02 +0300 Subject: [PATCH 5/6] moved theme-detector to public folder --- README.md | 4 ++-- package.json | 2 +- .../assets/{ => css}/prism-one-dark.min.css | 0 .../assets/{ => css}/prism-one-light.min.css | 0 public/assets/js/detect-theme.js | 23 +++++++++++++++++++ src/components/BaseHead.astro | 7 ++---- src/components/Header/Header.astro | 2 +- .../ThemeSwticher/ThemeSwitcher.tsx | 6 +++-- src/layouts/article.astro | 4 ++-- src/scripts/detect-theme.astro | 20 ---------------- src/scripts/index.ts | 1 - src/types/main.d.ts | 4 ---- 12 files changed, 35 insertions(+), 38 deletions(-) rename public/assets/{ => css}/prism-one-dark.min.css (100%) rename public/assets/{ => css}/prism-one-light.min.css (100%) create mode 100644 public/assets/js/detect-theme.js delete mode 100644 src/scripts/detect-theme.astro delete mode 100644 src/scripts/index.ts diff --git a/README.md b/README.md index 7b102dc..bc6f887 100644 --- a/README.md +++ b/README.md @@ -9,9 +9,9 @@ Personal website created with Astro. - [x] HTML layout - [x] Adaptive & Responsive layout -- [ ] Dark/Light Theme +- [x] Search articles by title or description +- [x] Dark/Light Theme - [ ] Multilang web-site -- [ ] Search articles by title or description - [ ] Form handling via Netlify Forms - [ ] SEO optimized diff --git a/package.json b/package.json index d6d80cf..fcaa6d9 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "scripts": { "dev": "astro dev --host", "start": "astro dev", - "build": "astro check && tsc --noEmit && astro build", + "build": "astro build", "preview": "astro preview --host", "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\"", "lint": "eslint '**/*.{js,mjs,ts,tsx}'" diff --git a/public/assets/prism-one-dark.min.css b/public/assets/css/prism-one-dark.min.css similarity index 100% rename from public/assets/prism-one-dark.min.css rename to public/assets/css/prism-one-dark.min.css diff --git a/public/assets/prism-one-light.min.css b/public/assets/css/prism-one-light.min.css similarity index 100% rename from public/assets/prism-one-light.min.css rename to public/assets/css/prism-one-light.min.css diff --git a/public/assets/js/detect-theme.js b/public/assets/js/detect-theme.js new file mode 100644 index 0000000..bf46454 --- /dev/null +++ b/public/assets/js/detect-theme.js @@ -0,0 +1,23 @@ +/** + * This script is used to determine the theme of the site. + * The theme value is taken from localstorage, otherwise from the operating system. + * It is very important to include this script before loading the CSS + * and body markup to prevent FOUC (Flash of unstyled content). + */ + +const getTheme = () => { + const local = localStorage.getItem('theme'); + if (local && (local === 'dark' || local === 'light')) return local; + const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + return isDark ? 'dark' : 'light'; +}; + +window.theme = getTheme(); +document.documentElement.setAttribute('data-theme', window.theme); + +/* Sync with OS theme */ +window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches: isDark }) => { + window.theme = isDark ? 'dark' : 'light'; + localStorage.setItem('theme', window.theme); + document.documentElement.setAttribute('data-theme', window.theme); +}); diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro index f6609a8..edc32c7 100644 --- a/src/components/BaseHead.astro +++ b/src/components/BaseHead.astro @@ -1,6 +1,5 @@ --- import { SITE_METADATA } from '@root/config'; -import { DetectThemeScript } from '@root/scripts'; export interface Props { title?: string | undefined; @@ -13,8 +12,6 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props; - - @@ -23,7 +20,7 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props; + diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro index 1426d4a..13c833b 100644 --- a/src/components/Header/Header.astro +++ b/src/components/Header/Header.astro @@ -38,7 +38,7 @@ const { pathname } = Astro.canonicalURL;
    - + diff --git a/src/components/ThemeSwticher/ThemeSwitcher.tsx b/src/components/ThemeSwticher/ThemeSwitcher.tsx index 120fc20..e4895e4 100644 --- a/src/components/ThemeSwticher/ThemeSwitcher.tsx +++ b/src/components/ThemeSwticher/ThemeSwitcher.tsx @@ -26,7 +26,9 @@ const ThemeSwitcher: Component = () => { const [theme, setTheme] = createSignal(SITE_SETTINGS.defaultTheme); const [isReady, setIsReady] = createSignal(false); - const toggleTheme: JSX.EventHandler = (e) => { + const toggleTheme: JSX.EventHandler = () => { + if (!window.theme) return; + const newTheme = theme() === 'light' ? 'dark' : 'light'; setTheme(newTheme); localStorage.setItem('theme', newTheme); @@ -46,7 +48,7 @@ const ThemeSwitcher: Component = () => { }); return ( -