Customize folder setup

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