Add and edit responsive style on homepage

This commit is contained in:
2021-10-03 19:14:24 +02:00
parent f6da3c4b55
commit 54afac2ed5
11 changed files with 203 additions and 55 deletions

View File

@@ -14,33 +14,23 @@
--columns: 18;
grid-column: 4 / span var(--columns);
}
}
h3 {
color: $color-secondary;
margin-bottom: 16px;
}
p {
margin-bottom: 40px;
color: $color-text;
font-weight: 300;
}
span {
font-size: rem(16px);
line-height: 1.2;
color: rgba($color-text, 0.6);
}
h3 {
color: $color-secondary;
margin-bottom: 8px;
// Past issues
a {
text-decoration: none;
color: $color-text;
font-size: rem(14px);
span {
@include bp (sm) {
margin-bottom: 16px;
}
}
p {
margin-bottom: 32px;
color: $color-text;
margin-left: 12px;
border-bottom: 1px solid $color-text;
font-weight: 300;
@include bp (sm) {
margin-bottom: 40px;
}
}
}
@@ -49,11 +39,12 @@
position: relative;
display: flex;
width: 100%;
max-width: 600px;
height: 64px;
margin-bottom: 20px;
padding: 0 30px;
border-radius: 100vh;
box-shadow: inset 0 0 0 3px $color-secondary;
box-shadow: inset 0 0 0 2px $color-secondary;
transition: box-shadow 0.6s var(--ease-quart);
input {
@@ -95,8 +86,43 @@
// Past Issues
.past-issues {
display: flex;
justify-content: space-between;
display: block;
text-align: center;
font-size: rem(14px);
max-width: 600px;
@include bp (sm) {
display: flex;
justify-content: space-between;
font-size: rem(16px);
}
a {
text-decoration: none;
color: $color-text;
}
span {
font-size: rem(14px);
color: $color-text;
margin-left: 8px;
border-bottom: 1px solid $color-text;
@include bp (sm) {
margin-left: 16px;
}
}
p {
color: $color-gray;
line-height: 1.3;
margin-top: 16px;
margin-bottom: 0;
@include bp (sm) {
margin-top: 0;
}
}
}
// Variants