Customize folder setup

public/assets/css/panel.min.css

@@ -0,0 +1 @@
+.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(2),.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(3){display:none}.kirby-imagecrop-field .k-column:nth-of-type(2){display:none}/*# sourceMappingURL=panel.min.css.map */

public/assets/css/panel.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["panel.scss"],"names":[],"mappings":"AAYG,oIAEC,aAUH,gDACC","file":"panel.min.css"}

public/assets/css/panel.scss

@@ -0,0 +1,28 @@
+// ----------------------------------------------------------------------------
+// KIRBY PANEL CUSTOMIZATION
+// ----------------------------------------------------------------------------
+
+// Textarea headline buttons
+
+.k-textarea-field {
+
+	.k-toolbar {
+
+		.k-dropdown {
+
+			.k-button:nth-of-type(2),
+			.k-button:nth-of-type(3) {
+				display: none;
+			}
+		}
+	}
+}
+
+// Visual image crop field properties
+
+.kirby-imagecrop-field {
+
+	.k-column:nth-of-type(2) {
+		display: none;
+	}
+}

public/assets/css/partials/_animations.scss

@@ -0,0 +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;
+	}
+}

public/assets/css/partials/_fonts.scss

@@ -0,0 +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;
+}

public/assets/css/partials/_minireset.css

@@ -0,0 +1,78 @@
+/* ----------------------------------------------------------------------------
+MINIRESET V0.0.6
+---------------------------------------------------------------------------- */
+
+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;
+}

public/assets/css/partials/_variables.scss

@@ -0,0 +1,59 @@
+// ----------------------------------------------------------------------------
+// VARIABLES
+// ----------------------------------------------------------------------------
+
+:root {
+
+	// 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
+
+$tablet-media-query: 48rem;
+$desktop-media-query: 62rem;
+
+@media screen and (min-width: $tablet-media-query) {
+
+	:root {
+
+		// 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;
+	}
+}

public/assets/css/style.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["partials/_minireset.css","partials/_fonts.scss","partials/_variables.scss","partials/_animations.scss","style.scss"],"names":[],"mappings":"AAIA,yGAuBC,SACA,UAGD,kBAMC,eACA,mBAGD,GACC,gBAGD,oBAGC,SAGD,KACC,sBAGD,qBACC,mBAGD,UAEC,YACA,eAGD,OACC,SAGD,MACC,yBACA,iBAGD,MAEC,UCtED,WACC,wBACA,oEACA,gBACA,kBAGD,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,MAIC,qDACA,sDACA,2BACA,0BACA,6BACA,wBACA,yBACA,6BACA,uBACA,uBACA,qBAIA,kBACA,oCACA,sCAIA,cACA,wCACA,cACA,8CACA,oBAQD,qCAEC,MAIC,uBACA,6BACA,uBACA,uBACA,uBAIA,oBACA,oCACA,uCCpDF,kCACC,KACC,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"}

public/assets/css/style.scss

@@ -0,0 +1,210 @@
+@use 'partials/minireset';
+@use 'partials/fonts';
+@use 'partials/variables' as *;
+@use 'partials/animations';
+
+// ----------------------------------------------------------------------------
+// GENERALITIES
+// ----------------------------------------------------------------------------
+
+// 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
+
+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: hidden;
+}
+
+// ----------------------------------------------------------------------------
+// HEADER
+// ----------------------------------------------------------------------------
+
+// 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
+// ----------------------------------------------------------------------------
+
+// Footer bar