feat: add mobile burger menu, SEO meta tags, and various fixes
- Add burger menu with open/close animation and scroll lock - Add nav-logo element for mobile header - Hide nav links on mobile, reveal in fullscreen overlay - Add title, meta description, Open Graph and Twitter Card tags - Add canonical URL - Various SCSS adjustments (hero line-height, excerpt font-weight) - Fix asset paths Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
f62ba6fbd7
commit
f7f3d0f0b5
17 changed files with 329 additions and 41 deletions
|
|
@ -103,6 +103,7 @@ body {
|
|||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
padding: 1rem 4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.blue-button.outlined {
|
||||
outline: 1px solid #fff;
|
||||
|
|
@ -118,7 +119,7 @@ body {
|
|||
font-size: var(--font-size-s);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
}
|
||||
.section-title.--centered {
|
||||
width: 100%;
|
||||
|
|
@ -148,7 +149,7 @@ body {
|
|||
.label {
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.label.--dimmed {
|
||||
|
|
@ -180,6 +181,10 @@ body > header {
|
|||
padding: 1.5rem var(--padding-body);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body > header .nav-logo,
|
||||
body > header .burger {
|
||||
display: none;
|
||||
}
|
||||
body > header ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -219,6 +224,7 @@ section#hero .title {
|
|||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
line-height: 93%;
|
||||
}
|
||||
section#hero .subtitle {
|
||||
font-weight: 400;
|
||||
|
|
@ -238,11 +244,15 @@ section#quote {
|
|||
section#quote-full blockquote,
|
||||
section#quote blockquote {
|
||||
display: block;
|
||||
width: min(100%, 40rem);
|
||||
width: min(100%, 44rem);
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
section#quote-full cite,
|
||||
section#quote cite {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
section#quote {
|
||||
margin: 0 var(--padding-body);
|
||||
|
|
@ -273,6 +283,7 @@ section#the-book .summary-wrapper .title-wrapper .title {
|
|||
section#the-book .summary-wrapper .text {
|
||||
font-weight: normal;
|
||||
font-size: var(--font-size-m);
|
||||
font-weight: 500;
|
||||
}
|
||||
section#the-book .summary-wrapper .text p:not(:last-child) {
|
||||
margin-bottom: 1.75rem;
|
||||
|
|
@ -289,10 +300,13 @@ section#the-book .data-wrapper {
|
|||
section#the-book .data-wrapper .label {
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
section#the-book .data-wrapper .value {
|
||||
font-weight: 500;
|
||||
}
|
||||
section#the-book .claim-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
|
@ -309,6 +323,11 @@ section#the-book .claim-wrapper .text {
|
|||
section#the-book .claim-wrapper .text .big {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
section#the-book .claim-wrapper .text .small {
|
||||
font-weight: 500;
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
section#excerpts {
|
||||
|
|
@ -325,7 +344,6 @@ section#excerpts header {
|
|||
margin-bottom: 3rem;
|
||||
}
|
||||
section#excerpts header .label {
|
||||
font-weight: 400;
|
||||
font-size: var(--font-size-s);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -366,13 +384,15 @@ section#excerpts .swiper-slide .item {
|
|||
section#excerpts .swiper-slide .item .label {
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 0.7rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
section#excerpts .swiper-slide .item .text {
|
||||
font-size: var(--font-size-m);
|
||||
line-height: 140%;
|
||||
font-weight: 500;
|
||||
}
|
||||
section#excerpts .swiper-button-prev,
|
||||
section#excerpts .swiper-button-next {
|
||||
|
|
@ -466,7 +486,7 @@ section#handles header .title-wrapper .index {
|
|||
font-size: var(--font-size-s);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
font-weight: 500;
|
||||
}
|
||||
section#handles header .title-wrapper .title {
|
||||
|
|
@ -526,7 +546,7 @@ section#system .text .top .section-title {
|
|||
font-size: var(--font-size-s);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
}
|
||||
section#system .text .top .title {
|
||||
font-family: "owners-xnarrow", sans-serif;
|
||||
|
|
@ -543,6 +563,7 @@ section#system .text .top .info {
|
|||
section#system .text .bottom ul li {
|
||||
list-style: disc;
|
||||
list-style-position: inside;
|
||||
font-weight: 500;
|
||||
}
|
||||
section#system .text .bottom ul:not(:last-child) {
|
||||
margin-bottom: 3rem;
|
||||
|
|
@ -570,7 +591,7 @@ section#excerpt .wrapper .section-title {
|
|||
font-size: var(--font-size-s);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -589,6 +610,9 @@ section#excerpt .wrapper .content {
|
|||
section#excerpt .wrapper .content p:not(:last-child) {
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
section#excerpt .wrapper .content {
|
||||
font-weight: 500;
|
||||
}
|
||||
section#excerpt .wrapper .content p.reference {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
|
@ -621,7 +645,7 @@ section#author .text .section-title {
|
|||
font-size: var(--font-size-s);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
}
|
||||
section#author .text .author-name {
|
||||
font-family: "owners-xnarrow", sans-serif;
|
||||
|
|
@ -654,7 +678,7 @@ section#buy .text .section-title {
|
|||
font-size: var(--font-size-s);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
}
|
||||
section#buy .text .title {
|
||||
font-family: "owners-xnarrow", sans-serif;
|
||||
|
|
@ -683,9 +707,10 @@ section#buy .text .buy-links li a {
|
|||
section#buy .text .info {
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
letter-spacing: 2.4px;
|
||||
font-weight: 400;
|
||||
}
|
||||
section#buy img {
|
||||
width: 45%;
|
||||
|
|
@ -712,7 +737,7 @@ body > footer header .section-title {
|
|||
font-size: var(--font-size-s);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -741,29 +766,108 @@ body > footer .contact .item:not(:last-child) {
|
|||
margin-bottom: 2.5rem;
|
||||
}
|
||||
body > footer .legal {
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15rem;
|
||||
text-align: center;
|
||||
width: 50rem;
|
||||
margin-top: 5rem;
|
||||
padding: 2.5rem 0 0 0;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
body.no-scroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 930px) {
|
||||
body > header {
|
||||
position: fixed;
|
||||
height: 3.5rem;
|
||||
overflow: hidden;
|
||||
transition: height 0.4s ease;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem var(--padding-body);
|
||||
}
|
||||
body > header ul {
|
||||
body > header nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
body > header nav .nav-logo {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
order: 1;
|
||||
}
|
||||
body > header nav .burger {
|
||||
order: 2;
|
||||
margin-left: auto;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0.25rem 0.5rem;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
body > header ul li:first-child {
|
||||
body > header nav .burger span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
height: 1.5px;
|
||||
background-color: #fff;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
body > header ul li:not(:first-child) {
|
||||
font-size: 0.75rem;
|
||||
body > header nav ul {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
padding-top: 3rem;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease 0.1s;
|
||||
}
|
||||
body > header nav ul li {
|
||||
width: 100%;
|
||||
}
|
||||
body > header nav ul li a {
|
||||
display: block;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
body > header nav ul li:first-child {
|
||||
width: 100%;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
body > header nav ul li:first-child a {
|
||||
font-family: var(--font-narrow);
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
body > header nav ul li:not(:first-child) {
|
||||
font-family: var(--font-narrow);
|
||||
font-size: 2rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
body > header.nav-open {
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
}
|
||||
body > header.nav-open nav .burger span:first-child {
|
||||
transform: rotate(45deg) translateY(0.2rem);
|
||||
}
|
||||
body > header.nav-open nav .burger span:last-child {
|
||||
transform: rotate(-45deg) translateY(-0.2rem);
|
||||
}
|
||||
body > header.nav-open nav ul {
|
||||
opacity: 1;
|
||||
}
|
||||
main {
|
||||
padding-top: 3.5rem;
|
||||
}
|
||||
section#hero {
|
||||
height: auto;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue