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

Edit folder structure and webpack configuration

Browse source
This commit is contained in:
Paul Nicoué 2022-09-05 15:21:24 +02:00
parent 362f6012c2
commit 0cbffaaae9
46 changed files with 2594 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

36
assets/css/partials/animations.scss Normal file
View file

@ -0,0 +1,36 @@
// ----------------------------------------------------------------------------
// ANIMATIONS
// ----------------------------------------------------------------------------
@keyframes expand-outline {
from {
outline-offset: 0;
}
to {
outline-offset: 2px;
}
}
@keyframes wave-up {
0% {
top: 0;
}
60% {
top: -0.5rem;
}
100% {
top: 0;
}
}
@keyframes wave-down {
0% {
bottom: 0;
}
60% {
bottom: -0.5rem;
}
100% {
bottom: 0;
}
}

70
assets/css/partials/fonts.scss Normal file
View file

@ -0,0 +1,70 @@
// ----------------------------------------------------------------------------
// FONTS
// ----------------------------------------------------------------------------
// Nunito
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-Regular.ttf) format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-Italic.ttf) format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-Medium.ttf) format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-MediumItalic.ttf) format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-SemiBold.ttf) format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-SemiBoldItalic.ttf) format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-Bold.ttf) format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-BoldItalic.ttf) format('truetype');
font-weight: 700;
font-style: italic;
}
// Gloria Hallelujah
@font-face {
font-family: 'Gloria Hallelujah';
src: url(../../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format('truetype');
font-weight: 400;
font-style: normal;
}

91
assets/css/partials/variables.scss Normal file
View file

@ -0,0 +1,91 @@
// ----------------------------------------------------------------------------
// VARIABLES
// ----------------------------------------------------------------------------
:root {
// Fonts
--text-font-family: 'Nunito', Verdana, sans-serif;
--logo-font-family: 'Gloria Hallelujah', Verdana, sans-serif;
--regular-font-weight: 400;
--medium-font-weight: 500;
--semi-bold-font-weight: 600;
--bold-font-weight: 700;
--text-font-size: 1rem;
--caption-font-size: 0.9rem;
--footnote-font-size: 0.8rem;
--text-line-height: 1.4rem;
--h1-font-size: 1.8rem;
--h2-font-size: 1.4rem;
--h3-font-size: 1.2rem;
// Dimensions
--content-max-width: 140rem;
--text-max-width: 70rem;
--icon-size: 2.5rem;
--header-bar-vertical-padding: 1rem;
--header-bar-horizontal-padding: 2rem;
--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--icon-size));
--footer-bar-vertical-padding: 1rem;
--footer-bar-horizontal-padding: 2rem;
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));
--generic-section-vertical-padding: 3rem;
--generic-section-horizontal-padding: 2rem;
--home-section-vertical-padding: 2rem;
--home-section-horizontal-padding: 2rem;
--home-section-min-height: calc(100vh - var(--header-bar-height) - var(--footer-bar-height));
--home-nav-gap: 1rem;
--home-nav-item-size: 2rem;
--home-nav-item-translation: 0;
--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
--black: #000;
--transparent-black: rgba(0, 0, 0, 0.8);
--jet: #333333;
--transparent-jet: rgba(51, 51, 51, 0.8);
--granite-gray: #666666;
--spanish-gray: #999999;
--light-gray: #cccccc;
--white: #fff;
--transparent-white: rgba(255, 255, 255, 0.8);
// Plyr (audio player)
--plyr-color-main: var(--transparent-jet);
--plyr-tab-focus-color: var(--white);
}
// Media queries
$tablet-media-query: 48rem;
$desktop-media-query: 62rem;
@media screen and (min-width: $tablet-media-query) {
:root {
// Fonts
--text-font-size: 1.2rem;
--caption-font-size: 1.1rem;
--footnote-font-size: 1rem;
--h1-font-size: 2rem;
--h2-font-size: 1.6rem;
--h3-font-size: 1.4rem;
// Dimensions
--icon-size: 3rem;
--header-bar-vertical-padding: 2rem;
--header-bar-horizontal-padding: 4rem;
--footer-bar-vertical-padding: 2rem;
--footer-bar-horizontal-padding: 4rem;
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size));
--generic-section-horizontal-padding: 4rem;
--home-section-horizontal-padding: 4rem;
}
}