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

View File

@ -10,6 +10,7 @@
"autoprefixer": "^9.7.3", "autoprefixer": "^9.7.3",
"bootstrap": "4", "bootstrap": "4",
"css-loader": "^3.4.0", "css-loader": "^3.4.0",
"file-loader": "^5.0.2",
"mini-css-extract-plugin": "^0.9.0", "mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0", "node-sass": "^4.13.0",
"postcss-loader": "^3.0.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"; @import "~bootstrap/scss/bootstrap";
@import "bovender";
.dummy {
background-color: transparent;
}

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' '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" resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w== 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: file-uri-to-path@1.0.0:
version "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" 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-errors "^1.0.0"
ajv-keywords "^3.1.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" version "2.6.1"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.1.tgz#eb78f0b945c7bcfa2082b3565e8db3548011dc4f" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.1.tgz#eb78f0b945c7bcfa2082b3565e8db3548011dc4f"
integrity sha512-0WXHDs1VDJyo+Zqs9TKLKyD/h7yDpHUhEFsM2CzkICFdoX1av+GBq/J2xRTFfsQO5kBfhZzANf2VcIm84jqDbg== integrity sha512-0WXHDs1VDJyo+Zqs9TKLKyD/h7yDpHUhEFsM2CzkICFdoX1av+GBq/J2xRTFfsQO5kBfhZzANf2VcIm84jqDbg==