Website_jan.su/_source/scss/styles.scss
2020-05-28 13:12:59 +02:00

91 lines
1.6 KiB
SCSS

$color_primary: #4BB5A9;
$color_secondary: #D6E8E6;
$svg_color: #111;
body {
background-color: $color_secondary;
color: $svg_color;
display: flex;
flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
line-height: 1.5;
}
header {
display: flex;
flex-direction: column;
h1 {
margin: 0.25em;
text-align: center;
}
.photo {
align-self: center;
margin: 1em 0 0 0;
width: 200px;
img {
border-radius: 50%;
}
}
}
.list_links {
align-items: center;
display: flex;
flex-direction: column;
list-style: none;
margin: 0 1.25em;
padding: 0;
li {
max-width: 400px;
width: 100%;
}
a {
background-color: $color_primary;
color: $svg_color;
display: block;
font-weight: 700;
margin: 0.3em 0;
padding: 0.5em 0 0.7em 0.6em;
text-decoration: none;
&:visited {
color: $svg_color;
}
&:hover, &:active, &:focus {
background-color: darken($color_primary, 5%);
}
}
}
.link-icon {
display: inline-block;
height: 24px;
margin-right: 0.75em;
width: 24px;
svg {
height: 24px;
fill: $svg_color;
width: 24px;
}
}
footer {
font-size: 0.75rem;
margin: 0 0 0 0.75em;
a {
color: $svg_color;
&:visited {
color: $svg_color;
}
}
}