diff --git a/assets/css/partials/_animations.scss b/assets/css/partials/_animations.scss index 816b744..e869a18 100644 --- a/assets/css/partials/_animations.scss +++ b/assets/css/partials/_animations.scss @@ -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; + } +} diff --git a/assets/css/partials/_fonts.scss b/assets/css/partials/_fonts.scss index 71ba1ef..ff02e2c 100644 --- a/assets/css/partials/_fonts.scss +++ b/assets/css/partials/_fonts.scss @@ -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; +} diff --git a/assets/css/partials/_variables.scss b/assets/css/partials/_variables.scss index 6f27667..3e538c0 100644 --- a/assets/css/partials/_variables.scss +++ b/assets/css/partials/_variables.scss @@ -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; } } diff --git a/assets/css/style.min.css b/assets/css/style.min.css index 98d18a5..4e4d970 100644 --- a/assets/css/style.min.css +++ b/assets/css/style.min.css @@ -1 +1 @@ -html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}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}/*# sourceMappingURL=style.min.css.map */ +html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@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}:root{--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;--icon-size: 2rem;--header-bar-vertical-padding: 2rem;--header-bar-horizontal-padding: 1rem;--black: #000;--transparent-black: rgba(0, 0, 0, 0.6);--white: #fff;--transparent-white: rgba(255, 255, 255, 0.9);--feldgrau: #4B6259}@media screen and (min-width: 48rem){:root{--text-font-size: 1rem;--footnote-font-size: 0.8rem;--h1-font-size: 1.8rem;--h2-font-size: 1.4rem;--h3-font-size: 1.2rem;--icon-size: 2.5rem;--header-bar-vertical-padding: 4rem;--header-bar-horizontal-padding: 2rem}}@-webkit-keyframes expand-outline{from{outline-offset:0}to{outline-offset:2px}}@keyframes expand-outline{from{outline-offset:0}to{outline-offset:2px}}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}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}a:hover,a:focus,a:active{text-decoration:underline}a:focus-visible{outline:1px dashed var(--black);outline-offset:2px;-webkit-animation:expand-outline 200ms ease-out;animation:expand-outline 200ms ease-in-out}body{min-height:100vh;overflow:hidden}.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:rgba(0,0,0,0);-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 .header-bar__nav .header-bar__nav-item+.header-bar__nav-item{margin-top:.5rem}.header-bar .header-bar__nav 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 .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}.header-bar .header-bar__social 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}.header-bar .header-bar__social a+a{margin:0 0 0 1rem}.header-bar .header-bar__social a 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}.header-bar:hover{background-color:var(--transparent-white);max-width:100vw}.header-bar:hover .header-bar__nav a{width:100%;color:var(--black)}.header-bar:hover .header-bar__social svg{fill:var(--black)}.home-section{width:100vw;height:100vh}.home-section__iframe{width:100%;height:100%}/*# sourceMappingURL=style.min.css.map */ diff --git a/assets/css/style.min.css.map b/assets/css/style.min.css.map index ae03a0e..2cf71cc 100644 --- a/assets/css/style.min.css.map +++ b/assets/css/style.min.css.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss index 5cdee81..101de4b 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -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 // ---------------------------------------------------------------------------- diff --git a/assets/fonts/open-sans/OpenSans-Bold.ttf b/assets/fonts/open-sans/OpenSans-Bold.ttf new file mode 100644 index 0000000..ab4d993 Binary files /dev/null and b/assets/fonts/open-sans/OpenSans-Bold.ttf differ diff --git a/assets/fonts/open-sans/OpenSans-BoldItalic.ttf b/assets/fonts/open-sans/OpenSans-BoldItalic.ttf new file mode 100644 index 0000000..5dcb3a5 Binary files /dev/null and b/assets/fonts/open-sans/OpenSans-BoldItalic.ttf differ diff --git a/assets/fonts/open-sans/OpenSans-Italic.ttf b/assets/fonts/open-sans/OpenSans-Italic.ttf new file mode 100644 index 0000000..68cff8f Binary files /dev/null and b/assets/fonts/open-sans/OpenSans-Italic.ttf differ diff --git a/assets/fonts/open-sans/OpenSans-Medium.ttf b/assets/fonts/open-sans/OpenSans-Medium.ttf new file mode 100644 index 0000000..faa5386 Binary files /dev/null and b/assets/fonts/open-sans/OpenSans-Medium.ttf differ diff --git a/assets/fonts/open-sans/OpenSans-MediumItalic.ttf b/assets/fonts/open-sans/OpenSans-MediumItalic.ttf new file mode 100644 index 0000000..e15c7d4 Binary files /dev/null and b/assets/fonts/open-sans/OpenSans-MediumItalic.ttf differ diff --git a/assets/fonts/open-sans/OpenSans-Regular.ttf b/assets/fonts/open-sans/OpenSans-Regular.ttf new file mode 100644 index 0000000..e21ff5f Binary files /dev/null and b/assets/fonts/open-sans/OpenSans-Regular.ttf differ diff --git a/assets/fonts/open-sans/OpenSans-SemiBold.ttf b/assets/fonts/open-sans/OpenSans-SemiBold.ttf new file mode 100644 index 0000000..2b18a1c Binary files /dev/null and b/assets/fonts/open-sans/OpenSans-SemiBold.ttf differ diff --git a/assets/fonts/open-sans/OpenSans-SemiBoldItalic.ttf b/assets/fonts/open-sans/OpenSans-SemiBoldItalic.ttf new file mode 100644 index 0000000..1f86d18 Binary files /dev/null and b/assets/fonts/open-sans/OpenSans-SemiBoldItalic.ttf differ diff --git a/site/templates/base.twig b/site/templates/base.twig index 9c11c37..3425efb 100644 --- a/site/templates/base.twig +++ b/site/templates/base.twig @@ -33,6 +33,7 @@
+ + +