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

refactor: refactored css

Browse Source
This commit is contained in:
Sergey Yarkov 2022-08-03 03:09:17 +03:00
parent d217b93209
commit 381ff9f822
8 changed files with 83 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/ArticleContent/ArticleContent.scss
View File

@ -70,6 +70,27 @@
margin: 0 0 1em;
}
& hr {
background-color: var(--border-color);
margin: 40px 0;
border: none;
height: 1px;
}
& pre {
font-size: var(--font-size-sm);
border-radius: var(--border-radius-md);
}
& :not(pre) > code {
-webkit-font-smoothing: subpixel-antialiased;
background: var(--background-inline-code);
border-radius: var(--border-radius-lg);
font-size: 1rem;
font-weight: 500;
padding: 0.2rem 0.3rem;
}
& figcaption {
font-style: italic;
font-size: 1em;
@ -113,4 +134,17 @@
border: none;
}
}
li::marker {
color: var(--color-blue-500);
font-size: 1.3rem;
line-height: var(--line-height-none);
}
& blockquote {
margin: 1.5rem 0;
font-style: italic;
border-left: 0.25rem solid var(--border-color);
padding-left: 1rem;
}
}

15
src/components/Button/Button.scss Normal file
View File

@ -0,0 +1,15 @@
.btn {
cursor: pointer;
font-family: var(--font-family-base);
font-weight: 500;
font-size: var(--font-size-md);
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);
}
}

17
src/components/Button/Button.tsx Normal file
View File

@ -0,0 +1,17 @@
import type { ParentComponent, JSX } from 'solid-js';
import { splitProps } from 'solid-js';
import './Button.scss';
type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement>;
const Button: ParentComponent<ButtonProps> = (props) => {
const [local, attrs] = splitProps(props, ['children']);
return (
<button class={`btn`} {...attrs}>
{local.children}
</button>
);
};
export default Button;

1
src/components/Button/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './Button';

4
src/components/ContactForm/ContactForm.tsx
View File

@ -1,4 +1,6 @@
import type { Component } from 'solid-js';
import Button from '@components/Button';
import './ContactForm.scss';
type InputFieldsType = {
@ -18,7 +20,7 @@ const ContactForm: Component = () => {
<input name="subject" placeholder="Тема сообщения" type="text" />
<textarea name="message" placeholder="Ваше сообщение..." id="message" cols={30} rows={10} />
<div>
<button type="submit">Отправить</button>
<Button type="submit">Отправить</Button>
</div>
</form>
);

12
src/components/ProjectItem/ProjectItem.astro
View File

@ -1,6 +1,6 @@
---
import './ProjectItem.scss';
import { Icon } from 'astro-icon';
import './ProjectItem.scss';
export interface Props {
data: ProjectType;
@ -10,18 +10,18 @@ const { data } = Astro.props as Props;
const { icon, name, year, description, articleUrl, sourceUrl, demoUrl } = data;
---
<div class='project-item'>
<div class='project-item__heading'>
<div class="project-item">
<div class="project-item__heading">
<h2>
<Icon name={icon} width='20' height='20' />
<Icon name={icon} width="20" height="20" />
{name}
</h2>
<span>{year}</span>
</div>
<div class='project-item__description'>
<div class="project-item__description">
<p>{description}</p>
</div>
<div class='project-item__links'>
<div class="project-item__links">
{articleUrl && (
<a class="btn-link" href={articleUrl} target="_blank">
Статья

4
src/pages/index.astro
View File

@ -18,8 +18,8 @@ const articles = utils.transformArticles(data);
<p>Я занимаюсь разработкой веб-сайтов и веб-приложений разной сложности, а также публикую различные статьи и туториалы на разные IT темы.</p>
</SplashHeading>
<SplashLinks>
<Link icon='information' href='/about'>обо мне</Link>
<Link icon='email_filled' href='/contacts'>написать мне</Link>
<Link icon="information" href="/about">обо мне</Link>
<Link icon="email_filled" href="/contacts">написать мне</Link>
</SplashLinks>
</Splash>
<RecentArticles articles={articles} length={4} />

55
src/styles/global.scss
View File

@ -79,24 +79,11 @@ body {
}
}
li::marker {
color: var(--color-blue-500);
font-size: 1.3rem;
line-height: var(--line-height-none);
}
p {
margin-top: 0;
margin-bottom: 1.5rem;
}
hr {
background-color: var(--border-color);
margin: 40px 0;
border: none;
height: 1px;
}
h1,
h2,
h3,
@ -120,48 +107,11 @@ textarea {
outline-color: var(--color-blue-500);
}
button {
cursor: pointer;
font-family: var(--font-family-base);
font-weight: 500;
font-size: var(--font-size-md);
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);
}
}
textarea {
max-height: 500px;
min-height: 200px;
}
blockquote {
margin: 1.5rem 0;
font-style: italic;
border-left: 0.25rem solid var(--border-color);
padding-left: 1rem;
}
:not(pre) > code {
-webkit-font-smoothing: subpixel-antialiased;
background: var(--background-inline-code);
border-radius: var(--border-radius-lg);
font-size: 1rem;
font-weight: 500;
padding: 0.2rem 0.3rem;
}
pre {
font-size: var(--font-size-sm);
border-radius: var(--border-radius-md);
}
a {
color: var(--color-blue-400);
font-weight: 500;
@ -171,3 +121,8 @@ a {
color: var(--color-blue-400);
}
}
button {
background: none;
border: none;
}