This commit is contained in:
Philippe Torrel
2026-10-29 10:08:58 +01:00
parent d823a35ac1
commit cdb30b2ea3
141 changed files with 14589 additions and 10 deletions
@@ -0,0 +1,3 @@
// Bootstrap 5.3.8 or 6 (6.0.0-alpha.1) straight from node_modules.
// @forward 'bootstrap/scss/bootstrap-grid'
@forward 'bootstrap/scss/bootstrap';
@@ -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('../../assets/fonts/gloria-hallelujah-v24-latin/gloria-hallelujah-v24-latin-regular.woff2') format('woff2');
}
@@ -0,0 +1,3 @@
// @forward 'gloria-hallelujah-v24-latin';
// @forward 'lato-v25-latin';
// @forward 'source-sans-3-v19-latin';
@@ -0,0 +1,89 @@
// lato-100 - latin
@font-face {
font-display: swap;
font-family: 'Lato';
font-style: normal;
font-weight: 100;
src: url('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/fonts/lato-v25-latin/lato-v25-latin-900italic.woff2') format('woff2');
}
@@ -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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/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('../../assets/fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900italic.woff2') format('woff2');
}
@@ -0,0 +1,13 @@
/* 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-black: #101010;
$color-dark-blue: #283e4a;
$linear-gradient-dark: linear-gradient(180deg, rgba(40, 62, 74, 1) 0%, rgba(24, 32, 38, 1) 100%);
@@ -0,0 +1,2 @@
// Variables (colors, typography) are pulled in by the partials that need them via @use.
@forward 'theme';
@@ -0,0 +1,52 @@
@use 'typography' as *;
// Allgemeine Formatierung
*,
html {
box-sizing: border-box;
}
html,
body,
#root,
#app {
height: 100%;
}
// Sticky Footer
body,
#root,
#app {
display: flex;
flex-direction: column;
}
main,
#main {
flex: 1 0 auto;
}
body > footer,
.footer-main {
flex-shrink: 0;
}
// sticky end
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;
}
@@ -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;
@@ -0,0 +1,7 @@
// @use '@fortawesome/fontawesome-free/scss/variables' with (
// $font-path: '@fa-webfonts'
// );
// @use '@fortawesome/fontawesome-free/scss/fontawesome';
// @use '@fortawesome/fontawesome-free/scss/solid';
// @use 'toastify-1.12/toastify';
@@ -0,0 +1,88 @@
/*!
* Toastify js 1.12.0
* https://github.com/apvarun/toastify-js
* @license MIT licensed
*
* Copyright (C) 2018 Varun A P
*/
.toastify {
padding: 12px 20px;
color: #ffffff;
display: inline-block;
box-shadow:
0 3px 6px -1px rgba(0, 0, 0, 0.12),
0 10px 36px -4px rgba(77, 96, 232, 0.3);
background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
background: linear-gradient(135deg, #73a5ff, #5477f5);
position: fixed;
opacity: 0;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
border-radius: 2px;
cursor: pointer;
text-decoration: none;
max-width: calc(50% - 20px);
z-index: 2147483647;
}
.toastify.on {
opacity: 1;
}
.toast-close {
background: transparent;
border: 0;
color: white;
cursor: pointer;
font-family: inherit;
font-size: 1em;
opacity: 0.4;
padding: 0 5px;
}
.toastify-right {
right: 15px;
}
.toastify-left {
left: 15px;
}
.toastify-top {
top: -150px;
}
.toastify-bottom {
bottom: -150px;
}
.toastify-rounded {
border-radius: 25px;
}
.toastify-avatar {
width: 1.5em;
height: 1.5em;
margin: -7px 5px;
border-radius: 2px;
}
.toastify-center {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
max-width: fit-content;
max-width: -moz-fit-content;
}
@media only screen and (max-width: 360px) {
.toastify-right,
.toastify-left {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
max-width: fit-content;
}
}
@@ -0,0 +1,17 @@
button,
input {
&.btn-custom {
background-color: #f0f0f0;
color: #333;
border: 1px solid #ccc;
padding: 8px 16px;
border-radius: 0px;
margin: 3px;
&:hover,
&:focus {
background-color: #e0e0e0;
color: #333;
border: 1px solid #ccc;
}
}
}
@@ -0,0 +1,38 @@
@use '../03_base/colors' as *;
.chuck-norris-joke {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: calc(100vh - 3.5rem); // full screen below the navbar
background: #555 url('../../assets/img/concrete-bg.jpg') center no-repeat fixed;
background-size: cover;
&::after {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 100%);
}
> * {
position: relative;
z-index: 2;
}
.joke-text {
color: $color-white;
text-align: center;
font-size: 3rem;
max-width: 80%;
padding: 2rem;
text-shadow: 2px 2px 5px rgba(black, 0.5);
}
}
@@ -0,0 +1,45 @@
@use '../03_base/colors' as *;
.footer-main {
background-color: $color-black;
background: $linear-gradient-dark;
padding: 3rem 0;
[class^='col'] {
color: $color-white;
a {
color: $color-white;
}
h2,
h3,
h4,
h5,
h6 {
font-size: 1.5rem;
color: $color-2;
padding: 0.5rem 0;
margin-bottom: 1rem;
letter-spacing: 2px;
}
}
// Mobile First
.row {
flex-direction: column;
> div {
&:nth-child(1) {
order: 3;
}
&:nth-child(2) {
order: 2;
}
&:nth-child(3) {
order: 1;
}
}
}
@media (min-width: 992px) {
// @include media-breakpoint-up(md) {
.row {
flex-direction: row;
}
}
}
@@ -0,0 +1,15 @@
.m-header-main {
width: 100%;
height: 400px;
// https://cssreference.io/property/background/
background: #efefef url('../../assets/img/header-bg.webp') center no-repeat border-box;
background-size: cover;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: 20px solid rgba(white, 0.25);
}
@@ -0,0 +1,8 @@
@forward 'button';
// @forward 'chuck-norris-joke';
@forward 'footerMain';
@forward 'header-main';
@forward 'input-amount';
@forward 'logo-main';
// @forward 'menu-main';
// @forward 'product-manager';
@@ -0,0 +1,27 @@
.m-input-amount {
.input-group {
.input-group-text {
padding: 0;
display: inline-block;
overflow: hidden;
button {
border-radius: 0;
}
}
input {
max-width: 85px;
text-align: center;
}
/* Für Chrome, Safari, Edge und Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Für Firefox */
input[type='number'] {
appearance: textfield;
}
}
}
@@ -0,0 +1,21 @@
.logo-main {
margin: 0;
img,
svg {
width: 320px;
height: auto;
max-width: 320px;
}
figcaption {
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
@@ -0,0 +1,20 @@
@use '../03_base/colors' as *;
@use '../03_base/typography' as *;
// Main navigation = Bootstrap 6 navbar (see includes/menu-main.html).
// Only the look from frontend-gulp is added here: black bar, uppercase links.
.menu-main {
background-color: $color-black;
font-family: $font-menu;
.nav-link {
text-transform: uppercase;
}
}
// Mobile drawer: Bootstrap 6 alpha keeps it white although the navbar is dark
// (data-bs-theme="dark"), which leaves the light link text invisible. Give it the bar's colour.
.menu-main .drawer {
background-color: $color-black;
color: $color-white;
}
@@ -0,0 +1,47 @@
.product-manager {
.nav-products-actions {
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: flex-end;
li {
button {
margin: 0.5rem 0 0.5rem 0.5rem;
}
}
}
}
table {
.th-actions {
width: 200px;
}
.th-dragger {
width: 50px;
}
td {
vertical-align: middle;
button {
margin: 0 2px;
}
}
tbody:empty::after {
content: 'loading products...';
width: max-content;
display: inline-block;
color: #999;
padding: 1rem;
}
tfoot .row > * {
margin-bottom: 0.5rem;
@media (min-width: 992px) {
margin-bottom: 0;
}
}
}
}
@@ -0,0 +1,13 @@
// Single stylesheet entry, linked in src/html/includes/head.html.
// Same folders as in frontend-gulp; @use instead of the deprecated @import.
// 01 Frameworks
@use '01_frameworks' as *;
// 02 Fonts
@use '02_fonts' as *;
// 03 Base
@use '03_base' as *;
// 04 Plugins
@use '04_plugins' as *;
// 05 Modules
@use '05_modules' as *;