Adjust layout for Bootstrap 4.

This commit is contained in:
daniel 2019-12-23 06:54:13 +01:00
parent 7086c27e1a
commit 34e9509cea
9 changed files with 187 additions and 132 deletions

View File

@ -1,4 +1,5 @@
.PHONY: upload
upload:
rsync -r --exclude .git/ . doktorkraus.de:/var/www/bovender
yarn exec webpack && \
rsync -r --exclude .git/ --exclude src/ --exclude node_modules/ . doktorkraus.de:/var/www/bovender

View File

@ -4,13 +4,12 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Daniel Kraus is (a) bovender</title>
<title>Daniel Kraus ~ bovender</title>
<meta name="author" content="Daniel Kraus (bovender)">
<meta name="robots" content="index, follow">
<meta name="description" content="Daniel Kraus' personal homepage. Raised in Bovenden in Lower Saxony, Germany, Daniel is a Bovender.">
<meta name="keywords" content="Bovender, Bovenden, XL Toolbox">
<link href="assets/main.css" rel="stylesheet">
{{/* <link href="css/bovender.css" rel="stylesheet"> */}}
<meta name="twitter:card" content="summary"></meta>
<meta name="twitter:site" content="@bovender_de"></meta>
<meta property="og:title" content="Daniel Kraus ia (a) Bovender">
@ -24,36 +23,37 @@
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>
<img class="img-rounded pull-left gravatar" src="img/gravatar.png" alt="Daniel Kraus">
Daniel Kraus is (a) Bovender
<div class="row mt-5 mb-5">
<div class="col">
<img class="rounded float-left gravatar" src="img/gravatar.png" alt="Daniel Kraus" title="Daniel Kraus">
<h1 class="text-center">
Daniel Kraus ~ Bovender
</h1>
<ul class="nav nav-pills">
<li>
<a href="https://github.com/bovender">
<ul class="nav nav-pills justify-content-center">
<li class="nav-item">
<a class="nav-link" href="https://github.com/bovender">
GitHub
</a>
</li>
<li>
<a href="https://www.mediawiki.org/wiki/User:Bovender">
<li class="nav-item">
<a class="nav-link" href="https://www.mediawiki.org/wiki/User:Bovender">
MediaWiki
</a>
</li>
<li>
<a href="https://de.linkedin.com/in/krada">
<li class="nav-item">
<a class="nav-link" href="https://de.linkedin.com/in/krada">
LinkedIn
</a>
</li>
<li>
<a href="https://www.researchgate.net/profile/Kraus_Daniel">
<li class="nav-item">
<a class="nav-link" href="https://www.researchgate.net/profile/Kraus_Daniel">
ResearchGate
</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-7" lang="en">
<div class="page-header">
@ -73,154 +73,146 @@
<p>
A selection of my projects:
</p>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Daniel's XL Toolbox</h3>
<div class="card border-default mb-3">
<div class="card-header" aria-level="3">
Daniel's XL Toolbox
</div>
<div class="panel-body">
<div class="pull-left margin-right">
<img src="img/xltoolbox.png" alt="XL Toolbox">
</div>
<h4>
<a href="http://www.xltoolbox.net">
www.xltoolbox.net
</a>
</h4>
<p>
<span class="label label-primary">VBA</span>
<span class="label label-primary">C#</span>
<img class="card-img-top w-50 mx-auto" src="img/xltoolbox.png" alt="XL Toolbox">
<div class="card-body">
<p class="card-text">
<span class="badge badge-primary mr-1">VBA</span>
<span class="badge badge-primary mr-2">C#</span>
An Excel&reg; add-in with power features aimed at
scientists and engineers. This is my most popular
project. People especially love the ability to export
high-resolution graphics directly from Excel&reg;.
</p>
<a class="card-link" href="http://www.xltoolbox.net">www.xltoolbox.net</a>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">IP Indicator</h3>
<div class="card border-default mb-3">
<div class="card-header">
IP Indicator
</div>
<div class="panel-body">
<h4>
<a href="https://github.com/bovender/indicator-ip">
github.com/bovender/indicator-ip
</a>
</h4>
<p>
<img class="img-responsive" src="https://github.com/bovender/indicator-ip/raw/master/src/IndicatorIp/images/screenshot.png" alt="indicator-ip screenshot">
<span class="label label-primary">Python</span>
<img class="card-img-cap w-75 mt-2 mx-auto"
src="https://github.com/bovender/indicator-ip/raw/master/src/IndicatorIp/images/screenshot.png" alt="indicator-ip screenshot">
<div class="card-body">
<p class="card-text">
<span class="badge badge-primary mr-3">Python</span>
Ubuntu Unity indicator that displays the current IP
address(es) in the indicator bar.
</p>
<p class="card-text">
<pre><code>sudo apt-add-repository ppa:bovender/bovender
sudo apt-get update
sudo apt-get install indicator-ip</code></pre>
</p>
<p class="card-text">
<a href="https://github.com/bovender/indicator-ip" class="card-link">github.com/bovender/indicator-ip</a>
</p>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">LinkTitles</h3>
<div class="card border-default mb-3">
<div class="card-header">
LinkTitles
</div>
<div class="panel-body">
<h4>
<a href="https://www.mediawiki.org/wiki/Extension:LinkTitles">
www.mediawiki.org/wiki/Extension:LinkTitles
</a>
</h4>
<p>
<span class="label label-primary">PHP</span>
<div class="card-body">
<p class="card-text">
<span class="badge badge-primary mr-2">PHP</span>
A MediaWiki extension that automatically adds links to
existing titles to pages that you edit.
</p>
<a href="https://www.mediawiki.org/wiki/Extension:LinkTitles" class="card-link">
www.mediawiki.org/wiki/Extension:LinkTitles
</a>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">PubmedParser</h3>
<div class="card border-default mb-3">
<div class="card-header">
PubmedParser
</div>
<div class="panel-body">
<h4>
<a href="https://www.mediawiki.org/wiki/Extension:PubmedParser">
www.mediawiki.org/wiki/Extension:PubmedParser
</a>
</h4>
<p>
<span class="label label-primary">PHP</span>
<div class="card-body">
<p class="card-text">
<span class="badge badge-primary mr-2">PHP</span>
A MediaWiki extension that creates citations from <a
href="http://pubmed.gov">Pubmed</a> ID numbers.
</p>
<a href="https://www.mediawiki.org/wiki/Extension:PubmedParser" class="card-link">
www.mediawiki.org/wiki/Extension:PubmedParser
</a>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Gemeinsam gegen Armut auf den Philippinen e.V.</h3>
<div class="card border-default mb-3">
<div class="card-header">
Gemeinsam gegen Armut auf den Philippinen e.V.
</div>
<div class="panel-body">
<h4>
<a href="https://www.gemeinsam-gegen-armut.or">
www.gemeinsam-gegen-armut.org
</a>
</h4>
<div class="pull-left margin-right">
<img src="img/ggap.png" class="img-responsive" alt="Gemeinsam gegen Armut auf den Philippinen (GGAP) e.V.">
</div>
<p>
<span class="label label-primary">Ruby on Rails</span>
<img src="img/ggap.png" class="card-img-cap mx-auto mt-2 img-fluid"
alt="Gemeinsam gegen Armut auf den Philippinen (GGAP) e.V."
title="www.gemeinsam-gegen-armut.org">
<div class="card-body">
<p class="card-text">
<span class="badge badge-primary mr-3">Ruby on Rails</span>
Website with membership management for an NGO that gives
scholarships to job trainees on the Philippines.
<a href="https://www.gemeinsam-gegen-armut.org" class="card-text">
www.gemeinsam-gegen-armut.org
</a>
</p>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Create Changelog</h3>
<div class="card border-default mb-3">
<div class="card-header">
Create Changelog
</div>
<div class="panel-body">
<h4>
<a href="https://github.com/bovender/create-changelog">
github.com/bovender/create-changelog
</a>
</h4>
<p>
<span class="label label-primary">Ruby</span>
<div class="card-body">
<p class="card-text">
<span class="badge badge-primary mr-2">Ruby</span>
Command-line utility that creates an end-user-friendly
changelog from special comments in Git commits.
</p>
<pre><code>sudo apt-add-repository ppa:bovender/bovender
sudo apt-get update
sudo apt-get install create-changelog</code></pre>
<a href="https://github.com/bovender/create-changelog" class="card-link">
github.com/bovender/create-changelog
</a>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">VstoAddinInstaller</h3>
<div class="card border-default mb-3">
<div class="card-header">
VstoAddinInstaller
</div>
<div class="panel-body">
<h4>
<a href="https://github.com/bovender/VstoAddinInstaller">
github.com/bovender/VstoAddinInstaller
</a>
</h4>
<p>
<img class="img-responsive" src="img/vstoaddininstaller.png" alt="VstoAddinInstaller screenshot">
</p>
<p>
<span class="label label-primary">InnoSetup</span>
<img class="card-img-cap img-fluid w-75 mt-2 mx-auto" src="img/vstoaddininstaller.png" alt="VstoAddinInstaller screenshot" title="VstoAddinInstaller">
<div class="card-body">
<p class="card-text">
<span class="badge badge-primary mr-1">InnoSetup</span>
<span class="badge badge-primary mr-2">Pascal</span>
<a href="http://www.jrsoftware.org/isinfo.php" target="_blank">InnoSetup</a>
scripts to create installers for VSTO add-ins for Microsoft&reg; Office&reg;.
</p>
<a href="https://github.com/bovender/VstoAddinInstaller" class="card-link">
github.com/bovender/VstoAddinInstaller
</a>
</div>
</div>
<p>
See more over at my
<a href="https://github.com/bovender">GitHub repository</a>
and have a look at my
<a href="https://launchpad.net/~bovender/+archive/ubuntu/bovender">Ubuntu PPA</a>.
See more over at my <a href="https://github.com/bovender">GitHub repository</a>
and my <a href="https://git.bovender.de/daniel">self-hosted Gitea repository</a>
and have a look at my <a href="https://launchpad.net/~bovender/+archive/ubuntu/bovender">Ubuntu PPA</a>.
</p>
</div>
<div class="col-md-5" lang="en">
<img src="img/plesse.png" alt="The Plesse castle near Bovenden" title="The Plesse castle near Bovenden" class="img-responsive img-rounded center-block">
<h3>Why Bovender?</h3>
<img src="img/plesse.png" alt="The Plesse castle near Bovenden" title="The Plesse castle near Bovenden" class="img-fluid rounded mx-auto">
<h3 class="mt-3">Why Bovender?</h3>
<p>
<a href="http://www.bovenden.de">Bovenden</a> is the
place where I grew up, which makes me a 'Bovender'.
@ -273,23 +265,24 @@ sudo apt-get install create-changelog</code></pre>
<div class="row margin-top">
<div class="col-md-12 text-center text-muted">
<p class="no-margin">
<small>
This microsite was hand-coded using
<a href="http://www.vim.org">Vim</a> and
<a href="//www.getbootstrap.com">Bootstrap</a>.
</small>
<p class="my-0 small">
This microsite was created with
<a href="//code.visualstudio.com">VS Code</a> and
<a href="//www.getbootstrap.com">Bootstrap 4</a> using
<a href="//webpack.js.org">Webpack</a>.
<br />
A previous version of this site was hand-coded using
<a href="http://www.vim.org">Vim</a> and
<a href="//www.getbootstrap.com">Bootstrap 3</a>.
</p>
<address>
<small>
Impressum ~ Daniel Kraus ~
Höhenstraße 15 ~ 65451 Kelsterbach ~
bovender at bovender . de ~
(0 61 07) 7 56 88 40 ~
<a href="//telegram.me/bovender">telegram.me/bovender</a>
~
<a href="privacy.html">Datenschutz ~ Privacy</a>
</small>
<address class="small">
Impressum ~ Daniel Kraus ~
Höhenstraße 15 ~ 65451 Kelsterbach ~
bovender at bovender . de ~
(0 61 07) 7 56 88 40 ~
<a href="//telegram.me/bovender">telegram.me/bovender</a>
~
<a href="privacy.html">Datenschutz ~ Privacy</a>
</address>
<div>
<a href="https://vivaldi.com?pk_campaign=Banners&pk_kwd=pu200x20">

View File

@ -10,6 +10,7 @@
"autoprefixer": "^9.7.3",
"bootstrap": "4",
"css-loader": "^3.4.0",
"file-loader": "^5.0.2",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0",
"postcss-loader": "^3.0.0",

3
src/bovender.scss Normal file
View File

@ -0,0 +1,3 @@
body {
padding: 1rem !important;
}

View File

@ -1,5 +1,4 @@
@import "fonts";
@import "config";
@import "~bootstrap/scss/bootstrap";
.dummy {
background-color: transparent;
}
@import "bovender";

1
src/config.scss Normal file
View File

@ -0,0 +1 @@
$font-family-base: "IBM Plex Sans Condensed";

37
src/fonts.scss Normal file
View File

@ -0,0 +1,37 @@
/* https://google-webfonts-helper.herokuapp.com/fonts/ibm-plex-sans-condensed?subsets=latin */
/* ibm-plex-sans-condensed-regular - latin */
@font-face {
font-family: 'IBM Plex Sans Condensed';
font-style: normal;
font-weight: 400;
src: local('IBM Plex Sans Condensed'), local('IBMPlexSansCond'),
url('../fonts/ibm-plex-sans-condensed-v6-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/ibm-plex-sans-condensed-v6-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ibm-plex-sans-condensed-italic - latin */
@font-face {
font-family: 'IBM Plex Sans Condensed';
font-style: italic;
font-weight: 400;
src: local('IBM Plex Sans Condensed Italic'), local('IBMPlexSansCond-Italic'),
url('../fonts/ibm-plex-sans-condensed-v6-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/ibm-plex-sans-condensed-v6-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ibm-plex-sans-condensed-600 - latin */
@font-face {
font-family: 'IBM Plex Sans Condensed';
font-style: normal;
font-weight: 600;
src: local('IBM Plex Sans Condensed SemiBold'), local('IBMPlexSansCond-SemiBold'),
url('../fonts/ibm-plex-sans-condensed-v6-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/ibm-plex-sans-condensed-v6-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ibm-plex-sans-condensed-600italic - latin */
@font-face {
font-family: 'IBM Plex Sans Condensed';
font-style: italic;
font-weight: 600;
src: local('IBM Plex Sans Condensed SemiBold Italic'), local('IBMPlexSansCond-SemiBoldItalic'),
url('../fonts/ibm-plex-sans-condensed-v6-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/ibm-plex-sans-condensed-v6-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

View File

@ -30,6 +30,18 @@ module.exports = {
'sass-loader'
],
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
]
}
],
},
};

View File

@ -1238,6 +1238,14 @@ figgy-pudding@^3.5.1:
resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
file-loader@^5.0.2:
version "5.0.2"
resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-5.0.2.tgz#7f3d8b4ac85a5e8df61338cfec95d7405f971caa"
integrity sha512-QMiQ+WBkGLejKe81HU8SZ9PovsU/5uaLo0JdTCEXOYv7i7jfAjHZi1tcwp9tSASJPOmmHZtbdCervFmXMH/Dcg==
dependencies:
loader-utils "^1.2.3"
schema-utils "^2.5.0"
file-uri-to-path@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@ -3143,7 +3151,7 @@ schema-utils@^1.0.0:
ajv-errors "^1.0.0"
ajv-keywords "^3.1.0"
schema-utils@^2.0.1, schema-utils@^2.1.0, schema-utils@^2.6.0:
schema-utils@^2.0.1, schema-utils@^2.1.0, schema-utils@^2.5.0, schema-utils@^2.6.0:
version "2.6.1"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.1.tgz#eb78f0b945c7bcfa2082b3565e8db3548011dc4f"
integrity sha512-0WXHDs1VDJyo+Zqs9TKLKyD/h7yDpHUhEFsM2CzkICFdoX1av+GBq/J2xRTFfsQO5kBfhZzANf2VcIm84jqDbg==