ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-10-02 15:05:40 +02:00
parent 643fdfc410
commit 78b97c124a
4 changed files with 2092 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
03_js-dom/unterricht/tag20/05_website-gulp/assets/css/main.css
+277 -12
View File
@@ -11859,6 +11859,196 @@ textarea.form-control-lg {
display: none !important; 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 { html {
box-sizing: border-box; box-sizing: border-box;
@@ -11872,27 +12062,84 @@ body {
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: "Source Sans 3", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
} }
.box { h1, .h1,
width: 100px; h2,
height: 100px; .h2,
border: 0.5rem solid #333; h3,
background-color: limegreen; .h3,
padding: 1rem; 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;
}
.chuck-norris-joke {
position: relative;
width: 100%;
height: 100%;
height: 100vh;
background: #555 url("../img/concrete-bg.jpg") center no-repeat fixed;
background-size: cover;
}
.chuck-norris-joke::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%);
}
.chuck-norris-joke > * {
position: relative;
z-index: 2;
}
.chuck-norris-joke {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.chuck-norris-joke .joke-text {
color: white;
text-align: center;
font-size: 3rem;
max-width: 80%;
padding: 2rem;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
} }
.header-main { .header-main {
width: 100%; width: 100%;
height: 30vh; /* viewport height */ height: 30vh; /* viewport height */
height: 300px; height: 400px;
background-color: #ddd; background: black url("../img/header-bg.webp") center no-repeat border-box;
background-size: cover;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 20px solid rgba(255, 255, 255, 0.25);
} }
.logo-main img,
.logo-main svg {
width: 320px;
height: auto;
max-width: 320px;
}
.logo-main figcaption { .logo-main figcaption {
width: 1px; width: 1px;
height: 1px; height: 1px;
@@ -11907,6 +12154,7 @@ body {
.menu-main { .menu-main {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #101010;
} }
.menu-main ul { .menu-main ul {
list-style: none; list-style: none;
@@ -11916,13 +12164,30 @@ body {
.menu-main ul.list { .menu-main ul.list {
display: flex; display: flex;
} }
.menu-main ul.list li a {
outline: none;
}
.menu-main ul.list li a:hover, .menu-main ul.list li a:focus {
color: #101010;
background-color: #f2ebbf;
}
.menu-main ul.list li a { .menu-main ul.list li a {
display: inline-block; display: inline-block;
color: #333; color: #f2ebbf;
background-color: salmon; background-color: #101010;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
transition: all 0.25s ease-out;
} }
.menu-main ul.sublist {
/*# sourceMappingURL=main.css.map */ position: absolute;
}
.menu-main ul ul {
display: none;
}
.menu-main ul > li:hover ul,
.menu-main ul > li:focus ul,
.menu-main ul > li:focus-within ul {
display: block;
}
03_js-dom/unterricht/tag20/05_website-gulp/gulpfile.js
+45 -2
View File
@@ -1,19 +1,62 @@
import { task, src, dest } from 'gulp'; import { task, src, dest, watch, series, parallel } from 'gulp';
// Server ===== // Server =====
// npm install browser-sync -D
import bs from 'browser-sync'; import bs from 'browser-sync';
const browserSync = bs.create(); const browserSync = bs.create();
// npx gulp server
task('server', () => { task('server', () => {
browserSync.init({ browserSync.init({
server: { server: {
baseDir: './', baseDir: './',
open: false,
port: 3000, port: 3000,
}, },
open: false,
}); });
}); });
task('reload', (done) => {
browserSync.reload();
done();
});
// CSS ============
// https://www.npmjs.com/package/gulp-sass
import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
task('css', (done) => {
const sourceFile = './dev/scss/main.scss';
const targetFolder = './assets/css';
src(sourceFile)
.pipe(
sass({
silenceDeprecations: [
'if-function',
'color-functions',
'global-builtin',
'import',
'legacy-js-api',
'abs-percent',
],
}).on('error', sass.logError),
) //
.pipe(dest(targetFolder));
done();
});
task('watcher', () => {
watch(['./dev/scss/**/*.scss', './dev/scss/*.scss'], series('css', 'reload'));
});
// Main DEV Task ========
task('dev', series('css', parallel('server', 'watcher')));
// Test Tasks // Test Tasks
task('test', (done) => { task('test', (done) => {
03_js-dom/unterricht/tag20/05_website-gulp/package-lock.json
Generated
+1767 -4
View File
File diff suppressed because it is too large Load Diff
03_js-dom/unterricht/tag20/05_website-gulp/package.json
+3 -1
View File
@@ -13,9 +13,11 @@
"dev": "run-p css js" "dev": "run-p css js"
}, },
"devDependencies": { "devDependencies": {
"browser-sync": "^3.0.4",
"esbuild": "^0.28.2", "esbuild": "^0.28.2",
"gulp": "^5.0.1", "gulp": "^5.0.1",
"gulp-sass": "^6.0.1",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"sass": "^1.105.0" "sass": "^1.105.1"
} }
} }