Edit home page style

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;
+	}
+}

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;
+}

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;
     }
 }

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"}
+{"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"}

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;
+	overflow: 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;
 }
 
 // ----------------------------------------------------------------------------
@@ -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
 // ----------------------------------------------------------------------------

site/templates/base.twig

@@ -33,6 +33,7 @@
 		<header>
 
 			<div class="header-bar">
+
 				<nav class="header-bar__nav" aria-label="Menu">
 					{% if site.homepage.exhibitions is not empty %}
 						<ul class="header-bar__nav-menu">
@@ -48,6 +49,19 @@
 						</ul>
 					{% endif %}
 				</nav>
+				<div class="header-bar__social">
+					<a class="header-bar__gallery-button" href="#" target="_self" aria-label="Show {{ site.title }}'s image gallery">
+						<svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor">
+							<path d="M17.25 29.15H36.8l-6.35-8.55-5.15 6.75L21.9 23ZM10 38V4h34v34Zm3-3h28V7H13Zm-9 9V10h3v31h31v3Zm9-9V7v28Z"/>
+						</svg>
+					</a>
+					<a class="header-bar__email-button" href="mailto:{{ site.email }}" target="_blank" aria-label="Write an email to {{ site.title }}">
+						<svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor">
+							<path d="M4 40V8h40v32Zm20-15.1L7 13.75V37h34V13.75Zm0-3L40.8 11H7.25ZM7 13.75V11v2.75Z"/>
+						</svg>
+					</a>
+				</div>
+
 			</div>
 
 		</header>