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

Edit home page style

Browse source
This commit is contained in:
Paul Nicoué 2022-07-06 17:18:42 +02:00
parent a6ea376678
commit e30484f323
15 changed files with 297 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

18
assets/css/partials/_animations.scss
View file

@ -1,3 +1,21 @@
// ----------------------------------------------------------------------------
// ANIMATIONS
// ----------------------------------------------------------------------------
@-webkit-keyframes expand-outline {
from {
outline-offset: 0;
}
to {
outline-offset: 2px;
}
}
@keyframes expand-outline {
from {
outline-offset: 0;
}
to {
outline-offset: 2px;
}
}

58
assets/css/partials/_fonts.scss
View file

@ -1,3 +1,61 @@
// ----------------------------------------------------------------------------
// FONTS
// ----------------------------------------------------------------------------
// Open Sans
@font-face {
font-family: 'Open Sans';
src: url(../fonts/open-sans/OpenSans-Regular.ttf) format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url(../fonts/open-sans/OpenSans-Italic.ttf) format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url(../fonts/open-sans/OpenSans-Medium.ttf) format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url(../fonts/open-sans/OpenSans-MediumItalic.ttf) format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url(../fonts/open-sans/OpenSans-SemiBold.ttf) format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url(../fonts/open-sans/OpenSans-SemiBoldItalic.ttf) format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url(../fonts/open-sans/OpenSans-Bold.ttf) format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url(../fonts/open-sans/OpenSans-BoldItalic.ttf) format('truetype');
font-weight: 700;
font-style: italic;
}

30
assets/css/partials/_variables.scss
View file

@ -6,10 +6,31 @@
// Fonts
--text-font-family: 'Open Sans', Verdana, sans-serif;
--title-font-family: 'Open Sans', Verdana, sans-serif;
--regular-font-weight: 400;
--medium-font-weight: 500;
--semi-bold-font-weight: 600;
--bold-font-weight: 700;
--text-font-size: 0.8rem;
--footnote-font-size: 0.6rem;
--h1-font-size: 1.6rem;
--h2-font-size: 1.2rem;
--h3-font-size: 1rem;
// Dimensions
--icon-size: 2rem;
--header-bar-vertical-padding: 2rem;
--header-bar-horizontal-padding: 1rem;
// Colors
--black: #000;
--transparent-black: rgba(0, 0, 0, 0.6);
--white: #fff;
--transparent-white: rgba(255, 255, 255, 0.9);
--feldgrau: #4B6259;
}
// Media queries
@ -23,7 +44,16 @@ $desktop-media-query: 62rem;
// Fonts
--text-font-size: 1rem;
--footnote-font-size: 0.8rem;
--h1-font-size: 1.8rem;
--h2-font-size: 1.4rem;
--h3-font-size: 1.2rem;
// Dimensions
--icon-size: 2.5rem;
--header-bar-vertical-padding: 4rem;
--header-bar-horizontal-padding: 2rem;
}
}

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

File diff suppressed because one or more lines are too long

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

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["partials/_minireset.css","style.scss"],"names":[],"mappings":"AAIA,yGAuBI,SACA,UAGJ,kBAMI,eACA,mBAGJ,GACI,gBAGJ,oBAGI,SAGJ,KACI,sBAGJ,qBACI,mBAGJ,UAEI,YACA,eAGJ,OACI,SAGJ,MACI,yBACA,iBAGJ,MAEI,UC7DJ,KACC,iBACA,kBACA,iBACA,aACA,KACC,8CAKF,OACC,iBAGD,KACC,eAGD,OACC","file":"style.min.css"}
{"version":3,"sourceRoot":"","sources":["partials/_minireset.css","partials/_fonts.scss","partials/_variables.scss","partials/_animations.scss","style.scss"],"names":[],"mappings":"AAIA,yGAuBI,SACA,UAGJ,kBAMI,eACA,mBAGJ,GACI,gBAGJ,oBAGI,SAGJ,KACI,sBAGJ,qBACI,mBAGJ,UAEI,YACA,eAGJ,OACI,SAGJ,MACI,yBACA,iBAGJ,MAEI,UCtEJ,WACI,wBACA,oEACA,gBACA,kBAGJ,WACC,wBACA,mEACA,gBACA,kBAGD,WACC,wBACA,mEACA,gBACA,kBAGD,WACC,wBACA,yEACA,gBACA,kBAGD,WACC,wBACA,qEACA,gBACA,kBAGD,WACC,wBACA,2EACA,gBACA,kBAGD,WACC,wBACA,iEACA,gBACA,kBAGD,WACC,wBACA,uEACA,gBACA,kBCvDD,MAII,qDACA,sDACA,2BACA,0BACA,6BACA,wBACA,yBACA,6BACA,uBACA,uBACA,qBAIA,kBACA,oCACA,sCAIA,cACA,wCACA,cACA,8CACA,oBAQJ,qCAEI,MAII,uBACA,6BACA,uBACA,uBACA,uBAIA,oBACA,oCACA,uCCpDR,kCACI,KACF,iBAED,GACC,oBAIF,0BACC,KACC,iBAED,GACC,oBCPF,KACC,oCACA,gCACA,mBACA,mBACA,8BAGD,GACC,qCACA,8BAGD,GACC,oCACA,8BACA,kBAGD,GACC,oCACA,8BACA,qBAGD,EACC,mBAGD,OACC,oCAGD,GACC,kBAKD,EACC,mBACA,qBACA,qDACA,gDACA,6CAEA,yBAGC,0BAGD,gBACC,gCACA,mBACA,gDACA,2CAMF,KACC,iBACA,gBASD,YACC,eACA,MACA,SACA,OACA,8DACA,gFACA,gBACA,+BACA,mBACC,+DAED,cACC,+DAED,WACC,+DAOC,yEACC,iBAIF,+BACC,qBACA,WACA,kBACA,+BACA,mBACA,uBACA,mBACC,gDAED,cACC,gDAED,WACC,gDAKH,gCACC,oBACA,oBACA,aACA,yBACA,sBACA,mBACA,gBAEA,kCACC,uBACA,wBACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBAEA,oCACC,kBAGD,sCACC,WACA,YACA,8BACA,0CACA,qCACA,kCAKH,kBACC,0CACA,gBAIC,qCACC,WACA,mBAMD,0CACC,kBAYJ,cACC,YACA,aAGD,sBACC,WACA","file":"style.min.css"}

195
assets/css/style.scss
View file

@ -9,31 +9,71 @@
// Fonts and colors
body {
font-family: var(--text-font-family);
font-size: var(--text-font-size);
line-height: normal;
color: var(--black);
background-color: var(--white);
}
h1 {
font-family: var(--title-font-family);
font-size: var(--h1-font-size);
}
h2 {
font-family: var(--text-font-family);
font-size: var(--h2-font-size);
margin: 0 0 4rem 0;
}
h3 {
font-family: var(--text-font-family);
font-size: var(--h3-font-size);
margin: 2rem 0 1rem 0;
}
p {
text-align: justify;
}
strong {
font-weight: var(--bold-font-weight);
}
em {
font-style: italic;
}
// Link style
// General grid layout
a {
color: var(--black);
text-decoration: none;
-webkit-transition: text-decoration 200ms ease-in-out;
-o-transition: text-decoration 200ms ease-in-out;
transition: text-decoration 200ms ease-in-out;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
&:focus-visible {
outline: 1px dashed var(--black);
outline-offset: 2px;
-webkit-animation: expand-outline 200ms ease-out;
animation: expand-outline 200ms ease-in-out;
}
}
// General layout
body {
min-height: 100vh;
overflow-x: hidden;
display: -ms-grid;
display: grid;
grid:
'header main' 1fr
'footer main' auto
/ auto 1fr;
}
header {
grid-area: header;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
overflow: hidden;
}
// ----------------------------------------------------------------------------
@ -42,12 +82,127 @@ footer {
// Header bar
.header-bar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
max-width: calc(15vw + var(--header-bar-horizontal-padding) * 2);
padding: var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding);
overflow-y: auto;
background-color: transparent;
-webkit-transition:
max-width 400ms ease-in-out,
background-color 400ms ease-in-out;
-o-transition:
max-width 400ms ease-in-out,
background-color 400ms ease-in-out;
transition:
max-width 400ms ease-in-out,
background-color 400ms ease-in-out;
.header-bar__nav {
.header-bar__nav-item {
+ .header-bar__nav-item {
margin-top: 0.5rem;
}
}
a {
display: inline-block;
width: 15vw;
overflow-x: hidden;
color: var(--transparent-black);
white-space: nowrap;
text-overflow: ellipsis;
-webkit-transition:
width 400ms ease-in-out,
color 400ms ease-in-out;
-o-transition:
width 400ms ease-in-out,
color 400ms ease-in-out;
transition:
width 400ms ease-in-out,
color 400ms ease-in-out;
}
}
.header-bar__social {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 2rem;
a {
width: var(--icon-size);
height: var(--icon-size);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
+ a {
margin: 0 0 0 1rem;
}
svg {
width: 100%;
height: 100%;
fill: var(--transparent-black);
-webkit-transition: fill 400ms ease-in-out;
-o-transition: fill 400ms ease-in-out;
transition: fill 400ms ease-in-out;
}
}
}
&:hover {
background-color: var(--transparent-white);
max-width: 100vw;
.header-bar__nav {
a {
width: 100%;
color: var(--black);
}
}
.header-bar__social {
svg {
fill: var(--black);
}
}
}
}
// ----------------------------------------------------------------------------
// MAIN
// ----------------------------------------------------------------------------
// Home section
.home-section {
width: 100vw;
height: 100vh;
}
.home-section__iframe {
width: 100%;
height: 100%;
}
// ----------------------------------------------------------------------------
// FOOTER
// ----------------------------------------------------------------------------