updated project to build with gulpjs
6
.gitignore
vendored
|
@ -1,2 +1,6 @@
|
|||
.idea
|
||||
*.iml
|
||||
*.iml
|
||||
|
||||
dist/
|
||||
|
||||
node_modules/
|
|
@ -2,10 +2,27 @@ stages:
|
|||
- build
|
||||
- deploy
|
||||
|
||||
build:
|
||||
image: node
|
||||
stage: build
|
||||
dependencies: []
|
||||
before_script:
|
||||
- rm package-lock.json
|
||||
script:
|
||||
- npm run build
|
||||
cache:
|
||||
paths:
|
||||
- node_modules/
|
||||
artifacts:
|
||||
paths:
|
||||
- dist/
|
||||
|
||||
deploy:
|
||||
image: alpine
|
||||
stage: deploy
|
||||
dependencies:
|
||||
- build
|
||||
before_script:
|
||||
- apk add lftp
|
||||
- which lftp || ( apk --update add lftp )
|
||||
script:
|
||||
- lftp -e "mirror -R ./ samuel-philipp.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
|
105
css/app.css
|
@ -1,105 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'Minotaur';
|
||||
src: local('Minotaur Phatte'), url(../font/minotaur.ttf) format('truetype');
|
||||
}
|
||||
|
||||
body {
|
||||
color: #fff;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
position: fixed;
|
||||
top: -25px;
|
||||
left: -25px;
|
||||
width: calc(100% + 50px);
|
||||
height: calc(100% + 50px);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#developer {
|
||||
background-image: url('../img/sp-codes.png');
|
||||
}
|
||||
|
||||
#magician {
|
||||
background-image: url('../img/sp-magic_overlay.png');
|
||||
}
|
||||
|
||||
.headers {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/*justify-content: stretch;*/
|
||||
align-items: stretch;
|
||||
/*align-content: stretch;*/
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.headers .magician {
|
||||
color: #000000;
|
||||
font-family: "Minotaur", cursive;
|
||||
font-weight: normal;
|
||||
font-size: 5rem;
|
||||
text-shadow: 0 0 1rem #ffffff;
|
||||
}
|
||||
|
||||
.headers .developer {
|
||||
color: #ffffff;
|
||||
font-family: "Minotaur", monospace;
|
||||
font-weight: bold;
|
||||
font-size: 5rem;
|
||||
text-shadow: 0 0 1rem #000000;
|
||||
}
|
||||
|
||||
.headers a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.headers .codes {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.headers .magic {
|
||||
flex-grow: 0.6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.headers .padding {
|
||||
flex-grow: 1.3;
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-top: 1px solid #ffffff;
|
||||
border-left: 1px solid #ffffff;
|
||||
border-top-left-radius: 8px;
|
||||
}
|
||||
|
||||
.menu a {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.menu a:hover {
|
||||
color: #222222;
|
||||
}
|
|
@ -1,5 +0,0 @@
|
|||
body {
|
||||
background-image: url("../img/bg.png");
|
||||
padding: 2%;
|
||||
color: #fff;
|
||||
}
|
254
gulpfile.js
Normal file
|
@ -0,0 +1,254 @@
|
|||
/**
|
||||
* Settings
|
||||
* Turn on/off build features
|
||||
*/
|
||||
var settings = {
|
||||
clean: true,
|
||||
scripts: true,
|
||||
styles: true,
|
||||
copy: true,
|
||||
reload: true
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Paths to project folders
|
||||
*/
|
||||
var paths = {
|
||||
input: 'src/',
|
||||
output: 'dist/',
|
||||
scripts: {
|
||||
input: 'src/js/*.js',
|
||||
output: 'dist/js/'
|
||||
},
|
||||
styles: {
|
||||
input: 'src/scss/*.scss',
|
||||
output: 'dist/css/'
|
||||
},
|
||||
copy: {
|
||||
input: [
|
||||
'src/*.html',
|
||||
'src/.htaccess',
|
||||
'src/{img,font}/**/*',
|
||||
'node_modules/@fortawesome/fontawesome-free/*fonts/**/*'
|
||||
],
|
||||
output: 'dist/'
|
||||
},
|
||||
reload: './dist/'
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Template for banner to add to file headers
|
||||
*/
|
||||
|
||||
var banner = {
|
||||
main:
|
||||
'/*!' +
|
||||
' <%= package.name %> v<%= package.version %>' +
|
||||
' | (c) ' + new Date().getFullYear() + ' <%= package.author.name %>' +
|
||||
' | <%= package.license %> License' +
|
||||
' | <%= package.repository.url %>' +
|
||||
' */\n'
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Gulp Packages
|
||||
*/
|
||||
// General
|
||||
var {src, dest, watch, series, parallel} = require('gulp');
|
||||
var del = require('del');
|
||||
var flatmap = require('gulp-flatmap');
|
||||
var lazypipe = require('lazypipe');
|
||||
var rename = require('gulp-rename');
|
||||
var header = require('gulp-header');
|
||||
var package = require('./package.json');
|
||||
|
||||
// Scripts
|
||||
var concat = require('gulp-concat');
|
||||
var uglify = require('gulp-terser');
|
||||
var optimizejs = require('gulp-optimize-js');
|
||||
|
||||
// Styles
|
||||
var sass = require('gulp-sass');
|
||||
var postcss = require('gulp-postcss');
|
||||
var prefix = require('autoprefixer');
|
||||
var minify = require('cssnano');
|
||||
var tildeImporter = require('node-sass-tilde-importer');
|
||||
|
||||
// BrowserSync
|
||||
var browserSync = require('browser-sync');
|
||||
|
||||
|
||||
/**
|
||||
* Gulp Tasks
|
||||
*/
|
||||
// Remove pre-existing content from output folders
|
||||
var cleanDist = function (done) {
|
||||
|
||||
// Make sure this feature is activated before running
|
||||
if (!settings.clean) return done();
|
||||
|
||||
// Clean the dist folder
|
||||
del.sync([
|
||||
paths.output
|
||||
]);
|
||||
|
||||
// Signal completion
|
||||
return done();
|
||||
|
||||
};
|
||||
|
||||
// Repeated JavaScript tasks
|
||||
var jsTasks = lazypipe()
|
||||
.pipe(header, banner.main, {package: package})
|
||||
.pipe(optimizejs)
|
||||
.pipe(dest, paths.scripts.output)
|
||||
.pipe(rename, {suffix: '.min'})
|
||||
.pipe(uglify)
|
||||
.pipe(optimizejs)
|
||||
.pipe(header, banner.main, {package: package})
|
||||
.pipe(dest, paths.scripts.output);
|
||||
|
||||
// minify, and concatenate scripts
|
||||
var buildScripts = function (done) {
|
||||
// Make sure this feature is activated before running
|
||||
if (!settings.scripts) return done();
|
||||
|
||||
// Run tasks on script files
|
||||
return src(paths.scripts.input)
|
||||
.pipe(flatmap(function(stream, file) {
|
||||
|
||||
// If the file is a directory
|
||||
if (file.isDirectory()) {
|
||||
|
||||
// Setup a suffix variable
|
||||
var suffix = '';
|
||||
|
||||
// If separate polyfill files enabled
|
||||
if (settings.polyfills) {
|
||||
|
||||
// Update the suffix
|
||||
suffix = '.polyfills';
|
||||
|
||||
// Grab files that aren't polyfills, concatenate them, and process them
|
||||
src([file.path + '/*.js', '!' + file.path + '/*' + paths.scripts.polyfills])
|
||||
.pipe(concat(file.relative + '.js'))
|
||||
.pipe(jsTasks());
|
||||
|
||||
}
|
||||
|
||||
// Grab all files and concatenate them
|
||||
// If separate polyfills enabled, this will have .polyfills in the filename
|
||||
src(file.path + '/*.js')
|
||||
.pipe(concat(file.relative + suffix + '.js'))
|
||||
.pipe(jsTasks());
|
||||
|
||||
return stream;
|
||||
|
||||
}
|
||||
|
||||
// Otherwise, process the file
|
||||
return stream.pipe(jsTasks());
|
||||
|
||||
}));
|
||||
|
||||
};
|
||||
|
||||
// Process, and minify Sass files
|
||||
var buildStyles = function (done) {
|
||||
// Make sure this feature is activated before running
|
||||
if (!settings.styles) return done();
|
||||
|
||||
// Run tasks on all Sass files
|
||||
return src(paths.styles.input)
|
||||
.pipe(sass({
|
||||
importer: tildeImporter,
|
||||
outputStyle: 'expanded',
|
||||
sourceComments: true
|
||||
}))
|
||||
.pipe(postcss([
|
||||
prefix({
|
||||
cascade: true,
|
||||
remove: true
|
||||
})
|
||||
]))
|
||||
.pipe(header(banner.main, {package: package}))
|
||||
.pipe(dest(paths.styles.output))
|
||||
.pipe(rename({suffix: '.min'}))
|
||||
.pipe(postcss([
|
||||
minify({
|
||||
discardComments: {
|
||||
removeAll: true
|
||||
}
|
||||
})
|
||||
]))
|
||||
.pipe(dest(paths.styles.output));
|
||||
|
||||
};
|
||||
|
||||
// Copy static files into output folder
|
||||
var copyFiles = function (done) {
|
||||
|
||||
// Make sure this feature is activated before running
|
||||
if (!settings.copy) return done();
|
||||
|
||||
// Copy static files
|
||||
return src(paths.copy.input)
|
||||
.pipe(dest(paths.copy.output));
|
||||
|
||||
};
|
||||
|
||||
// Watch for changes to the src directory
|
||||
var startServer = function (done) {
|
||||
// Make sure this feature is activated before running
|
||||
if (!settings.reload) return done();
|
||||
|
||||
// Initialize BrowserSync
|
||||
browserSync.init({
|
||||
server: {
|
||||
baseDir: paths.reload
|
||||
}
|
||||
});
|
||||
|
||||
// Signal completion
|
||||
done();
|
||||
|
||||
};
|
||||
|
||||
// Reload the browser when files change
|
||||
var reloadBrowser = function (done) {
|
||||
if (!settings.reload) return done();
|
||||
browserSync.reload();
|
||||
done();
|
||||
};
|
||||
|
||||
// Watch for changes
|
||||
var watchSource = function (done) {
|
||||
watch(paths.input, series(exports.default, reloadBrowser));
|
||||
done();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Export Tasks
|
||||
*/
|
||||
// Default task
|
||||
// gulp
|
||||
exports.default = series(
|
||||
cleanDist,
|
||||
parallel(
|
||||
buildScripts,
|
||||
buildStyles,
|
||||
copyFiles
|
||||
)
|
||||
);
|
||||
|
||||
// Watch and reload
|
||||
// gulp watch
|
||||
exports.watch = series(
|
||||
exports.default,
|
||||
startServer,
|
||||
watchSource
|
||||
);
|
7992
package-lock.json
generated
Normal file
36
package.json
Normal file
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"name": "samuel-philipp.de",
|
||||
"version": "1.0.0",
|
||||
"description": "website for samuel-philipp.de",
|
||||
"scripts": {
|
||||
"start": "gulp watch",
|
||||
"build": "gulp"
|
||||
},
|
||||
"author": "samuel-p",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitlab.com/samuel-p/samuel-philipp.de"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gulp": "4.0.2",
|
||||
"del": "3.0.0",
|
||||
"lazypipe": "1.0.1",
|
||||
"gulp-flatmap": "1.0.2",
|
||||
"gulp-header": "2.0.5",
|
||||
"gulp-rename": "1.4.0",
|
||||
"gulp-concat": "2.6.1",
|
||||
"gulp-terser": "1.1.7",
|
||||
"gulp-optimize-js": "1.1.0",
|
||||
"gulp-sass": "4.0.2",
|
||||
"gulp-postcss": "8.0.0",
|
||||
"cssnano": "4.1.10",
|
||||
"autoprefixer": "9.6.1",
|
||||
"browser-sync": "2.26.7",
|
||||
"node-sass-tilde-importer": "^1.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.11.2",
|
||||
"bootstrap": "^4.3.1",
|
||||
"jquery": "^3.4.1"
|
||||
}
|
||||
}
|
Before Width: | Height: | Size: 614 KiB After Width: | Height: | Size: 614 KiB |
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
Before Width: | Height: | Size: 4.4 MiB After Width: | Height: | Size: 4.4 MiB |
Before Width: | Height: | Size: 3.2 MiB After Width: | Height: | Size: 3.2 MiB |
|
@ -4,14 +4,11 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Samuel Philipp - Impressum</title>
|
||||
<link rel="shortcut icon" href="img/samuel.png">
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
|
||||
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
|
||||
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="css/style-legal.css" type="text/css" media="screen">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<body class="legal">
|
||||
<h1>Impressum</h1>
|
||||
|
||||
<h2>Angaben gemäß § 5 TMG</h2>
|
|
@ -4,33 +4,10 @@
|
|||
<title>Samuel Philipp</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="img/samuel.png">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
|
||||
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
|
||||
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="css/app.css" type="text/css" media="screen"/>
|
||||
|
||||
<!-- Matomo -->
|
||||
<script type="text/javascript">
|
||||
var _paq = _paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function () {
|
||||
var u = "//matomo.sp-codes.de/";
|
||||
_paq.push(['setTrackerUrl', u + 'piwik.php']);
|
||||
_paq.push(['setSiteId', '1']);
|
||||
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
|
||||
g.type = 'text/javascript';
|
||||
g.async = true;
|
||||
g.defer = true;
|
||||
g.src = u + 'piwik.js';
|
||||
s.parentNode.insertBefore(g, s);
|
||||
})();
|
||||
</script>
|
||||
<noscript><p><img src="//matomo.sp-codes.de/piwik.php?idsite=1&rec=1" style="border:0;" alt=""/></p></noscript>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="author" content="Samuel Philipp">
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="developer" class="image"></div>
|
||||
|
@ -61,6 +38,6 @@
|
|||
<div><a href="privacy.html"><span
|
||||
class="fas fa-user-secret mr-2"></span>Privacy</a></div>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
<script type="text/javascript" src="js/main.min.js"></script>
|
||||
</body>
|
||||
</html>
|
|
@ -4,14 +4,11 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Samuel Philipp - Datenschutzerklärung</title>
|
||||
<link rel="shortcut icon" href="img/samuel.png">
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
|
||||
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
|
||||
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="css/style-legal.css" type="text/css" media="screen">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<body class="legal">
|
||||
<h2>Datenschutzerklärung</h2>
|
||||
<h3 id="dsg-general-intro"></h3>
|
||||
<p>Diese Datenschutzerklärung klärt Sie über die Art, den Umfang und Zweck der Verarbeitung von personenbezogenen Daten
|
114
src/scss/main.scss
Normal file
|
@ -0,0 +1,114 @@
|
|||
@import "~bootstrap/scss/bootstrap-grid";
|
||||
@import "~bootstrap/scss/bootstrap-reboot";
|
||||
@import "~bootstrap/scss/utilities/align";
|
||||
@import "~bootstrap/scss/utilities/spacing";
|
||||
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
|
||||
@import "~@fortawesome/fontawesome-free/scss/solid";
|
||||
@import "~@fortawesome/fontawesome-free/scss/brands";
|
||||
@import "~@fortawesome/fontawesome-free/scss/regular";
|
||||
|
||||
@font-face {
|
||||
font-family: 'Minotaur';
|
||||
src: local('Minotaur Phatte'), url(../font/minotaur.ttf) format('truetype');
|
||||
}
|
||||
|
||||
body {
|
||||
color: #fff;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&.legal {
|
||||
background-image: url("../img/bg.png");
|
||||
padding: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
position: fixed;
|
||||
top: -25px;
|
||||
left: -25px;
|
||||
width: calc(100% + 50px);
|
||||
height: calc(100% + 50px);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#developer {
|
||||
background-image: url('../img/sp-codes.png');
|
||||
}
|
||||
|
||||
#magician {
|
||||
background-image: url('../img/sp-magic_overlay.png');
|
||||
}
|
||||
|
||||
.headers {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.headers .magician {
|
||||
color: #000000;
|
||||
font-family: "Minotaur", cursive;
|
||||
font-weight: normal;
|
||||
font-size: 5rem;
|
||||
text-shadow: 0 0 1rem #ffffff;
|
||||
}
|
||||
|
||||
.headers .developer {
|
||||
color: #ffffff;
|
||||
font-family: "Minotaur", monospace;
|
||||
font-weight: bold;
|
||||
font-size: 5rem;
|
||||
text-shadow: 0 0 1rem #000000;
|
||||
}
|
||||
|
||||
.headers a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.headers .codes {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.headers .magic {
|
||||
flex-grow: 0.6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.headers .padding {
|
||||
flex-grow: 1.3;
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-top: 1px solid #ffffff;
|
||||
border-left: 1px solid #ffffff;
|
||||
border-top-left-radius: 8px;
|
||||
}
|
||||
|
||||
.menu a {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.menu a:hover {
|
||||
color: #222222;
|
||||
}
|