Browse Source

ugh3

master
Jan Jastrow 2 years ago
parent
commit
7edf5f5fd7
  1. BIN
      _resources/me.png
  2. BIN
      _source/img/me.jpg
  3. BIN
      _source/img/me.webp
  4. 14
      _source/index.html
  5. 75
      _source/scss/styles.scss
  6. 75
      gulpfile.js

BIN
_resources/me.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 396 KiB

BIN
_source/img/me.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
_source/img/me.webp

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

14
_source/index.html

@ -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

75
_source/scss/styles.scss

@ -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;
}
a:visited {
color: $color2;
&:visited {
color: $svg_color;
}
&:hover, &:active, &:focus {
background-color: darken($color_primary, 5%);
}
}
}
.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;
}
p {
margin: 0 0 0 0.65em;
color: $svg_color;
&:visited {
color: $svg_color;
}
}
}

75
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,22 +33,18 @@ var SassConfig = {
}
}
var postcss_plugins = [
cssnano,
autoprefixer
];
//----------------
//------------------------
//:: Tasks
// compile scss
function scss() {
function scss_addons() {
var onError = function(err) {
notify.onError({
title: 'gulp',
subtitle: 'Error!',
message: '❌ <%= error.message %>',
sound: 'Submarine'
title: 'scss_addons',
subtitle: 'Error!',
message: '❌ <%= error.message %>',
sound: 'Submarine'
})(err);
this.emit('end');
};
@ -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(postcss([cssnano()]))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(SassConfig.outputDir)),
.pipe(gulp.dest(SassConfig.outputDir))
.pipe(livereload())
.pipe(notify({
title: 'scss_addons',
subtitle: 'Success!',
message: '✅ SCSS compiled',
timeout: '2'
}));
}
gulp.src(SassConfig.inputDir + '*.scss')
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(postcss(postcss_plugins))
.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: 'gulp',
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…
Cancel
Save