bubble/yarkov.tech
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/yarkov.tech.git synced 2026-10-11 02:19:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: added colors for themes

Browse Source
This commit is contained in:
Sergey Yarkov 2022-07-24 23:42:28 +03:00
parent f2552eda17
commit de8f2188a5
12 changed files with 69 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/assets/dark.css Normal file
View File

@ -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);
}

19
public/assets/light.css Normal file
View File

@ -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);
}

2
src/components/ArticlePost/ArticlePost.scss
View File

@ -27,7 +27,7 @@
& h1 {
font-weight: 600;
font-size: 2.25rem;
font-size: 2.125rem;
}
& p {

4
src/components/BaseHead.astro
View File

@ -12,6 +12,8 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props;
<link rel='preconnect' href='https://fonts.googleapis.com' />
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
<link href='https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap' rel='stylesheet' />
<link rel='stylesheet' href='assets/dark.css' media='(prefers-color-scheme: dark)' />
<link rel='stylesheet' href='assets/light.css' media='(prefers-color-scheme: light)' />
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
@ -19,4 +21,4 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props;
{title}
</title>
<meta name='title' content={title} />
<meta name="description" content={description || SITE_METADATA.description} />
<meta name='description' content={description || SITE_METADATA.description} />

5
src/components/Header/Header.scss
View File

@ -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;

4
src/components/SearchInput/SearchInput.scss
View File

@ -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;
}
}

7
src/components/TagsList/TagsList.tsx
View File

@ -86,12 +86,7 @@ const TagsList: Component<TagsListProps> = (props) => {
<For
each={props.data}
children={(tag) => (
<li
onClick={onSelect}
style={isTagSelected(tag) && 'border-color: var(--border-color-hover);'}
class="btn-link"
data-tag={tag.toLocaleLowerCase()}
>
<li onClick={onSelect} class="btn-link" data-tag={tag.toLocaleLowerCase()} data-active={isTagSelected(tag)}>
{tag}
</li>
)}

2
src/components/ThemeSwticher/ThemeSwitcher.astro
View File

@ -1,6 +1,6 @@
---
import './ThemeSwitcher.scss';
import { Icon } from 'astro-icon'
import { Icon } from 'astro-icon';
---
<button class='theme-switcher'>

9
src/layouts/article.astro
View File

@ -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;

8
src/layouts/default.astro
View File

@ -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;

1
src/pages/contacts.astro
View File

@ -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';
---

37
src/styles/global.scss
View File

@ -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;
}