diff --git a/.htaccess b/.htaccess index b716b60..fa0b3d6 100644 --- a/.htaccess +++ b/.htaccess @@ -60,17 +60,17 @@ AddType application/font-woff .woff ExpiresActive On ExpiresDefault "access plus 1 seconds" - ExpiresByType text/html "access plus 1 seconds" - ExpiresByType text/xml "access plus 1 hours" - ExpiresByType text/css "access plus 4 weeks" - ExpiresByType image/gif "access plus 4 weeks" - ExpiresByType image/jpeg "access plus 4 weeks" - ExpiresByType image/png "access plus 4 weeks" - ExpiresByType image/svg+xml "access plus 4 weeks" - ExpiresByType text/javascript "access plus 4 weeks" - ExpiresByType application/javascript "access plus 4 weeks" - ExpiresByType application/vnd.ms-fontobject "access plus 4 weeks" - ExpiresByType application/x-font-opentype "access plus 4 weeks" - ExpiresByType application/x-font-ttf "access plus 4 weeks" - ExpiresByType application/font-woff "access plus 4 weeks" + ExpiresByType text/html "access plus 1 hour" + ExpiresByType text/xml "access plus 1 hour" + ExpiresByType text/css "access plus 1 month" + ExpiresByType image/gif "access plus 1 year" + ExpiresByType image/jpeg "access plus 1 year" + ExpiresByType image/png "access plus 1 year" + ExpiresByType image/svg+xml "access plus 1 year" + ExpiresByType text/javascript "access plus 1 month" + ExpiresByType application/javascript "access plus 1 month" + ExpiresByType application/vnd.ms-fontobject "access plus 1 year" + ExpiresByType application/x-font-opentype "access plus 1 year" + ExpiresByType application/x-font-ttf "access plus 1 year" + ExpiresByType application/font-woff "access plus 1 year" diff --git a/assets/css/foundation.css b/assets/css/foundation.css index 7fc0d0f..036a36f 100644 --- a/assets/css/foundation.css +++ b/assets/css/foundation.css @@ -125,19 +125,20 @@ a { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } -a:not([href]) { +a:not([href]):not([tabindex]) { color: inherit; text-decoration: none; } - a:not([href]):focus, - a:not([href]):hover { + a:not([href]):not([tabindex]):focus, + a:not([href]):not([tabindex]):hover { color: inherit; text-decoration: none; } - a:not([href]):focus { + a:not([href]):not([tabindex]):focus { outline: none; } pre { margin-top: 0; - margin-bottom: 1rem; } + margin-bottom: 1rem; + overflow: auto; } figure { margin: 0 0 1rem; } @@ -160,6 +161,7 @@ textarea { touch-action: manipulation; } table { + border-collapse: collapse; background-color: transparent; } caption { @@ -188,6 +190,16 @@ textarea { line-height: inherit; border-radius: 0; } +input[type="radio"]:disabled, +input[type="checkbox"]:disabled { + cursor: not-allowed; } + +input[type="date"], +input[type="time"], +input[type="datetime-local"], +input[type="month"] { + -webkit-appearance: listbox; } + textarea { resize: vertical; } @@ -1801,7 +1813,7 @@ fieldset[disabled] a.btn { width: 100%; } .btn-block + .btn-block { - margin-top: 5px; } + margin-top: 0.5rem; } input[type="submit"].btn-block, input[type="reset"].btn-block, @@ -1828,7 +1840,6 @@ input[type="button"].btn-block { transition-property: height; } .bg-inverse { - color: #eceeef; background-color: #373a3c; } .bg-faded { @@ -1879,6 +1890,15 @@ a.bg-danger:hover { display: table; clear: both; } +.d-block { + display: block !important; } + +.d-inline-block { + display: inline-block !important; } + +.d-inline { + display: inline !important; } + .pull-xs-left { float: left !important; } @@ -1939,6 +1959,9 @@ a.bg-danger:hover { overflow: visible; clip: auto; } +.w-100 { + width: 100% !important; } + .m-x-auto { margin-right: auto !important; margin-left: auto !important; } diff --git a/assets/css/foundation.css.map b/assets/css/foundation.css.map index 1bdd643..d98f325 100644 Binary files a/assets/css/foundation.css.map and b/assets/css/foundation.css.map differ diff --git a/assets/css/main.css b/assets/css/main.css index a65a808..fda34f9 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,5 +1,9 @@ /* STYLE for jannikbeyerstedt.de * generic styles + * + * main font: Alegreya Sans + * headings: Crimson Text + * Logo: Boon */ body { margin: 0; @@ -11,6 +15,9 @@ h1, h2, h3, h4 { margin-top: 1em; font-family: 'Crimson Text', serif; } +main h1:first-child { + margin-top: 0.4em; } + h5 { margin-bottom: 8px; } @@ -22,9 +29,9 @@ p { line-height: 1.5em; } a { - color: #2da301; } + color: #2dac01; } a:active, a:hover, a:focus { - color: #1f7001; } + color: #207901; } main p a { text-decoration: underline; } @@ -72,12 +79,11 @@ main div.container { main div.container { max-width: 940px; } } -header { - margin-bottom: 10px; } - header img { - width: 75px; - height: 75px; - float: left; } +header img { + width: 75px; + height: 75px; + margin: 4px 0; + float: left; } nav { box-sizing: border-box; } @@ -86,7 +92,6 @@ nav { padding-left: 0; } nav ul.nav a { text-decoration: none; - background-color: inherit; color: inherit; } nav ul.nav li { list-style-type: none; } @@ -95,58 +100,34 @@ nav { @media (min-width: 544px) { nav { - float: right; - height: 75px; } + float: right; } nav ul.nav a { float: left; text-align: center; - font-size: 16px; - padding: 45px 0 5px; - width: 109px; } + font-size: 18px; + font-weight: 300; + margin: 30px 9px 1px; } nav ul.nav a:hover, nav ul.nav a:focus, nav ul.nav a.active { - color: #fff; - background-color: #0060e3; } - nav ul.nav.home { - color: #fff; } - nav ul.nav.home a { - background-color: #1779ff; - border-right: 1px solid #0055ca; } - nav ul.nav.home a:last-child { - border-right: 0; } - nav ul.nav.home a.active { - color: #fff; - border-bottom: 4px solid #2da301; - padding-bottom: 1px; } - nav ul.nav.main, nav ul.nav.second { - height: 37.5px; } - nav ul.nav.main a, nav ul.nav.second a { - padding: 8px 0 5.5px; } - nav ul.nav.main { - color: #1779ff; } - nav ul.nav.main a.active { - color: #fff; - border-bottom: 4px solid #2da301; - padding-bottom: 1.5px; } - nav ul.nav.second { - color: #fff; } - nav ul.nav.second a { - background-color: #1779ff; } - nav ul.nav.second a.active { - border-bottom: 4px solid #2da301; - padding-bottom: 1.5px; } } + border-bottom: 1px solid #2dac01; } + nav ul.nav a.section { + font-weight: 500; } } @media (max-width: 543px) { nav button.navbar-toggler { float: right; - margin-top: 10px; + margin-top: 24px; font-family: inherit; font-weight: 300; } - nav ul.mobileNav a { - font-size: 18px; - font-weight: 300; } - nav ul.mobileNav a.active { - color: #4a96ff; - font-weight: 700; } + nav ul.mobileNav { + color: #fff; + background-color: #424242; + padding: 1rem 1rem; } + nav ul.mobileNav a { + font-size: 20px; + font-weight: 300; } + nav ul.mobileNav a.active { + color: #2dac01; + font-weight: 700; } .navbar-toggler { padding: 0.5rem 0.75rem; font-size: 1.25rem; @@ -156,7 +137,8 @@ nav { border-radius: 0.25rem; } .navbar-toggler:focus, .navbar-toggler:hover { - text-decoration: none; } } + text-decoration: none; + outline: none; } } footer { margin-top: 20px; diff --git a/assets/css/main.css.map b/assets/css/main.css.map index 4278d3a..380f41a 100644 Binary files a/assets/css/main.css.map and b/assets/css/main.css.map differ diff --git a/assets/css/templates/home.css b/assets/css/templates/home.css index 8695aec..0010378 100644 --- a/assets/css/templates/home.css +++ b/assets/css/templates/home.css @@ -3,17 +3,26 @@ */ main div.home { text-align: center; - margin-top: 20%; + margin-top: 17%; margin-bottom: 20%; } - main div.home h1 { - margin: 0; - font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif; - font-weight: 100; - font-size: 60px; - margin-top: 15px; - margin-bottom: 15px; } + main div.home div.logo { + font-family: 'Boon-Logo', "Verdana", "Arial", sans-serif; + font-size: 24.5px; + line-height: 1.2em; + font-weight: 300; + width: 11em; + margin: 0 auto; } + main div.home div.logo span { + color: #2dac01; + font-weight: 400; } + main div.home div.logo span.firstname { + padding-left: 0.1em; + padding-right: 0.56em; } + main div.home div.logo span.surname { + letter-spacing: -0.036em; } main div.home p { - margin: 0; - font-size: 20px; } + margin-top: 0.5em; + font-size: 14px; + letter-spacing: -0.02em; } /*# sourceMappingURL=home.css.map */ \ No newline at end of file diff --git a/assets/css/templates/home.css.map b/assets/css/templates/home.css.map index 25b92f0..1082f36 100644 Binary files a/assets/css/templates/home.css.map and b/assets/css/templates/home.css.map differ diff --git a/assets/css/templates/photo.css b/assets/css/templates/photo.css index e4bf8d8..a9437e3 100644 --- a/assets/css/templates/photo.css +++ b/assets/css/templates/photo.css @@ -6,16 +6,18 @@ body { color: #fff; } a { - color: #34bc01; } + color: #34c501; } a:active, a:hover { - color: #42ef01; } + color: #41f801; } main p a:visited { color: #cccccc; } @media (min-width: 544px) { - nav ul.nav.main { - color: #fff; } } + nav ul.nav { + color: #fff; } + nav ul.nav a.section:hover, nav ul.nav a.section:focus { + border: none; } } @media (max-width: 543px) { .navbar-toggler { diff --git a/assets/css/templates/photo.css.map b/assets/css/templates/photo.css.map index 43817c6..fb46eff 100644 Binary files a/assets/css/templates/photo.css.map and b/assets/css/templates/photo.css.map differ diff --git a/assets/css/templates/project.css.map b/assets/css/templates/project.css.map index dab1794..a4283a1 100644 Binary files a/assets/css/templates/project.css.map and b/assets/css/templates/project.css.map differ diff --git a/assets/css/templates/projects.css b/assets/css/templates/projects.css index 68f4891..24637ad 100644 --- a/assets/css/templates/projects.css +++ b/assets/css/templates/projects.css @@ -47,7 +47,7 @@ margin-bottom: 0.75rem; background-color: #fff; border-radius: 0.25rem; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.125); } + border: 1px solid rgba(0, 0, 0, 0.125); } .card-block { padding: 1.25rem; } @@ -73,8 +73,8 @@ margin-left: 1.25rem; } .card > .list-group:first-child .list-group-item:first-child { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; } + border-top-right-radius: 0.25rem; + border-top-left-radius: 0.25rem; } .card > .list-group:last-child .list-group-item:last-child { border-bottom-right-radius: 0.25rem; @@ -83,7 +83,7 @@ .card-header { padding: 0.75rem 1.25rem; background-color: #f5f5f5; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.125); } + border-bottom: 1px solid rgba(0, 0, 0, 0.125); } .card-header::after { content: ""; display: table; @@ -94,7 +94,7 @@ .card-footer { padding: 0.75rem 1.25rem; background-color: #f5f5f5; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.125); } + border-top: 1px solid rgba(0, 0, 0, 0.125); } .card-footer::after { content: ""; display: table; @@ -107,8 +107,6 @@ margin-bottom: -0.75rem; margin-left: -0.625rem; border-bottom: 0; } - .card-header-tabs .nav-item { - margin-bottom: 0; } .card-header-pills { margin-right: -0.625rem; @@ -117,22 +115,37 @@ .card-primary { background-color: #0275d8; border-color: #0275d8; } + .card-primary .card-header, + .card-primary .card-footer { + background-color: transparent; } .card-success { background-color: #5cb85c; border-color: #5cb85c; } + .card-success .card-header, + .card-success .card-footer { + background-color: transparent; } .card-info { background-color: #5bc0de; border-color: #5bc0de; } + .card-info .card-header, + .card-info .card-footer { + background-color: transparent; } .card-warning { background-color: #f0ad4e; border-color: #f0ad4e; } + .card-warning .card-header, + .card-warning .card-footer { + background-color: transparent; } .card-danger { background-color: #d9534f; border-color: #d9534f; } + .card-danger .card-header, + .card-danger .card-footer { + background-color: transparent; } .card-outline-primary { background-color: transparent; @@ -160,7 +173,7 @@ .card-inverse .card-header, .card-inverse .card-footer { - border-bottom: 1px solid rgba(255, 255, 255, 0.2); } + border-color: rgba(255, 255, 255, 0.2); } .card-inverse .card-header, .card-inverse .card-footer, @@ -170,7 +183,8 @@ .card-inverse .card-link, .card-inverse .card-text, -.card-inverse .card-blockquote > footer { +.card-inverse .card-subtitle, +.card-inverse .card-blockquote .blockquote-footer { color: rgba(255, 255, 255, 0.65); } .card-inverse .card-link:focus, @@ -194,19 +208,23 @@ padding: 1.25rem; } .card-img-top { - border-radius: 0.25rem 0.25rem 0 0; } + border-top-right-radius: 0.25rem; + border-top-left-radius: 0.25rem; } .card-img-bottom { - border-radius: 0 0 0.25rem 0.25rem; } + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; } @media (min-width: 544px) { .card-deck { display: table; + width: 100%; + margin-bottom: 0.75rem; table-layout: fixed; border-spacing: 1.25rem 0; } .card-deck .card { display: table-cell; - width: 1%; + margin-bottom: 0; vertical-align: top; } .card-deck-wrapper { margin-right: -1.25rem; diff --git a/assets/css/templates/projects.css.map b/assets/css/templates/projects.css.map index d78523e..e748c05 100644 Binary files a/assets/css/templates/projects.css.map and b/assets/css/templates/projects.css.map differ diff --git a/assets/css/templates/webdesign.css.map b/assets/css/templates/webdesign.css.map index ffd34be..71d6483 100644 Binary files a/assets/css/templates/webdesign.css.map and b/assets/css/templates/webdesign.css.map differ diff --git a/assets/favicons/android-chrome-144x144.png b/assets/favicons/android-chrome-144x144.png new file mode 100644 index 0000000..573ac24 Binary files /dev/null and b/assets/favicons/android-chrome-144x144.png differ diff --git a/assets/favicons/android-chrome-192x192.png b/assets/favicons/android-chrome-192x192.png new file mode 100644 index 0000000..95e5f62 Binary files /dev/null and b/assets/favicons/android-chrome-192x192.png differ diff --git a/assets/favicons/android-chrome-36x36.png b/assets/favicons/android-chrome-36x36.png new file mode 100644 index 0000000..57a7ded Binary files /dev/null and b/assets/favicons/android-chrome-36x36.png differ diff --git a/assets/favicons/android-chrome-48x48.png b/assets/favicons/android-chrome-48x48.png new file mode 100644 index 0000000..46e0746 Binary files /dev/null and b/assets/favicons/android-chrome-48x48.png differ diff --git a/assets/favicons/android-chrome-72x72.png b/assets/favicons/android-chrome-72x72.png new file mode 100644 index 0000000..2ff6248 Binary files /dev/null and b/assets/favicons/android-chrome-72x72.png differ diff --git a/assets/favicons/android-chrome-96x96.png b/assets/favicons/android-chrome-96x96.png new file mode 100644 index 0000000..e25eaa3 Binary files /dev/null and b/assets/favicons/android-chrome-96x96.png differ diff --git a/assets/favicons/apple-touch-icon-114x114.png b/assets/favicons/apple-touch-icon-114x114.png new file mode 100644 index 0000000..e1a502d Binary files /dev/null and b/assets/favicons/apple-touch-icon-114x114.png differ diff --git a/assets/favicons/apple-touch-icon-120x120.png b/assets/favicons/apple-touch-icon-120x120.png new file mode 100644 index 0000000..f1283ef Binary files /dev/null and b/assets/favicons/apple-touch-icon-120x120.png differ diff --git a/assets/favicons/apple-touch-icon-144x144.png b/assets/favicons/apple-touch-icon-144x144.png new file mode 100644 index 0000000..45f529f Binary files /dev/null and b/assets/favicons/apple-touch-icon-144x144.png differ diff --git a/assets/favicons/apple-touch-icon-152x152.png b/assets/favicons/apple-touch-icon-152x152.png new file mode 100644 index 0000000..fb929d9 Binary files /dev/null and b/assets/favicons/apple-touch-icon-152x152.png differ diff --git a/assets/favicons/apple-touch-icon-180x180.png b/assets/favicons/apple-touch-icon-180x180.png new file mode 100644 index 0000000..3bd703e Binary files /dev/null and b/assets/favicons/apple-touch-icon-180x180.png differ diff --git a/assets/favicons/apple-touch-icon-57x57.png b/assets/favicons/apple-touch-icon-57x57.png new file mode 100644 index 0000000..a429187 Binary files /dev/null and b/assets/favicons/apple-touch-icon-57x57.png differ diff --git a/assets/favicons/apple-touch-icon-60x60.png b/assets/favicons/apple-touch-icon-60x60.png new file mode 100644 index 0000000..a1a77de Binary files /dev/null and b/assets/favicons/apple-touch-icon-60x60.png differ diff --git a/assets/favicons/apple-touch-icon-72x72.png b/assets/favicons/apple-touch-icon-72x72.png new file mode 100644 index 0000000..e9fcd68 Binary files /dev/null and b/assets/favicons/apple-touch-icon-72x72.png differ diff --git a/assets/favicons/apple-touch-icon-76x76.png b/assets/favicons/apple-touch-icon-76x76.png new file mode 100644 index 0000000..41579db Binary files /dev/null and b/assets/favicons/apple-touch-icon-76x76.png differ diff --git a/assets/favicons/apple-touch-icon-precomposed.png b/assets/favicons/apple-touch-icon-precomposed.png new file mode 100644 index 0000000..e589912 Binary files /dev/null and b/assets/favicons/apple-touch-icon-precomposed.png differ diff --git a/assets/favicons/apple-touch-icon.png b/assets/favicons/apple-touch-icon.png new file mode 100644 index 0000000..3bd703e Binary files /dev/null and b/assets/favicons/apple-touch-icon.png differ diff --git a/assets/favicons/browserconfig.xml b/assets/favicons/browserconfig.xml new file mode 100644 index 0000000..b63eafd --- /dev/null +++ b/assets/favicons/browserconfig.xml @@ -0,0 +1,12 @@ + + + + + + + + + #da532c + + + diff --git a/assets/favicons/favicon-16x16.png b/assets/favicons/favicon-16x16.png new file mode 100644 index 0000000..3b9025f Binary files /dev/null and b/assets/favicons/favicon-16x16.png differ diff --git a/assets/favicons/favicon-194x194.png b/assets/favicons/favicon-194x194.png new file mode 100644 index 0000000..9e5d5af Binary files /dev/null and b/assets/favicons/favicon-194x194.png differ diff --git a/assets/favicons/favicon-32x32.png b/assets/favicons/favicon-32x32.png new file mode 100644 index 0000000..b6162c4 Binary files /dev/null and b/assets/favicons/favicon-32x32.png differ diff --git a/assets/favicons/favicon-96x96.png b/assets/favicons/favicon-96x96.png new file mode 100644 index 0000000..0fb5b6b Binary files /dev/null and b/assets/favicons/favicon-96x96.png differ diff --git a/assets/favicons/favicon.ico b/assets/favicons/favicon.ico new file mode 100644 index 0000000..a99aefb Binary files /dev/null and b/assets/favicons/favicon.ico differ diff --git a/assets/favicons/manifest.json b/assets/favicons/manifest.json new file mode 100644 index 0000000..248e405 --- /dev/null +++ b/assets/favicons/manifest.json @@ -0,0 +1,41 @@ +{ + "name": "Jannik Beyerstedt", + "icons": [ + { + "src": "\/assets\/favicons\/android-chrome-36x36.png", + "sizes": "36x36", + "type": "image\/png", + "density": 0.75 + }, + { + "src": "\/assets\/favicons\/android-chrome-48x48.png", + "sizes": "48x48", + "type": "image\/png", + "density": 1 + }, + { + "src": "\/assets\/favicons\/android-chrome-72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": 1.5 + }, + { + "src": "\/assets\/favicons\/android-chrome-96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": 2 + }, + { + "src": "\/assets\/favicons\/android-chrome-144x144.png", + "sizes": "144x144", + "type": "image\/png", + "density": 3 + }, + { + "src": "\/assets\/favicons\/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image\/png", + "density": 4 + } + ] +} diff --git a/assets/favicons/mstile-144x144.png b/assets/favicons/mstile-144x144.png new file mode 100644 index 0000000..324d24f Binary files /dev/null and b/assets/favicons/mstile-144x144.png differ diff --git a/assets/favicons/mstile-150x150.png b/assets/favicons/mstile-150x150.png new file mode 100644 index 0000000..d3a8be7 Binary files /dev/null and b/assets/favicons/mstile-150x150.png differ diff --git a/assets/favicons/mstile-310x150.png b/assets/favicons/mstile-310x150.png new file mode 100644 index 0000000..6803829 Binary files /dev/null and b/assets/favicons/mstile-310x150.png differ diff --git a/assets/favicons/mstile-310x310.png b/assets/favicons/mstile-310x310.png new file mode 100644 index 0000000..7ea2d42 Binary files /dev/null and b/assets/favicons/mstile-310x310.png differ diff --git a/assets/favicons/mstile-70x70.png b/assets/favicons/mstile-70x70.png new file mode 100644 index 0000000..823ac5a Binary files /dev/null and b/assets/favicons/mstile-70x70.png differ diff --git a/assets/favicons/safari-pinned-tab.svg b/assets/favicons/safari-pinned-tab.svg new file mode 100644 index 0000000..d237e1f --- /dev/null +++ b/assets/favicons/safari-pinned-tab.svg @@ -0,0 +1,400 @@ + + + + +Created by potrace 1.11, written by Peter Selinger 2001-2013 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/fonts/boon_logo-300.woff b/assets/fonts/boon_logo-300.woff new file mode 100644 index 0000000..6c7c7f7 Binary files /dev/null and b/assets/fonts/boon_logo-300.woff differ diff --git a/assets/fonts/boon_logo-300o.woff b/assets/fonts/boon_logo-300o.woff new file mode 100644 index 0000000..6cfe6e3 Binary files /dev/null and b/assets/fonts/boon_logo-300o.woff differ diff --git a/assets/fonts/boon_logo-400.woff b/assets/fonts/boon_logo-400.woff new file mode 100644 index 0000000..430b593 Binary files /dev/null and b/assets/fonts/boon_logo-400.woff differ diff --git a/assets/fonts/boon_logo-400o.woff b/assets/fonts/boon_logo-400o.woff new file mode 100644 index 0000000..d35a6aa Binary files /dev/null and b/assets/fonts/boon_logo-400o.woff differ diff --git a/assets/fonts/boon_logo-500.woff b/assets/fonts/boon_logo-500.woff new file mode 100644 index 0000000..5acfbd4 Binary files /dev/null and b/assets/fonts/boon_logo-500.woff differ diff --git a/assets/fonts/boon_logo-500o.woff b/assets/fonts/boon_logo-500o.woff new file mode 100644 index 0000000..c4fb953 Binary files /dev/null and b/assets/fonts/boon_logo-500o.woff differ diff --git a/assets/fonts/boon_logo-600.woff b/assets/fonts/boon_logo-600.woff new file mode 100644 index 0000000..6953e9d Binary files /dev/null and b/assets/fonts/boon_logo-600.woff differ diff --git a/assets/fonts/boon_logo-600o.woff b/assets/fonts/boon_logo-600o.woff new file mode 100644 index 0000000..75218c5 Binary files /dev/null and b/assets/fonts/boon_logo-600o.woff differ diff --git a/assets/fonts/boon_logo-700.woff b/assets/fonts/boon_logo-700.woff new file mode 100644 index 0000000..5741d02 Binary files /dev/null and b/assets/fonts/boon_logo-700.woff differ diff --git a/assets/fonts/boon_logo-700o.woff b/assets/fonts/boon_logo-700o.woff new file mode 100644 index 0000000..5f170c0 Binary files /dev/null and b/assets/fonts/boon_logo-700o.woff differ diff --git a/assets/fonts/boon_logo.css b/assets/fonts/boon_logo.css new file mode 100755 index 0000000..ef8fbcb --- /dev/null +++ b/assets/fonts/boon_logo.css @@ -0,0 +1,55 @@ +@font-face { + src: url("boon_logo-300.woff") format("woff"); + font-family: "Boon-Logo"; + font-style: normal; + font-weight: 300; +} + +@font-face { + src: url("boon_logo-300o.woff") format("woff"); + font-family: "Boon-Logo"; + font-style: italic; + font-weight: 300; +} + +@font-face { + src: url("boon_logo-400.woff") format("woff"); + font-family: "Boon-Logo"; + font-style: normal; + font-weight: 400; +} + +@font-face { + src: url("boon_logo-400o.woff") format("woff"); + font-family: "Boon-Logo"; + font-style: italic; + font-weight: 400; +} + +@font-face { + src: url("boon_logo-500.woff") format("woff"); + font-family: "Boon-Logo"; + font-style: normal; + font-weight: 500; +} + +@font-face { + src: url("boon_logo-500o.woff") format("woff"); + font-family: "Boon-Logo"; + font-style: italic; + font-weight: 500; +} + +@font-face { + src: url("boon_logo-700.woff") format("woff"); + font-family: "Boon-Logo"; + font-style: normal; + font-weight: 700; +} + +@font-face { + src: url("boon_logo-700o.woff") format("woff"); + font-family: "Boon-Logo"; + font-style: italic; + font-weight: 700; +} diff --git a/assets/scss/_mainvariables.scss b/assets/scss/_mainvariables.scss index 5ec0362..a1296f0 100644 --- a/assets/scss/_mainvariables.scss +++ b/assets/scss/_mainvariables.scss @@ -1,7 +1,7 @@ $color_font: #000; $color_bg: #fff; $color_base: #1779ff; -$color_accent: #2da301; +$color_accent: #2dac01; $link_color: $color_accent; $link_active: darken($color_accent, 10%); @@ -9,11 +9,7 @@ $link_visited: lighten($color_font, 60%); $col_xxs_bp: 543px; -$nav_bgColor: $color_base; -$nav_borderColor: darken($nav_bgColor, 15%); $nav_fgColor: #fff; -$nav_textXsWidth: 80px; -$nav_textSmWidth: 109px; $footer_color_bg: #bebebe; diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 0bd26ce..c092f74 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -1,5 +1,9 @@ /* STYLE for jannikbeyerstedt.de * generic styles + * + * main font: Alegreya Sans + * headings: Crimson Text + * Logo: Boon */ @import "custom"; @import "variables"; @@ -17,6 +21,9 @@ h1, h2, h3, h4 { margin-top: 1em; font-family: 'Crimson Text', serif; } +main h1:first-child { + margin-top: 0.4em; +} h5 { margin-bottom: 8px; } @@ -88,10 +95,10 @@ main div.container { $header_logoSize: 75px; header { - margin-bottom: 10px; img { width: $header_logoSize; height: $header_logoSize; + margin: 4px 0; float: left; } @@ -105,7 +112,6 @@ nav { padding-left: 0; // reset a { text-decoration: none; - background-color: inherit; color: inherit; } li { @@ -119,59 +125,19 @@ nav { @include media-breakpoint-up(sm) { nav { float: right; - height: $header_logoSize; ul.nav { a { float: left; text-align: center; - font-size: 16px; - padding: 45px 0 5px; - width: $nav_textSmWidth; + font-size: 18px; + font-weight: 300; + margin: 30px 9px 1px; } - a:hover, a:focus, a.active { - color: $nav_fgColor; - background-color: darken($nav_bgColor, 10%); + border-bottom: 1px solid $color_accent; } - } - ul.nav.home { - color: $nav_fgColor; - a { - background-color: $nav_bgColor; - border-right: 1px solid $nav_borderColor; - } - a:last-child { - border-right: 0; - } - - a.active { - color: $nav_fgColor; - border-bottom: 4px solid $color_accent; - padding-bottom: 1px; - } - } - ul.nav.main, ul.nav.second { - height: $header_logoSize/2; - a { - padding: 8px 0 5.5px; - } - } - ul.nav.main { - color: $nav_bgColor; - a.active { - color: $nav_fgColor; - border-bottom: 4px solid $color_accent; - padding-bottom: 1.5px; - } - } - ul.nav.second { - color: $nav_fgColor; - a { - background-color: $nav_bgColor; - } - a.active { - border-bottom: 4px solid $color_accent; - padding-bottom: 1.5px; + a.section { + font-weight: 500; } } } @@ -180,17 +146,20 @@ nav { nav { button.navbar-toggler { float: right; - margin-top: 10px; + margin-top: 24px; font-family: inherit; font-weight: 300; } ul.mobileNav { + color: $color_font_inv; + background-color: $color_bg_inv; + padding: 1rem 1rem; a { - font-size: 18px; + font-size: 20px; font-weight: 300; } a.active { - color: lighten($nav_bgColor, 10%); + color: $color_accent; font-weight: 700; } } @@ -208,6 +177,7 @@ nav { @include hover-focus { text-decoration: none; + outline: none; } } } diff --git a/assets/scss/templates/home.scss b/assets/scss/templates/home.scss index 3685a10..b5eadf8 100644 --- a/assets/scss/templates/home.scss +++ b/assets/scss/templates/home.scss @@ -2,22 +2,42 @@ * for specific template */ +@import "../mainvariables"; + main { div.home { text-align: center; - margin-top: 20%; + margin-top: 17%; margin-bottom: 20%; - h1 { - margin: 0; - font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif; - font-weight: 100; - font-size: 60px; - margin-top: 15px; - margin-bottom: 15px; + + div.logo { + font-family: 'Boon-Logo', "Verdana", "Arial", sans-serif; + font-size: 24.5px; + line-height: 1.2em; + font-weight: 300; + + width: 11em; // more than needed, because of fallback fonts + margin: 0 auto; + + span { + color: $color_accent; + font-weight: 400; + &.firstname { + padding-left: 0.1em; + padding-right: 0.56em; + } + &.surname { + letter-spacing: -0.036em; + } + } + } + p { - margin: 0; - font-size: 20px; + margin-top: 0.5em; + font-size: 14px; + letter-spacing: -0.02em; } + } } diff --git a/assets/scss/templates/photo.scss b/assets/scss/templates/photo.scss index f9a3083..ed2dbbc 100644 --- a/assets/scss/templates/photo.scss +++ b/assets/scss/templates/photo.scss @@ -25,8 +25,11 @@ main p { } @include media-breakpoint-up(sm) { nav { - ul.nav.main { + ul.nav { color: $nav_fgColor; + a.section:hover, a.section:focus { + border: none; + } } } } diff --git a/assets/scss/templates/projects.scss b/assets/scss/templates/projects.scss index 940e556..300d2a4 100644 --- a/assets/scss/templates/projects.scss +++ b/assets/scss/templates/projects.scss @@ -26,7 +26,7 @@ main.projects { color: $color_font; text-decoration: none; } - + &.card-link { &:active, &:hover { text-decoration: underline; diff --git a/assets/scss/templates/webdesign.scss b/assets/scss/templates/webdesign.scss index d1d2ede..db0dd7e 100644 --- a/assets/scss/templates/webdesign.scss +++ b/assets/scss/templates/webdesign.scss @@ -21,7 +21,7 @@ main.webdesign { } .featurette { - + h2 { font-family: inherit; margin-top: 10px; diff --git a/site/config/config.php b/site/config/config.php index 16ac5d8..904ac71 100644 --- a/site/config/config.php +++ b/site/config/config.php @@ -3,6 +3,7 @@ header("Content-Security-Policy: default-src 'self'; style-src 'self' 'unsafe-in //header("X-Content-Type-Options: nosniff"); // enabled at server-side //header("X-Frame-Options: deny"); // enabled at server-side //header("X-Xss-Protection: 1; mode=block"); // enabled at server-side +header("Strict-Transport-Security: max-age=31536000"); /* License Setup diff --git a/site/snippets/base/cont-header.php b/site/snippets/base/cont-header.php index 612ee22..cc873c2 100644 --- a/site/snippets/base/cont-header.php +++ b/site/snippets/base/cont-header.php @@ -21,23 +21,21 @@ if ($page->depth() == 1) { ?>
-
-
+ + + +
@@ -53,19 +51,18 @@ if ($page->depth() == 1) { Menü -
diff --git a/site/snippets/base/html-head.php b/site/snippets/base/html-head.php index 994ac3b..688b93d 100644 --- a/site/snippets/base/html-head.php +++ b/site/snippets/base/html-head.php @@ -19,6 +19,7 @@ if( $page->isHomePage() ) { + <?php echo $title ?> @@ -36,6 +37,30 @@ if( $page->isHomePage() ) { + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/site/templates/home.php b/site/templates/home.php index 6473694..6135453 100644 --- a/site/templates/home.php +++ b/site/templates/home.php @@ -14,7 +14,17 @@ snippet('base/cont-header');
-

hero_text()->kirbytextRaw() ?>

+

subtitle()->kirbytextRaw() ?>