This commit is contained in:
Philippe Torrel
@@ -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,27 +12062,84 @@ body {
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Source Sans 3", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 0.5rem solid #333;
|
||||
background-color: limegreen;
|
||||
padding: 1rem;
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 100%;
|
||||
height: 30vh; /* viewport height */
|
||||
height: 300px;
|
||||
background-color: #ddd;
|
||||
height: 400px;
|
||||
background: black url("../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(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.logo-main img,
|
||||
.logo-main svg {
|
||||
width: 320px;
|
||||
height: auto;
|
||||
max-width: 320px;
|
||||
}
|
||||
.logo-main figcaption {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
@@ -11907,6 +12154,7 @@ body {
|
||||
.menu-main {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #101010;
|
||||
}
|
||||
.menu-main ul {
|
||||
list-style: none;
|
||||
@@ -11916,13 +12164,30 @@ body {
|
||||
.menu-main ul.list {
|
||||
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 {
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
background-color: salmon;
|
||||
color: #f2ebbf;
|
||||
background-color: #101010;
|
||||
padding: 0.5rem 1rem;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.25s ease-out;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
.menu-main ul.sublist {
|
||||
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;
|
||||
}
|
||||
@@ -1,19 +1,62 @@
|
||||
import { task, src, dest } from 'gulp';
|
||||
import { task, src, dest, watch, series, parallel } from 'gulp';
|
||||
|
||||
// Server =====
|
||||
|
||||
// npm install browser-sync -D
|
||||
import bs from 'browser-sync';
|
||||
const browserSync = bs.create();
|
||||
|
||||
// npx gulp server
|
||||
task('server', () => {
|
||||
browserSync.init({
|
||||
server: {
|
||||
baseDir: './',
|
||||
open: false,
|
||||
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
|
||||
|
||||
task('test', (done) => {
|
||||
|
||||
+1767
-4
File diff suppressed because it is too large
Load Diff
@@ -13,9 +13,11 @@
|
||||
"dev": "run-p css js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"browser-sync": "^3.0.4",
|
||||
"esbuild": "^0.28.2",
|
||||
"gulp": "^5.0.1",
|
||||
"gulp-sass": "^6.0.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"sass": "^1.105.0"
|
||||
"sass": "^1.105.1"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user