jan/Website_jan.su
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

ugh3

Browse Source
This commit is contained in:
Jan Jastrow 2020-05-28 12:34:36 +02:00
parent d78d0cbbc4
commit 7edf5f5fd7
6 changed files with 115 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
_resources/me.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 396 KiB

BIN
_source/img/me.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
_source/img/me.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

14
_source/index.html
View File

@ -9,13 +9,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/addons.min.css" type="text/css" /> <link rel="stylesheet" href="css/addons.min.css" type="text/css" />
<link rel="stylesheet" href="css/styles.min.css" type="text/css" /> <link rel="stylesheet" href="css/styles.min.css" type="text/css" />
<meta name="theme-color" content="#4BB5A9" /> <meta name="theme-color" content="#4bb5a9" />
<link rel="shortcut icon" type="image/svg+xml" href="favicon.svg" /> <link rel="shortcut icon" type="image/svg+xml" href="favicon.svg" />
<link rel="icon" type="image/png" href="favicon.png" sizes="64x64" /> <link rel="icon" type="image/png" href="favicon.png" sizes="64x64" />
</head> </head>
<body> <body>
<header> <header>
<div class="photo">
<picture>
<source srcset="img/me.webp" type="image/webp">
<source srcset="img/me.jpg" type="image/jpeg">
<img src="img/me.jpg" alt="Photo of me">
</picture>
</div>
<h1>Jan Jastrow</h1> <h1>Jan Jastrow</h1>
</header> </header>
<main> <main>
@ -52,6 +60,10 @@
<span class="link-icon"><svg aria-label="Spotify icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Spotify icon</title><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg> <span class="link-icon"><svg aria-label="Spotify icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Spotify icon</title><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>
</span>Spotify </span>Spotify
</a></li> </a></li>
<li><a href="https://www.twitch.tv/jan_j/" rel="me">
<span class="link-icon"><svg aria-label="Twitch icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Twitch icon</title><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg>
</span>Twitch
</a></li>
<li><a href="https://letterboxd.com/Gehirnfussel/" rel="me"> <li><a href="https://letterboxd.com/Gehirnfussel/" rel="me">
<span class="link-icon"><svg aria-label="Letterboxd icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Letterboxd icon</title><path d="M8.29 16.752V7.2H6.546V4.8h6.328v2.4h-1.746v9.574h3.925v-2.618h2.839V19.2H6.545v-2.448h1.746zM0 12c0 6.628 5.372 12 12 12s12-5.372 12-12S18.628 0 12 0 0 5.372 0 12z"/></svg> <span class="link-icon"><svg aria-label="Letterboxd icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Letterboxd icon</title><path d="M8.29 16.752V7.2H6.546V4.8h6.328v2.4h-1.746v9.574h3.925v-2.618h2.839V19.2H6.545v-2.448h1.746zM0 12c0 6.628 5.372 12 12 12s12-5.372 12-12S18.628 0 12 0 0 5.372 0 12z"/></svg>
</span>Letterboxd </span>Letterboxd

75
_source/scss/styles.scss
View File

@ -1,72 +1,91 @@
$color1: #4BB5A9; $color_primary: #4BB5A9;
$color2: #D6E8E6; $color_secondary: #D6E8E6;
$svg_background: #111; $svg_color: #111;
body { body {
background-color: $color2; background-color: $color_secondary;
color: #111111; color: $svg_color;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: sans-serif; font-family: sans-serif;
font-size: 24px; font-size: 1rem;
line-height: 1.5;
} }
header { header {
display: flex;
flex-direction: column;
h1 { h1 {
text-align: center;
margin: 0.25em; margin: 0.25em;
text-align: center;
}
.photo {
align-self: center;
margin: 1em 0 0 0;
width: 200px;
img {
border-radius: 50%;
}
} }
} }
.list_links { .list_links {
font-size: 18px; align-items: center;
display: flex;
flex-direction: column;
list-style: none; list-style: none;
margin: 0 auto; margin: 0 1.25em;
padding: 0; padding: 0;
li { li {
background-color: $color1; max-width: 400px;
margin: 0.5em 0;
width: 100%; width: 100%;
max-width: 640px;
} }
a { a {
color: $color2; background-color: $color_primary;
color: $svg_color;
display: block; display: block;
font-weight: 700;
margin: 0.3em 0;
padding: 0.65em; padding: 0.65em;
text-decoration: none; text-decoration: none;
}
a:visited { &:visited {
color: $color2; color: $svg_color;
}
&:hover, &:active, &:focus {
background-color: darken($color_primary, 5%);
}
} }
} }
.link-icon { .link-icon {
display: inline-block; display: inline-block;
height: 24px;
margin-right: 0.75em; margin-right: 0.75em;
width: 24px; width: 24px;
height: 24px;
svg { svg {
height: 24px; height: 24px;
fill: $svg_color;
width: 24px; width: 24px;
fill: $svg_background;
} }
} }
footer { footer {
margin-top: 1.5em; font-size: 0.75rem;
font-size: 12px; margin: 0 0 0 0.75em;
a { a {
color: #111; color: $svg_color;
}
a:visited { &:visited {
color: #111; color: $svg_color;
} }
p {
margin: 0 0 0 0.65em;
} }
} }

87
gulpfile.js
View File

@ -1,7 +1,8 @@
'use strict' 'use strict';
//---------------- //------------------------
//:: Initiate npm-modules //:: Initiate npm-modules
const gulp = require('gulp'), const gulp = require('gulp'),
sass = require('gulp-sass'), sass = require('gulp-sass'),
concat = require('gulp-concat'), concat = require('gulp-concat'),
@ -15,8 +16,10 @@ const gulp = require('gulp'),
merge2 = require('merge2'), merge2 = require('merge2'),
rimraf = require('rimraf'); rimraf = require('rimraf');
//----------------
//:: configs //------------------------
//:: Config parameter
var Config = { var Config = {
inputDir: '_source/', inputDir: '_source/',
outputDir: '_dist/' outputDir: '_dist/'
@ -30,22 +33,18 @@ var SassConfig = {
} }
} }
var postcss_plugins = [
cssnano,
autoprefixer
];
//---------------- //------------------------
//:: Tasks //:: Tasks
// compile scss // compile scss
function scss() { function scss_addons() {
var onError = function(err) { var onError = function(err) {
notify.onError({ notify.onError({
title: 'gulp', title: 'scss_addons',
subtitle: 'Error!', subtitle: 'Error!',
message: '❌ <%= error.message %>', message: '❌ <%= error.message %>',
sound: 'Submarine' sound: 'Submarine'
})(err); })(err);
this.emit('end'); this.emit('end');
}; };
@ -55,22 +54,44 @@ function scss() {
'node_modules/sanitize.css/sanitize.css' 'node_modules/sanitize.css/sanitize.css'
])) ]))
.pipe(concat('addons.css')) .pipe(concat('addons.css'))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(SassConfig.outputDir)) .pipe(gulp.dest(SassConfig.outputDir))
.pipe(postcss(postcss_plugins)) .pipe(postcss([cssnano()]))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(SassConfig.outputDir)),
gulp.src(SassConfig.inputDir + '*.scss')
.pipe(concat('styles.css'))
.pipe(plumber({errorHandler: onError}))
.pipe(postcss(postcss_plugins))
.pipe(sass(SassConfig.options).on('error', sass.logError))
.pipe(gulp.dest(SassConfig.outputDir))
.pipe(rename({suffix: '.min'})) .pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(SassConfig.outputDir)) .pipe(gulp.dest(SassConfig.outputDir))
.pipe(livereload()) .pipe(livereload())
.pipe(notify({ .pipe(notify({
title: 'gulp', title: 'scss_addons',
subtitle: 'Success!',
message: '✅ SCSS compiled',
timeout: '2'
}));
}
function scss_main() {
var onError = function(err) {
notify.onError({
title: 'scss_main',
subtitle: 'Error!',
message: '❌ <%= error.message %>',
sound: 'Submarine'
})(err);
this.emit('end');
};
return gulp
.src(SassConfig.inputDir + '*.scss')
.pipe(concat('styles.css'))
.pipe(plumber({errorHandler: onError}))
.pipe(sass(SassConfig.options).on('error', sass.logError))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(SassConfig.outputDir))
.pipe(postcss([cssnano()]))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(SassConfig.outputDir))
.pipe(livereload())
.pipe(notify({
title: 'scss_main',
subtitle: 'Success!', subtitle: 'Success!',
message: '✅ SCSS compiled', message: '✅ SCSS compiled',
timeout: '2' timeout: '2'
@ -79,16 +100,16 @@ function scss() {
// Copy those other files // Copy those other files
function copy(done) { function copy(done) {
gulp.src([Config.inputDir + '*.*']) gulp.src([Config.inputDir + '**/*.*'])
.pipe(gulp.dest(Config.outputDir)) .pipe(gulp.dest(Config.outputDir))
.pipe(livereload()) .pipe(livereload())
done(); done();
}; };
// watch for changes // Watch for changes
function watch() { function watch() {
livereload.listen(); livereload.listen();
gulp.watch(SassConfig.inputDir + '*.scss', scss); gulp.watch(SassConfig.inputDir + '*.scss', scss_main);
gulp.watch(Config.inputDir + '*.html', copy); gulp.watch(Config.inputDir + '*.html', copy);
}; };
@ -97,14 +118,16 @@ function cleanup(cb) {
return rimraf(Config.outputDir + '*', cb) return rimraf(Config.outputDir + '*', cb)
}; };
//----------------
//:: Export tasks //------------------------
//:: Define tasks
// complex tasks // complex tasks
const build = gulp.series(cleanup, gulp.parallel(copy, scss)); const build = gulp.series(cleanup, gulp.parallel(copy, scss_addons, scss_main));
// export tasks // export tasks
exports.scss = scss; exports.scss_main = scss_main;
exports.scss_addons = scss_addons;
exports.copy = copy; exports.copy = copy;
exports.watch = watch; exports.watch = watch;
exports.cleanup = cleanup; exports.cleanup = cleanup;