host/xiaowang
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit home page display

Browse source
This commit is contained in:
Paul Nicoué 2022-04-11 16:23:32 +02:00
parent 94a0c89099
commit fab69b64a1
3 changed files with 55 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/style.min.css vendored
View file

File diff suppressed because one or more lines are too long

97
assets/css/style.scss
View file

@ -83,31 +83,31 @@
--medium-font-weight: 500; --medium-font-weight: 500;
--semi-bold-font-weight: 600; --semi-bold-font-weight: 600;
--bold-font-weight: 700; --bold-font-weight: 700;
--text-font-size: 1.2rem; --text-font-size: 1rem;
--small-text-font-size: 1rem; --small-text-font-size: 0.8rem;
--h1-font-size: 2rem; --h1-font-size: 1.8rem;
--h2-font-size: 1.6rem; --h2-font-size: 1.4rem;
--h3-font-size: 1.6rem; --h3-font-size: 1.4rem;
--h4-font-size: 1.4rem; --h4-font-size: 1.2rem;
// Dimensions // Dimensions
--content-max-width: 140rem; --content-max-width: 140rem;
--text-max-width: 70rem; --text-max-width: 70rem;
--icon-size: 2.5rem; --icon-size: 2.5rem;
--header-vertical-padding: 2rem; --header-bar-vertical-padding: 2rem;
--header-horizontal-padding: 2rem; --header-bar-horizontal-padding: 2rem;
--header-height: calc((var(--header-vertical-padding) * 2) + var(--h1-font-size)); --header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--h1-font-size));
--footer-vertical-padding: 2rem; --footer-bar-vertical-padding: 1rem;
--footer-horizontal-padding: 2rem; --footer-bar-horizontal-padding: 2rem;
--footer-height: calc((var(--footer-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size)); --footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));
--generic-section-vertical-padding: 2rem; --generic-section-vertical-padding: 2rem;
--generic-section-horizontal-padding: 1rem; --generic-section-horizontal-padding: 1rem;
--home-section-min-height: calc(100vh - var(--header-height) - var(--footer-height)); --home-section-min-height: calc(100vh - var(--header-bar-height) - var(--footer-bar-height));
--home-nav-gap: 1rem; --home-nav-gap: 1rem;
--home-nav-item-size: 2rem; --home-nav-item-size: 2rem;
--home-nav-item-translation: 0; --home-nav-item-translation: 0;
--home-nav-image-max-height: calc(100vh - var(--header-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-height)); --home-nav-image-max-height: calc(100vh - var(--header-bar-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-bar-height));
// Colors // Colors
@ -125,12 +125,22 @@ $desktop-media-query: 62rem;
:root { :root {
// Fonts
--text-font-size: 1.2rem;
--small-text-font-size: 1rem;
--h1-font-size: 2rem;
--h2-font-size: 1.6rem;
--h3-font-size: 1.6rem;
--h4-font-size: 1.4rem;
// Dimensions // Dimensions
--icon-size: 3rem; --icon-size: 3rem;
--header-horizontal-padding: 4rem; --header-bar-horizontal-padding: 4rem;
--footer-horizontal-padding: 4rem; --footer-bar-vertical-padding: 2rem;
--footer-height: calc((var(--footer-vertical-padding) * 2) + var(--icon-size)); --footer-bar-horizontal-padding: 4rem;
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size));
--generic-section-horizontal-padding: 2rem; --generic-section-horizontal-padding: 2rem;
} }
} }
@ -139,24 +149,6 @@ $desktop-media-query: 62rem;
// ANIMATIONS // ANIMATIONS
// =========================================================================== // ===========================================================================
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes wave-up { @-webkit-keyframes wave-up {
0% { 0% {
top: 0; top: 0;
@ -304,16 +296,13 @@ footer {
// HEADER // HEADER
// =========================================================================== // ===========================================================================
header {
height: var(--header-height);
padding: var(--header-vertical-padding) var(--header-horizontal-padding);
}
// Header bar // Header bar
.header-bar { .header-bar {
max-width: var(--content-max-width); max-width: var(--content-max-width);
height: var(--header-bar-height);
margin: auto; margin: auto;
padding: var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding);
} }
.header-bar__logo { .header-bar__logo {
@ -725,8 +714,25 @@ header {
.home__nav-link { .home__nav-link {
color: var(--black); color: var(--black);
text-decoration: none; text-decoration: none;
-webkit-animation: fade-in 1s ease-out; opacity: 0;
animation: fade-in 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
div {
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
}
.home__nav-link--visible {
opacity: 1;
div {
opacity: 1;
}
} }
.home__nav-letter--wave-up { .home__nav-letter--wave-up {
@ -743,16 +749,13 @@ header {
// FOOTER // FOOTER
// =========================================================================== // ===========================================================================
footer {
height: var(--footer-height);
padding: var(--footer-vertical-padding) var(--footer-horizontal-padding);
}
// Footer bar // Footer bar
.footer-bar { .footer-bar {
max-width: var(--content-max-width); max-width: var(--content-max-width);
height: var(--footer-bar-height);
margin: auto; margin: auto;
padding: var(--footer-bar-vertical-padding) var(--footer-bar-horizontal-padding);
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;

5
assets/js/app.js
View file

@ -82,7 +82,7 @@ function setNavItemTranslationProperty() {
// Set navigation grid display depending on number of links // Set navigation grid display depending on number of links
function setNavGridDisplay() { function setNavGridDisplay() {
if (navLinks) { if (navEl && navLinks) {
if (navLinks.length === 2) { if (navLinks.length === 2) {
navEl.classList.add('home__nav--2-items'); navEl.classList.add('home__nav--2-items');
} else if (navLinks.length === 3) { } else if (navLinks.length === 3) {
@ -98,6 +98,9 @@ function setNavGridDisplay() {
} else if (navLinks.length === 8) { } else if (navLinks.length === 8) {
navEl.classList.add('home__nav--8-items'); navEl.classList.add('home__nav--8-items');
} }
for (let i = 0; i < navLinks.length; i++) {
navLinks[i].classList.add('home__nav-link--visible');
}
} }
} }