ugh3
This commit is contained in:
Jan Jastrow
parent
d78d0cbbc4
commit
7edf5f5fd7
Binary file not shown.
|
After Width: | Height: | Size: 396 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -9,13 +9,21 @@
|
|||
<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/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="icon" type="image/png" href="favicon.png" sizes="64x64" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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>
|
||||
</header>
|
||||
<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>Spotify
|
||||
</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">
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -1,72 +1,91 @@
|
|||
$color1: #4BB5A9;
|
||||
$color2: #D6E8E6;
|
||||
$svg_background: #111;
|
||||
$color_primary: #4BB5A9;
|
||||
$color_secondary: #D6E8E6;
|
||||
$svg_color: #111;
|
||||
|
||||
body {
|
||||
background-color: $color2;
|
||||
color: #111111;
|
||||
background-color: $color_secondary;
|
||||
color: $svg_color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: sans-serif;
|
||||
font-size: 24px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 0.25em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.photo {
|
||||
align-self: center;
|
||||
margin: 1em 0 0 0;
|
||||
width: 200px;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list_links {
|
||||
font-size: 18px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
margin: 0 1.25em;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
background-color: $color1;
|
||||
margin: 0.5em 0;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color2;
|
||||
background-color: $color_primary;
|
||||
color: $svg_color;
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
margin: 0.3em 0;
|
||||
padding: 0.65em;
|
||||
text-decoration: none;
|
||||
|
||||
&:visited {
|
||||
color: $svg_color;
|
||||
}
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
background-color: darken($color_primary, 5%);
|
||||
}
|
||||
a:visited {
|
||||
color: $color2;
|
||||
}
|
||||
}
|
||||
|
||||
.link-icon {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin-right: 0.75em;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
svg {
|
||||
height: 24px;
|
||||
fill: $svg_color;
|
||||
width: 24px;
|
||||
fill: $svg_background;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 1.5em;
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
margin: 0 0 0 0.75em;
|
||||
|
||||
a {
|
||||
color: #111;
|
||||
}
|
||||
a:visited {
|
||||
color: #111;
|
||||
}
|
||||
color: $svg_color;
|
||||
|
||||
p {
|
||||
margin: 0 0 0 0.65em;
|
||||
&:visited {
|
||||
color: $svg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
81
gulpfile.js
81
gulpfile.js
|
|
@ -1,7 +1,8 @@
|
|||
'use strict'
|
||||
'use strict';
|
||||
|
||||
//----------------
|
||||
//------------------------
|
||||
//:: Initiate npm-modules
|
||||
|
||||
const gulp = require('gulp'),
|
||||
sass = require('gulp-sass'),
|
||||
concat = require('gulp-concat'),
|
||||
|
|
@ -15,8 +16,10 @@ const gulp = require('gulp'),
|
|||
merge2 = require('merge2'),
|
||||
rimraf = require('rimraf');
|
||||
|
||||
//----------------
|
||||
//:: configs
|
||||
|
||||
//------------------------
|
||||
//:: Config parameter
|
||||
|
||||
var Config = {
|
||||
inputDir: '_source/',
|
||||
outputDir: '_dist/'
|
||||
|
|
@ -30,19 +33,15 @@ var SassConfig = {
|
|||
}
|
||||
}
|
||||
|
||||
var postcss_plugins = [
|
||||
cssnano,
|
||||
autoprefixer
|
||||
];
|
||||
|
||||
//----------------
|
||||
//------------------------
|
||||
//:: Tasks
|
||||
|
||||
// compile scss
|
||||
function scss() {
|
||||
function scss_addons() {
|
||||
var onError = function(err) {
|
||||
notify.onError({
|
||||
title: 'gulp',
|
||||
title: 'scss_addons',
|
||||
subtitle: 'Error!',
|
||||
message: '❌ <%= error.message %>',
|
||||
sound: 'Submarine'
|
||||
|
|
@ -55,22 +54,44 @@ function scss() {
|
|||
'node_modules/sanitize.css/sanitize.css'
|
||||
]))
|
||||
.pipe(concat('addons.css'))
|
||||
.pipe(postcss([autoprefixer()]))
|
||||
.pipe(gulp.dest(SassConfig.outputDir))
|
||||
.pipe(postcss(postcss_plugins))
|
||||
.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(postcss([cssnano()]))
|
||||
.pipe(rename({suffix: '.min'}))
|
||||
.pipe(gulp.dest(SassConfig.outputDir))
|
||||
.pipe(livereload())
|
||||
.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!',
|
||||
message: '✅ SCSS compiled',
|
||||
timeout: '2'
|
||||
|
|
@ -79,16 +100,16 @@ function scss() {
|
|||
|
||||
// Copy those other files
|
||||
function copy(done) {
|
||||
gulp.src([Config.inputDir + '*.*'])
|
||||
gulp.src([Config.inputDir + '**/*.*'])
|
||||
.pipe(gulp.dest(Config.outputDir))
|
||||
.pipe(livereload())
|
||||
done();
|
||||
};
|
||||
|
||||
// watch for changes
|
||||
// Watch for changes
|
||||
function watch() {
|
||||
livereload.listen();
|
||||
gulp.watch(SassConfig.inputDir + '*.scss', scss);
|
||||
gulp.watch(SassConfig.inputDir + '*.scss', scss_main);
|
||||
gulp.watch(Config.inputDir + '*.html', copy);
|
||||
};
|
||||
|
||||
|
|
@ -97,14 +118,16 @@ function cleanup(cb) {
|
|||
return rimraf(Config.outputDir + '*', cb)
|
||||
};
|
||||
|
||||
//----------------
|
||||
//:: Export tasks
|
||||
|
||||
//------------------------
|
||||
//:: Define 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
|
||||
exports.scss = scss;
|
||||
exports.scss_main = scss_main;
|
||||
exports.scss_addons = scss_addons;
|
||||
exports.copy = copy;
|
||||
exports.watch = watch;
|
||||
exports.cleanup = cleanup;
|
||||
|
|
|
|||
Loading…
Reference in New Issue