fix: responsive to go v1 in production!

This commit is contained in:
Matthieu Bessat 2023-10-23 01:07:24 +02:00
parent 903aa8010a
commit 05b74db2e5
20 changed files with 100 additions and 135 deletions

View file

@ -12,4 +12,8 @@
.article {
line-height: 1.8rem;
img {
max-width: 100%;
}
}

View file

@ -15,13 +15,18 @@ article {
font-size: 1.1rem;
}
h1, h2, h3 {
.alt-font {
font-family: "Teko Light",Helvetica,Arial,sans-serif;
}
h1, h2, h3 {
@extend .alt-font;
}
h1 {
font-size: 1.75rem;
color: $secondary;
margin: 1.5rem 0 1rem 0;
}
h2 {
@ -57,3 +62,18 @@ a:hover {
.half-wheel-logo {
color: white;
}
@media (max-width: $md-breakpoint) {
.columns-two {
grid-template-columns: 1fr;
>div {
margin-bottom: 1rem;
}
dl:first-of-type {
margin-top: 0;
}
}
}

View file

@ -18,10 +18,15 @@ $header-height: 6.5rem;
a {
color: white;
text-decoration: none;
margin-right: 1.5rem;
font-size: 1.1rem;
}
a:hover {
opacity: 0.8;
text-decoration: underline;
text-decoration: underline !important;
}
a:last-of-type {
margin-right: 0;
}
}
@ -29,19 +34,49 @@ $header-height: 6.5rem;
height: 100%;
}
.site-header__logo {
width: $header-height;
height: 100%;
.site-header__brand {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
.site-header__brand__name {
font-size: 2rem;
text-decoration: none;
padding-top: 1.5rem;
margin-left: 1rem;
@extend .alt-font;
}
.site-header__brand__logo {
display: flex;
flex-direction: column;
justify-content: center;
svg {
width: 10rem;
}
}
@media (max-width: $md-breakpoint) {
.site-header {
height: auto;
}
.site-header .page-container {
width: 100% !important;
}
.site-header__content {
display: block;
height: auto;
padding-top: 1rem;
}
.site-header__title {
padding-right: 1rem;
}
.site-header__nav {
padding: 1rem 0;
line-height: 2rem;
display: flex;
justify-content: center;
}
}

View file

@ -33,6 +33,7 @@
.brand__logo {
svg {
max-width: 25rem;
stroke: white;
}
}

View file

@ -44,3 +44,22 @@
color: $primary;
}
}
@media (max-width: $md-breakpoint) {
.pricing-layout {
grid-template-columns: 1fr;
}
.operations-container {
grid-column: initial;
}
.operations-mosaic {
columns: initial;
}
.operations-category {
margin-bottom: 1rem;
}
.operation-price {
min-width: 4rem;
}
}