Website_jan.su/_source/scss/main.scss

109 lines
2.1 KiB
SCSS
Raw Normal View History

2023-05-06 00:38:34 +02:00
:root {
--primary-color: #4BB5A9;
--primary-color__dark: hsl(173, 42%, 45%);
--secondary-color: #caf0ec;
--svg-color: #111111;
--font-system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-sans-serif: system-ui, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
height: 100%;
text-size-adjust: 100%;
}
2020-05-27 23:05:39 +02:00
2020-05-27 20:51:32 +02:00
body {
2023-05-06 00:38:34 +02:00
background-color: var(--secondary-color);
color: var(--svg-color);
2020-05-28 00:44:47 +02:00
display: flex;
flex-direction: column;
2023-05-06 00:38:34 +02:00
font-family: var(--font-system-ui);
2020-05-28 12:34:36 +02:00
font-size: 1rem;
line-height: 1.5;
2020-05-27 20:51:32 +02:00
}
2020-05-27 23:05:39 +02:00
2020-05-28 00:44:47 +02:00
header {
2020-05-28 12:34:36 +02:00
display: flex;
flex-direction: column;
2020-05-28 00:44:47 +02:00
h1 {
margin: 0.25em;
2020-05-28 12:34:36 +02:00
text-align: center;
}
.photo {
align-self: center;
margin: 1em 0 0 0;
width: 200px;
img {
border-radius: 50%;
}
2020-05-28 00:44:47 +02:00
}
}
2020-05-27 23:05:39 +02:00
.list_links {
2020-05-28 12:34:36 +02:00
align-items: center;
display: flex;
flex-direction: column;
2020-05-27 23:05:39 +02:00
list-style: none;
2020-05-28 12:34:36 +02:00
margin: 0 1.25em;
2020-05-27 23:05:39 +02:00
padding: 0;
li {
2020-05-28 12:34:36 +02:00
max-width: 400px;
2020-05-28 00:44:47 +02:00
width: 100%;
2020-05-27 23:05:39 +02:00
}
a {
2023-05-06 00:38:34 +02:00
background-color: var(--primary-color);
color: var(--svg-color);
2020-05-27 23:05:39 +02:00
display: block;
2020-05-28 12:34:36 +02:00
font-weight: 700;
margin: 0.3em 0;
2020-05-28 13:12:59 +02:00
padding: 0.5em 0 0.7em 0.6em;
2020-05-27 23:05:39 +02:00
text-decoration: none;
2020-05-28 12:34:36 +02:00
&:visited {
2023-05-06 00:38:34 +02:00
color: var(--svg-color);
2020-05-28 12:34:36 +02:00
}
&:hover, &:active, &:focus {
2023-05-06 00:38:34 +02:00
background-color: var(--primary-color__dark);
2020-05-28 12:34:36 +02:00
}
2020-05-27 23:05:39 +02:00
}
}
.link-icon {
display: inline-block;
2020-05-28 12:34:36 +02:00
height: 24px;
2020-05-28 00:44:47 +02:00
margin-right: 0.75em;
2020-05-27 23:05:39 +02:00
width: 24px;
svg {
height: 24px;
2023-05-06 00:38:34 +02:00
fill: var(--svg-color);
2020-05-27 23:05:39 +02:00
width: 24px;
}
}
footer {
2020-05-28 12:34:36 +02:00
font-size: 0.75rem;
margin: 0 0 0 0.75em;
2020-05-27 23:05:39 +02:00
a {
2023-05-06 00:38:34 +02:00
color: var(--svg-color);
2020-05-28 12:34:36 +02:00
&:visited {
2023-05-06 00:38:34 +02:00
color: var(--svg-color);
2020-05-28 12:34:36 +02:00
}
2020-05-27 23:05:39 +02:00
}
}