02_advanced/unterricht/tag16/website-static/assets/css/main.css

@@ -11859,6 +11859,196 @@ textarea.form-control-lg {
     display: none !important;
   }
 }
+@font-face {
+  font-display: swap;
+  font-family: "Gloria Hallelujah";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/gloria-hallelujah-v24-latin/gloria-hallelujah-v24-latin-regular.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 100;
+  src: url("../fonts/lato-v25-latin/lato-v25-latin-100.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Lato";
+  font-style: italic;
+  font-weight: 100;
+  src: url("../fonts/lato-v25-latin/lato-v25-latin-100italic.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 300;
+  src: url("../fonts/lato-v25-latin/lato-v25-latin-300.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Lato";
+  font-style: italic;
+  font-weight: 300;
+  src: url("../fonts/lato-v25-latin/lato-v25-latin-300italic.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/lato-v25-latin/lato-v25-latin-regular.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Lato";
+  font-style: italic;
+  font-weight: 400;
+  src: url("../fonts/lato-v25-latin/lato-v25-latin-italic.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 700;
+  src: url("../fonts/lato-v25-latin/lato-v25-latin-700.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Lato";
+  font-style: italic;
+  font-weight: 700;
+  src: url("../fonts/lato-v25-latin/lato-v25-latin-700italic.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 900;
+  src: url("../fonts/lato-v25-latin/lato-v25-latin-900.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Lato";
+  font-style: italic;
+  font-weight: 900;
+  src: url("../fonts/lato-v25-latin/lato-v25-latin-900italic.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 200;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 200;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200italic.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 300;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 300;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300italic.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-regular.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-italic.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 500;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 500;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500italic.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 600;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 600;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600italic.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 700;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 700;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700italic.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 800;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 800;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800italic.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 900;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 900;
+  src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900italic.woff2") format("woff2");
+}
+/* Color Theme Swatches in Hex */
 *,
 html {
   box-sizing: border-box;
@@ -11872,6 +12062,26 @@ body {
 body {
   margin: 0;
   padding: 0;
+  font-family: "Source Sans 3", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+h1, .h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  font-family: "Lato", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+  font-weight: 600;
+}
+
+blockquote {
+  font-family: "Gloria Hallelujah", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
 }
 
 .box {

02_advanced/unterricht/tag16/website-static/dev/scss/02_fonts/_gloria-hallelujah-v24-latin.scss

@@ -0,0 +1,8 @@
+// gloria-hallelujah-regular - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Gloria Hallelujah';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/gloria-hallelujah-v24-latin/gloria-hallelujah-v24-latin-regular.woff2') format('woff2');
+}

02_advanced/unterricht/tag16/website-static/dev/scss/02_fonts/_index.scss

@@ -0,0 +1,3 @@
+@import 'gloria-hallelujah-v24-latin';
+@import 'lato-v25-latin';
+@import 'source-sans-3-v19-latin';

02_advanced/unterricht/tag16/website-static/dev/scss/02_fonts/_lato-v25-latin.scss

@@ -0,0 +1,89 @@
+// lato-100 - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 100;
+  src: url('../fonts/lato-v25-latin/lato-v25-latin-100.woff2') format('woff2');
+}
+
+// lato-100italic - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 100;
+  src: url('../fonts/lato-v25-latin/lato-v25-latin-100italic.woff2') format('woff2');
+}
+
+// lato-300 - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/lato-v25-latin/lato-v25-latin-300.woff2') format('woff2');
+}
+
+// lato-300italic - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 300;
+  src: url('../fonts/lato-v25-latin/lato-v25-latin-300italic.woff2') format('woff2');
+}
+
+// lato-regular - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/lato-v25-latin/lato-v25-latin-regular.woff2') format('woff2');
+}
+
+// lato-italic - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../fonts/lato-v25-latin/lato-v25-latin-italic.woff2') format('woff2');
+}
+
+// lato-700 - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/lato-v25-latin/lato-v25-latin-700.woff2') format('woff2');
+}
+
+// lato-700italic - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 700;
+  src: url('../fonts/lato-v25-latin/lato-v25-latin-700italic.woff2') format('woff2');
+}
+
+// lato-900 - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 900;
+  src: url('../fonts/lato-v25-latin/lato-v25-latin-900.woff2') format('woff2');
+}
+
+// lato-900italic - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 900;
+  src: url('../fonts/lato-v25-latin/lato-v25-latin-900italic.woff2') format('woff2');
+}

02_advanced/unterricht/tag16/website-static/dev/scss/02_fonts/_source-sans-3-v19-latin.scss

@@ -0,0 +1,143 @@
+// source-sans-3-200 - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: normal;
+  font-weight: 200;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200.woff2') format('woff2');
+}
+
+// source-sans-3-200italic - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: italic;
+  font-weight: 200;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-200italic.woff2') format('woff2');
+}
+
+// source-sans-3-300 - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300.woff2') format('woff2');
+}
+
+// source-sans-3-300italic - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: italic;
+  font-weight: 300;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-300italic.woff2') format('woff2');
+}
+
+// source-sans-3-regular - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-regular.woff2') format('woff2');
+}
+
+// source-sans-3-italic - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-italic.woff2') format('woff2');
+}
+
+// source-sans-3-500 - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500.woff2') format('woff2');
+}
+
+// source-sans-3-500italic - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: italic;
+  font-weight: 500;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-500italic.woff2') format('woff2');
+}
+
+// source-sans-3-600 - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600.woff2') format('woff2');
+}
+
+// source-sans-3-600italic - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: italic;
+  font-weight: 600;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-600italic.woff2') format('woff2');
+}
+
+// source-sans-3-700 - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700.woff2') format('woff2');
+}
+
+// source-sans-3-700italic - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: italic;
+  font-weight: 700;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-700italic.woff2') format('woff2');
+}
+
+// source-sans-3-800 - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: normal;
+  font-weight: 800;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800.woff2') format('woff2');
+}
+
+// source-sans-3-800italic - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: italic;
+  font-weight: 800;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-800italic.woff2') format('woff2');
+}
+
+// source-sans-3-900 - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: normal;
+  font-weight: 900;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900.woff2') format('woff2');
+}
+
+// source-sans-3-900italic - latin
+@font-face {
+  font-display: swap;
+  font-family: 'Source Sans 3';
+  font-style: italic;
+  font-weight: 900;
+  src: url('../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900italic.woff2') format('woff2');
+}

02_advanced/unterricht/tag16/website-static/dev/scss/03_base/_colors.scss

@@ -0,0 +1,12 @@
+/* Color Theme Swatches in Hex */
+$color-1: #5c4b51;
+$color-2: #8cbeb2;
+$color-3: #f2ebbf;
+$color-4: #f3b562;
+$color-5: #f06060;
+
+$color-red: $color-5;
+$color-white: white; // falls weiß geändert wird z.B.: #f8f8f8
+
+$color-dark-blue: #283e4a;
+$linear-gradient-dark: linear-gradient(180deg, rgba(40, 62, 74, 1) 0%, rgba(24, 32, 38, 1) 100%);

02_advanced/unterricht/tag16/website-static/dev/scss/03_base/_index.scss

@@ -0,0 +1,5 @@
+@import 'variables';
+@import 'utils';
+@import 'typography';
+@import 'colors';
+@import 'theme';

02_advanced/unterricht/tag16/website-static/dev/scss/03_base/_theme.scss

@@ -0,0 +1,30 @@
+// Allgemeine Formatierung
+*,
+html {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: $font-copy;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $font-headline;
+  font-weight: 600;
+}
+
+blockquote {
+  font-family: $font-quote;
+}

02_advanced/unterricht/tag16/website-static/dev/scss/03_base/_typography.scss

@@ -0,0 +1,9 @@
+$fallback-serif: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+$fallback-sans-serif: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+$font-headline: 'Lato', $fallback-serif;
+$font-subclaim: $fallback-sans-serif;
+
+$font-menu: 'Source Sans 3', $fallback-sans-serif;
+$font-copy: 'Source Sans 3', $fallback-sans-serif;
+$font-quote: 'Gloria Hallelujah', $fallback-serif;

02_advanced/unterricht/tag16/website-static/dev/scss/main.scss

@@ -2,21 +2,14 @@
 
 // 01 Frameworks
 @import '01_frameworks/index';
-
-*,
-html {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-}
+// 02 Fonts
+@import '02_fonts/index';
+// 03 Base
+@import '03_base/index';
+// 04 Plugins
+@import '04_plugins/index';
+// 05 Modules
+@import '05_modules/index';
 
 .box {
   width: 100px;