157 lines
3.2 KiB
SCSS
157 lines
3.2 KiB
SCSS
@import '~/css/helpers';
|
|
|
|
.structured {
|
|
font-family: var(--font-tt-hoves);
|
|
max-width: tovw(856px, 'default', 856px);
|
|
|
|
@include respond-to('mobile') {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.blog_img__eo9Jb {
|
|
object-fit: cover;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: tovw(124px, 'default', 72px);
|
|
font-family: var(--font-arthemys);
|
|
font-size: tovw(58px, 'default', 30px);
|
|
line-height: 1;
|
|
|
|
@media screen and (max-width: 800px) {
|
|
line-height: 124%;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-family: var(--font-tt-hoves);
|
|
font-size: tovw(40px, 'default', 24px);
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
margin-top: tovw(44px, 'default', 40px);
|
|
margin-bottom: tovw(44px, 'default', 24px);
|
|
|
|
@media screen and (max-width: 800px) {
|
|
line-height: 160%;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@include respond-to('mobile') {
|
|
font-size: tovw(15px, 'default', 15px);
|
|
}
|
|
|
|
font-family: var(--font-tt-hoves);
|
|
font-size: tovw(22px, 'default', 18px);
|
|
line-height: 160%;
|
|
letter-spacing: -0.01em;
|
|
margin: tovw(44px, 'default', 40px) 0;
|
|
|
|
a {
|
|
color: var(--color-grey-light);
|
|
transition: color 200ms;
|
|
|
|
&:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
}
|
|
}
|
|
|
|
blockquote {
|
|
margin: tovw(76px, 'default', 40px) 0;
|
|
border-left: 4px solid var(--color-accent);
|
|
padding-left: tovw(87px, 'default', 22px);
|
|
|
|
p {
|
|
font-size: tovw(28px, 'default', 18px);
|
|
line-height: tovw(39px, 'default', 29px);
|
|
}
|
|
|
|
footer {
|
|
font-size: tovw(20px, 'default', 15px);
|
|
line-height: tovw(32px, 'default', 24px);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
margin: tovw(50px, 'default', 30px) 0;
|
|
padding-left: tovw(27px, 'default', 22px);
|
|
list-style: none;
|
|
position: relative;
|
|
|
|
li {
|
|
p {
|
|
margin: tovw(15px, 'default', 10px);
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
height: 8px;
|
|
width: 8px;
|
|
margin-top: tovw(15px, 'default', 8px);
|
|
background: var(--color-accent);
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
code {
|
|
border: tovw(1px, 'default', 1px) solid var(--color-grey-light);
|
|
border-radius: tovw(8px, 'default', 4px);
|
|
background: var(--color-black);
|
|
display: block;
|
|
font-family: var(--font-dm-mono), sans-serif;
|
|
padding: tovw(40px, 'default', 22px);
|
|
word-break: break-all;
|
|
white-space: break-spaces;
|
|
}
|
|
}
|
|
|
|
.callout {
|
|
&__01 {
|
|
@include respond-to('mobile') {
|
|
padding: tovw(20px, 'default', 20px);
|
|
}
|
|
|
|
padding: tovw(40px, 'default', 25px);
|
|
margin-bottom: tovw(44px, 'default', 35px);
|
|
border: 1px solid var(--color-accent);
|
|
background-color: rgb(0 0 244 / 0.3);
|
|
border-radius: 8px;
|
|
|
|
p {
|
|
margin: tovw(10px, 'default', 6px) 0;
|
|
}
|
|
}
|
|
|
|
&__02 {
|
|
@include respond-to('mobile') {
|
|
padding: tovw(20px, 'default', 20px);
|
|
}
|
|
|
|
padding: tovw(40px, 'default', 25px);
|
|
margin-bottom: tovw(44px, 'default', 35px);
|
|
border: 1px solid var(--color-grey-light);
|
|
background-color: transparent;
|
|
border-radius: 8px;
|
|
|
|
p {
|
|
margin: tovw(10px, 'default', 6px) 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.img {
|
|
margin: tovw(136px, 'default', 72px) auto;
|
|
|
|
> img {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
}
|
|
}
|