diff --git a/.gitignore b/.gitignore index 8897fc4..f7c0ebf 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,5 @@ Gemfile Gemfile.lock node_modules _site +vendor +composer.lock \ No newline at end of file diff --git a/.htaccess b/.htaccess index 306d567..32d5b80 100644 --- a/.htaccess +++ b/.htaccess @@ -12,7 +12,6 @@ RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] ExpiresByType text/css "access plus 2 weeks" # Favicon - ExpiresByType image/vnd.microsoft.icon "access plus 3 months" ExpiresByType image/x-icon "access plus 3 months" # HTML and PHP @@ -25,6 +24,7 @@ RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] ExpiresByType text/javascript "access plus 1 month" # Media files + ExpiresByType audio/mpeg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/bmp "access plus 1 month" ExpiresByType image/gif "access plus 1 month" @@ -39,41 +39,41 @@ RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] # Compression -# Insert filters / compress text, html, javascript, css, xml: -AddOutputFilterByType DEFLATE text/plain -AddOutputFilterByType DEFLATE text/html -AddOutputFilterByType DEFLATE text/xml -AddOutputFilterByType DEFLATE text/css -AddOutputFilterByType DEFLATE text/vtt -AddOutputFilterByType DEFLATE text/x-component -AddOutputFilterByType DEFLATE application/xml -AddOutputFilterByType DEFLATE application/xhtml+xml -AddOutputFilterByType DEFLATE application/rss+xml -AddOutputFilterByType DEFLATE application/js -AddOutputFilterByType DEFLATE application/javascript -AddOutputFilterByType DEFLATE application/x-javascript -AddOutputFilterByType DEFLATE application/x-httpd-php -AddOutputFilterByType DEFLATE application/x-httpd-fastphp -AddOutputFilterByType DEFLATE application/atom+xml -AddOutputFilterByType DEFLATE application/json -AddOutputFilterByType DEFLATE application/ld+json -AddOutputFilterByType DEFLATE application/vnd.ms-fontobject -AddOutputFilterByType DEFLATE application/x-font-ttf -AddOutputFilterByType DEFLATE application/x-web-app-manifest+json -AddOutputFilterByType DEFLATE font/opentype -AddOutputFilterByType DEFLATE image/svg+xml -AddOutputFilterByType DEFLATE image/x-icon - -# Exception: Images -SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png|svg)$ no-gzip dont-vary - -# Drop problematic browsers -BrowserMatch ^Mozilla/4 gzip-only-text/html -BrowserMatch ^Mozilla/4\.0[678] no-gzip -BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html - -# Make sure proxies don't deliver the wrong content -Header append Vary User-Agent env=!dont-vary + # Insert filters / compress text, html, javascript, css, xml: + AddOutputFilterByType DEFLATE text/plain + AddOutputFilterByType DEFLATE text/html + AddOutputFilterByType DEFLATE text/xml + AddOutputFilterByType DEFLATE text/css + AddOutputFilterByType DEFLATE text/vtt + AddOutputFilterByType DEFLATE text/x-component + AddOutputFilterByType DEFLATE application/xml + AddOutputFilterByType DEFLATE application/xhtml+xml + AddOutputFilterByType DEFLATE application/rss+xml + AddOutputFilterByType DEFLATE application/js + AddOutputFilterByType DEFLATE application/javascript + AddOutputFilterByType DEFLATE application/x-javascript + AddOutputFilterByType DEFLATE application/x-httpd-php + AddOutputFilterByType DEFLATE application/x-httpd-fastphp + AddOutputFilterByType DEFLATE application/atom+xml + AddOutputFilterByType DEFLATE application/json + AddOutputFilterByType DEFLATE application/ld+json + AddOutputFilterByType DEFLATE application/vnd.ms-fontobject + AddOutputFilterByType DEFLATE application/x-font-ttf + AddOutputFilterByType DEFLATE application/x-web-app-manifest+json + AddOutputFilterByType DEFLATE font/opentype + AddOutputFilterByType DEFLATE image/svg+xml + AddOutputFilterByType DEFLATE image/x-icon + + # Exception: Images + SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png|svg)$ no-gzip dont-vary + + # Drop problematic browsers + BrowserMatch ^Mozilla/4 gzip-only-text/html + BrowserMatch ^Mozilla/4\.0[678] no-gzip + BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html + + # Make sure proxies don't deliver the wrong content + Header append Vary User-Agent env=!dont-vary @@ -113,4 +113,4 @@ Header append Vary User-Agent env=!dont-vary # set charset -AddDefaultCharset UTF-8 \ No newline at end of file +AddDefaultCharset UTF-8 diff --git a/README.md b/README.md index 5472b23..d72960b 100644 --- a/README.md +++ b/README.md @@ -180,6 +180,14 @@ An overview of what I have done each day is listed below under **Changelog**. **16/08:** - Revised Table and made it fully responsive +**17/08:** +- Added Heading Styles for Articles +- Fixed margin when number of items on Portfolio/Blog/Resources Page is odd +- Gulp fix for Resource Pages +- Added Article Components Resource +- Fixed bug: Read more button was not always on the bottom of the article preview or resource card +- Set Canonicals for all pages + ## A few more words for you... Are you interested in my upcoming website? You are welcome to contribute to this in any kind! Ask questions, give feedback, help me out to improve the code, add new features... diff --git a/_app/assets/css/obsidian.css b/_app/assets/css/obsidian.css new file mode 100644 index 0000000..356630f --- /dev/null +++ b/_app/assets/css/obsidian.css @@ -0,0 +1,88 @@ +/** + * Obsidian style + * ported by Alexander Marenin (http://github.com/ioncreature) + */ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #282b2e; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-selector-id { + color: #93c763; +} + +.hljs-number { + color: #ffcd22; +} + +.hljs { + color: #e0e2e4; +} + +.hljs-attribute { + color: #668bb0; +} + +.hljs-code, +.hljs-class .hljs-title, +.hljs-section { + color: white; +} + +.hljs-regexp, +.hljs-link { + color: #d39745; +} + +.hljs-meta { + color: #557182; +} + +.hljs-tag, +.hljs-name, +.hljs-bullet, +.hljs-subst, +.hljs-emphasis, +.hljs-type, +.hljs-built_in, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-addition, +.hljs-variable, +.hljs-template-tag, +.hljs-template-variable { + color: #8cbbad; +} + +.hljs-string, +.hljs-symbol { + color: #ec7600; +} + +.hljs-comment, +.hljs-quote, +.hljs-deletion { + color: #818e96; +} + +.hljs-selector-class { + color: #A082BD +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-doctag, +.hljs-title, +.hljs-section, +.hljs-type, +.hljs-name, +.hljs-strong { + font-weight: bold; +} diff --git a/_app/assets/img/min/article-components-large.png b/_app/assets/img/min/article-components-large.png new file mode 100644 index 0000000..b5c5224 Binary files /dev/null and b/_app/assets/img/min/article-components-large.png differ diff --git a/_app/assets/img/min/article-components.png b/_app/assets/img/min/article-components.png new file mode 100644 index 0000000..4946455 Binary files /dev/null and b/_app/assets/img/min/article-components.png differ diff --git a/_app/assets/img/min/icons/back-button-hover.svg b/_app/assets/img/min/icons/back-button-hover.svg new file mode 100644 index 0000000..93dd6eb --- /dev/null +++ b/_app/assets/img/min/icons/back-button-hover.svg @@ -0,0 +1 @@ + diff --git a/_app/assets/img/min/icons/back-button.svg b/_app/assets/img/min/icons/back-button.svg index 87a40b9..43c08e9 100644 --- a/_app/assets/img/min/icons/back-button.svg +++ b/_app/assets/img/min/icons/back-button.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/_app/assets/img/min/icons/codepen-icon-reverse.svg b/_app/assets/img/min/icons/codepen-icon-reverse.svg new file mode 100644 index 0000000..4bcd484 --- /dev/null +++ b/_app/assets/img/min/icons/codepen-icon-reverse.svg @@ -0,0 +1,3 @@ + + + diff --git a/_app/assets/img/min/icons/codepen-icon.svg b/_app/assets/img/min/icons/codepen-icon.svg index 7242e3a..4e6f835 100644 --- a/_app/assets/img/min/icons/codepen-icon.svg +++ b/_app/assets/img/min/icons/codepen-icon.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/_app/assets/img/min/icons/github-icon-reverse.svg b/_app/assets/img/min/icons/github-icon-reverse.svg new file mode 100644 index 0000000..deede0f --- /dev/null +++ b/_app/assets/img/min/icons/github-icon-reverse.svg @@ -0,0 +1 @@ + diff --git a/_app/assets/img/min/icons/github-icon.svg b/_app/assets/img/min/icons/github-icon.svg index 87f6f80..36c48cd 100644 --- a/_app/assets/img/min/icons/github-icon.svg +++ b/_app/assets/img/min/icons/github-icon.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/_app/assets/img/min/icons/mail-icon.svg b/_app/assets/img/min/icons/mail-icon.svg deleted file mode 100644 index 62fc804..0000000 --- a/_app/assets/img/min/icons/mail-icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/_app/assets/img/min/icons/time-icon.svg b/_app/assets/img/min/icons/time-icon.svg new file mode 100644 index 0000000..9e961ab --- /dev/null +++ b/_app/assets/img/min/icons/time-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/_app/assets/img/min/icons/twitter-icon-reverse.svg b/_app/assets/img/min/icons/twitter-icon-reverse.svg new file mode 100644 index 0000000..005f7e3 --- /dev/null +++ b/_app/assets/img/min/icons/twitter-icon-reverse.svg @@ -0,0 +1 @@ + diff --git a/_app/assets/img/min/icons/twitter-icon.svg b/_app/assets/img/min/icons/twitter-icon.svg index 5da39df..a1328b0 100644 --- a/_app/assets/img/min/icons/twitter-icon.svg +++ b/_app/assets/img/min/icons/twitter-icon.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/_app/assets/img/min/img1-large.jpg b/_app/assets/img/min/img1-large.jpg new file mode 100644 index 0000000..9796ad4 Binary files /dev/null and b/_app/assets/img/min/img1-large.jpg differ diff --git a/_app/assets/img/min/img1.jpg b/_app/assets/img/min/img1.jpg new file mode 100644 index 0000000..aec890d Binary files /dev/null and b/_app/assets/img/min/img1.jpg differ diff --git a/_app/assets/img/min/img2-large.jpg b/_app/assets/img/min/img2-large.jpg new file mode 100644 index 0000000..b0abc03 Binary files /dev/null and b/_app/assets/img/min/img2-large.jpg differ diff --git a/_app/assets/img/min/img2.jpg b/_app/assets/img/min/img2.jpg new file mode 100644 index 0000000..3537dcc Binary files /dev/null and b/_app/assets/img/min/img2.jpg differ diff --git a/_app/assets/img/min/img3-large.jpg b/_app/assets/img/min/img3-large.jpg new file mode 100644 index 0000000..3d62edf Binary files /dev/null and b/_app/assets/img/min/img3-large.jpg differ diff --git a/_app/assets/img/min/img3.jpg b/_app/assets/img/min/img3.jpg new file mode 100644 index 0000000..2998ec2 Binary files /dev/null and b/_app/assets/img/min/img3.jpg differ diff --git a/_app/assets/img/min/img4-large.jpg b/_app/assets/img/min/img4-large.jpg new file mode 100644 index 0000000..ffb95d6 Binary files /dev/null and b/_app/assets/img/min/img4-large.jpg differ diff --git a/_app/assets/img/min/img4.jpg b/_app/assets/img/min/img4.jpg new file mode 100644 index 0000000..cecb3bd Binary files /dev/null and b/_app/assets/img/min/img4.jpg differ diff --git a/_app/assets/img/min/img5-large.jpg b/_app/assets/img/min/img5-large.jpg new file mode 100644 index 0000000..6e24f54 Binary files /dev/null and b/_app/assets/img/min/img5-large.jpg differ diff --git a/_app/assets/img/min/img5.jpg b/_app/assets/img/min/img5.jpg new file mode 100644 index 0000000..7dd1abc Binary files /dev/null and b/_app/assets/img/min/img5.jpg differ diff --git a/_app/assets/img/min/img6-large.jpg b/_app/assets/img/min/img6-large.jpg new file mode 100644 index 0000000..2022875 Binary files /dev/null and b/_app/assets/img/min/img6-large.jpg differ diff --git a/_app/assets/img/min/img6.jpg b/_app/assets/img/min/img6.jpg new file mode 100644 index 0000000..34446e1 Binary files /dev/null and b/_app/assets/img/min/img6.jpg differ diff --git a/_app/assets/img/min/logo.svg b/_app/assets/img/min/logo.svg index 40976d7..a7d651b 100644 --- a/_app/assets/img/min/logo.svg +++ b/_app/assets/img/min/logo.svg @@ -1 +1,12 @@ -JR \ No newline at end of file + + + + + + + + + JR + + + diff --git a/_app/assets/img/min/welcome-section-bg.jpg b/_app/assets/img/min/welcome-section-bg.jpg index bfbc706..eb460f9 100644 Binary files a/_app/assets/img/min/welcome-section-bg.jpg and b/_app/assets/img/min/welcome-section-bg.jpg differ diff --git a/_app/assets/img/original/article-components-large.png b/_app/assets/img/original/article-components-large.png new file mode 100644 index 0000000..b5c5224 Binary files /dev/null and b/_app/assets/img/original/article-components-large.png differ diff --git a/_app/assets/img/original/article-components.png b/_app/assets/img/original/article-components.png new file mode 100644 index 0000000..4946455 Binary files /dev/null and b/_app/assets/img/original/article-components.png differ diff --git a/_app/assets/img/original/icons/back-button-hover.svg b/_app/assets/img/original/icons/back-button-hover.svg new file mode 100644 index 0000000..93dd6eb --- /dev/null +++ b/_app/assets/img/original/icons/back-button-hover.svg @@ -0,0 +1 @@ + diff --git a/_app/assets/img/original/icons/back-button.svg b/_app/assets/img/original/icons/back-button.svg index cbd2be9..43c08e9 100644 --- a/_app/assets/img/original/icons/back-button.svg +++ b/_app/assets/img/original/icons/back-button.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/_app/assets/img/original/icons/codepen-icon-reverse.svg b/_app/assets/img/original/icons/codepen-icon-reverse.svg new file mode 100644 index 0000000..9f6db97 --- /dev/null +++ b/_app/assets/img/original/icons/codepen-icon-reverse.svg @@ -0,0 +1 @@ + diff --git a/_app/assets/img/original/icons/codepen-icon.svg b/_app/assets/img/original/icons/codepen-icon.svg index 6545c2e..a0030ec 100644 --- a/_app/assets/img/original/icons/codepen-icon.svg +++ b/_app/assets/img/original/icons/codepen-icon.svg @@ -1 +1 @@ - + diff --git a/_app/assets/img/original/icons/github-icon-reverse.svg b/_app/assets/img/original/icons/github-icon-reverse.svg new file mode 100644 index 0000000..8d3c322 --- /dev/null +++ b/_app/assets/img/original/icons/github-icon-reverse.svg @@ -0,0 +1 @@ + diff --git a/_app/assets/img/original/icons/github-icon.svg b/_app/assets/img/original/icons/github-icon.svg index 643a249..36c48cd 100644 --- a/_app/assets/img/original/icons/github-icon.svg +++ b/_app/assets/img/original/icons/github-icon.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/_app/assets/img/original/icons/mail-icon.svg b/_app/assets/img/original/icons/mail-icon.svg deleted file mode 100644 index 84473ae..0000000 --- a/_app/assets/img/original/icons/mail-icon.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/_app/assets/img/original/icons/time-icon.svg b/_app/assets/img/original/icons/time-icon.svg new file mode 100644 index 0000000..087c4da --- /dev/null +++ b/_app/assets/img/original/icons/time-icon.svg @@ -0,0 +1 @@ + diff --git a/_app/assets/img/original/icons/twitter-icon-reverse.svg b/_app/assets/img/original/icons/twitter-icon-reverse.svg new file mode 100644 index 0000000..59dec9c --- /dev/null +++ b/_app/assets/img/original/icons/twitter-icon-reverse.svg @@ -0,0 +1 @@ + diff --git a/_app/assets/img/original/icons/twitter-icon.svg b/_app/assets/img/original/icons/twitter-icon.svg index ff5de07..a1328b0 100644 --- a/_app/assets/img/original/icons/twitter-icon.svg +++ b/_app/assets/img/original/icons/twitter-icon.svg @@ -1 +1 @@ - + diff --git a/_app/assets/img/original/img1-large.jpg b/_app/assets/img/original/img1-large.jpg new file mode 100644 index 0000000..3448950 Binary files /dev/null and b/_app/assets/img/original/img1-large.jpg differ diff --git a/_app/assets/img/original/img1.jpg b/_app/assets/img/original/img1.jpg new file mode 100644 index 0000000..57010b3 Binary files /dev/null and b/_app/assets/img/original/img1.jpg differ diff --git a/_app/assets/img/original/img2-large.jpg b/_app/assets/img/original/img2-large.jpg new file mode 100644 index 0000000..2d35eec Binary files /dev/null and b/_app/assets/img/original/img2-large.jpg differ diff --git a/_app/assets/img/original/img2.jpg b/_app/assets/img/original/img2.jpg new file mode 100644 index 0000000..24c70ef Binary files /dev/null and b/_app/assets/img/original/img2.jpg differ diff --git a/_app/assets/img/original/img3-large.jpg b/_app/assets/img/original/img3-large.jpg new file mode 100644 index 0000000..aa35cdc Binary files /dev/null and b/_app/assets/img/original/img3-large.jpg differ diff --git a/_app/assets/img/original/img3.jpg b/_app/assets/img/original/img3.jpg new file mode 100644 index 0000000..d3cb873 Binary files /dev/null and b/_app/assets/img/original/img3.jpg differ diff --git a/_app/assets/img/original/img4-large.jpg b/_app/assets/img/original/img4-large.jpg new file mode 100644 index 0000000..ec2fd31 Binary files /dev/null and b/_app/assets/img/original/img4-large.jpg differ diff --git a/_app/assets/img/original/img4.jpg b/_app/assets/img/original/img4.jpg new file mode 100644 index 0000000..a1f5610 Binary files /dev/null and b/_app/assets/img/original/img4.jpg differ diff --git a/_app/assets/img/original/img5-large.jpg b/_app/assets/img/original/img5-large.jpg new file mode 100644 index 0000000..a2bc7dd Binary files /dev/null and b/_app/assets/img/original/img5-large.jpg differ diff --git a/_app/assets/img/original/img5.jpg b/_app/assets/img/original/img5.jpg new file mode 100644 index 0000000..4a1863f Binary files /dev/null and b/_app/assets/img/original/img5.jpg differ diff --git a/_app/assets/img/original/img6-large.jpg b/_app/assets/img/original/img6-large.jpg new file mode 100644 index 0000000..4ac0dc7 Binary files /dev/null and b/_app/assets/img/original/img6-large.jpg differ diff --git a/_app/assets/img/original/img6.jpg b/_app/assets/img/original/img6.jpg new file mode 100644 index 0000000..ee33a19 Binary files /dev/null and b/_app/assets/img/original/img6.jpg differ diff --git a/_app/assets/js/article-image.js b/_app/assets/js/article-image.js new file mode 100644 index 0000000..5e0f4e2 --- /dev/null +++ b/_app/assets/js/article-image.js @@ -0,0 +1,36 @@ +// Article Image Parallax Effect // +var articleImage = document.getElementById('article-image'); + +fixArticleImagePosition(); + +document.addEventListener('scroll', articleImageParallax); + +window.addEventListener('resize', function () { + disableArticleImageEffects(); + fixArticleImagePosition(); + articleImageParallax(); +}); + +function disableArticleImageEffects() { + if (window.innerWidth <= 1024) { + articleImage.style.backgroundPosition = 'center center'; + } +} + +function fixArticleImagePosition() { + if (window.innerWidth > 1024) { + var articleImagePositionTop = articleImage.getBoundingClientRect().top; + + articleImage.style.backgroundPosition = 'center ' + articleImagePositionTop + 'px'; + } +} + +function articleImageParallax() { + if (window.innerWidth > 1024) { + var scrollY = window.scrollY || window.pageYOffset; + var articleImagePositionTop = articleImage.getBoundingClientRect().top; + var parallaxValue = articleImagePositionTop - scrollY / 2; + + articleImage.style.backgroundPosition = 'center ' + parallaxValue + 'px'; + } +} diff --git a/_app/assets/js/highlight.pack.js b/_app/assets/js/highlight.pack.js new file mode 100644 index 0000000..992d795 --- /dev/null +++ b/_app/assets/js/highlight.pack.js @@ -0,0 +1,2 @@ +/*! highlight.js v9.12.0 | BSD3 License | git.io/hljslicense */ +!function(e){var n="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof exports?e(exports):n&&(n.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return n.hljs}))}(function(e){function n(e){return e.replace(/&/g,"&").replace(//g,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0===t.index}function a(e){return k.test(e)}function i(e){var n,t,r,i,o=e.className+" ";if(o+=e.parentNode?e.parentNode.className:"",t=B.exec(o))return w(t[1])?t[1]:"no-highlight";for(o=o.split(/\s+/),n=0,r=o.length;r>n;n++)if(i=o[n],a(i)||w(i))return i}function o(e){var n,t={},r=Array.prototype.slice.call(arguments,1);for(n in e)t[n]=e[n];return r.forEach(function(e){for(n in e)t[n]=e[n]}),t}function u(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i=i.nextSibling)3===i.nodeType?a+=i.nodeValue.length:1===i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=r(i,a),t(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n}function c(e,r,a){function i(){return e.length&&r.length?e[0].offset!==r[0].offset?e[0].offset"}function u(e){s+=""}function c(e){("start"===e.event?o:u)(e.node)}for(var l=0,s="",f=[];e.length||r.length;){var g=i();if(s+=n(a.substring(l,g[0].offset)),l=g[0].offset,g===e){f.reverse().forEach(u);do c(g.splice(0,1)[0]),g=i();while(g===e&&g.length&&g[0].offset===l);f.reverse().forEach(o)}else"start"===g[0].event?f.push(g[0].node):f.pop(),c(g.splice(0,1)[0])}return s+n(a.substr(l))}function l(e){return e.v&&!e.cached_variants&&(e.cached_variants=e.v.map(function(n){return o(e,{v:null},n)})),e.cached_variants||e.eW&&[o(e)]||[e]}function s(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var o={},u=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");o[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?u("keyword",a.k):x(a.k).forEach(function(e){u(e,a.k[e])}),a.k=o}a.lR=t(a.l||/\w+/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),null==a.r&&(a.r=1),a.c||(a.c=[]),a.c=Array.prototype.concat.apply([],a.c.map(function(e){return l("self"===e?a:e)})),a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var c=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=c.length?t(c.join("|"),!0):{exec:function(){return null}}}}r(e)}function f(e,t,a,i){function o(e,n){var t,a;for(t=0,a=n.c.length;a>t;t++)if(r(n.c[t].bR,e))return n.c[t]}function u(e,n){if(r(e.eR,n)){for(;e.endsParent&&e.parent;)e=e.parent;return e}return e.eW?u(e.parent,n):void 0}function c(e,n){return!a&&r(n.iR,e)}function l(e,n){var t=N.cI?n[0].toLowerCase():n[0];return e.k.hasOwnProperty(t)&&e.k[t]}function p(e,n,t,r){var a=r?"":I.classPrefix,i='',i+n+o}function h(){var e,t,r,a;if(!E.k)return n(k);for(a="",t=0,E.lR.lastIndex=0,r=E.lR.exec(k);r;)a+=n(k.substring(t,r.index)),e=l(E,r),e?(B+=e[1],a+=p(e[0],n(r[0]))):a+=n(r[0]),t=E.lR.lastIndex,r=E.lR.exec(k);return a+n(k.substr(t))}function d(){var e="string"==typeof E.sL;if(e&&!y[E.sL])return n(k);var t=e?f(E.sL,k,!0,x[E.sL]):g(k,E.sL.length?E.sL:void 0);return E.r>0&&(B+=t.r),e&&(x[E.sL]=t.top),p(t.language,t.value,!1,!0)}function b(){L+=null!=E.sL?d():h(),k=""}function v(e){L+=e.cN?p(e.cN,"",!0):"",E=Object.create(e,{parent:{value:E}})}function m(e,n){if(k+=e,null==n)return b(),0;var t=o(n,E);if(t)return t.skip?k+=n:(t.eB&&(k+=n),b(),t.rB||t.eB||(k=n)),v(t,n),t.rB?0:n.length;var r=u(E,n);if(r){var a=E;a.skip?k+=n:(a.rE||a.eE||(k+=n),b(),a.eE&&(k=n));do E.cN&&(L+=C),E.skip||(B+=E.r),E=E.parent;while(E!==r.parent);return r.starts&&v(r.starts,""),a.rE?0:n.length}if(c(n,E))throw new Error('Illegal lexeme "'+n+'" for mode "'+(E.cN||"")+'"');return k+=n,n.length||1}var N=w(e);if(!N)throw new Error('Unknown language: "'+e+'"');s(N);var R,E=i||N,x={},L="";for(R=E;R!==N;R=R.parent)R.cN&&(L=p(R.cN,"",!0)+L);var k="",B=0;try{for(var M,j,O=0;;){if(E.t.lastIndex=O,M=E.t.exec(t),!M)break;j=m(t.substring(O,M.index),M[0]),O=M.index+j}for(m(t.substr(O)),R=E;R.parent;R=R.parent)R.cN&&(L+=C);return{r:B,value:L,language:e,top:E}}catch(T){if(T.message&&-1!==T.message.indexOf("Illegal"))return{r:0,value:n(t)};throw T}}function g(e,t){t=t||I.languages||x(y);var r={r:0,value:n(e)},a=r;return t.filter(w).forEach(function(n){var t=f(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}),a.language&&(r.second_best=a),r}function p(e){return I.tabReplace||I.useBR?e.replace(M,function(e,n){return I.useBR&&"\n"===e?"
":I.tabReplace?n.replace(/\t/g,I.tabReplace):""}):e}function h(e,n,t){var r=n?L[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function d(e){var n,t,r,o,l,s=i(e);a(s)||(I.useBR?(n=document.createElementNS("http://www.w3.org/1999/xhtml","div"),n.innerHTML=e.innerHTML.replace(/\n/g,"").replace(//g,"\n")):n=e,l=n.textContent,r=s?f(s,l,!0):g(l),t=u(n),t.length&&(o=document.createElementNS("http://www.w3.org/1999/xhtml","div"),o.innerHTML=r.value,r.value=c(t,u(o),l)),r.value=p(r.value),e.innerHTML=r.value,e.className=h(e.className,s,r.language),e.result={language:r.language,re:r.r},r.second_best&&(e.second_best={language:r.second_best.language,re:r.second_best.r}))}function b(e){I=o(I,e)}function v(){if(!v.called){v.called=!0;var e=document.querySelectorAll("pre code");E.forEach.call(e,d)}}function m(){addEventListener("DOMContentLoaded",v,!1),addEventListener("load",v,!1)}function N(n,t){var r=y[n]=t(e);r.aliases&&r.aliases.forEach(function(e){L[e]=n})}function R(){return x(y)}function w(e){return e=(e||"").toLowerCase(),y[e]||y[L[e]]}var E=[],x=Object.keys,y={},L={},k=/^(no-?highlight|plain|text)$/i,B=/\blang(?:uage)?-([\w-]+)\b/i,M=/((^(<[^>]+>|\t|)+|(?:\n)))/gm,C="",I={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0};return e.highlight=f,e.highlightAuto=g,e.fixMarkup=p,e.highlightBlock=d,e.configure=b,e.initHighlighting=v,e.initHighlightingOnLoad=m,e.registerLanguage=N,e.listLanguages=R,e.getLanguage=w,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},e.C=function(n,t,r){var a=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e.METHOD_GUARD={b:"\\.\\s*"+e.UIR,r:0},e});hljs.registerLanguage("sql",function(e){var t=e.C("--","$");return{cI:!0,i:/[<>{}*#]/,c:[{bK:"begin end start commit rollback savepoint lock alter create drop rename call delete do handler insert load replace select truncate update set show pragma grant merge describe use explain help declare prepare execute deallocate release unlock purge reset change stop analyze cache flush optimize repair kill install uninstall checksum restore check backup revoke comment",e:/;/,eW:!0,l:/[\w\.]+/,k:{keyword:"abort abs absolute acc acce accep accept access accessed accessible account acos action activate add addtime admin administer advanced advise aes_decrypt aes_encrypt after agent aggregate ali alia alias allocate allow alter always analyze ancillary and any anydata anydataset anyschema anytype apply archive archived archivelog are as asc ascii asin assembly assertion associate asynchronous at atan atn2 attr attri attrib attribu attribut attribute attributes audit authenticated authentication authid authors auto autoallocate autodblink autoextend automatic availability avg backup badfile basicfile before begin beginning benchmark between bfile bfile_base big bigfile bin binary_double binary_float binlog bit_and bit_count bit_length bit_or bit_xor bitmap blob_base block blocksize body both bound buffer_cache buffer_pool build bulk by byte byteordermark bytes cache caching call calling cancel capacity cascade cascaded case cast catalog category ceil ceiling chain change changed char_base char_length character_length characters characterset charindex charset charsetform charsetid check checksum checksum_agg child choose chr chunk class cleanup clear client clob clob_base clone close cluster_id cluster_probability cluster_set clustering coalesce coercibility col collate collation collect colu colum column column_value columns columns_updated comment commit compact compatibility compiled complete composite_limit compound compress compute concat concat_ws concurrent confirm conn connec connect connect_by_iscycle connect_by_isleaf connect_by_root connect_time connection consider consistent constant constraint constraints constructor container content contents context contributors controlfile conv convert convert_tz corr corr_k corr_s corresponding corruption cos cost count count_big counted covar_pop covar_samp cpu_per_call cpu_per_session crc32 create creation critical cross cube cume_dist curdate current current_date current_time current_timestamp current_user cursor curtime customdatum cycle data database databases datafile datafiles datalength date_add date_cache date_format date_sub dateadd datediff datefromparts datename datepart datetime2fromparts day day_to_second dayname dayofmonth dayofweek dayofyear days db_role_change dbtimezone ddl deallocate declare decode decompose decrement decrypt deduplicate def defa defau defaul default defaults deferred defi defin define degrees delayed delegate delete delete_all delimited demand dense_rank depth dequeue des_decrypt des_encrypt des_key_file desc descr descri describ describe descriptor deterministic diagnostics difference dimension direct_load directory disable disable_all disallow disassociate discardfile disconnect diskgroup distinct distinctrow distribute distributed div do document domain dotnet double downgrade drop dumpfile duplicate duration each edition editionable editions element ellipsis else elsif elt empty enable enable_all enclosed encode encoding encrypt end end-exec endian enforced engine engines enqueue enterprise entityescaping eomonth error errors escaped evalname evaluate event eventdata events except exception exceptions exchange exclude excluding execu execut execute exempt exists exit exp expire explain export export_set extended extent external external_1 external_2 externally extract failed failed_login_attempts failover failure far fast feature_set feature_value fetch field fields file file_name_convert filesystem_like_logging final finish first first_value fixed flash_cache flashback floor flush following follows for forall force form forma format found found_rows freelist freelists freepools fresh from from_base64 from_days ftp full function general generated get get_format get_lock getdate getutcdate global global_name globally go goto grant grants greatest group group_concat group_id grouping grouping_id groups gtid_subtract guarantee guard handler hash hashkeys having hea head headi headin heading heap help hex hierarchy high high_priority hosts hour http id ident_current ident_incr ident_seed identified identity idle_time if ifnull ignore iif ilike ilm immediate import in include including increment index indexes indexing indextype indicator indices inet6_aton inet6_ntoa inet_aton inet_ntoa infile initial initialized initially initrans inmemory inner innodb input insert install instance instantiable instr interface interleaved intersect into invalidate invisible is is_free_lock is_ipv4 is_ipv4_compat is_not is_not_null is_used_lock isdate isnull isolation iterate java join json json_exists keep keep_duplicates key keys kill language large last last_day last_insert_id last_value lax lcase lead leading least leaves left len lenght length less level levels library like like2 like4 likec limit lines link list listagg little ln load load_file lob lobs local localtime localtimestamp locate locator lock locked log log10 log2 logfile logfiles logging logical logical_reads_per_call logoff logon logs long loop low low_priority lower lpad lrtrim ltrim main make_set makedate maketime managed management manual map mapping mask master master_pos_wait match matched materialized max maxextents maximize maxinstances maxlen maxlogfiles maxloghistory maxlogmembers maxsize maxtrans md5 measures median medium member memcompress memory merge microsecond mid migration min minextents minimum mining minus minute minvalue missing mod mode model modification modify module monitoring month months mount move movement multiset mutex name name_const names nan national native natural nav nchar nclob nested never new newline next nextval no no_write_to_binlog noarchivelog noaudit nobadfile nocheck nocompress nocopy nocycle nodelay nodiscardfile noentityescaping noguarantee nokeep nologfile nomapping nomaxvalue nominimize nominvalue nomonitoring none noneditionable nonschema noorder nopr nopro noprom nopromp noprompt norely noresetlogs noreverse normal norowdependencies noschemacheck noswitch not nothing notice notrim novalidate now nowait nth_value nullif nulls num numb numbe nvarchar nvarchar2 object ocicoll ocidate ocidatetime ociduration ociinterval ociloblocator ocinumber ociref ocirefcursor ocirowid ocistring ocitype oct octet_length of off offline offset oid oidindex old on online only opaque open operations operator optimal optimize option optionally or oracle oracle_date oradata ord ordaudio orddicom orddoc order ordimage ordinality ordvideo organization orlany orlvary out outer outfile outline output over overflow overriding package pad parallel parallel_enable parameters parent parse partial partition partitions pascal passing password password_grace_time password_lock_time password_reuse_max password_reuse_time password_verify_function patch path patindex pctincrease pctthreshold pctused pctversion percent percent_rank percentile_cont percentile_disc performance period period_add period_diff permanent physical pi pipe pipelined pivot pluggable plugin policy position post_transaction pow power pragma prebuilt precedes preceding precision prediction prediction_cost prediction_details prediction_probability prediction_set prepare present preserve prior priority private private_sga privileges procedural procedure procedure_analyze processlist profiles project prompt protection public publishingservername purge quarter query quick quiesce quota quotename radians raise rand range rank raw read reads readsize rebuild record records recover recovery recursive recycle redo reduced ref reference referenced references referencing refresh regexp_like register regr_avgx regr_avgy regr_count regr_intercept regr_r2 regr_slope regr_sxx regr_sxy reject rekey relational relative relaylog release release_lock relies_on relocate rely rem remainder rename repair repeat replace replicate replication required reset resetlogs resize resource respect restore restricted result result_cache resumable resume retention return returning returns reuse reverse revoke right rlike role roles rollback rolling rollup round row row_count rowdependencies rowid rownum rows rtrim rules safe salt sample save savepoint sb1 sb2 sb4 scan schema schemacheck scn scope scroll sdo_georaster sdo_topo_geometry search sec_to_time second section securefile security seed segment select self sequence sequential serializable server servererror session session_user sessions_per_user set sets settings sha sha1 sha2 share shared shared_pool short show shrink shutdown si_averagecolor si_colorhistogram si_featurelist si_positionalcolor si_stillimage si_texture siblings sid sign sin size size_t sizes skip slave sleep smalldatetimefromparts smallfile snapshot some soname sort soundex source space sparse spfile split sql sql_big_result sql_buffer_result sql_cache sql_calc_found_rows sql_small_result sql_variant_property sqlcode sqldata sqlerror sqlname sqlstate sqrt square standalone standby start starting startup statement static statistics stats_binomial_test stats_crosstab stats_ks_test stats_mode stats_mw_test stats_one_way_anova stats_t_test_ stats_t_test_indep stats_t_test_one stats_t_test_paired stats_wsr_test status std stddev stddev_pop stddev_samp stdev stop storage store stored str str_to_date straight_join strcmp strict string struct stuff style subdate subpartition subpartitions substitutable substr substring subtime subtring_index subtype success sum suspend switch switchoffset switchover sync synchronous synonym sys sys_xmlagg sysasm sysaux sysdate sysdatetimeoffset sysdba sysoper system system_user sysutcdatetime table tables tablespace tan tdo template temporary terminated tertiary_weights test than then thread through tier ties time time_format time_zone timediff timefromparts timeout timestamp timestampadd timestampdiff timezone_abbr timezone_minute timezone_region to to_base64 to_date to_days to_seconds todatetimeoffset trace tracking transaction transactional translate translation treat trigger trigger_nestlevel triggers trim truncate try_cast try_convert try_parse type ub1 ub2 ub4 ucase unarchived unbounded uncompress under undo unhex unicode uniform uninstall union unique unix_timestamp unknown unlimited unlock unpivot unrecoverable unsafe unsigned until untrusted unusable unused update updated upgrade upped upper upsert url urowid usable usage use use_stored_outlines user user_data user_resources users using utc_date utc_timestamp uuid uuid_short validate validate_password_strength validation valist value values var var_samp varcharc vari varia variab variabl variable variables variance varp varraw varrawc varray verify version versions view virtual visible void wait wallet warning warnings week weekday weekofyear wellformed when whene whenev wheneve whenever where while whitespace with within without work wrapped xdb xml xmlagg xmlattributes xmlcast xmlcolattval xmlelement xmlexists xmlforest xmlindex xmlnamespaces xmlpi xmlquery xmlroot xmlschema xmlserialize xmltable xmltype xor year year_to_month years yearweek",literal:"true false null",built_in:"array bigint binary bit blob boolean char character date dec decimal float int int8 integer interval number numeric real record serial serial8 smallint text varchar varying void"},c:[{cN:"string",b:"'",e:"'",c:[e.BE,{b:"''"}]},{cN:"string",b:'"',e:'"',c:[e.BE,{b:'""'}]},{cN:"string",b:"`",e:"`",c:[e.BE]},e.CNM,e.CBCM,t]},e.CBCM,t]}});hljs.registerLanguage("json",function(e){var i={literal:"true false null"},n=[e.QSM,e.CNM],r={e:",",eW:!0,eE:!0,c:n,k:i},t={b:"{",e:"}",c:[{cN:"attr",b:/"/,e:/"/,c:[e.BE],i:"\\n"},e.inherit(r,{b:/:/})],i:"\\S"},c={b:"\\[",e:"\\]",c:[e.inherit(r)],i:"\\S"};return n.splice(n.length,0,t,c),{c:n,k:i,i:"\\S"}});hljs.registerLanguage("php",function(e){var c={b:"\\$+[a-zA-Z_-ÿ][a-zA-Z0-9_-ÿ]*"},i={cN:"meta",b:/<\?(php)?|\?>/},t={cN:"string",c:[e.BE,i],v:[{b:'b"',e:'"'},{b:"b'",e:"'"},e.inherit(e.ASM,{i:null}),e.inherit(e.QSM,{i:null})]},a={v:[e.BNM,e.CNM]};return{aliases:["php3","php4","php5","php6"],cI:!0,k:"and include_once list abstract global private echo interface as static endswitch array null if endwhile or const for endforeach self var while isset public protected exit foreach throw elseif include __FILE__ empty require_once do xor return parent clone use __CLASS__ __LINE__ else break print eval new catch __METHOD__ case exception default die require __FUNCTION__ enddeclare final try switch continue endfor endif declare unset true false trait goto instanceof insteadof __DIR__ __NAMESPACE__ yield finally",c:[e.HCM,e.C("//","$",{c:[i]}),e.C("/\\*","\\*/",{c:[{cN:"doctag",b:"@[A-Za-z]+"}]}),e.C("__halt_compiler.+?;",!1,{eW:!0,k:"__halt_compiler",l:e.UIR}),{cN:"string",b:/<<<['"]?\w+['"]?$/,e:/^\w+;?$/,c:[e.BE,{cN:"subst",v:[{b:/\$\w+/},{b:/\{\$/,e:/\}/}]}]},i,{cN:"keyword",b:/\$this\b/},c,{b:/(::|->)+[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*/},{cN:"function",bK:"function",e:/[;{]/,eE:!0,i:"\\$|\\[|%",c:[e.UTM,{cN:"params",b:"\\(",e:"\\)",c:["self",c,e.CBCM,t,a]}]},{cN:"class",bK:"class interface",e:"{",eE:!0,i:/[:\(\$"]/,c:[{bK:"extends implements"},e.UTM]},{bK:"namespace",e:";",i:/[\.']/,c:[e.UTM]},{bK:"use",e:";",c:[e.UTM]},{b:"=>"},t,a]}});hljs.registerLanguage("http",function(e){var t="HTTP/[0-9\\.]+";return{aliases:["https"],i:"\\S",c:[{b:"^"+t,e:"$",c:[{cN:"number",b:"\\b\\d{3}\\b"}]},{b:"^[A-Z]+ (.*?) "+t+"$",rB:!0,e:"$",c:[{cN:"string",b:" ",e:" ",eB:!0,eE:!0},{b:t},{cN:"keyword",b:"[A-Z]+"}]},{cN:"attribute",b:"^\\w",e:": ",eE:!0,i:"\\n|\\s|=",starts:{e:"$",r:0}},{b:"\\n\\n",starts:{sL:[],eW:!0}}]}});hljs.registerLanguage("ini",function(e){var b={cN:"string",c:[e.BE],v:[{b:"'''",e:"'''",r:10},{b:'"""',e:'"""',r:10},{b:'"',e:'"'},{b:"'",e:"'"}]};return{aliases:["toml"],cI:!0,i:/\S/,c:[e.C(";","$"),e.HCM,{cN:"section",b:/^\s*\[+/,e:/\]+/},{b:/^[a-z0-9\[\]_-]+\s*=\s*/,e:"$",rB:!0,c:[{cN:"attr",b:/[a-z0-9\[\]_-]+/},{b:/=/,eW:!0,r:0,c:[{cN:"literal",b:/\bon|off|true|false|yes|no\b/},{cN:"variable",v:[{b:/\$[\w\d"][\w\d_]*/},{b:/\$\{(.*?)}/}]},b,{cN:"number",b:/([\+\-]+)?[\d]+_[\d_]+/},e.NM]}]}]}});hljs.registerLanguage("javascript",function(e){var r="[A-Za-z$_][0-9A-Za-z$_]*",t={keyword:"in of if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const export super debugger as async await static import from as",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document Symbol Set Map WeakSet WeakMap Proxy Reflect Promise"},a={cN:"number",v:[{b:"\\b(0[bB][01]+)"},{b:"\\b(0[oO][0-7]+)"},{b:e.CNR}],r:0},n={cN:"subst",b:"\\$\\{",e:"\\}",k:t,c:[]},c={cN:"string",b:"`",e:"`",c:[e.BE,n]};n.c=[e.ASM,e.QSM,c,a,e.RM];var s=n.c.concat([e.CBCM,e.CLCM]);return{aliases:["js","jsx"],k:t,c:[{cN:"meta",r:10,b:/^\s*['"]use (strict|asm)['"]/},{cN:"meta",b:/^#!/,e:/$/},e.ASM,e.QSM,c,e.CLCM,e.CBCM,a,{b:/[{,]\s*/,r:0,c:[{b:r+"\\s*:",rB:!0,r:0,c:[{cN:"attr",b:r,r:0}]}]},{b:"("+e.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[e.CLCM,e.CBCM,e.RM,{cN:"function",b:"(\\(.*?\\)|"+r+")\\s*=>",rB:!0,e:"\\s*=>",c:[{cN:"params",v:[{b:r},{b:/\(\s*\)/},{b:/\(/,e:/\)/,eB:!0,eE:!0,k:t,c:s}]}]},{b://,sL:"xml",c:[{b:/<\w+\s*\/>/,skip:!0},{b:/<\w+/,e:/(\/\w+|\w+\/)>/,skip:!0,c:[{b:/<\w+\s*\/>/,skip:!0},"self"]}]}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[e.inherit(e.TM,{b:r}),{cN:"params",b:/\(/,e:/\)/,eB:!0,eE:!0,c:s}],i:/\[|%/},{b:/\$[(.]/},e.METHOD_GUARD,{cN:"class",bK:"class",e:/[{;=]/,eE:!0,i:/[:"\[\]]/,c:[{bK:"extends"},e.UTM]},{bK:"constructor",e:/\{/,eE:!0}],i:/#(?!!)/}});hljs.registerLanguage("xml",function(s){var e="[A-Za-z0-9\\._:-]+",t={eW:!0,i:/`]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist"],cI:!0,c:[{cN:"meta",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},s.C("",{r:10}),{b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{b:/<\?(php)?/,e:/\?>/,sL:"php",c:[{b:"/\\*",e:"\\*/",skip:!0}]},{cN:"tag",b:"|$)",e:">",k:{name:"style"},c:[t],starts:{e:"",rE:!0,sL:["css","xml"]}},{cN:"tag",b:"|$)",e:">",k:{name:"script"},c:[t],starts:{e:"",rE:!0,sL:["actionscript","javascript","handlebars","xml"]}},{cN:"meta",v:[{b:/<\?xml/,e:/\?>/,r:10},{b:/<\?\w+/,e:/\?>/}]},{cN:"tag",b:"",c:[{cN:"name",b:/[^\/><\s]+/,r:0},t]}]}});hljs.registerLanguage("markdown",function(e){return{aliases:["md","mkdown","mkd"],c:[{cN:"section",v:[{b:"^#{1,6}",e:"$"},{b:"^.+?\\n[=-]{2,}$"}]},{b:"<",e:">",sL:"xml",r:0},{cN:"bullet",b:"^([*+-]|(\\d+\\.))\\s+"},{cN:"strong",b:"[*_]{2}.+?[*_]{2}"},{cN:"emphasis",v:[{b:"\\*.+?\\*"},{b:"_.+?_",r:0}]},{cN:"quote",b:"^>\\s+",e:"$"},{cN:"code",v:[{b:"^```w*s*$",e:"^```s*$"},{b:"`.+?`"},{b:"^( {4}| )",e:"$",r:0}]},{b:"^[-\\*]{3,}",e:"$"},{b:"\\[.+?\\][\\(\\[].*?[\\)\\]]",rB:!0,c:[{cN:"string",b:"\\[",e:"\\]",eB:!0,rE:!0,r:0},{cN:"link",b:"\\]\\(",e:"\\)",eB:!0,eE:!0},{cN:"symbol",b:"\\]\\[",e:"\\]",eB:!0,eE:!0}],r:10},{b:/^\[[^\n]+\]:/,rB:!0,c:[{cN:"symbol",b:/\[/,e:/\]/,eB:!0,eE:!0},{cN:"link",b:/:\s*/,e:/$/,eB:!0}]}]}});hljs.registerLanguage("scss",function(e){var t="[a-zA-Z-][a-zA-Z0-9_-]*",i={cN:"variable",b:"(\\$"+t+")\\b"},r={cN:"number",b:"#[0-9A-Fa-f]+"};({cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:!0,i:"[^\\s]",starts:{eW:!0,eE:!0,c:[r,e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"meta",b:"!important"}]}});return{cI:!0,i:"[=/|']",c:[e.CLCM,e.CBCM,{cN:"selector-id",b:"\\#[A-Za-z0-9_-]+",r:0},{cN:"selector-class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"selector-attr",b:"\\[",e:"\\]",i:"$"},{cN:"selector-tag",b:"\\b(a|abbr|acronym|address|area|article|aside|audio|b|base|big|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|command|datalist|dd|del|details|dfn|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|frame|frameset|(h[1-6])|head|header|hgroup|hr|html|i|iframe|img|input|ins|kbd|keygen|label|legend|li|link|map|mark|meta|meter|nav|noframes|noscript|object|ol|optgroup|option|output|p|param|pre|progress|q|rp|rt|ruby|samp|script|section|select|small|span|strike|strong|style|sub|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|tt|ul|var|video)\\b",r:0},{b:":(visited|valid|root|right|required|read-write|read-only|out-range|optional|only-of-type|only-child|nth-of-type|nth-last-of-type|nth-last-child|nth-child|not|link|left|last-of-type|last-child|lang|invalid|indeterminate|in-range|hover|focus|first-of-type|first-line|first-letter|first-child|first|enabled|empty|disabled|default|checked|before|after|active)"},{b:"::(after|before|choices|first-letter|first-line|repeat-index|repeat-item|selection|value)"},i,{cN:"attribute",b:"\\b(z-index|word-wrap|word-spacing|word-break|width|widows|white-space|visibility|vertical-align|unicode-bidi|transition-timing-function|transition-property|transition-duration|transition-delay|transition|transform-style|transform-origin|transform|top|text-underline-position|text-transform|text-shadow|text-rendering|text-overflow|text-indent|text-decoration-style|text-decoration-line|text-decoration-color|text-decoration|text-align-last|text-align|tab-size|table-layout|right|resize|quotes|position|pointer-events|perspective-origin|perspective|page-break-inside|page-break-before|page-break-after|padding-top|padding-right|padding-left|padding-bottom|padding|overflow-y|overflow-x|overflow-wrap|overflow|outline-width|outline-style|outline-offset|outline-color|outline|orphans|order|opacity|object-position|object-fit|normal|none|nav-up|nav-right|nav-left|nav-index|nav-down|min-width|min-height|max-width|max-height|mask|marks|margin-top|margin-right|margin-left|margin-bottom|margin|list-style-type|list-style-position|list-style-image|list-style|line-height|letter-spacing|left|justify-content|initial|inherit|ime-mode|image-orientation|image-resolution|image-rendering|icon|hyphens|height|font-weight|font-variant-ligatures|font-variant|font-style|font-stretch|font-size-adjust|font-size|font-language-override|font-kerning|font-feature-settings|font-family|font|float|flex-wrap|flex-shrink|flex-grow|flex-flow|flex-direction|flex-basis|flex|filter|empty-cells|display|direction|cursor|counter-reset|counter-increment|content|column-width|column-span|column-rule-width|column-rule-style|column-rule-color|column-rule|column-gap|column-fill|column-count|columns|color|clip-path|clip|clear|caption-side|break-inside|break-before|break-after|box-sizing|box-shadow|box-decoration-break|bottom|border-width|border-top-width|border-top-style|border-top-right-radius|border-top-left-radius|border-top-color|border-top|border-style|border-spacing|border-right-width|border-right-style|border-right-color|border-right|border-radius|border-left-width|border-left-style|border-left-color|border-left|border-image-width|border-image-source|border-image-slice|border-image-repeat|border-image-outset|border-image|border-color|border-collapse|border-bottom-width|border-bottom-style|border-bottom-right-radius|border-bottom-left-radius|border-bottom-color|border-bottom|border|background-size|background-repeat|background-position|background-origin|background-image|background-color|background-clip|background-attachment|background-blend-mode|background|backface-visibility|auto|animation-timing-function|animation-play-state|animation-name|animation-iteration-count|animation-fill-mode|animation-duration|animation-direction|animation-delay|animation|align-self|align-items|align-content)\\b",i:"[^\\s]"},{b:"\\b(whitespace|wait|w-resize|visible|vertical-text|vertical-ideographic|uppercase|upper-roman|upper-alpha|underline|transparent|top|thin|thick|text|text-top|text-bottom|tb-rl|table-header-group|table-footer-group|sw-resize|super|strict|static|square|solid|small-caps|separate|se-resize|scroll|s-resize|rtl|row-resize|ridge|right|repeat|repeat-y|repeat-x|relative|progress|pointer|overline|outside|outset|oblique|nowrap|not-allowed|normal|none|nw-resize|no-repeat|no-drop|newspaper|ne-resize|n-resize|move|middle|medium|ltr|lr-tb|lowercase|lower-roman|lower-alpha|loose|list-item|line|line-through|line-edge|lighter|left|keep-all|justify|italic|inter-word|inter-ideograph|inside|inset|inline|inline-block|inherit|inactive|ideograph-space|ideograph-parenthesis|ideograph-numeric|ideograph-alpha|horizontal|hidden|help|hand|groove|fixed|ellipsis|e-resize|double|dotted|distribute|distribute-space|distribute-letter|distribute-all-lines|disc|disabled|default|decimal|dashed|crosshair|collapse|col-resize|circle|char|center|capitalize|break-word|break-all|bottom|both|bolder|bold|block|bidi-override|below|baseline|auto|always|all-scroll|absolute|table|table-cell)\\b"},{b:":",e:";",c:[i,r,e.CSSNM,e.QSM,e.ASM,{cN:"meta",b:"!important"}]},{b:"@",e:"[{;]",k:"mixin include extend for if else each while charset import debug media page content font-face namespace warn",c:[i,e.QSM,e.ASM,r,e.CSSNM,{b:"\\s[A-Za-z0-9_.-]+",r:0}]}]}});hljs.registerLanguage("apache",function(e){var r={cN:"number",b:"[\\$%]\\d+"};return{aliases:["apacheconf"],cI:!0,c:[e.HCM,{cN:"section",b:""},{cN:"attribute",b:/\w+/,r:0,k:{nomarkup:"order deny allow setenv rewriterule rewriteengine rewritecond documentroot sethandler errordocument loadmodule options header listen serverroot servername"},starts:{e:/$/,r:0,k:{literal:"on off all"},c:[{cN:"meta",b:"\\s\\[",e:"\\]$"},{cN:"variable",b:"[\\$%]\\{",e:"\\}",c:["self",r]},r,e.QSM]}}],i:/\S/}});hljs.registerLanguage("css",function(e){var c="[a-zA-Z-][a-zA-Z0-9_-]*",t={b:/[A-Z\_\.\-]+\s*:/,rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:/\S/,e:":",eE:!0,starts:{eW:!0,eE:!0,c:[{b:/[\w-]+\(/,rB:!0,c:[{cN:"built_in",b:/[\w-]+/},{b:/\(/,e:/\)/,c:[e.ASM,e.QSM]}]},e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"number",b:"#[0-9A-Fa-f]+"},{cN:"meta",b:"!important"}]}}]};return{cI:!0,i:/[=\/|'\$]/,c:[e.CBCM,{cN:"selector-id",b:/#[A-Za-z0-9_-]+/},{cN:"selector-class",b:/\.[A-Za-z0-9_-]+/},{cN:"selector-attr",b:/\[/,e:/\]/,i:"$"},{cN:"selector-pseudo",b:/:(:)?[a-zA-Z0-9\_\-\+\(\)"'.]+/},{b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{b:"@",e:"[{;]",i:/:/,c:[{cN:"keyword",b:/\w+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[e.ASM,e.QSM,e.CSSNM]}]},{cN:"selector-tag",b:c,r:0},{b:"{",e:"}",i:/\S/,c:[e.CBCM,t]}]}}); \ No newline at end of file diff --git a/_app/assets/js/more-content.js b/_app/assets/js/more-content.js new file mode 100644 index 0000000..d99f179 --- /dev/null +++ b/_app/assets/js/more-content.js @@ -0,0 +1,29 @@ +var moreContentToggle = document.getElementById('more-content'); +var content = document.querySelector('.article-text .hidden'); +var stateChanged = false; + +moreContentToggle.addEventListener('click', function (event) { + event.preventDefault(); + + stateChanged = false; + + toggleMoreContent(); + changeContentToggle(); +}); + +function toggleMoreContent() { + content.classList.toggle('show'); + + if (moreContentToggle.innerHTML == 'Einklappen') { + moreContentToggle.innerHTML = 'Mehr lesen'; + stateChanged = true; + } +} + +function changeContentToggle() { + moreContentToggle.classList.toggle('collapse'); + + if (moreContentToggle.innerHTML == 'Mehr lesen' && !stateChanged) { + moreContentToggle.innerHTML = 'Einklappen'; + } +} diff --git a/_app/assets/js/nav.js b/_app/assets/js/nav.js new file mode 100644 index 0000000..949ea1d --- /dev/null +++ b/_app/assets/js/nav.js @@ -0,0 +1,13 @@ +var button = document.getElementById('hamburger-button'); +var nav = document.getElementById('nav'); +var links = document.querySelectorAll("nav li a"); + +button.addEventListener('click', toggleNav); + +for (var i = 0; i < links.length; i++) { + links[i].addEventListener("click", toggleNav); +} + +function toggleNav() { + nav.classList.toggle('open'); +} diff --git a/_app/assets/js/parallax.js b/_app/assets/js/parallax.js new file mode 100644 index 0000000..42e42e9 --- /dev/null +++ b/_app/assets/js/parallax.js @@ -0,0 +1,4 @@ +// Welcome Section Parallax Effect // +if ( matchMedia("only screen and (min-width: 1024px)").matches ) { + var rellax = new Rellax('.rellax'); +} diff --git a/_app/assets/js/rellax.js b/_app/assets/js/rellax.js new file mode 100644 index 0000000..b88cffd --- /dev/null +++ b/_app/assets/js/rellax.js @@ -0,0 +1,256 @@ + +// ------------------------------------------ +// Rellax.js - v1.0.0 +// Buttery smooth parallax library +// Copyright (c) 2016 Moe Amaya (@moeamaya) +// MIT license +// +// Thanks to Paraxify.js and Jaime Cabllero +// for parallax concepts +// ------------------------------------------ + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define([], factory); + } else if (typeof module === 'object' && module.exports) { + // Node. Does not work with strict CommonJS, but + // only CommonJS-like environments that support module.exports, + // like Node. + module.exports = factory(); + } else { + // Browser globals (root is window) + root.Rellax = factory(); + } +}(this, function () { + var Rellax = function(el, options){ + "use strict"; + + var self = Object.create(Rellax.prototype); + + var posY = 0; // set it to -1 so the animate function gets called at least once + var screenY = 0; + var blocks = []; + var pause = false; + + // check what requestAnimationFrame to use, and if + // it's not supported, use the onscroll event + var loop = window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.msRequestAnimationFrame || + window.oRequestAnimationFrame || + function(callback){ setTimeout(callback, 1000 / 60); }; + + // check which transform property to use + var transformProp = window.transformProp || (function(){ + var testEl = document.createElement('div'); + if (testEl.style.transform == null) { + var vendors = ['Webkit', 'Moz', 'ms']; + for (var vendor in vendors) { + if (testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) { + return vendors[vendor] + 'Transform'; + } + } + } + return 'transform'; + })(); + + // limit the given number in the range [min, max] + var clamp = function(num, min, max) { + return (num <= min) ? min : ((num >= max) ? max : num); + }; + + // Default Settings + self.options = { + speed: -2, + center: false, + round: true, + }; + + // User defined options (might have more in the future) + if (options){ + Object.keys(options).forEach(function(key){ + self.options[key] = options[key]; + }); + } + + // If some clown tries to crank speed, limit them to +-10 + self.options.speed = clamp(self.options.speed, -10, 10); + + // By default, rellax class + if (!el) { + el = '.rellax'; + } + + var elements = document.querySelectorAll(el); + + // Now query selector + if (elements.length > 0) { + self.elems = elements; + } + + // The elements don't exist + else { + throw new Error("The elements you're trying to select don't exist."); + } + + + // Let's kick this script off + // Build array for cached element values + // Bind scroll and resize to animate method + var init = function() { + screenY = window.innerHeight; + setPosition(); + + // Get and cache initial position of all elements + for (var i = 0; i < self.elems.length; i++){ + var block = createBlock(self.elems[i]); + blocks.push(block); + } + + window.addEventListener('resize', function(){ + animate(); + }); + + // Start the loop + update(); + + // The loop does nothing if the scrollPosition did not change + // so call animate to make sure every element has their transforms + animate(); + }; + + + // We want to cache the parallax blocks' + // values: base, top, height, speed + // el: is dom object, return: el cache values + var createBlock = function(el) { + var dataPercentage = el.dataset.rellaxPercentage; + var dataSpeed = el.dataset.rellaxSpeed; + + // initializing at scrollY = 0 (top of browser) + // ensures elements are positioned based on HTML layout. + // + // If the element has the percentage attribute, the posY needs to be + // the current scroll position's value, so that the elements are still positioned based on HTML layout + var posY = dataPercentage || self.options.center ? (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop) : 0; + + var blockTop = posY + el.getBoundingClientRect().top; + var blockHeight = el.clientHeight || el.offsetHeight || el.scrollHeight; + + // apparently parallax equation everyone uses + var percentage = dataPercentage ? dataPercentage : (posY - blockTop + screenY) / (blockHeight + screenY); + if(self.options.center){ percentage = 0.5; } + + // Optional individual block speed as data attr, otherwise global speed + // Check if has percentage attr, and limit speed to 5, else limit it to 10 + var speed = dataSpeed ? clamp(dataSpeed, -10, 10) : self.options.speed; + if (dataPercentage || self.options.center) { + speed = clamp(dataSpeed || self.options.speed, -5, 5); + } + + var base = updatePosition(percentage, speed); + + // ~~Store non-translate3d transforms~~ + // Store inline styles and extract transforms + var style = el.style.cssText; + var transform = ''; + + // Check if there's an inline styled transform + if (style.indexOf('transform') >= 0) { + // Get the index of the transform + var index = style.indexOf('transform'); + + // Trim the style to the transform point and get the following semi-colon index + var trimmedStyle = style.slice(index); + var delimiter = trimmedStyle.indexOf(';'); + + // Remove "transform" string and save the attribute + if (delimiter) { + transform = " " + trimmedStyle.slice(11, delimiter).replace(/\s/g,''); + } else { + transform = " " + trimmedStyle.slice(11).replace(/\s/g,''); + } + } + + return { + base: base, + top: blockTop, + height: blockHeight, + speed: speed, + style: style, + transform: transform + }; + }; + + // set scroll position (posY) + // side effect method is not ideal, but okay for now + // returns true if the scroll changed, false if nothing happened + var setPosition = function() { + var oldY = posY; + + if (window.pageYOffset !== undefined) { + posY = window.pageYOffset; + } else { + posY = (document.documentElement || document.body.parentNode || document.body).scrollTop; + } + + if (oldY != posY) { + // scroll changed, return true + return true; + } + + // scroll did not change + return false; + }; + + + // Ahh a pure function, gets new transform value + // based on scrollPostion and speed + // Allow for decimal pixel values + var updatePosition = function(percentage, speed) { + var value = (speed * (100 * (1 - percentage))); + return self.options.round ? Math.round(value * 10) / 10 : value; + }; + + + // + var update = function() { + if (setPosition() && pause === false) { + animate(); + } + + // loop again + loop(update); + }; + + // Transform3d on parallax element + var animate = function() { + for (var i = 0; i < self.elems.length; i++){ + var percentage = ((posY - blocks[i].top + screenY) / (blocks[i].height + screenY)); + + // Subtracting initialize value, so element stays in same spot as HTML + var position = updatePosition(percentage, blocks[i].speed) - blocks[i].base; + + // Move that element + // (Set the new translation and append initial inline transforms.) + var translate = 'translate3d(0,' + position + 'px,0) ' + blocks[i].transform; + self.elems[i].style[transformProp] = translate; + } + }; + + + self.destroy = function() { + for (var i = 0; i < self.elems.length; i++){ + self.elems[i].style.cssText = blocks[i].style; + } + pause = true; + }; + + + init(); + return self; + }; + return Rellax; +})); diff --git a/_app/assets/js/smooth-scroll.js b/_app/assets/js/smooth-scroll.js new file mode 100644 index 0000000..6464e00 --- /dev/null +++ b/_app/assets/js/smooth-scroll.js @@ -0,0 +1,75 @@ +/* + * - autoSmoothScroll - + * Licence MIT + * Written by Gabriel Delépine + * Current version 1.3.1 (2014-10-22) + * Previous version 1.3.0 (2014-07-23) + * Previous version 1.2.0 (2014-02-13) + * Previous version 1.0.1 (2013-11-08) + * Previous version 1.0.0 (2013-10-27) + * Requirement : None, it is a framework-free function (i.e. you do not need to include any other file in your page such as jQuery) + * Fork-me on github : https://github.com/Yappli/smooth-scroll + * */ +(function(window, undefined) // Code in a function to create an isolate scope +{ + 'use strict'; + var height_fixed_header = 0, // For layout with header with position:fixed. Write here the height of your header for your anchor don't be hiden behind + speed = 500, + moving_frequency = 15, // Affects performance ! High number makes scroll more smooth + links = document.getElementsByTagName('a'), + href; + + for(var i = 0; i < links.length; i++) + { + href = (links[i].attributes.href === undefined) ? null : links[i].attributes.href.nodeValue.toString(); + if(href !== null && href.length > 1 && href.indexOf('#') != -1) // href.substr(0, 1) == '#' + { + links[i].onclick = function() + { + var element, + href = this.attributes.href.nodeValue.toString(), + url = href.substr(0, href.indexOf('#')), + id = href.substr(href.indexOf('#') + 1); + if (element = document.getElementById(id)) + { + + var hop_count = (speed - (speed % moving_frequency)) / moving_frequency, // Always make an integer + getScrollTopDocumentAtBegin = getScrollTopDocument(), + gap = (getScrollTopElement(element) - getScrollTopDocumentAtBegin) / hop_count; + + if (window.history && typeof window.history.pushState == 'function') + window.history.pushState({}, undefined, url + '#' + id); // Change URL for modern browser + + for (var i = 1; i <= hop_count; i++) + { + (function() + { + var hop_top_position = gap * i; + setTimeout(function(){ window.scrollTo(0, hop_top_position + getScrollTopDocumentAtBegin); }, moving_frequency * i); + })(); + } + + return false; + } + }; + } + } + + var getScrollTopElement = function(e) + { + var top = height_fixed_header * -1; + + while (e.offsetParent != undefined && e.offsetParent != null) + { + top += e.offsetTop + (e.clientTop != null ? e.clientTop : 0); + e = e.offsetParent; + } + + return top; + }; + + var getScrollTopDocument = function() + { + return window.pageYOffset !== undefined ? window.pageYOffset : document.documentElement.scrollTop !== undefined ? document.documentElement.scrollTop : document.body.scrollTop; + }; +})(window); diff --git a/_app/assets/sass/_style.sass b/_app/assets/sass/_style.sass index 62779c3..efde8bf 100644 --- a/_app/assets/sass/_style.sass +++ b/_app/assets/sass/_style.sass @@ -1,27 +1,114 @@ ///// Helpers ///// // Vars // @import 'helpers/_vars' +// Mixins // @import 'helpers/_mixins' ///// Base ///// -// Base // -@import 'base/_base.sass' +// Normalize.css // +@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css' +// Own Base Styles // +@import 'base/_base' + +///// Modules ///// +// Logo // +@import 'modules/_logo' +// Navigation // +@import 'modules/_navigation' +// Call To Action Button // +@import 'modules/_cta' +// Section Heading // +@import 'modules/_section-heading' +// Skill // +@import 'modules/_skill.sass' +// Article Preview // +@import 'modules/_article-preview' +// Portfolio Card // +@import 'modules/_portfolio-card' +// Tag // +@import 'modules/_tag' +// Back Button // +@import 'modules/_back-button' +// Article Header // +@import 'modules/_article-header' +// Article Content Image // +@import 'modules/_article-content-image' +// Blockquote // +@import 'modules/_blockquote' +// Tweet // +@import 'modules/_tweet' +// Table // +@import 'modules/_table' +// Code // +@import 'modules/_code' +// Pen // +@import 'modules/_pen' +// Gist // +@import 'modules/_gist' ///// Partials ///// -// Footer +// Header // +@import 'partials/_header' +// Footer // @import 'partials/_footer' -///// Standard Styles ///// -.wrapper - overflow: hidden - min-height: 100% - max-width: 1480px - margin: 0 auto - padding-top: 4% - +///// Standard/Global Styles ///// main - margin-top: 6% - font-size: 1.5rem + padding: 0 5% 6% 5% + +article p + margin-bottom: 4% + +article p:last-child + margin-bottom: 0 + +.article + .article-text + max-width: 1200px + margin: auto + + ul, ol + margin-bottom: 4% + + *:last-child + margin-bottom: 0 + + ul, ol + list-style-position: inside + + li + padding: 1% 0 + + ul, ol + margin-bottom: 0 + padding: 0 + padding-left: 3% + + blockquote p + margin-bottom: 0 + + h3, h4, h5, h6 + font: + size: 1.4rem + family: $secondary-font + margin-bottom: 1% + color: $blue + + h4 + font-size: 1.2rem + margin-bottom: 0.5% + + h5 + font-size: 1rem + margin-bottom: 0.25% + + h6 + font-size: 1rem + margin-bottom: 0.125% + color: $main-font-color + + .margin-top + margin-top: 4% ///// Media Queries ///// @import 'media/_media_style' diff --git a/_app/assets/sass/all.sass b/_app/assets/sass/all.sass index 31d4c9e..a58dc5c 100644 --- a/_app/assets/sass/all.sass +++ b/_app/assets/sass/all.sass @@ -4,19 +4,53 @@ @import 'helpers/_mixins' ///// Base ///// -// Base // +// Normalize.css // +@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css' +// Own Base Styles // @import 'base/_base.sass' ///// Modules ///// -// Back-Button // +// Logo // +@import 'modules/_logo' +// Navigation // +@import 'modules/_navigation' +// Call To Action Button // +@import 'modules/_cta' +// Section Heading // +@import 'modules/_section-heading' +// Skill // +@import 'modules/_skill.sass' +// Article Preview // +@import 'modules/_article-preview' +// Portfolio Card // +@import 'modules/_portfolio-card' +// Tag // +@import 'modules/_tag' +// Back Button // @import 'modules/_back-button' +// Article Header // +@import 'modules/_article-header' +// Article Content Image // +@import 'modules/_article-content-image' +// Blockquote // +@import 'modules/_blockquote' +// Tweet // +@import 'modules/_tweet' +// Table // +@import 'modules/_table' +// Code // +@import 'modules/_code' +// Pen // +@import 'modules/_pen' +// Gist // +@import 'modules/_gist' ///// Partials ///// -// Footer +// Header // +@import 'partials/_header' +// Footer // @import 'partials/_footer' ///// Pages ///// -// Coming Soon -@import 'pages/coming-soon' -@import 'pages/contact' -@import 'pages/legal' +// Index Page // +@import 'pages/index' diff --git a/_app/assets/sass/base/_base.sass b/_app/assets/sass/base/_base.sass index 8b9f751..15655dd 100644 --- a/_app/assets/sass/base/_base.sass +++ b/_app/assets/sass/base/_base.sass @@ -5,16 +5,14 @@ html, body height: 100% - font-size: 100% + font-size: 20px font-family: $main-font - line-height: 1.3 + line-height: 1.4 + color: $main-font-color body background-color: $white-gray -header, main, footer, section, nav - display: block - .clearfix::after content: "." display: block @@ -34,4 +32,4 @@ img a text-decoration: none color: $orange - transition: all .3s linear + transition: all .2s linear diff --git a/_app/assets/sass/helpers/_vars.sass b/_app/assets/sass/helpers/_vars.sass index 2e95ca9..8545c39 100644 --- a/_app/assets/sass/helpers/_vars.sass +++ b/_app/assets/sass/helpers/_vars.sass @@ -4,6 +4,12 @@ $blue: #3F5765 $light-blue: #BDD4DE $white-gray: #EFEFEF $orange: #FF530D +$main-font-color: #828282 + +// Social Colors // +$twitter-color: #1DA1F2 +$github-color: #24292e +$codepen-color: black // Fonts // $main-font: Roboto, sans-serif diff --git a/_app/assets/sass/media/_media_article-content-image.sass b/_app/assets/sass/media/_media_article-content-image.sass new file mode 100644 index 0000000..6c2a93a --- /dev/null +++ b/_app/assets/sass/media/_media_article-content-image.sass @@ -0,0 +1,34 @@ +@media only screen and (max-width: 1024px) + .article-content-image + margin: 6% 0 + +@media only screen and (max-width: 700px) + .article-content-image + margin: 7% 0 + +@media only screen and (max-width: 600px) + .article-content-image .article-content-image-info + flex-direction: column + + .article-content-image-source + text-align: right + margin-top: 3% + +@media only screen and (max-width: 500px) + .article-content-image + margin: 8% 0 + + figcaption.article-content-image-info + .article-content-image-description, p + padding: 0 + +@media only screen and (max-width: 400px) + .article-content-image + margin: 9% 0 + +@media only screen and (max-width: 360px) + .article-content-image .article-content-image-info + padding: 5% + + .article-content-image-source + margin-top: 5% diff --git a/_app/assets/sass/media/_media_article-header.sass b/_app/assets/sass/media/_media_article-header.sass new file mode 100644 index 0000000..5625779 --- /dev/null +++ b/_app/assets/sass/media/_media_article-header.sass @@ -0,0 +1,32 @@ +@media only screen and (max-width: 1024px) + .article-header + margin-bottom: 6% + + .article-heading + margin: 0 0 6% 0 + + .article-image + background: + attachment: scroll + position: center center + +@media only screen and (max-width: 700px) + .article-header + margin-bottom: 7% + + .article-heading + margin: 0 0 7% 0 + +@media only screen and (max-width: 500px) + .article-header + margin-bottom: 8% + + .article-heading + margin: 0 0 8% 0 + +@media only screen and (max-width: 400px) + .article-header + margin-bottom: 9% + + .article-heading + margin: 0 0 9% 0 diff --git a/_app/assets/sass/media/_media_article-preview.sass b/_app/assets/sass/media/_media_article-preview.sass new file mode 100644 index 0000000..22e5676 --- /dev/null +++ b/_app/assets/sass/media/_media_article-preview.sass @@ -0,0 +1,53 @@ +@media only screen and (max-width: 1700px) + .article-preview.article-preview--tag + width: 45% + +@media only screen and (max-width: 1600px) + .article-preview + width: 100% + margin-bottom: 5% + + &:last-child + margin-bottom: 0 + + &.article-preview--all, &.article-preview--all:nth-last-child(2), &.article-preview--all:nth-last-child(2):nth-child(even), &.article-preview--tag + margin-bottom: 6% + + &.article-preview--tag + width: 80% + +@media only screen and (max-width: 1024px) + .article-preview + margin-bottom: 6% + + &.article-preview--all, &.article-preview--all:nth-last-child(2), &.article-preview--all:nth-last-child(2):nth-child(even), &.article-preview--tag + margin-bottom: 7% + + &.article-preview--tag + width: 100% + +@media only screen and (max-width: 700px) + .article-preview + margin-bottom: 7% + + &.article-preview--all, &.article-preview--all:nth-last-child(2), &.article-preview--all:nth-last-child(2):nth-child(even), &.article-preview--tag + margin-bottom: 8% + +@media only screen and (max-width: 500px) + .article-preview + margin-bottom: 8% + + &.article-preview--all, &.article-preview--all:nth-last-child(2), &.article-preview--all:nth-last-child(2):nth-child(even), &.article-preview--tag + margin-bottom: 9% + +@media only screen and (max-width: 400px) + .article-preview + margin-bottom: 9% + + &.article-preview--all, &.article-preview--all:nth-last-child(2), &.article-preview--all:nth-last-child(2):nth-child(even), &.article-preview--tag + margin-bottom: 10% + +@media only screen and (max-width: 360px) + .article-preview + .article-preview-text, footer + padding: 5% diff --git a/_app/assets/sass/media/_media_back-button.sass b/_app/assets/sass/media/_media_back-button.sass new file mode 100644 index 0000000..5706624 --- /dev/null +++ b/_app/assets/sass/media/_media_back-button.sass @@ -0,0 +1,20 @@ +@media only screen and (max-width: 1024px) + .back-container + margin: 3% 0 7% 0 + +@media only screen and (max-width: 700px) + .back-container + margin: 4% 0 8% 0 + +@media only screen and (max-width: 500px) + .back-container + padding: 0 3% + margin: 5% 0 9% 0 + +@media only screen and (max-width: 450px) + .back-container + margin: 6% 0 10% 0 + +@media only screen and (max-width: 360px) + .back-container + padding: 0 5% diff --git a/_app/assets/sass/media/_media_blockquote.sass b/_app/assets/sass/media/_media_blockquote.sass new file mode 100644 index 0000000..aedf4e7 --- /dev/null +++ b/_app/assets/sass/media/_media_blockquote.sass @@ -0,0 +1,54 @@ +@media only screen and (max-width: 1280px) + blockquote p::before + width: 12% + +@media only screen and (max-width: 1150px) + blockquote p::before + width: 15% + +@media only screen and (max-width: 1000px) + blockquote p::before + width: 20% + +@media only screen and (max-width: 900px) + blockquote + position: relative + padding: 4% + + &::before + content: "\201C" + font: + size: 4rem + family: $secondary-font + weight: bold + style: italic + line-height: 1em + position: absolute + top: -0.2em + left: -0.2em + + p::before + display: none + +@media only screen and (max-width: 650px) + blockquote + padding: 5% + +@media only screen and (max-width: 500px) + blockquote + margin-bottom: 5% + + cite + margin-top: 2% + +@media only screen and (max-width: 400px) + blockquote + margin-bottom: 8% + padding: 6% + + cite + margin-top: 3% + +@media only screen and (max-width: 360px) + blockquote + padding: 7% diff --git a/_app/assets/sass/media/_media_blog.sass b/_app/assets/sass/media/_media_blog.sass new file mode 100644 index 0000000..8a826cb --- /dev/null +++ b/_app/assets/sass/media/_media_blog.sass @@ -0,0 +1,23 @@ +@media only screen and (max-width: 1600px) + .article-previews + flex-direction: column + +@media only screen and (max-width: 1024px) + main + padding: 0 14% 7% 14% + +@media only screen and (max-width: 700px) + main + padding: 0 10% 8% 10% + +@media only screen and (max-width: 600px) + main + padding: 0 7% 8% 7% + +@media only screen and (max-width: 500px) + main + padding: 0 0 9% 0 + +@media only screen and (max-width: 400px) + main + padding: 0 0 10% 0 diff --git a/_app/assets/sass/media/_media_code.sass b/_app/assets/sass/media/_media_code.sass new file mode 100644 index 0000000..6120a24 --- /dev/null +++ b/_app/assets/sass/media/_media_code.sass @@ -0,0 +1,7 @@ +@media only screen and (max-width: 500px) + .code + margin-bottom: 5% + +@media only screen and (max-width: 400px) + .code + margin-bottom: 8% diff --git a/_app/assets/sass/media/_media_coming-soon.sass b/_app/assets/sass/media/_media_coming-soon.sass deleted file mode 100644 index 35203bc..0000000 --- a/_app/assets/sass/media/_media_coming-soon.sass +++ /dev/null @@ -1,45 +0,0 @@ -@media only screen and (max-width: 1600px) - header - width: 40% - -@media only screen and (max-width: 1475px) - header - width: 45% - -@media only screen and (max-width: 1250px) - header - width: 50% - -@media only screen and (max-width: 1170px) - header - width: 55% - -@media only screen and (max-width: 915px) - header - width: 60% - -@media only screen and (max-width: 835px) - header - width: 70% - -@media only screen and (max-width: 775px) - header - width: 80% - -@media only screen and (max-width: 610px) - header - width: 85% - -@media only screen and (max-width: 595px) - header - width: 90% - - .logo - width: 120px - -@media only screen and (max-width: 535px) - header - width: 100% - - .logo - width: 100px diff --git a/_app/assets/sass/media/_media_contact.sass b/_app/assets/sass/media/_media_contact.sass index 857223f..3bf04b9 100644 --- a/_app/assets/sass/media/_media_contact.sass +++ b/_app/assets/sass/media/_media_contact.sass @@ -1,112 +1,125 @@ -@media only screen and (max-width: 1600px) +@media only screen and (max-width: 1700px) form input[type="submit"] - width: 30% + width: 28.5% -@media only screen and (max-width: 1225px) - form - input, textarea - padding: 1.75% - - input[type="submit"] - width: 40% - padding: 2% - margin: 3% auto +@media only screen and (max-width: 1500px) + .text, .error + text-align: left -@media only screen and (max-width: 815px) - form - .field_wrap - flex-direction: column + form input[type="submit"] + width: 31% - &.two-col input, textarea - width: 100% - margin-bottom: 2% +@media only screen and (max-width: 1370px) + form input[type="submit"] + width: 35% - &:last-child - margin-bottom: 0 +@media only screen and (max-width: 1220px) + form input[type="submit"] + width: 40% - input, textarea - padding: 2.25% +@media only screen and (max-width: 1080px) + form input[type="submit"] + width: 42% - input[type="submit"] - width: 50% - margin: 4% auto +@media only screen and (max-width: 1024px) + .error + margin-top: 5% -@media only screen and (max-width: 615px) form - .field_wrap - margin-bottom: 3.5% + margin-top: 5% - .field_wrap.two-col input, .field_wrap.two-col textarea - margin-bottom: 3.5% + label, input, textarea + padding: 2% - input, textarea - padding: 2.75% + label + padding-left: 0 + margin-top: 2.5% input[type="submit"] - width: 60% - margin: 5% auto + width: 49% + margin: 4.5% auto auto auto -@media only screen and (max-width: 500px) - html, body - font-size: 100% +@media only screen and (max-width: 900px) + form input[type="submit"] + width: 55% + +@media only screen and (max-width: 800px) + form input[type="submit"] + width: 60% + +@media only screen and (max-width: 730px) + form input[type="submit"] + width: 65% - main, form input[type="submit"] - font-size: 1.1rem +@media only screen and (max-width: 700px) + .error + margin-top: 6% form - .field_wrap - margin-bottom: 4% - - .field_wrap.two-col input, .field_wrap.two-col textarea - margin-bottom: 4% + margin-top: 6% - input, textarea + label, input, textarea padding: 3% + label + padding-left: 0 + margin-top: 3.5% + input[type="submit"] - width: 65% - margin: 6% auto + width: 72% + margin: 5.5% auto auto auto - footer - p - font-size: 1.6rem +@media only screen and (max-width: 630px) + form input[type="submit"] + width: 80% - .other a - font-size: 1.2rem +@media only screen and (max-width: 570px) + form input[type="submit"] + width: 90.5% - .legal - p, p small, p small a - font-size: 0.9rem +@media only screen and (max-width: 500px) + .text, .error + padding: 0 3% -@media only screen and (max-width: 400px) - html, body - font-size: 100% + .error + margin-top: 7% form - .field_wrap - margin-bottom: 5% + margin-top: 7% - .field_wrap.two-col input, .field_wrap.two-col textarea - margin-bottom: 5% + label, input, textarea + padding: 4% - input, textarea - padding: 3.5% + label + margin-top: 4.5% input[type="submit"] - width: 80% - margin: 7% auto + width: 100% + margin: 6.5% auto auto auto + border-radius: 0 + box-shadow: 5px 5px 7.5px rgba(0,0,0,0.3) + + &:hover + box-shadow: 10px 10px 15px rgba(0,0,0,0.1) + transform: scale(1) translateY(0) + background-color: $orange - footer - p - font-size: 1.5rem +@media only screen and (max-width: 450px) + .error + margin-top: 8% - .other a - font-size: 1.15rem + form + margin-top: 8% - .legal - p, p small, p small a - font-size: 0.88rem + label, input, textarea + padding: 5% -@media only screen and (max-width: 350px) - form input[type="submit"] - width: 90% + label + margin-top: 5.5% + + input[type="submit"] + margin: 7.5% auto auto auto + +@media only screen and (max-width: 360px) + .text, .error + padding: 0 5% diff --git a/_app/assets/sass/media/_media_cta.sass b/_app/assets/sass/media/_media_cta.sass new file mode 100644 index 0000000..9309583 --- /dev/null +++ b/_app/assets/sass/media/_media_cta.sass @@ -0,0 +1,178 @@ +@media only screen and (max-width: 1800px) + .cta.cta--learn-more + width: 30% + +@media only screen and (max-width: 1700px) + .cta + width: 25% + + &.cta--large, &.cta--read-more + width: 28% + + &.cta--learn-more + width: 32% + + &.cta--small + width: 20% + +@media only screen and (max-width: 1600px) + .cta + &.cta--read-more + width: 18% + + &.cta--learn-more + width: 34% + +@media only screen and (max-width: 1450px) + .cta.cta--learn-more + width: 36% + +@media only screen and (max-width: 1400px) + .cta + width: 30% + + &.cta--large + width: 33% + + &.cta--learn-more + width: 18% + +@media only screen and (max-width: 1300px) + .cta.cta--learn-more + width: 20% + +@media only screen and (max-width: 1200px) + .cta + width: 35% + + &.cta--large + width: 39% + + &.cta--learn-more + width: 22% + +@media only screen and (max-width: 1024px) + .cta + width: 40% + margin: 6% auto auto auto + + &.cta--large + width: 43% + + &.cta--read-more + width: 22% + + &.cta--learn-more + width: 24% + +@media only screen and (max-width: 950px) + .cta + &.cta--large + width: 50% + + &.cta--learn-more + width: 27% + +@media only screen and (max-width: 860px) + .cta + width: 50% + + &.cta--large + width: 53% + + &.cta--read-more + width: 25% + + &.cta--learn-more + width: 30% + + &.cta--small + width: 22% + +@media only screen and (max-width: 790px) + .cta + &.cta--large + width: 58% + + &.cta--read-more + width: 30% + + &.cta--learn-more + width: 33% + + &.cta--small + width: 24% + +@media only screen and (max-width: 700px) + .cta + width: 60% + margin: 7% auto auto auto + + &.cta--large + width: 65% + +@media only screen and (max-width: 650px) + .cta + &.cta--large + width: 72% + + &.cta--learn-more + width: 35% + +@media only screen and (max-width: 600px) + .cta + width: 70% + + &.cta--large + width: 82% + + &.cta--small + width: 26% + +@media only screen and (max-width: 550px) + .cta + &.cta--read-more + width: 35% + + &.cta--learn-more + width: 38% + + &.cta--small + width: 29% + +@media only screen and (max-width: 500px) + .cta + width: 80% + margin: 8% auto auto auto + + &.cta--large + width: 84% + + &.cta--small + width: 32% + +@media only screen and (max-width: 450px) + .cta + width: 90% + + &.cta--large + width: 89% + + &.cta--learn-more + width: 42% + + &.cta--small + width: 36% + +@media only screen and (max-width: 380px) + .cta + margin: 15% auto auto auto + + &.cta--large + width: 92% + + &.cta--read-more + width: 38% + + &.cta--learn-more + width: 44% diff --git a/_app/assets/sass/media/_media_danke.sass b/_app/assets/sass/media/_media_danke.sass new file mode 100644 index 0000000..9248a88 --- /dev/null +++ b/_app/assets/sass/media/_media_danke.sass @@ -0,0 +1,7 @@ +@media only screen and (max-width: 500px) + p + padding: 0 3% + +@media only screen and (max-width: 360px) + p + padding: 0 5% diff --git a/_app/assets/sass/media/_media_footer.sass b/_app/assets/sass/media/_media_footer.sass new file mode 100644 index 0000000..99f9245 --- /dev/null +++ b/_app/assets/sass/media/_media_footer.sass @@ -0,0 +1,22 @@ +@media only screen and (max-width: 1024px) + .footer + flex-direction: column + padding: 10px 2% + + .footer-logo-nav-container + flex-direction: column + + .logo + margin-right: 0 + +@media only screen and (max-width: 860px) + .footer + padding: 12px 2.4% + +@media only screen and (max-width: 600px) + .footer + padding: 15px 2.7% + +@media only screen and (max-width: 400px) + .footer + padding: 18px 3.2% diff --git a/_app/assets/sass/media/_media_gist.sass b/_app/assets/sass/media/_media_gist.sass new file mode 100644 index 0000000..2bcee7a --- /dev/null +++ b/_app/assets/sass/media/_media_gist.sass @@ -0,0 +1,7 @@ +@media only screen and (max-width: 500px) + .gist + margin-bottom: 5% + +@media only screen and (max-width: 400px) + .gist + margin-bottom: 8% diff --git a/_app/assets/sass/media/_media_header.sass b/_app/assets/sass/media/_media_header.sass new file mode 100644 index 0000000..f944380 --- /dev/null +++ b/_app/assets/sass/media/_media_header.sass @@ -0,0 +1,17 @@ +@media only screen and (max-width: 1024px) + .header + flex-direction: column + position: relative + padding: 10px 2% + +@media only screen and (max-width: 860px) + .header + padding: 12px 2.4% + +@media only screen and (max-width: 600px) + .header + padding: 15px 2.7% + +@media only screen and (max-width: 400px) + .header + padding: 18px 3.2% diff --git a/_app/assets/sass/media/_media_index.sass b/_app/assets/sass/media/_media_index.sass new file mode 100644 index 0000000..5bec0b1 --- /dev/null +++ b/_app/assets/sass/media/_media_index.sass @@ -0,0 +1,194 @@ +@media only screen and (max-width: 1600px) + .blog-section .article-previews + flex-direction: column + +@media only screen and (max-width: 1280px) + .about-section + .about-container + flex-direction: column + + .about-text, .skills + width: 100% + + .about-text + margin-bottom: 5% + + .resources-section + .resources-container .resource + width: 48% + margin-bottom: 5% + + &:last-child + width: 100% + margin-bottom: 0 + + .resources-info + width: 80% + +@media only screen and (max-width: 1024px) + main > section + padding: 0 6% 7% 6% + + .welcome-section + height: calc(100vh - 120px) + background-attachment: scroll + + .welcome-section-overlay + padding-top: 7% + + .portfolio-section .showcase + flex-direction: column + + .blog-section, .resources-section + padding: 0 14% 7% 14% + + .resources-section + .resources-container + margin-bottom: 6% + flex-direction: column + + .resource + width: 100% + margin-bottom: 6% + + .resources-info + width: 90% + + .contact-section + .text, .social-container + margin-bottom: 6% + + .social-container .social-item + width: 50% + + &.twitter + width: 100% + +@media only screen and (max-width: 860px) + .welcome-section + height: calc(100vh - 126px) + + .contact-section + .social-container .social-item + width: 100% + + .email + font-size: 2.8rem + +@media only screen and (max-width: 700px) + main > section + padding: 0 7% 8% 7% + + .welcome-section + .welcome-section-overlay + padding-top: 8% + + .blog-section, .resources-section + padding: 0 10% 8% 10% + + .resources-section .resources-container + margin-bottom: 7% + + .resource + margin-bottom: 7% + + .contact-section + .text, .social-container + margin-bottom: 7% + + .email + font-size: 2.4rem + +@media only screen and (max-width: 600px) + .welcome-section + height: calc(100vh - 135px) + + .welcome-text + font-size: 3rem + + h1 + font-size: 3.5rem + + .blog-section + padding: 0 7% 8% 7% + + .contact-section + padding: 0 0 8% 0 + + .email + font-size: 2.2rem + +@media only screen and (max-width: 500px) + main > section + padding: 0 8% 9% 8% + + .welcome-section + .welcome-section-overlay + padding-top: 9% + + .welcome-text + font-size: 2.5rem + + h1 + font-size: 3rem + + .about-section .about-text + margin-bottom: 8% + + img + width: auto + height: 150px + float: none + margin: 0 auto 5% auto + + .portfolio-section, .blog-section, .resources-section, .contact-section + padding: 0 0 9% 0 + + .resources-section + .resources-container, .resources-container .resource + margin-bottom: 8% + + .contact-section + .text, .social-container + margin-bottom: 8% + + .email + font-size: 1.8rem + +@media only screen and (max-width: 450px) + .contact-section .text + padding: 0 5% + +@media only screen and (max-width: 400px) + main > section + padding: 0 9% 10% 9% + + .welcome-section + height: calc(100vh - 144px) + + .welcome-section-overlay + padding-top: 10% + + .about-section .about-text + margin-bottom: 9% + + img + margin: 0 auto 9% auto + + .portfolio-section, .blog-section, .resources-section, .contact-section + padding: 0 0 10% 0 + + .resources-section + .resources-container, .resources-container .resource + margin-bottom: 9% + + .contact-section + .text, .social-container + margin-bottom: 9% + + .email + font-size: 1.6rem + +@media only screen and (max-width: 360px) + .about-section + padding: 0 5% 10% 5% diff --git a/_app/assets/sass/media/_media_legal.sass b/_app/assets/sass/media/_media_legal.sass index ce23437..670467a 100644 --- a/_app/assets/sass/media/_media_legal.sass +++ b/_app/assets/sass/media/_media_legal.sass @@ -1,55 +1,53 @@ -@media only screen and (max-width: 535px) - main - margin-top: 4% - +@media only screen and (max-width: 1024px) + .legal h2 - margin-top: 2.5% - - &:first-child - margin-top: 0 - margin-bottom: 2% + margin-bottom: 2% h3 - margin-top: 2.5% + margin-bottom: 1.5% - h4 - margin-top: 2% + ul, .contact, .disclaimer p, > p + margin-bottom: 3% - p, ul - margin-top: 2% +@media only screen and (max-width: 700px) + .legal + h2 + margin-bottom: 3% - .datenschutz - ul - padding-left: 4.25% + h3 + margin-bottom: 2.5% - iframe - margin-top: 2% + ul, .contact, .disclaimer p, > p + margin-bottom: 4% @media only screen and (max-width: 500px) - html, body - font-size: 100% + main + padding: 0 3% 9% 3% - footer - font-size: 80% + .legal + h2 + margin-bottom: 4% - p - font-size: 2em + h3 + margin-bottom: 3.5% + + ul, .contact, .disclaimer p, > p + margin-bottom: 5% - .other a - font-size: 1.5em +@media only screen and (max-width: 450px) + main + padding: 0 3% 10% 3% - .legal - p, p small, p small a - font-size: 1em + .legal + h2 + margin-bottom: 5% -@media only screen and (max-width: 400px) - html, body - font-size: 100% + h3 + margin-bottom: 4.5% - footer - font-size: 75% + ul, .contact, .disclaimer p, > p + margin-bottom: 6% -@media only screen and (max-width: 350px) - footer .legal - p, p small, p small a - font-size: 0.9rem +@media only screen and (max-width: 360px) + main + padding: 0 5% 10% 5% diff --git a/_app/assets/sass/media/_media_navigation.sass b/_app/assets/sass/media/_media_navigation.sass new file mode 100644 index 0000000..2e9453e --- /dev/null +++ b/_app/assets/sass/media/_media_navigation.sass @@ -0,0 +1,71 @@ +@media only screen and (max-width: 1024px) + .nav + width: 100% + margin-top: 10px + + &.nav--main + ul + flex-direction: column + width: 100% + opacity: 0 + position: absolute + top: 100% + left: -100% + z-index: 99 + transition: all .4s ease-in-out + background: white + + li + padding: 0 + + a + text-align: left + padding: 0.8% 2% + border-bottom: 1px solid $white-gray + + &.open + ul + opacity: 1 + left: 0 + + .navbar + .hamburger-icon + opacity: 0 + + .hamburger-icon_top + transform: rotate(45deg) + + .hamburger-icon_bottom + transform: rotate(-45deg) + + .navbar + display: block + + &.nav--footer, &.nav--legal + ul + justify-content: center + +@media only screen and (max-width: 860px) + .nav + margin-top: 12px + + &.nav--main a + padding: 1.2% 2.4% + +@media only screen and (max-width: 650px) + .nav.nav--footer + display: none + +@media only screen and (max-width: 600px) + .nav + margin-top: 15px + + &.nav--main a + padding: 1.5% 2.7% + +@media only screen and (max-width: 400px) + .nav + margin-top: 18px + + &.nav--main a + padding: 2% 3.2% diff --git a/_app/assets/sass/media/_media_pen.sass b/_app/assets/sass/media/_media_pen.sass new file mode 100644 index 0000000..bd49614 --- /dev/null +++ b/_app/assets/sass/media/_media_pen.sass @@ -0,0 +1,7 @@ +@media only screen and (max-width: 500px) + .cp_embed_wrapper + margin-bottom: 5% + +@media only screen and (max-width: 400px) + .cp_embed_wrapper + margin-bottom: 8% diff --git a/_app/assets/sass/media/_media_portfolio-card.sass b/_app/assets/sass/media/_media_portfolio-card.sass new file mode 100644 index 0000000..d82aae3 --- /dev/null +++ b/_app/assets/sass/media/_media_portfolio-card.sass @@ -0,0 +1,47 @@ +@media only screen and (max-width: 1400px) + .card + width: 50% + + &.card--all + width: 48% + +@media only screen and (max-width: 1024px) + .card, .card.card--all + width: 100% + + .card + .card-overlay + background-color: rgba(0,0,0,0.5) + + .card-heading, .card-text + opacity: 1 + visibility: visible + top: 0 + + &.card--all, &.card--all:nth-last-child(2), &.card--all:nth-last-child(2):nth-child(even) + margin-bottom: 6% + +@media only screen and (max-width: 700px) + .card + &.card--all, &.card--all:nth-last-child(2), &.card--all:nth-last-child(2):nth-child(even) + margin-bottom: 7% + +@media only screen and (max-width: 600px) + .card .card-text + width: 80% + +@media only screen and (max-width: 500px) + .card + .card-text + width: 90% + + &.card--all, &.card--all:nth-last-child(2), &.card--all:nth-last-child(2):nth-child(even) + margin-bottom: 8% + +@media only screen and (max-width: 450px) + .card + .card-heading + font-size: 1.2rem + + &.card--all, &.card--all:nth-last-child(2), &.card--all:nth-last-child(2):nth-child(even) + margin-bottom: 9% diff --git a/_app/assets/sass/media/_media_portfolio.sass b/_app/assets/sass/media/_media_portfolio.sass new file mode 100644 index 0000000..e763354 --- /dev/null +++ b/_app/assets/sass/media/_media_portfolio.sass @@ -0,0 +1,7 @@ +@media only screen and (max-width: 1400px) + .showcase + justify-content: space-between + +@media only screen and (max-width: 1024px) + .showcase + flex-direction: column diff --git a/_app/assets/sass/media/_media_post.sass b/_app/assets/sass/media/_media_post.sass new file mode 100644 index 0000000..87c4d2a --- /dev/null +++ b/_app/assets/sass/media/_media_post.sass @@ -0,0 +1,47 @@ +@media only screen and (max-width: 1024px) + .article-top-bar + margin: 3% 0 7% 0 + + .tags + margin: 6% auto auto auto + +@media only screen and (max-width: 700px) + .article-top-bar + margin: 4% 0 8% 0 + + .tags + margin: 7% auto auto auto + +@media only screen and (max-width: 600px) + .article-top-bar + flex-direction: column + + time + justify-content: flex-end + margin-top: 3% + +@media only screen and (max-width: 500px) + .article-top-bar + padding: 0 3% + margin: 5% 0 9% 0 + + .tags + margin: 8% auto auto auto + padding: 0 3% + +@media only screen and (max-width: 450px) + .article-top-bar + margin: 6% 0 10% 0 + + .tags + margin: 9% auto auto auto + +@media only screen and (max-width: 360px) + .article-top-bar + padding: 0 5% + + time + margin-top: 5% + + .tags + padding: 0 5% diff --git a/_app/assets/sass/media/_media_resources.sass b/_app/assets/sass/media/_media_resources.sass new file mode 100644 index 0000000..b376a22 --- /dev/null +++ b/_app/assets/sass/media/_media_resources.sass @@ -0,0 +1,50 @@ +@media only screen and (max-width: 1400px) + .resources-container + flex-direction: column + + .resource, .resource:nth-last-child(2), .resource:nth-last-child(2):nth-child(even) + margin-bottom: 6% + + .resource + width: 100% + +@media only screen and (max-width: 1024px) + main + padding: 0 14% 7% 14% + + .resources-container + .resource, .resource:nth-last-child(2), .resource:nth-last-child(2):nth-child(even) + margin-bottom: 7% + +@media only screen and (max-width: 700px) + main + padding: 0 10% 8% 10% + + .resources-container + .resource, .resource:nth-last-child(2), .resource:nth-last-child(2):nth-child(even) + margin-bottom: 8% + +@media only screen and (max-width: 600px) + main + padding: 0 7% 8% 7% + +@media only screen and (max-width: 500px) + main + padding: 0 0 9% 0 + + .resources-container + .resource, .resource:nth-last-child(2), .resource:nth-last-child(2):nth-child(even) + margin-bottom: 9% + +@media only screen and (max-width: 400px) + main + padding: 0 0 10% 0 + + .resources-container + .resource, .resource:nth-last-child(2), .resource:nth-last-child(2):nth-child(even) + margin-bottom: 10% + +@media only screen and (max-width: 360px) + .resources-container .resource + .resource-text, footer + padding: 5% diff --git a/_app/assets/sass/media/_media_section-heading.sass b/_app/assets/sass/media/_media_section-heading.sass new file mode 100644 index 0000000..2ace1c5 --- /dev/null +++ b/_app/assets/sass/media/_media_section-heading.sass @@ -0,0 +1,19 @@ +@media only screen and (max-width: 1024px) + .section-heading + padding: 2.5% 0 2% 0 + margin-bottom: 7% + +@media only screen and (max-width: 700px) + .section-heading + padding: 3.5% 0 3% 0 + margin-bottom: 8% + +@media only screen and (max-width: 500px) + .section-heading + padding: 4.5% 0 4% 0 + margin-bottom: 9% + +@media only screen and (max-width: 400px) + .section-heading + padding: 5.5% 0 5% 0 + margin-bottom: 10% diff --git a/_app/assets/sass/media/_media_style.sass b/_app/assets/sass/media/_media_style.sass index 9b62da6..8ae65d4 100644 --- a/_app/assets/sass/media/_media_style.sass +++ b/_app/assets/sass/media/_media_style.sass @@ -1,19 +1,118 @@ -@media only screen and (max-width: 1600px) - .wrapper - width: 80% - @media only screen and (max-width: 1024px) - .wrapper - width: 90% + main + padding: 0 6% 7% 6% + + .article .article-text + h3 + margin-bottom: 2% + + h4 + margin-bottom: 1.5% + + h5 + margin-bottom: 1.25% + + h6 + margin-bottom: 1.125% + +@media only screen and (max-width: 700px) + main + padding: 0 7% 8% 7% + + .article .article-text + h3 + margin-bottom: 3% + + h4 + margin-bottom: 2.5% + + h5 + margin-bottom: 2.25% -@media only screen and (max-width: 775px) - .wrapper - width: 95% + h6 + margin-bottom: 2.125% @media only screen and (max-width: 500px) - html, body - font-size: 80% + main + padding: 0 0 9% 0 + + article p + margin-bottom: 5% + + .article .article-text + > p, ul, ol + padding: 0 3% + margin-bottom: 5% + + li + padding: 2% 0 + + ul, ol + padding-left: 4% + + h3, h4, h5, h6 + padding: 0 3% + + h3 + margin-bottom: 4% + + h4 + margin-bottom: 3.5% + + h5 + margin-bottom: 3.25% + + h6 + margin-bottom: 3.125% + + .margin-top + margin-top: 5% + +@media only screen and (max-width: 450px) + main + padding: 0 0 10% 0 + + .article .article-text + h3 + margin-bottom: 5% + + h4 + margin-bottom: 4.5% + + h5 + margin-bottom: 4.25% + + h6 + margin-bottom: 4.125% @media only screen and (max-width: 400px) html, body - font-size: 75% + font-size: 18px + + article p + margin-bottom: 8% + + .article .article-text + > p, ul, ol + margin-bottom: 8% + + li + padding: 3% 0 + + .margin-top + margin-top: 8% + +@media only screen and (max-width: 360px) + .article .article-text + > p, ul, ol + padding: 0 5% + + ul, ol + padding-left: 5% + + h3, h4, h5, h6 + padding: 0 5% + +@media only screen and (max-width: 350px) + html, body + font-size: 16px diff --git a/_app/assets/sass/media/_media_table.sass b/_app/assets/sass/media/_media_table.sass new file mode 100644 index 0000000..29f3b4e --- /dev/null +++ b/_app/assets/sass/media/_media_table.sass @@ -0,0 +1,51 @@ +@media only screen and (max-width: 860px) + .table + thead + display: none + + tbody + tr + flex-direction: column + + &:nth-child(even) td + background-color: white + + &:hover td + color: $main-font-color + + td + &:first-child + background-color: $light-blue + color: $dark-blue + font-weight: bold + + &:nth-child(even) + background-color: $white-gray + + &:hover + color: $dark-blue + + td + justify-content: space-around + align-items: stretch + + &::before + content: attr(data-th) + display: block + text-align: left + +@media only screen and (max-width: 500px) + .table + margin-bottom: 5% + +@media only screen and (max-width: 400px) + .table + margin-bottom: 8% + +@media only screen and (max-width: 360px) + .table + caption + padding: 5% + + thead th, tbody td + padding: 3% diff --git a/_app/assets/sass/media/_media_tag-page.sass b/_app/assets/sass/media/_media_tag-page.sass new file mode 100644 index 0000000..0b77d8c --- /dev/null +++ b/_app/assets/sass/media/_media_tag-page.sass @@ -0,0 +1,102 @@ +@media only screen and (max-width: 1700px) + .article-suggestions + flex-direction: column + + .articles-same-tag, .related-tags-section + padding: 4% 5% + +@media only screen and (max-width: 1024px) + main + padding: 0 0 7% 0 + + .tag-section + padding: 0 6% + + .article-text .hidden.show + margin-bottom: 5% + + .article-suggestions + margin-top: 7% + + h3 + margin-bottom: 5% + + .articles-same-tag, .related-tags-section + padding: 5% 6% + + .related-tags-section .related-tags + margin-bottom: 7% + + .tags-container + width: 80% + +@media only screen and (max-width: 700px) + main + padding: 0 0 8% 0 + + .tag-section + padding: 0 7% + + .article-text .hidden.show + margin-bottom: 6% + + .article-suggestions + margin-top: 8% + + h3 + margin-bottom: 6% + + .articles-same-tag, .related-tags-section + padding: 6% 7% + + .related-tags-section .related-tags + margin-bottom: 8% + +@media only screen and (max-width: 500px) + main + padding: 0 0 9% 0 + + .tag-section + padding: 0 + + .article-text .hidden.show + margin-bottom: 7% + + .article-suggestions + margin-top: 9% + + h3 + margin-bottom: 7% + padding: 0 3% + + .articles-same-tag, .related-tags-section + padding: 7% 0 + + .related-tags-section .related-tags + margin-bottom: 9% + + .tags-container + width: 100% + +@media only screen and (max-width: 450px) + main + padding: 0 0 10% 0 + + .tag-section .article-text .hidden.show + margin-bottom: 8% + + .article-suggestions + margin-top: 10% + + h3 + margin-bottom: 8% + + .articles-same-tag, .related-tags-section + padding: 8% 0 + + .related-tags-section .related-tags + margin-bottom: 10% + +@media only screen and (max-width: 360px) + .article-suggestions h3 + padding: 0 5% diff --git a/_app/assets/sass/media/_media_tag.sass b/_app/assets/sass/media/_media_tag.sass new file mode 100644 index 0000000..0be54c4 --- /dev/null +++ b/_app/assets/sass/media/_media_tag.sass @@ -0,0 +1,108 @@ +@media only screen and (max-width: 1800px) + .tag + width: 42% + +@media only screen and (max-width: 1600px) + .tag.tag--tag-page + width: 47% + +@media only screen and (max-width: 1400px) + .tag.tag--tag-page + width: 52% + +@media only screen and (max-width: 1300px) + .tag + width: 45% + + &.tag--large + width: 60% + +@media only screen and (max-width: 1200px) + .tag.tag--tag-page + width: 60% + +@media only screen and (max-width: 1024px) + .tag + &.tag--large + width: 65% + + &.tag--article + margin: 3% 3% 0 0 + + &.tag--related-tags + margin: 3% + + &.tag--tag-page + width: 70% + +@media only screen and (max-width: 950px) + .tag + width: 49% + +@media only screen and (max-width: 900px) + .tag + &.tag--large + width: 70% + + &.tag--tag-page + width: 78% + +@media only screen and (max-width: 860px) + .tag + width: 52% + + &.tag--tag-page + width: 82% + +@media only screen and (max-width: 780px) + .tag + width: 57% + + &.tag--large + width: 76% + + &.tag--tag-page + width: 88% + +@media only screen and (max-width: 720px) + .tag + &.tag--large + width: 80% + + &.tag--article + margin: 4% 4% 0 0 + + &.tag--related-tags + margin: 4% + + &.tag--tag-page + width: 95% + +@media only screen and (max-width: 650px) + .tag.tag--tag-page + width: 100% + +@media only screen and (max-width: 600px) + .tag + width: 62% + + &.tag--large + width: 85% + + &.tag--tag-page + border-radius: 0 + +@media only screen and (max-width: 550px) + .tag + width: 68% + + &.tag--large + width: 92% + +@media only screen and (max-width: 500px) + .tag, .tag.tag--large + width: 100% + border-radius: 0 + + .tag.tag--article + border-radius: 9999px diff --git a/_app/assets/sass/media/_media_tags.sass b/_app/assets/sass/media/_media_tags.sass new file mode 100644 index 0000000..eeb29a9 --- /dev/null +++ b/_app/assets/sass/media/_media_tags.sass @@ -0,0 +1,58 @@ +@media only screen and (max-width: 1600px) + main + padding: 0 20% 6% 20% + + .tag-previews .tag-preview + margin-bottom: 5% + +@media only screen and (max-width: 1400px) + main + padding: 0 18% 6% 18% + +@media only screen and (max-width: 1200px) + main + padding: 0 13% 6% 13% + +@media only screen and (max-width: 1024px) + main + padding: 0 10% 7% 10% + + .tags-text + margin-bottom: 6% + + .tag-previews .tag-preview + margin-bottom: 6% + +@media only screen and (max-width: 860px) + main + padding: 0 8% 7% 8% + +@media only screen and (max-width: 700px) + main + padding: 0 0 8% 0 + + .tags-text + margin-bottom: 7% + + .tag-previews .tag-preview + margin-bottom: 7% + +@media only screen and (max-width: 500px) + main + padding: 0 0 9% 0 + + .tags-text + margin-bottom: 8% + + .tag-previews .tag-preview + margin-bottom: 8% + +@media only screen and (max-width: 400px) + main + padding: 0 0 10% 0 + + .tags-text + margin-bottom: 9% + + .tag-previews .tag-preview + margin-bottom: 9% diff --git a/_app/assets/sass/media/_media_tweet.sass b/_app/assets/sass/media/_media_tweet.sass new file mode 100644 index 0000000..5aadf7c --- /dev/null +++ b/_app/assets/sass/media/_media_tweet.sass @@ -0,0 +1,7 @@ +@media only screen and (max-width: 500px) + .tweet + margin-bottom: 5% + +@media only screen and (max-width: 400px) + .tweet + margin-bottom: 8% diff --git a/_app/assets/sass/modules/_article-content-image.sass b/_app/assets/sass/modules/_article-content-image.sass new file mode 100644 index 0000000..aa8c734 --- /dev/null +++ b/_app/assets/sass/modules/_article-content-image.sass @@ -0,0 +1,39 @@ +.article-content-image + max-width: 1200px + box-shadow: 0px 3px 6px rgba(0,0,0,0.3) + margin: 5% 0 + + .article-content-image-wrap + overflow: hidden + + img + width: 100% + transition: all .3s ease-in-out + + &:hover + transform: scale(1.05) + + .article-content-image-info + display: flex + justify-content: space-between + padding: 3% + background-color: white + + p + margin: 0 + + .article-content-image-source + display: block + font: + size: 1rem + weight: normal + + a + color: $main-font-color + transition: all .2s linear + + &:hover + color: $orange + +// Media Queries Article Content Image // +@import '../media/_media_article-content-image' diff --git a/_app/assets/sass/modules/_article-header.sass b/_app/assets/sass/modules/_article-header.sass new file mode 100644 index 0000000..05e0dc9 --- /dev/null +++ b/_app/assets/sass/modules/_article-header.sass @@ -0,0 +1,26 @@ +.article-header + margin-bottom: 5% + + .article-heading + margin: 0 0 5% 0 + text-align: center + color: $blue + font: + size: 2rem + weight: normal + + .article-image + background: + repeat: no-repeat + size: cover + attachment: fixed + position: center 0px + width: 100% + height: 400px + box-shadow: 0px 3px 6px rgba(0,0,0,0.3) + + &.article-header--tag + margin-bottom: 3% + +// Media Queries Article Header // +@import '../media/_media_article-header' diff --git a/_app/assets/sass/modules/_article-preview.sass b/_app/assets/sass/modules/_article-preview.sass new file mode 100644 index 0000000..62b372f --- /dev/null +++ b/_app/assets/sass/modules/_article-preview.sass @@ -0,0 +1,81 @@ +.article-preview + display: flex + flex-direction: column + width: 45% + background-color: white + box-shadow: 0px 3px 6px rgba(0,0,0,0.3) + + header + position: relative + overflow: hidden + + &:hover img + transform: scale(1.05) + + img + width: 100% + transition: all .3s ease-in-out + + &.article-preview--all, &.article-preview--tag + margin-bottom: 4% + + &.article-preview--all + &:nth-last-child(-n+2) + margin-bottom: 0 + + &:nth-last-child(2):nth-child(even) + margin-bottom: 4% + + &.article-preview--tag + width: 70% + + &:last-child + margin-bottom: 0 + + .article-preview-overlay + background-color: rgba(0,0,0,0.5) + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + display: flex + align-items: center + justify-content: center + padding: 2% + + .article-preview-heading + color: white + text-align: center + font-size: 1.4rem + font-weight: normal + margin: 0 + padding: 0 + + .article-preview-text, footer + padding: 3% + + .article-preview-text + flex: 1 0 auto + + footer + display: flex + justify-content: space-between + align-items: center + + time + font-size: 0.9rem + display: flex + align-items: center + + &::before + content: '' + width: 30px + height: 30px + background: + image: url('../img/icons/time-icon.svg') + repeat: no-repeat + size: cover + +// Media Queries Article Preview // +@import '../media/_media_article-preview' diff --git a/_app/assets/sass/modules/_back-button.sass b/_app/assets/sass/modules/_back-button.sass index 13cc0ec..858b0fc 100644 --- a/_app/assets/sass/modules/_back-button.sass +++ b/_app/assets/sass/modules/_back-button.sass @@ -1,17 +1,43 @@ -.back-button - color: $blue - transition-duration: .1s +.back-container + display: flex + margin: 2% 0 6% 0 - &:hover - color: $dark-blue + .back-button, .back-button::before + transition: all .3s ease-in-out -.back-button, .back-button::before - display: inline-block + .back-button + color: $main-font-color + display: flex + align-items: center -.back-button::before - content: '' - background-image: url('../img/min/icons/back-button.svg') - width: 30px - height: 30px - background-size: cover - vertical-align: middle \ No newline at end of file + &:hover + color: $dark-blue + + .back-icon::after + opacity: 1 + visibility: visible + + .back-icon + height: 30px + width: 30px + background: + image: url('../img/icons/back-button.svg') + repeat: no-repeat + size: cover + transition: all .3s ease-in-out + + &::after + display: block + content: '' + height: 30px + width: 30px + background: + image: url('../img/icons/back-button-hover.svg') + repeat: no-repeat + size: cover + opacity: 0 + visibility: hidden + transition: all .3s ease-in-out + +// Media Queries Back Button // +@import '../media/_media_back-button' diff --git a/_app/assets/sass/modules/_blockquote.sass b/_app/assets/sass/modules/_blockquote.sass new file mode 100644 index 0000000..b2d0a87 --- /dev/null +++ b/_app/assets/sass/modules/_blockquote.sass @@ -0,0 +1,35 @@ +blockquote + background-color: white + padding: 3% + margin-bottom: 4% + box-shadow: 0px 3px 6px rgba(0,0,0,0.3) + border-left: 10px solid $light-blue + + p + display: flex + + &::before + content: "\201C" + font: + size: 4rem + family: $secondary-font + weight: bold + style: italic + line-height: 1em + width: 10% + position: relative + top: -0.2em + + cite + display: block + text-align: right + margin-top: 1% + + &::before + content: "\2014" + font: + weight: bold + padding: 0 1% + +// Media Queries Blockquote // +@import '../media/_media_blockquote' diff --git a/_app/assets/sass/modules/_code.sass b/_app/assets/sass/modules/_code.sass new file mode 100644 index 0000000..9370e84 --- /dev/null +++ b/_app/assets/sass/modules/_code.sass @@ -0,0 +1,6 @@ +.code + margin-bottom: 4% + box-shadow: 0px 3px 6px rgba(0,0,0,0.3) + +// Media Queries Code // +@import '../media/_media_code' diff --git a/_app/assets/sass/modules/_cta.sass b/_app/assets/sass/modules/_cta.sass new file mode 100644 index 0000000..8c6666b --- /dev/null +++ b/_app/assets/sass/modules/_cta.sass @@ -0,0 +1,32 @@ +.cta + display: block + background-color: $blue + color: $white-gray + padding: 0.4em + width: 20% + margin: 5% auto auto auto + border-radius: 9999px + font-size: 1.8rem + text-align: center + box-shadow: 0px 3px 6px rgba(0,0,0,0.3) + + &:hover + background-color: $orange + + &.cta--large + width: 23% + + &.cta--read-more + font-size: 1.05rem + margin: 0 + width: 23% + + &.cta--learn-more + @extend .cta--read-more + width: 27% + + &.cta--small + width: 18% + +// Media Queries CTA // +@import '../media/_media_cta' diff --git a/_app/assets/sass/modules/_gist.sass b/_app/assets/sass/modules/_gist.sass new file mode 100644 index 0000000..449bf20 --- /dev/null +++ b/_app/assets/sass/modules/_gist.sass @@ -0,0 +1,5 @@ +.gist + margin-bottom: 4% + +// Media Queries Gist // +@import '../media/_media_gist' diff --git a/_app/assets/sass/modules/_logo.sass b/_app/assets/sass/modules/_logo.sass new file mode 100644 index 0000000..9e68570 --- /dev/null +++ b/_app/assets/sass/modules/_logo.sass @@ -0,0 +1,7 @@ +.logo + display: block + background: + image: url(../img/logo.svg) + repeat: no-repeat + width: 50px + height: 50px diff --git a/_app/assets/sass/modules/_navigation.sass b/_app/assets/sass/modules/_navigation.sass new file mode 100644 index 0000000..8126070 --- /dev/null +++ b/_app/assets/sass/modules/_navigation.sass @@ -0,0 +1,51 @@ +.nav + ul + display: flex + flex: 1 + + li + list-style: none + display: flex + padding: 0 15px + + a + display: block + text-align: center + color: $main-font-color + font-size: 1.4rem + flex: 1 + + &.current, &:hover + color: $dark-blue + + &.nav--main .navbar + display: none + position: relative + + #hamburger-button + display: block + height: 40px + padding: 0 + border: none + + .hamburger-icon, .hamburger-icon_top, .hamburger-icon_bottom + position: absolute + top: 50% + transform: translateY(-50%) + width: 30px + height: 5px + background-color: $dark-blue + transition: all .25s ease-in-out + + .hamburger-icon_top + transform: translateY(calc(-50% - 10px)) + + .hamburger-icon_bottom + transform: translateY(calc(-50% + 10px)) + + &.nav--legal + a + font-size: 1.2rem + +// Media Queries Navigation // +@import '../media/_media_navigation' diff --git a/_app/assets/sass/modules/_pen.sass b/_app/assets/sass/modules/_pen.sass new file mode 100644 index 0000000..c33d2eb --- /dev/null +++ b/_app/assets/sass/modules/_pen.sass @@ -0,0 +1,5 @@ +.cp_embed_wrapper + margin-bottom: 4% + +// Media Queries Pen // +@import '../media/_media_pen' diff --git a/_app/assets/sass/modules/_portfolio-card.sass b/_app/assets/sass/modules/_portfolio-card.sass new file mode 100644 index 0000000..baf0ed2 --- /dev/null +++ b/_app/assets/sass/modules/_portfolio-card.sass @@ -0,0 +1,76 @@ +.card + display: block + width: 33.333% + color: white + position: relative + overflow: hidden + + &:hover + .card-overlay + background-color: rgba(0,0,0,0.5) + + .card-heading, .card-text + opacity: 1 + visibility: visible + top: 0 + + &.card--all + width: 42% + margin-bottom: 3% + + &:hover + img + transform: scale(1.05) + + &:nth-last-child(-n+2) + margin-bottom: 0 + + &:nth-last-child(2):nth-child(even) + margin-bottom: 3% + + img + transition: all .3s ease-in-out + + .card-overlay + background-color: rgba(0,0,0,0.5) + + .card-heading, .card-text + opacity: 1 + visibility: visible + top: 0 + + img + width: 100% + + .card-overlay, .card-heading, .card-text + transition: all .4s ease-in-out + + .card-overlay + background-color: rgba(0,0,0,0.3) + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + display: flex + flex-direction: column + justify-content: center + align-items: center + + .card-heading, .card-text + opacity: 0 + visibility: hidden + position: relative + top: -100% + + .card-heading + font-size: 1.4rem + font-weight: normal + text-align: center + margin-bottom: 3% + + .card-text + width: 70% + +// Media Queries Portfolio Card // +@import '../media/_media_portfolio-card' diff --git a/_app/assets/sass/modules/_section-heading.sass b/_app/assets/sass/modules/_section-heading.sass new file mode 100644 index 0000000..ff97e90 --- /dev/null +++ b/_app/assets/sass/modules/_section-heading.sass @@ -0,0 +1,23 @@ +.section-heading + color: $blue + text-align: center + padding: 1.5% 0 1% 0 + font-size: 2rem + margin-bottom: 6% + + &::after + content: '' + display: block + margin: auto + background-color: $blue + width: 2em + padding: 0.1em + + &.section-heading--small::after + width: 1.2em + + &.section-heading--no-padding-top + padding-top: 0 + +// Media Queries Section Heading // +@import '../media/_media_section-heading.sass' diff --git a/_app/assets/sass/modules/_skill.sass b/_app/assets/sass/modules/_skill.sass new file mode 100644 index 0000000..fd61c5a --- /dev/null +++ b/_app/assets/sass/modules/_skill.sass @@ -0,0 +1,77 @@ +.skill + margin-bottom: 4% + + .skill-label + display: block + font-weight: normal + padding: 1.5% + + .skill-bar + background-color: $white-gray + + .skill-bar-inner + background-color: $blue + padding: 3% + + &.skill-value-0 + width: 0 + + &.skill-value-5 + width: 5% + + &.skill-value-10 + width: 10% + + &.skill-value-15 + width: 15% + + &.skill-value-20 + width: 20% + + &.skill-value-25 + width: 25% + + &.skill-value-30 + width: 30% + + &.skill-value-35 + width: 35% + + &.skill-value-40 + width: 40% + + &.skill-value-45 + width: 45% + + &.skill-value-50 + width: 50% + + &.skill-value-55 + width: 55% + + &.skill-value-60 + width: 60% + + &.skill-value-65 + width: 65% + + &.skill-value-70 + width: 70% + + &.skill-value-75 + width: 75% + + &.skill-value-80 + width: 80% + + &.skill-value-85 + width: 85% + + &.skill-value-90 + width: 90% + + &.skill-value-95 + width: 95% + + &.skill-value-100 + width: 100% diff --git a/_app/assets/sass/modules/_table.sass b/_app/assets/sass/modules/_table.sass new file mode 100644 index 0000000..a349cc2 --- /dev/null +++ b/_app/assets/sass/modules/_table.sass @@ -0,0 +1,49 @@ +.table + margin-bottom: 4% + display: flex + flex-direction: column + background-color: white + box-shadow: 0px 3px 6px rgba(0,0,0,0.3) + + caption + font: + size: 1.2rem + family: $secondary-font + padding: 3% + + thead, thead tr, tbody, tbody tr + display: flex + + thead + tr, th + flex: 1 + + th + min-width: 100px + padding: 1% + background-color: $light-blue + color: $dark-blue + + tbody + flex-direction: column + + tr + &:nth-child(even) td + background-color: $white-gray + + &:hover td + color: $dark-blue + + td + display: flex + align-items: center + justify-content: center + min-width: 100px + flex: 1 + text-align: center + padding: 1% + vertical-align: middle + transition: all .2s linear + +// Media Queries Table // +@import '../media/_media_table' diff --git a/_app/assets/sass/modules/_tag.sass b/_app/assets/sass/modules/_tag.sass new file mode 100644 index 0000000..4b9d3c5 --- /dev/null +++ b/_app/assets/sass/modules/_tag.sass @@ -0,0 +1,40 @@ +.tag + display: block + margin: auto + background-color: $light-blue + color: $dark-blue + width: 38% + padding: 0.4em + border-radius: 9999px + font: + size: 2rem + weight: normal + text-align: center + transition: all .3s linear + + &:hover + background-color: $dark-blue + color: $light-blue + + &.tag--large + width: 56% + + &.tag--article + width: auto + padding: 0.4em 0.6em + margin: 2% 2% 0 0 + font-size: 1rem + + &.tag--related-tags + @extend .tag--article + margin: 2% + + &.tag--tag-page + width: 40% + + &.tag--no-hover:hover + background-color: $light-blue + color: $dark-blue + +// Media Queries Tag // +@import '../media/_media_tag' diff --git a/_app/assets/sass/modules/_tweet.sass b/_app/assets/sass/modules/_tweet.sass new file mode 100644 index 0000000..b65ce44 --- /dev/null +++ b/_app/assets/sass/modules/_tweet.sass @@ -0,0 +1,7 @@ +.tweet + display: flex + justify-content: center + margin-bottom: 4% + +// Media Queries Tweet // +@import '../media/_media_tweet' diff --git a/_app/assets/sass/pages/blog.sass b/_app/assets/sass/pages/blog.sass new file mode 100644 index 0000000..e0ffe33 --- /dev/null +++ b/_app/assets/sass/pages/blog.sass @@ -0,0 +1,14 @@ +// General Styles // +@import '../_style' + +// Page Styles // +main + padding: 0 13% 6% 13% + +.article-previews + display: flex + flex-wrap: wrap + justify-content: space-between + +// Media Queries Blog Page // +@import '../media/_media_blog' diff --git a/_app/assets/sass/pages/coming-soon.sass b/_app/assets/sass/pages/coming-soon.sass deleted file mode 100644 index 4e54a12..0000000 --- a/_app/assets/sass/pages/coming-soon.sass +++ /dev/null @@ -1,35 +0,0 @@ -// Standard Styles // -@import '../_style' - -header - margin: 0 auto - width: 30% - text-align: center - - h1, p - padding: 1% - color: $dark-blue - - h1 - font-size: 4.375rem - - h1::after - content: '' - display: block - margin: 1% auto - margin-top: 2% - background-color: $dark-blue - width: 44.44% - padding: 0.8% - - p - font-size: 2.5rem - font-family: $secondary-font - - .logo - width: 150px - margin: 0 auto - - -// Media Queries // -@import '../media/_media_coming-soon' diff --git a/_app/assets/sass/pages/contact.sass b/_app/assets/sass/pages/contact.sass index 557fdf1..a37c2cc 100644 --- a/_app/assets/sass/pages/contact.sass +++ b/_app/assets/sass/pages/contact.sass @@ -1,61 +1,55 @@ -// Standard Styles // +// General Styles // @import '../_style' -// Back-Button // -@import '../modules/_back-button' -main - margin-top: 3% +// Page Styles // +.text, .error + text-align: center -form - margin-top: 2% - display: flex - flex-direction: column - padding: 1% 2% - width: 100% - - .field_wrap - margin-bottom: 2% - display: flex - width: 100% +.error + display: block + margin-top: 4% - .field_wrap.two-col - justify-content: space-between - - input, textarea - width: 49% +form + margin-top: 4% - input, textarea + label, input, textarea display: block width: 100% - background-color: white + padding: 1% + + input, textarea outline: none - border: 1px solid transparent + border: none + transition: all .3s ease-in-out box-shadow: 5px 5px 7.5px rgba(0,0,0,0.3) - padding: 1.25% - transition: all .3s ease-in &:focus box-shadow: 10px 10px 15px rgba(0,0,0,0.1) transform: scale(1.0005) + label + padding-left: 0 + margin-top: 1.5% + transition: all .2s linear + input[type="submit"] + width: 25% + margin: 3.5% auto auto auto + padding: 1.2em cursor: pointer background-color: $blue - padding: 1.8% - margin: 2% auto - width: 22% - text-align: center color: white - border-radius: 15px - box-shadow: 0 15px 10px -10px rgba(0,0,0,0.4) + text-align: center text-transform: uppercase font-size: 1.3rem letter-spacing: 0.105em + white-space: normal + border-radius: 15px + box-shadow: 0 15px 10px -10px rgba(0,0,0,0.4) &:hover box-shadow: 0 35px 20px -20px rgba(0,0,0,0.2) transform: scale(1.1) translateY(-10px) - -// Media Queries // -@import '../media/_media_contact' +// Media Queries Contact Page // +@import '../media/_media_contact.sass' diff --git a/_app/assets/sass/pages/danke.sass b/_app/assets/sass/pages/danke.sass new file mode 100644 index 0000000..da6196a --- /dev/null +++ b/_app/assets/sass/pages/danke.sass @@ -0,0 +1,22 @@ +// General Styles // +@import '../_style' + +// Page Styles // +body + display: flex + flex-direction: column + +header, footer + flex: 0 0 auto + +main + flex: 1 0 auto + +p + margin-bottom: 3% + + &:last-child + margin-bottom: 0 + +// Media Queries "Thank you" Page // +@import '../media/_media_danke' diff --git a/_app/assets/sass/pages/index.sass b/_app/assets/sass/pages/index.sass new file mode 100644 index 0000000..0b0fb39 --- /dev/null +++ b/_app/assets/sass/pages/index.sass @@ -0,0 +1,250 @@ +// General Styles // +@import '../_style' + +// Page Styles // +// General Styles for Index Page // +main + padding: 0 + + > section + padding: 0 5% 6% 5% + + &:nth-child(even) + background-color: white + +// Welcome Section // +.welcome-section + background: + image: url('../img/welcome-section-bg.jpg') + size: cover + position: 12% center + repeat: no-repeat + attachment: fixed + height: calc(100vh - 80px) + padding: 0 + overflow: hidden + + .welcome-section-overlay + display: block + height: inherit + background-color: rgba(0,0,0,0.5) + text-align: center + display: flex + justify-content: center + align-items: center + padding-top: 6% + + .welcome-heading-container + flex: 1 + + .welcome-text, h1 + display: block + font-family: $secondary-font + font-weight: normal + margin: 0 + color: $white-gray + + .welcome-text + font-size: 3.5rem + margin-bottom: 1% + + h1 + font-size: 4rem + +// About Section // +.about-section + .about-container + display: flex + justify-content: space-between + + .about-text, .skills + width: 47% + + .about-text + img + width: 150px + float: left + margin: 0 3% 1.2% 0 + + .skills + h3 + font-family: $main-font + font-weight: normal + font-size: 1.4rem + margin-bottom: 4% + +// Portfolio Section // +.portfolio-section + .showcase + display: flex + flex-wrap: wrap + +// Blog Section // +.blog-section + padding: 0 13% 6% 13% + + .article-previews + display: flex + justify-content: space-between + +// Resources Section // +.resources-section + padding: 0 13% 6% 13% + + .resources-container + display: flex + justify-content: space-between + flex-wrap: wrap + margin-bottom: 5% + + .resource + display: block + width: 28% + color: white + position: relative + box-shadow: 0px 3px 6px rgba(0,0,0,0.3) + overflow: hidden + + &:hover img + transform: scale(1.05) + + img + width: 100% + transition: all .3s ease-in-out + + .resource-overlay + background-color: rgba(0,0,0,0.5) + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + display: flex + justify-content: center + align-items: center + padding: 2% + + .resource-heading + font-size: 1.4rem + font-weight: normal + text-align: center + + .resources-info + width: 70% + margin: auto + +// Contact Section // +.contact-section + .text, .social-container + margin-bottom: 5% + + .text + font-size: 1.6rem + text-align: center + + .social-container + display: flex + flex-wrap: wrap + box-shadow: 0px 3px 6px rgba(0,0,0,0.3) + + .social-item + display: block + width: 33.333% + + &.twitter + background-color: $twitter-color + + &.github + background-color: $github-color + + &.codepen + background-color: $codepen-color + + &:hover .social-network .social-icon::after + opacity: 1 + visibility: visible + + .social-network + display: block + color: white + text-align: center + font-size: 1.5rem + font-weight: normal + margin: 10% auto + transition: all .3s linear + + .social-icon + position: relative + display: block + width: 120px + height: 120px + background: + repeat: no-repeat + size: cover + margin: auto auto 2% auto + + &::after + content: '' + display: block + width: 120px + height: 120px + background: + repeat: no-repeat + size: cover + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + opacity: 0 + visibility: hidden + transition: all .3s ease-in-out + + .twitter + &:hover + background-color: white + + .social-network + color: $twitter-color + + .social-network .social-icon + background-image: url('../img/icons/twitter-icon.svg') + + &::after + background-image: url('../img/icons/twitter-icon-reverse.svg') + + .github + &:hover + background-color: black + + .social-network .social-icon + background-image: url('../img/icons/github-icon.svg') + + &::after + background-image: url('../img/icons/github-icon-reverse.svg') + + .codepen + &:hover + background-color: white + + .social-network + color: $codepen-color + + .social-network .social-icon + background-image: url('../img/icons/codepen-icon.svg') + + &::after + background-image: url('../img/icons/codepen-icon-reverse.svg') + + .email + display: block + color: $blue + font-weight: bold + font-size: 3.5rem + text-align: center + + &:hover + color: $orange + +// Media Queries Index Page // +@import '../media/_media_index' diff --git a/_app/assets/sass/pages/legal.sass b/_app/assets/sass/pages/legal.sass index 9f49191..fff3080 100644 --- a/_app/assets/sass/pages/legal.sass +++ b/_app/assets/sass/pages/legal.sass @@ -1,38 +1,33 @@ -// Standard Styles // +// General Styles // @import '../_style' -// Back-Button // -@import '../modules/_back-button' -main - margin-top: 3% - font-size: 1rem - - h2 - margin-top: 1.5% - - &:first-child - margin-top: 0 - margin-bottom: 1.5% +// Page Styles // +.legal + h2, h3 + font: + size: 1.4rem + family: $main-font + margin-bottom: 1% h3 - margin-top: 1% - - h4 - margin-top: 0.75% + font-size: 1.2rem + margin-bottom: 0.5% - p, ul - margin-top: 1% + ul, .contact, .disclaimer p, > p + margin-bottom: 2% -.datenschutz ul - padding-left: 3% + list-style: none - li - list-style: inside disc + > ul + list-style-type: disc + list-style-position: inside - iframe - margin-top: 1% + .disclaimer p:last-child, > p:last-child + margin-bottom: 0 + .source + font-size: 1rem -// Media Queries // +// Media Queries Portfolio Page // @import '../media/_media_legal' diff --git a/_app/assets/sass/pages/portfolio.sass b/_app/assets/sass/pages/portfolio.sass new file mode 100644 index 0000000..519e9a6 --- /dev/null +++ b/_app/assets/sass/pages/portfolio.sass @@ -0,0 +1,11 @@ +// General Styles // +@import '../_style' + +// Page Styles // +.showcase + display: flex + justify-content: space-around + flex-wrap: wrap + +// Media Queries Portfolio Page // +@import '../media/_media_portfolio' diff --git a/_app/assets/sass/pages/post.sass b/_app/assets/sass/pages/post.sass new file mode 100644 index 0000000..22f710b --- /dev/null +++ b/_app/assets/sass/pages/post.sass @@ -0,0 +1,61 @@ +// General Styles // +@import '../_style' + +// Page Styles // +.article-top-bar + display: flex + justify-content: space-between + margin: 2% 0 6% 0 + + .back-button, .back-button::before + transition: all .3s ease-in-out + + .back-button + color: $main-font-color + display: flex + align-items: center + + &:hover + color: $dark-blue + + &::before + background-image: url('../img/icons/back-button-hover.svg') + + &::before + content: '' + height: 30px + width: 30px + background: + image: url('../img/icons/back-button.svg') + repeat: no-repeat + size: cover + + time + display: flex + align-items: center + + &::after + content: '' + width: 30px + height: 30px + background: + image: url('../img/icons/time-icon.svg') + repeat: no-repeat + size: cover + +.tags + max-width: 1200px + margin: 5% auto auto auto + + h2 + color: $blue + font: + size: 1.5rem + weight: normal + + .tags-container + display: flex + flex-wrap: wrap + +// Media Queries Post Page // +@import '../media/_media_post' diff --git a/_app/assets/sass/pages/resources.sass b/_app/assets/sass/pages/resources.sass new file mode 100644 index 0000000..bb18ee0 --- /dev/null +++ b/_app/assets/sass/pages/resources.sass @@ -0,0 +1,66 @@ +// General Styles // +@import '../_style' + +// Page Styles // +main + padding: 0 13% 6% 13% + +.resources-container + display: flex + justify-content: space-between + flex-wrap: wrap + + .resource + display: flex + flex-direction: column + width: 45% + box-shadow: 0px 3px 6px rgba(0,0,0,0.3) + margin-bottom: 4% + + &:nth-last-child(-n+2) + margin-bottom: 0 + + &:nth-last-child(2):nth-child(even) + margin-bottom: 4% + + header + overflow: hidden + position: relative + + &:hover img + transform: scale(1.05) + + img + width: 100% + transition: all .3s ease-in-out + + .resource-overlay + background-color: rgba(0,0,0,0.5) + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + display: flex + align-items: center + justify-content: center + padding: 2% + + .resource-heading + color: white + text-align: center + font-size: 1.4rem + font-weight: normal + + .resource-text, footer + padding: 3% + + .resource-text + flex: 1 0 auto + + footer + display: flex + justify-content: flex-end + +// Media Queries Resources Page // +@import '../media/_media_resources' diff --git a/_app/assets/sass/pages/tag.sass b/_app/assets/sass/pages/tag.sass new file mode 100644 index 0000000..567b917 --- /dev/null +++ b/_app/assets/sass/pages/tag.sass @@ -0,0 +1,101 @@ +// General Styles // +@import '../_style' + +// Page Styles // +main + padding: 0 0 6% 0 + +.tag-section + padding: 0 5% + + .article-text + overflow: hidden + + .hidden + height: 0 + opacity: 0 + visibility: hidden + transition: all .4s ease-in-out + margin: 0 + + &.show + height: auto + opacity: 1 + visibility: visible + margin-bottom: 4% + + .tag-read-more-wrap + display: flex + justify-content: center + + .tag-read-more, .tag-read-more::before + transition: all .3s ease-in-out + + .tag-read-more + display: flex + text-align: center + color: $main-font-color + + &::before + content: '' + height: 30px + width: 30px + background: + image: url('../img/icons/back-button.svg') + repeat: no-repeat + size: cover + transform: rotate(-90deg) + + &:hover + color: $dark-blue + + &::before + background-image: url('../img/icons/back-button-hover.svg') + + &.collapse::before + transform: rotate(90deg) + +.article-suggestions + display: flex + margin-top: 6% + background-color: white + + h3 + text-align: center + font: + size: 1.5rem + weight: normal + margin-bottom: 4% + color: $white-gray + + .articles-same-tag, .related-tags-section + padding: 4% 0 + display: flex + flex-direction: column + align-items: center + + .articles-same-tag + > h3 + color: $blue + + .related-tags-section + background-color: $blue + + .related-tags, .articles-related-tags + display: flex + flex-direction: column + align-items: center + width: 100% + + .related-tags + margin-bottom: 6% + + .tags-container + display: flex + justify-content: space-around + flex-wrap: wrap + width: 70% + background-color: $white-gray + +// Media Queries Tag Page // +@import '../media/_media_tag-page' diff --git a/_app/assets/sass/pages/tags.sass b/_app/assets/sass/pages/tags.sass new file mode 100644 index 0000000..d53ef52 --- /dev/null +++ b/_app/assets/sass/pages/tags.sass @@ -0,0 +1,36 @@ +// General Styles // +@import '../_style' + +// Page Styles // +main + padding: 0 25% 6% 25% + +.tags-text + display: block + text-align: center + font: + weight: normal + size: 1.5rem + margin-bottom: 5% + +.tag-previews + .tag-preview + background-color: white + margin-bottom: 4% + box-shadow: 0px 3px 6px rgba(0,0,0,0.3) + + &:last-child + margin-bottom: 0 + + header + padding: 3% 0 + + .tag-preview-text, footer + padding: 3% + + footer + display: flex + justify-content: flex-end + +// Media Queries Tags Page // +@import '../media/_media_tags.sass' diff --git a/_app/assets/sass/partials/_footer.sass b/_app/assets/sass/partials/_footer.sass index 7c5946b..df70fec 100644 --- a/_app/assets/sass/partials/_footer.sass +++ b/_app/assets/sass/partials/_footer.sass @@ -1,162 +1,20 @@ -footer - margin: 3% 0 - margin-bottom: 1.5% - - p - font-size: 2rem - color: $blue - - .contact - margin: 2% 0 - display: flex - - img - width: 60px - - .social, .other - width: 50% +.footer + min-height: 80px + padding: 0 2% + display: flex + justify-content: space-between + align-items: center + + .footer-logo-nav-container display: flex + align-items: center + width: 100% - .social a + .logo margin-right: 2% - transition: all .3s linear - - .other - justify-content: flex-end - - a - color: $blue - font-size: 1.5rem - display: flex - align-items: center - justify-content: space-between - width: 45% - font-weight: bold - font-family: $secondary-font - - &:hover - color: $dark-blue - - .legal - display: flex - justify-content: center - - p, p small, p small a - font-size: 1rem - color: $blue - - &:hover - color: $dark-blue - -///// Media Queries ///// -@media only screen and (max-width: 1600px) - footer .other a - width: 55% - -@media only screen and (max-width: 1475px) - footer .other a - width: 60% - -@media only screen and (max-width: 1370px) - footer .other a - width: 65% - -@media only screen and (max-width: 1250px) - footer .other a - width: 70% - -@media only screen and (max-width: 1170px) - footer .other a - width: 75% - -@media only screen and (max-width: 1100px) - footer .other a - width: 80% - -@media only screen and (max-width: 1024px) - footer .other a - width: 85% - -@media only screen and (max-width: 915px) - footer .other a - width: 90% - -@media only screen and (max-width: 835px) - footer .other a - width: 95% - -@media only screen and (max-width: 775px) - footer .other a - width: 98% - -@media only screen and (max-width: 715px) - footer - .social - width: 40% - - .other - width: 60% - - a - width: 90% - -@media only screen and (max-width: 645px) - footer .other a - width: 95% - -@media only screen and (max-width: 610px) - footer - .social - width: 35% - - .other - width: 65% - - a - width: 90% - -@media only screen and (max-width: 595px) - footer - .contact img - width: 40px - - .social - width: 35% - - .other - width: 65% - - a - width: 90% - -@media only screen and (max-width: 560px) - footer .other a - width: 95% - -@media only screen and (max-width: 535px) - footer - p - text-align: center - - .contact - flex-direction: column - align-items: center - - .social, .other - width: 70% - justify-content: space-around - margin: 2.5% 0 - -@media only screen and (max-width: 500px) - footer - .social, .other - width: 80% - .legal - p, p small, p small a - font-size: 1.2rem + &.footer--white + background-color: white -@media only screen and (max-width: 350px) - footer - .social, .other - width: 90% +// Media Queries Footer // +@import '../media/_media_footer' diff --git a/_app/assets/sass/partials/_header.sass b/_app/assets/sass/partials/_header.sass new file mode 100644 index 0000000..a50e593 --- /dev/null +++ b/_app/assets/sass/partials/_header.sass @@ -0,0 +1,10 @@ +.header + min-height: 80px + background-color: white + padding: 0 2% + display: flex + justify-content: space-between + align-items: center + +// Media Queries Header // +@import '../media/_media_header' diff --git a/_app/php/Mail/Mail.php b/_app/php/Mail/Mail.php new file mode 100644 index 0000000..38a8bbe --- /dev/null +++ b/_app/php/Mail/Mail.php @@ -0,0 +1,55 @@ +to = $to; + $this->from = $from; + $this->subject = $this->getSubject($subject); + $this->message = $message; + + if ($headers) { + $this->headers = $this->getHeaders($headers); + } else { + $this->headers = $this->getHeaders(); + } + + $this->sent = $this->sendMail(); + } + + private function getSubject(string $subject) { + return '=?UTF-8?B?' . base64_encode($subject) . '?='; + } + + private function getHeaders(array $custom_headers = []) { + if ($custom_headers) { + return implode("\r\n", $custom_headers); + } + + return implode("\r\n", [ + 'MIME-Version: 1.0', + 'Content-type: text/plain; charset=utf-8', + "From: {$this->from}", + "Reply-To: {$this->from}", + "Subject: {$this->subject}", + 'X-Mailer: PHP/' . phpversion() + ]); + } + + private function sendMail() { + $to = $this->to; + $subject = $this->subject; + $message = $this->message; + $headers = $this->headers; + + return mail($to, $subject, $message, $headers); + } + } +?> \ No newline at end of file diff --git a/_app/php/Mail/Message.php b/_app/php/Mail/Message.php new file mode 100644 index 0000000..d986d40 --- /dev/null +++ b/_app/php/Mail/Message.php @@ -0,0 +1,23 @@ +message = $this->createMessage($text, $name); + } + + private function createMessage(string $text, string $name = null) { + if ($name) { + return $text . PHP_EOL . PHP_EOL . PHP_EOL . 'Gesendet von: ' . $name; + } else { + return $text; + } + } + + public function getMessage() { + return $this->message; + } + } +?> \ No newline at end of file diff --git a/_app/php/config.php b/_app/php/config.php index 95e71cb..1fa398f 100644 --- a/_app/php/config.php +++ b/_app/php/config.php @@ -1,11 +1,11 @@ '; + const ERR_HTML_END = '

'; error_reporting(E_ALL & ~E_NOTICE); - //error_reporting(E_ALL); - ini_set('display_errors', 'Off'); ini_set('log_errors', 'On'); ini_set('error_log', '../../../jr-cologne-errors.log'); -?> \ No newline at end of file +?> diff --git a/_app/php/csrf.php b/_app/php/csrf.php new file mode 100644 index 0000000..eeaa6fb --- /dev/null +++ b/_app/php/csrf.php @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/_app/php/functions.php b/_app/php/functions.php index 6db8dad..d02bdc4 100644 --- a/_app/php/functions.php +++ b/_app/php/functions.php @@ -1,57 +1,43 @@ $value) { $form_data[$key] = clean($value); } ['name' => $name, 'email' => $email, 'subject' => $subject, 'message' => $message] = $form_data; - // check if form is filled in correctly if ( !empty($name) && !empty($email) && !empty($subject) && !empty($message) ) { - // check email if (filter_var($email, FILTER_VALIDATE_EMAIL)) { - // prevent multiple emails $email = explode(',', $email); $email = $email[0]; - // send email if (sendMail($name, $email, $subject, $message)) { header('Location: danke.html'); } else { - return '

Beim Versand der E-Mail ist leider ein Fehler aufgetreten. Bitte versuche es nochmal!

'; + return ERR_HTML_START . 'Beim Versand der E-Mail ist leider ein Fehler aufgetreten. Bitte versuche es nochmal!' . ERR_HTML_END; } } else { - return '

Du hast keine gültige E-Mail-Adresse angegeben. Bitte versuche es nochmal!

'; + return ERR_HTML_START . 'Du hast keine gültige E-Mail-Adresse angegeben. Bitte versuche es nochmal!' . ERR_HTML_END; } } else { - return '

Du hast nicht alle Felder ausgefüllt. Bitte versuche es nochmal!

'; + return ERR_HTML_START . 'Du hast nicht alle Felder ausgefüllt. Bitte versuche es nochmal!' . ERR_HTML_END; } } - // clean value function clean(string $value) { return htmlspecialchars(stripslashes(trim($value))); } - // send mail function sendMail(string $name, string $email, string $subject, string $message) { - $subject = '=?UTF-8?B?'.base64_encode($subject).'?='; - $headers = [ - "MIME-Version: 1.0", - "Content-type: text/plain; charset=utf-8", - 'From: ' . RECEIVER, - 'Reply-To: ' . RECEIVER, - "Subject: {$subject}", - "X-Mailer: PHP/".phpversion() - ]; - - if ( !empty(RECEIVER) && mail(RECEIVER, $subject, $message . PHP_EOL . PHP_EOL . PHP_EOL . $name, implode("\r\n", $headers)) ) { - return true; - } else { - return false; - } + $message = new Message($message, $name); + + $mail = new Mail(RECEIVER, $email, $subject, $message->getMessage()); + + return $mail->sent; } ?> \ No newline at end of file diff --git a/_app/php/init.php b/_app/php/init.php new file mode 100644 index 0000000..6f09107 --- /dev/null +++ b/_app/php/init.php @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/_app/php/session.php b/_app/php/session.php new file mode 100644 index 0000000..465a18c --- /dev/null +++ b/_app/php/session.php @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/_config.yml b/_config.yml index 88a5030..cf6e5af 100644 --- a/_config.yml +++ b/_config.yml @@ -2,7 +2,8 @@ port: 3000 encoding: UTF-8 title: jr-cologne.de email: kontakt@jr-cologne.de -description: Meine persönliche Website +description: Du bist ebenfalls ein kleiner Webfanatiker und liebst es, Webseiten zu designen sowie zu entwickeln? Dann bist du bei mir genau richtig! +keywords: webentwicklung,webdesign,javascript,cms,mysql,php,php7,sql,css,css3,jquery,html5,ide,content management system,programmieren,sass,js,ux design,ui,ux,ui design,php programmierung,webseiten erstellen,web,editor,internet,css tutorial,css3 tutorial,html tutorial,html5 tutorial,javascript tutorial,js tutorial,php tutorial,sql tutorial,tutorials baseurl: "" url: "https://jr-cologne.de" twitter_username: jrcologne @@ -19,10 +20,12 @@ exclude: - _app - README.md - design + - composer.json + - vendor/composer/LICENSE keep_files: - _app - kontakt.php - sitemap.xml -gems: +plugins: - jekyll-sitemap diff --git a/_includes/article-content-image.html b/_includes/article-content-image.html new file mode 100644 index 0000000..45110ae --- /dev/null +++ b/_includes/article-content-image.html @@ -0,0 +1,13 @@ +
+
+ {{ include.alt }} +
+ +
+

{{ include.description }}

+ +

+ {{ include.source }} +

+
+
diff --git a/_includes/article-top-bar.html b/_includes/article-top-bar.html new file mode 100644 index 0000000..b7eca46 --- /dev/null +++ b/_includes/article-top-bar.html @@ -0,0 +1,5 @@ +
+ Zurück zum Blog + + +
diff --git a/_includes/back-button.html b/_includes/back-button.html new file mode 100644 index 0000000..135a896 --- /dev/null +++ b/_includes/back-button.html @@ -0,0 +1,3 @@ +
+ {{ include.text }} +
diff --git a/_includes/code-highlighter.html b/_includes/code-highlighter.html new file mode 100644 index 0000000..ee059f0 --- /dev/null +++ b/_includes/code-highlighter.html @@ -0,0 +1,4 @@ + + + + diff --git a/_includes/foot.html b/_includes/foot.html index 1d239aa..879812b 100644 --- a/_includes/foot.html +++ b/_includes/foot.html @@ -1 +1,5 @@ + + + + diff --git a/_includes/footer.html b/_includes/footer.html deleted file mode 100644 index 71f8fae..0000000 --- a/_includes/footer.html +++ /dev/null @@ -1,17 +0,0 @@ - diff --git a/_includes/head.html b/_includes/head.html index 79280ac..eef1e7a 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -5,15 +5,15 @@ {{ include.robots }} - - + + - + diff --git a/_includes/tags.html b/_includes/tags.html new file mode 100644 index 0000000..2502a66 --- /dev/null +++ b/_includes/tags.html @@ -0,0 +1,9 @@ +
+

Tags

+ +
+ {% for tag in page.tags %} + {{ tag.title }} + {% endfor %} +
+
diff --git a/_includes/tweet-embed-code.html b/_includes/tweet-embed-code.html new file mode 100644 index 0000000..c7c0d19 --- /dev/null +++ b/_includes/tweet-embed-code.html @@ -0,0 +1 @@ + diff --git a/_layouts/contact.html b/_layouts/blog.html similarity index 62% rename from _layouts/contact.html rename to _layouts/blog.html index 3d6f149..3499b1d 100644 --- a/_layouts/contact.html +++ b/_layouts/blog.html @@ -1,7 +1,7 @@ - + - {% include head.html stylesheet='contact' %} + {% include head.html stylesheet='blog' %} {{ content }} diff --git a/_layouts/contact.php b/_layouts/contact.php new file mode 100644 index 0000000..d050541 --- /dev/null +++ b/_layouts/contact.php @@ -0,0 +1,20 @@ + + + + + + {% include head.html stylesheet='contact' %} + + + {{ content }} + + {% include foot.html %} + + diff --git a/_layouts/danke.html b/_layouts/danke.html index 7b4bde8..8c1d1cd 100644 --- a/_layouts/danke.html +++ b/_layouts/danke.html @@ -1,7 +1,7 @@ - + - {% include head.html stylesheet='contact' robots='' %} + {% include head.html stylesheet='danke' robots='' %} {{ content }} diff --git a/_layouts/index.html b/_layouts/index.html new file mode 100644 index 0000000..4b08811 --- /dev/null +++ b/_layouts/index.html @@ -0,0 +1,20 @@ + + + + {% include head.html stylesheet='index' %} + + + {{ content }} + + + + + + + + + + + {% include foot.html %} + + diff --git a/_layouts/legal.html b/_layouts/legal.html index 15e0baa..f337da9 100644 --- a/_layouts/legal.html +++ b/_layouts/legal.html @@ -1,5 +1,5 @@ - + {% include head.html stylesheet='legal' robots='' %} diff --git a/_layouts/portfolio-single.html b/_layouts/portfolio-single.html new file mode 100644 index 0000000..b2de6de --- /dev/null +++ b/_layouts/portfolio-single.html @@ -0,0 +1,14 @@ + + + + {% include head.html stylesheet='post' %} + + + {{ content }} + + + + + {% include foot.html %} + + diff --git a/_layouts/coming-soon.html b/_layouts/portfolio.html similarity index 60% rename from _layouts/coming-soon.html rename to _layouts/portfolio.html index aca6890..cf2d836 100644 --- a/_layouts/coming-soon.html +++ b/_layouts/portfolio.html @@ -1,7 +1,7 @@ - + - {% include head.html stylesheet='coming-soon' %} + {% include head.html stylesheet='portfolio' %} {{ content }} diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000..68480e0 --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,14 @@ + + + + {% include head.html stylesheet='post' %} + + + {{ content }} + + + + + {% include foot.html %} + + diff --git a/_layouts/resource.html b/_layouts/resource.html new file mode 100644 index 0000000..b2de6de --- /dev/null +++ b/_layouts/resource.html @@ -0,0 +1,14 @@ + + + + {% include head.html stylesheet='post' %} + + + {{ content }} + + + + + {% include foot.html %} + + diff --git a/_layouts/resources.html b/_layouts/resources.html new file mode 100644 index 0000000..0e96ac1 --- /dev/null +++ b/_layouts/resources.html @@ -0,0 +1,11 @@ + + + + {% include head.html stylesheet='resources' %} + + + {{ content }} + + {% include foot.html %} + + diff --git a/_layouts/tag.html b/_layouts/tag.html new file mode 100644 index 0000000..4dd148c --- /dev/null +++ b/_layouts/tag.html @@ -0,0 +1,14 @@ + + + + {% include head.html stylesheet='tag' %} + + + {{ content }} + + + + + {% include foot.html %} + + diff --git a/_layouts/tags.html b/_layouts/tags.html new file mode 100644 index 0000000..ea89b10 --- /dev/null +++ b/_layouts/tags.html @@ -0,0 +1,11 @@ + + + + {% include head.html stylesheet='tags' %} + + + {{ content }} + + {% include foot.html %} + + diff --git a/_posts/blog/2017-04-24-article6.html b/_posts/blog/2017-04-24-article6.html new file mode 100644 index 0000000..f294277 --- /dev/null +++ b/_posts/blog/2017-04-24-article6.html @@ -0,0 +1,193 @@ +--- +layout: post +title: Article 6 +canonical: blog/2017/04/24/article6.html +date: "2017-04-24 19:00:00 +0200" +date_string: "Montag, 24.04.2017" +image: { url: "/_app/assets/img/img6-large.jpg", alt: "Article 6 Image" } +preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." +categories: blog + +tags: + - { title: "Twitter", url: "https://de.wikipedia.org/wiki/Twitter", target: "_blank" } + - { title: "Mac", url: "https://de.wikipedia.org/wiki/Macintosh", target: "_blank" } + - { title: "Design", url: "/tags/design.html", target: "_self" } + +code1: | + + + + + Document Title + + + + + + + + + + +--- + +
+ + + +
+ +
+ {% include article-top-bar.html %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+ + 
{{ page.code1 | xml_escape }}
+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam + semper libero, sit amet adipiscing sem neque sed ipsum. + Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut + libero venenatis faucibus. +

+ + {% include article-content-image.html image="/_app/assets/img/img1-large.jpg" alt="Article 6 Content Image" description="Article 6 Content Image" source='Bild: pixabay.com' %} + +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. +

+ +

See the Pen Responsive Equal Height Columns without Flexbox by JR Cologne (@jr-cologne) on CodePen.

+ +

+ Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+
+ + {% include tags.html %} +
+
+ + + +{% include code-highlighter.html %} +{% include pen-embed-code.html %} diff --git a/_posts/blog/2017-04-25-article5.html b/_posts/blog/2017-04-25-article5.html new file mode 100644 index 0000000..5b31f5f --- /dev/null +++ b/_posts/blog/2017-04-25-article5.html @@ -0,0 +1,248 @@ +--- +layout: post +title: Article 5 +canonical: blog/2017/04/25/article5.html +date: "2017-04-25 19:00:00 +0200" +date_string: "Dienstag, 25.04.2017" +image: { url: "/_app/assets/img/img5-large.jpg", alt: "Article 5 Image" } +preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." +categories: blog + +tags: + - { title: "Webdesign", url: "/tags/webdesign.html", target: "_self" } + - { title: "Design", url: "/tags/design.html", target: "_self" } + - { title: "Webentwicklung", url: "/tags/webentwicklung.html", target: "_self" } + - { title: "Facebook", url: "https://de.wikipedia.org/wiki/Facebook", target: "_blank" } + +--- + +
+ + + +
+ +
+ {% include article-top-bar.html %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. +

+ +
+ +
+ +

+ Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam + semper libero, sit amet adipiscing sem neque sed ipsum. + Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut + libero venenatis faucibus. +

+ + {% include article-content-image.html image="/_app/assets/img/img2-large.jpg" alt="Article 5 Content Image" description="Article 5 Content Image" source='Bild: pixabay.com' %} + +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browser Usage in % from January to July 2017 (data from w3schools)
2017ChromeIE/EdgeFirefoxSafariOpera
July76.7 %4.2 %13.3 %3.0 %1.2 %
June76.3 %4.6 %13.3 %3.3 %1.2 %
May75.8 %4.6 %13.6 %3.4 %1.1 %
April75.7 %4.6 %13.6 %3.7 %1.1 %
March75.1 %4.8 %14.1 %3.6 %1.0 %
February74.1 %4.8 %15.0 %3.6 %1.0 %
January73.7 %4.9 %15.4 %3.6 %1.0 %
+ +

+ Donec vitae sapien ut libero venenatis faucibus. + Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. + Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+
+ + {% include tags.html %} +
+
+ + + +{% include tweet-embed-code.html %} diff --git a/_posts/blog/2017-04-26-article4.html b/_posts/blog/2017-04-26-article4.html new file mode 100644 index 0000000..5e88792 --- /dev/null +++ b/_posts/blog/2017-04-26-article4.html @@ -0,0 +1,175 @@ +--- +layout: post +title: Article 4 +canonical: blog/2017/04/26/article4.html +date: "2017-04-26 19:00:00 +0200" +date_string: "Mittwoch, 26.04.2017" +image: { url: "/_app/assets/img/img4-large.jpg", alt: "Article 4 Image" } +preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." +categories: blog + +tags: + - { title: "Hardware", url: "/tags/hardware.html", target: "_self" } + - { title: "Responsive Webdesign", url: "/tags/responsive-webdesign.html", target: "_self" } + +--- + +
+ + + +
+ +
+ {% include article-top-bar.html %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. +

+ + + +

+ Donec vitae sapien ut libero venenatis faucibus. + Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. + Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam + semper libero, sit amet adipiscing sem neque sed ipsum. + Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut + libero venenatis faucibus. +

+ + {% include article-content-image.html image="/_app/assets/img/img3-large.jpg" alt="Article 4 Content Image" description="Article 4 Content Image" source='Bild: pixabay.com' %} + +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. +

+ +
+

+ Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. +

+ + Source +
+ +

+ Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+
+ + {% include tags.html %} +
+
+ + diff --git a/_posts/blog/2017-04-27-article3.html b/_posts/blog/2017-04-27-article3.html new file mode 100644 index 0000000..5105919 --- /dev/null +++ b/_posts/blog/2017-04-27-article3.html @@ -0,0 +1,168 @@ +--- +layout: post +title: Article 3 +canonical: blog/2017/04/27/article3.html +date: "2017-04-27 19:00:00 +0200" +date_string: "Donnerstag, 27.04.2017" +image: { url: "/_app/assets/img/img3-large.jpg", alt: "Article 3 Image" } +preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." +categories: blog + +tags: + - { title: "Apple", url: "https://de.wikipedia.org/wiki/Apple", target: "_blank" } + - { title: "Mac", url: "https://de.wikipedia.org/wiki/Macintosh", target: "_blank" } + - { title: "Hardware", url: "/tags/hardware.html", target: "_self" } + +--- + +
+ + + +
+ +
+ {% include article-top-bar.html %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. +

+ +
+
+ Article 3 Content Image 1 +
+
+ +

+ In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam + semper libero, sit amet adipiscing sem neque sed ipsum. + Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut + libero venenatis faucibus. +

+ + {% include article-content-image.html image="/_app/assets/img/img4-large.jpg" alt="Article 3 Content Image 2" description="Article 3 Content Image 2" source='Bild: pixabay.com' %} + +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+
+ + {% include tags.html %} +
+
+ + diff --git a/_posts/blog/2017-04-28-article2.html b/_posts/blog/2017-04-28-article2.html new file mode 100644 index 0000000..345ace1 --- /dev/null +++ b/_posts/blog/2017-04-28-article2.html @@ -0,0 +1,200 @@ +--- +layout: post +title: Article 2 +canonical: blog/2017/04/28/article2.html +date: "2017-04-28 19:00:00 +0200" +date_string: "Freitag, 28.04.2017" +image: { url: "/_app/assets/img/img2-large.jpg", alt: "Article 2 Image" } +preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." +categories: blog + +tags: + - { title: "Webdesign", url: "/tags/webdesign.html", target: "_self" } + - { title: "Facebook", url: "https://de.wikipedia.org/wiki/Facebook", target: "_blank" } + - { title: "Design", url: "/tags/design.html", target: "_self" } + - { title: "Responsive Webdesign", url: "/tags/responsive-webdesign.html", target: "_self" } + +--- + +
+ + + +
+ +
+ {% include article-top-bar.html %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

Lorem ipsum dolor sit amet

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. +

+ +

Lorem ipsum

+ +
    +
  1. Aenean leo ligula
    2. +
  2. fringilla vel, aliquet nec +
      +
    1. velit cursus nunc
      2. +
    2. Etiam sit amet orci
      3. +
    +
    3. +
  3. Donec vitae sapien
    4. +
  4. Donec pede justo, fringilla vel +
      +
    • Lorem ipsum dolor sit amet
      • +
    • Nulla consequat
      • +
    • leo eget bibendum
      • +
    +
    5. +
  5. Aenean commodo ligula eget dolor
    6. +
+ +
Sed fringilla mauris
+ +

+ Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. + Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+ +

Dolor sit amet

+ +
Aenean commodo ligula
+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam + semper libero, sit amet adipiscing sem neque sed ipsum. + Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut + libero venenatis faucibus. +

+ + {% include article-content-image.html image="/_app/assets/img/img5-large.jpg" alt="Article 2 Content Image" description="Article 2 Content Image" source='Bild: pixabay.com' %} + +
Cum sociis natoque penatibus et magnis dis parturient montes
+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. +

+ +
Phasellus viverra nulla ut metus varius laoreet
+ +

+ In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+
+ + {% include tags.html %} +
+
+ + diff --git a/_posts/blog/2017-04-29-article1.html b/_posts/blog/2017-04-29-article1.html new file mode 100644 index 0000000..a894f49 --- /dev/null +++ b/_posts/blog/2017-04-29-article1.html @@ -0,0 +1,189 @@ +--- +layout: post +title: Article 1 +canonical: blog/2017/04/29/article1.html +date: "2017-04-29 19:00:00 +0200" +date_string: "Samstag, 29.04.2017" +image: { url: "/_app/assets/img/img1-large.jpg", alt: "Article 1 Image" } +preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." +categories: blog + +tags: + - { title: "Webdesign", url: "/tags/webdesign.html", target: "_self" } + - { title: "Twitter", url: "https://de.wikipedia.org/wiki/Twitter", target: "_blank" } + - { title: "Apple", url: "https://de.wikipedia.org/wiki/Apple", target: "_blank" } + - { title: "Mac", url: "https://de.wikipedia.org/wiki/Macintosh", target: "_blank" } + +--- + +
+ + + +
+ +
+ {% include article-top-bar.html %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

Lorem ipsum dolor sit amet

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. +

+ +

Lorem ipsum

+ +
    +
  • Lorem ipsum dolor sit amet +
      +
    • incididunt ut labore et dolore magna aliqua
      • +
    • deserunt mollit anim id est laborum
      • +
    +
    • +
  • consectetuer adipiscing elit +
      +
    • Lorem ipsum dolor sit amet
      • +
    • sed do eiusmod tempor
      • +
    +
    • +
  • Aenean commodo ligula eget dolor
    • +
+ +

Dolor sit amet

+ +

+ In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+ +

Aenean commodo ligula eget dolor

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam + semper libero, sit amet adipiscing sem neque sed ipsum. + Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut + libero venenatis faucibus. +

+ + {% include article-content-image.html image="/_app/assets/img/img6-large.jpg" alt="Article 1 Content Image" description="Article 1 Content Image" source='Bild: pixabay.com' %} + +

Aenean massa

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+
+ + {% include tags.html %} +
+
+ + diff --git a/blog.html b/blog.html new file mode 100644 index 0000000..4ec8c2c --- /dev/null +++ b/blog.html @@ -0,0 +1,82 @@ +--- +layout: blog +title: Blog +canonical: blog.html +--- + +
+ + + +
+ +
+

{{ page.title }}

+ +
+ + {% for post in site.posts %} + + + + {% endfor %} + +
+
+ + diff --git a/composer.json b/composer.json new file mode 100644 index 0000000..6621097 --- /dev/null +++ b/composer.json @@ -0,0 +1,8 @@ +{ + "autoload": { + "files": [ "_app/php/init.php" ], + "psr-4": { + "JRCologne\\Utils\\": "_app/php" + } + } +} \ No newline at end of file diff --git a/danke.html b/danke.html index 8f13e90..cc1765a 100644 --- a/danke.html +++ b/danke.html @@ -1,20 +1,59 @@ --- layout: danke -title: Danke -canonical: danke.html +title: Danke! sitemap: false +canonical: danke.html --- -
-
- Zurück zur Startseite -
+
+ + + +
-
-

Deine Nachricht wurde erfolgreich gesendet. Vielen Dank!

+
+ {% include back-button.html path='index.html' text='Zurück zur Startseite' %} -

Ich werde mich bemühen, diese schnellstmöglich zu beantworten. Bitte habe ein wenig Geduld.

-
+

{{ page.title }}

+ +

Deine Nachricht wurde erfolgreich gesendet. Vielen Dank!

+ +

Ich werde mich bemühen, diese schnellstmöglich zu beantworten. Bitte habe ein wenig Geduld.

+
+ +
+ + diff --git a/datenschutz.html b/datenschutz.html index 5f2a36e..477a6a6 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -4,123 +4,180 @@ canonical: datenschutz.html --- -
-
- Zurück zur Startseite -
- -
-

Datenschutzerklärung

- -

Datenschutz

-

- Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre - personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser - Datenschutzerklärung. - Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf - unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder E-Mail-Adressen) erhoben - werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche - Zustimmung nicht an Dritte weitergegeben. - Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) - Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht - möglich. -

- -

Cookies

-

- Die Internetseiten verwenden teilweise so genannte Cookies. Cookies richten auf Ihrem Rechner keinen - Schaden an und enthalten keine Viren. Cookies dienen dazu, unser Angebot nutzerfreundlicher, effektiver und - sicherer zu machen. Cookies sind kleine Textdateien, die auf Ihrem Rechner abgelegt werden und die Ihr - Browser speichert. - Die meisten der von uns verwendeten Cookies sind so genannte „Session-Cookies“. Sie werden nach Ende - Ihres Besuchs automatisch gelöscht. Andere Cookies bleiben auf Ihrem Endgerät gespeichert, bis Sie diese - löschen. Diese Cookies ermöglichen es uns, Ihren Browser beim nächsten Besuch wiederzuerkennen. - Sie können Ihren Browser so einstellen, dass Sie über das Setzen von Cookies informiert werden und Cookies - nur im Einzelfall erlauben, die Annahme von Cookies für bestimmte Fälle oder generell ausschließen sowie das - automatische Löschen der Cookies beim Schließen des Browser aktivieren. Bei der Deaktivierung von Cookies - kann die Funktionalität dieser Website eingeschränkt sein. -

- -

Server-Log-Files

-

- Der Provider der Seiten erhebt und speichert automatisch Informationen in so genannten Server-Log Files, die - Ihr Browser automatisch an uns übermittelt. Dies sind: -

+
+ + + +
+ +
+

{{ page.title }}

+ +

Datenschutzerklärung

+ +

Datenschutz

+

+ Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten + sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und + entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser + Datenschutzerklärung. Die Nutzung unserer Webseite ist in der Regel + ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten + personenbezogene Daten (beispielsweise Name, Anschrift oder + E-Mail-Adressen) erhoben werden, erfolgt dies, soweit möglich, + stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche + Zustimmung nicht an Dritte weitergegeben. Wir weisen darauf hin, + dass die Datenübertragung im Internet (z.B. bei der Kommunikation + per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz + der Daten vor dem Zugriff durch Dritte ist nicht möglich. +

+ +

Cookies

+

+ Die Internetseiten verwenden teilweise so genannte Cookies. + Cookies richten auf Ihrem Rechner keinen Schaden an und enthalten + keine Viren. Cookies dienen dazu, unser Angebot nutzerfreundlicher, + effektiver und sicherer zu machen. Cookies sind kleine Textdateien, + die auf Ihrem Rechner abgelegt werden und die Ihr Browser speichert. + Die meisten der von uns verwendeten Cookies sind so genannte + „Session-Cookies“. Sie werden nach Ende Ihres Besuchs automatisch gelöscht. + Andere Cookies bleiben auf Ihrem Endgerät gespeichert, + bis Sie diese löschen. Diese Cookies ermöglichen es uns, + Ihren Browser beim nächsten Besuch wiederzuerkennen. Sie können + Ihren Browser so einstellen, dass Sie über das Setzen von Cookies + informiert werden und Cookies nur im Einzelfall erlauben, die Annahme + von Cookies für bestimmte Fälle oder generell ausschließen sowie das + automatische Löschen der Cookies beim Schließen des Browser aktivieren. + Bei der Deaktivierung von Cookies kann die Funktionalität dieser + Website eingeschränkt sein. +

+ +

Server-Log-Files

+

+ Der Provider der Seiten erhebt und speichert automatisch Informationen + in so genannten Server-Log Files, die Ihr Browser automatisch an uns + übermittelt. Dies sind: +

+
    +
  • Browsertyp und Browserversion
    • +
  • verwendetes Betriebssystem
    • +
  • Referrer URL
    • +
  • Hostname des zugreifenden Rechners
    • +
  • Uhrzeit der Serveranfrage
    • +
+

+ Diese Daten sind nicht bestimmten Personen zuordenbar. + Eine Zusammenführung dieser Daten mit anderen Datenquellen wird + nicht vorgenommen. Wir behalten uns vor, diese Daten nachträglich + zu prüfen, wenn uns konkrete Anhaltspunkte für eine rechtswidrige + Nutzung bekannt werden. +

+ +

Kontaktformular

+

+ Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, + werden Ihre Angaben aus dem Anfrageformular inklusive der von Ihnen + dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und für + den Fall von Anschlussfragen bei uns gespeichert. Diese Daten geben + wir nicht ohne Ihre Einwilligung weiter. +

+ +

Datenschutzerklärung für die Nutzung von Piwik

+

+ Diese Website benutzt den Open Source Webanalysedienst Piwik. + Piwik verwendet so genannte "Cookies". Das sind Textdateien, + die auf Ihrem Computer gespeichert werden und die eine Analyse der + Benutzung der Website durch Sie ermöglichen. Dazu werden die durch + den Cookie erzeugten Informationen über die Benutzung dieser Website + auf unserem Server gespeichert. Die IP-Adresse wird vor der + Speicherung anonymisiert. +

+

+ Die durch den Cookie erzeugten Informationen über die Benutzung + dieser Website werden nicht an Dritte weitergegeben. Sie können die + Speicherung der Cookies durch eine entsprechende Einstellung Ihrer + Browser-Software verhindern; wir weisen Sie jedoch darauf hin, dass + Sie in diesem Fall gegebenenfalls nicht sämtliche Funktionen dieser + Website vollumfänglich werden nutzen können. +

+

+ Wenn Sie mit der Speicherung und Nutzung Ihrer Daten nicht einverstanden + sind, können Sie die Speicherung und Nutzung hier deaktivieren. + In diesem Fall wird in Ihrem Browser ein Opt-Out-Cookie hinterlegt der + verhindert, dass Piwik Nutzungsdaten speichert. Wenn Sie Ihre Cookies + löschen hat dies zur Folge, dass auch das Piwik Opt-Out-Cookie + gelöscht wird. Das Opt-Out muss bei einem erneuten Besuch unserer Seite + wieder aktiviert werden. +

+ + +

SSL-Verschlüsselung

+

+ Diese Seite nutzt aus Gründen der Sicherheit und zum Schutz der + Übertragung vertraulicher Inhalte, wie zum Beispiel der Anfragen, + die Sie an uns als Seitenbetreiber senden, eine SSL-Verschlüsselung. + Eine verschlüsselte Verbindung erkennen Sie daran, dass die Adresszeile + des Browsers von "http://" auf "https://" wechselt und an dem + Schloss-Symbol in Ihrer Browserzeile. Wenn die SSL Verschlüsselung + aktiviert ist, können die Daten, die Sie an uns übermitteln, + nicht von Dritten mitgelesen werden. +

+ +

Auskunft, Löschung, Sperrung

+

+ Sie haben jederzeit das Recht auf unentgeltliche Auskunft über Ihre + gespeicherten personenbezogenen Daten, deren Herkunft und Empfänger + und den Zweck der Datenverarbeitung sowie ein Recht auf Berichtigung, + Sperrung oder Löschung dieser Daten. Hierzu sowie zu weiteren Fragen + zum Thema personenbezogene Daten können Sie sich jederzeit unter + der im Impressum angegebenen Adresse an uns wenden. +

+ +

Widerspruch Werbe-Mails

+

+ Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten + Kontaktdaten zur Übersendung von nicht ausdrücklich angeforderter + Werbung und Informationsmaterialien wird hiermit widersprochen. + Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte + im Falle der unverlangten Zusendung von Werbeinformationen, + etwa durch Spam-E-Mails, vor. +

+ +

Quelle: eRecht24

+
+ +
+
+ + + +
-

- Diese Daten sind nicht bestimmten Personen zuordenbar. Eine Zusammenführung dieser Daten mit anderen - Datenquellen wird nicht vorgenommen. Wir behalten uns vor, diese Daten nachträglich zu prüfen, wenn uns - konkrete Anhaltspunkte für eine rechtswidrige Nutzung bekannt werden. -

- -

Kontaktformular

-

- Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre Angaben aus dem Anfrageformular - inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und für den Fall von - Anschlussfragen bei uns gespeichert. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter. -

- -

Datenschutzerklärung für die Nutzung von Piwik

- -

- Diese Website benutzt den Open Source Webanalysedienst Piwik. Piwik verwendet so genannte "Cookies". - Das sind Textdateien, die auf Ihrem Computer gespeichert werden und die eine Analyse der Benutzung der - Website durch Sie ermöglichen. Dazu werden die durch den Cookie erzeugten Informationen über die Benutzung - dieser Website auf unserem Server gespeichert. Die IP-Adresse wird vor der Speicherung anonymisiert. -

- -

- Die durch den Cookie erzeugten Informationen über die Benutzung dieser Website werden nicht an Dritte weitergegeben. - Sie können die Speicherung der Cookies durch eine entsprechende Einstellung Ihrer Browser-Software verhindern; - wir weisen Sie jedoch darauf hin, dass Sie in diesem Fall gegebenenfalls nicht sämtliche Funktionen dieser Website - vollumfänglich werden nutzen können. -

- -

- Wenn Sie mit der Speicherung und Nutzung Ihrer Daten nicht einverstanden sind, können Sie die Speicherung und Nutzung - hier deaktivieren. In diesem Fall wird in Ihrem Browser ein Opt-Out-Cookie hinterlegt der verhindert, dass Piwik - Nutzungsdaten speichert. Wenn Sie Ihre Cookies löschen hat dies zur Folge, dass auch das Piwik Opt-Out-Cookie gelöscht wird. - Das Opt-Out muss bei einem erneuten Besuch unserer Seite wieder aktiviert werden. -

- - - -

SSL-Verschlüsselung

-

- Diese Seite nutzt aus Gründen der Sicherheit und zum Schutz der Übertragung vertraulicher Inhalte, wie zum - Beispiel der Anfragen, die Sie an uns als Seitenbetreiber senden, eine SSL-Verschlüsselung. Eine - verschlüsselte Verbindung erkennen Sie daran, dass die Adresszeile des Browsers von "http://" auf "https://" - wechselt und an dem Schloss-Symbol in Ihrer Browserzeile. - Wenn die SSL Verschlüsselung aktiviert ist, können die Daten, die Sie an uns übermitteln, nicht von Dritten - mitgelesen werden. -

- -

Auskunft, Löschung, Sperrung

-

- Sie haben jederzeit das Recht auf unentgeltliche Auskunft über Ihre gespeicherten personenbezogenen Daten, - deren Herkunft und Empfänger und den Zweck der Datenverarbeitung sowie ein Recht auf Berichtigung, - Sperrung oder Löschung dieser Daten. Hierzu sowie zu weiteren Fragen zum Thema personenbezogene Daten - können Sie sich jederzeit unter der im Impressum angegebenen Adresse an uns wenden. -

- -

Widerspruch Werbe-Mails

-

- Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten zur Übersendung von nicht - ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit widersprochen. Die Betreiber der - Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von - Werbeinformationen, etwa durch Spam-E-Mails, vor. -

- -

Quelle: eRecht24

-
- - {% include footer.html %} -
+ + diff --git a/favicon.ico b/favicon.ico index 5768968..a89c816 100644 Binary files a/favicon.ico and b/favicon.ico differ diff --git a/gulpfile.js b/gulpfile.js index dc91464..edd4c1d 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,21 +1,16 @@ var gulp = require('gulp'); var sass = require('gulp-sass'); var browserSync = require('browser-sync').create(); -var useref = require('gulp-useref'); var uglify = require('gulp-uglify'); -var gulpIf = require('gulp-if'); var cssnano = require('gulp-cssnano'); -var imagemin = require('gulp-imagemin'); -var cache = require('gulp-cache'); -var cp = require('child_process'); var gutil = require('gulp-util'); var runSequence = require('run-sequence'); var run = require('gulp-run'); -var rename = require('gulp-rename'); var autoprefixer = require('gulp-autoprefixer'); +var css_path = '_app/assets/css'; var sass_path = '_app/assets/sass'; -var css_path = '_site/_app/assets/css'; +var site_css_path = '_site/_app/assets/css'; var config = { drafts: !!gutil.env.drafts @@ -24,11 +19,13 @@ var config = { var jekyllDir = ''; gulp.task('watch', function() { - gulp.watch([sass_path + '/*.sass', sass_path + '/**/*.sass'], ['sass-watch']); + gulp.watch(css_path + '/*.css', ['css']); + + gulp.watch([sass_path + '/*.sass', sass_path + '/pages/*.sass', sass_path + '/partials/*.sass', sass_path + '/modules/*.sass', sass_path + '/media/*.sass', sass_path + '/helpers/*.sass', sass_path + '/base/*.sass'], ['sass-watch']); gulp.watch(['_config.yml'], ['jekyll-watch']); - gulp.watch('_app/assets/js/*.js', ['useref-watch']); + gulp.watch('_app/assets/js/*.js', ['js']); gulp.watch('_posts/**/*.+(md|markdown|MD)', ['jekyll-watch']); @@ -36,17 +33,27 @@ gulp.task('watch', function() { gulp.watch('_drafts/*.+(md|markdown|MD)', ['jekyll-watch']); } - gulp.watch(['*.html', '*.php', '_layouts/*.html', '_includes/*.html', '!_site/**/*.*'], ['jekyll-watch']); + gulp.watch(['*.html', '*.php', '_app/php/**/*.php', '_layouts/*.html', '_includes/*.html', 'portfolio/*.html', 'tags/*.html', '_posts/blog/*.html', 'resources/*.html', '!_site/**/*.*'], ['jekyll-watch']); gulp.watch('favicon.ico', ['jekyll-watch']); }); +gulp.task('css', function() { + return gulp.src(css_path + '/*.css') + .pipe(autoprefixer({ browsers: ['last 3 versions', '> 0.5%'] })) + .pipe(cssnano()) + .pipe(gulp.dest(site_css_path)) + .pipe(browserSync.reload({ + stream: true + })); +}) + gulp.task('sass', function() { - return gulp.src([sass_path + '/style.sass', sass_path + '/pages/*.sass', sass_path + '/all.sass']) + return gulp.src([sass_path + '/pages/*.sass', sass_path + '/all.sass']) .pipe(sass()) .pipe(autoprefixer({ browsers: ['last 3 versions', '> 0.5%'] })) .pipe(cssnano()) - .pipe(gulp.dest(css_path)) + .pipe(gulp.dest(site_css_path)) .pipe(browserSync.reload({ stream: true })); @@ -63,38 +70,23 @@ gulp.task('browserSync', function () { }) }); -gulp.task('useref', function() { - return gulp.src(['_site/*.html', '_site/*.php']) - .pipe(useref()) - .pipe(gulpIf('*.js', uglify())) - .pipe(gulp.dest('_site')) +gulp.task('js', function () { + return gulp.src(['_app/assets/js/*.js']) + .pipe(uglify()) + .pipe(gulp.dest('_site/_app/assets/js')) + .pipe(browserSync.reload({ + stream: true + })); }) gulp.task('images', function () { - return gulp.src(['_app/assets/img/original/**/*.+(png|jpg|gif|svg)']) - .pipe(cache(imagemin([ - imagemin.gifsicle({ - interlaced: true, - optimizationLevel: 3, - }), - imagemin.jpegtran({ - progressive: true, - arithmetic: true, - }), - imagemin.optipng({ - optimizationLevel: 5, - }), - imagemin.svgo({plugins: [{ - removeViewBox: true - }]}) - ]))) - .pipe(gulp.dest('_app/assets/img/min/')) - .pipe(gulp.dest('_site/_app/assets/img/min/')) + return gulp.src(['_app/assets/img/min/**/*.+(png|jpg|gif|svg)']) + .pipe(gulp.dest('_site/_app/assets/img')) }) gulp.task('php', function () { - return gulp.src('_app/php/*.php') - .pipe(gulp.dest('_site/_app/php')) + return gulp.src(['_app/**/*.php']) + .pipe(gulp.dest('_site/_app/')) }) gulp.task('jekyll', function() { @@ -107,7 +99,7 @@ gulp.task('jekyll', function() { }); gulp.task('build', function(cb) { - runSequence('jekyll', 'php', 'images', 'sass', 'useref', cb); + runSequence('jekyll', 'php', 'images', 'sass', 'css', 'js', cb); }); gulp.task('sass-watch', ['sass'], function(cb) { @@ -121,12 +113,6 @@ gulp.task('jekyll-watch', ['jekyll'], function(cb) { cb(); }); -gulp.task('useref-watch', function(cb) { - runSequence('jekyll', 'useref'); - browserSync.reload(); - cb(); -}); - gulp.task('default', ['build'], function() { runSequence(['browserSync', 'watch']); }); diff --git a/impressum.html b/impressum.html index 74890fe..5bd2929 100644 --- a/impressum.html +++ b/impressum.html @@ -4,15 +4,32 @@ canonical: impressum.html --- -
-
- Zurück zur Startseite -
+
+ + + +
-
-

Impressum

+
+

{{ page.title }}

-

Angaben gemäß § 5 TMG:

+
+

Angaben gemäß § 5 TMG:

  • Jasper Raddatz
  • Salzburger Weg 47
    • @@ -20,10 +37,10 @@

    Angaben gemäß § 5 TMG:

Kontakt:

- +
+

E-Mail: {{ site.email }}

+ Kontaktformular +

Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:

    @@ -31,47 +48,79 @@

    Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:

  • Salzburger Weg 47
  • 50858 Köln
+
+

Haftungsausschluss (Disclaimer)

Haftung für Inhalte

- Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen - Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, - übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf - eine rechtswidrige Tätigkeit hinweisen. - Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen - bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer - konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir - diese Inhalte umgehend entfernen. + Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte + auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. + Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht + verpflichtet, übermittelte oder gespeicherte fremde Informationen + zu überwachen oder nach Umständen zu forschen, die auf eine + rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung + oder Sperrung der Nutzung von Informationen nach den allgemeinen + Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist + jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten + Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden + Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.

Haftung für Links

- Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. - Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten - Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum - Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der - Verlinkung nicht erkennbar. - Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer - Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links - umgehend entfernen. + Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren + Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden + Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten + Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten + verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der + Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige + Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. + Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist + jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. + Bei Bekanntwerden von Rechtsverletzungen werden wir derartige + Links umgehend entfernen.

Urheberrecht

- Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen - Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der - Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. - Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. - Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter - beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine - Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden - von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen. + Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen + Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, + Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der + Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des + jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite + sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. + Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, + werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte + Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine + Urheberrechtsverletzung aufmerksam werden, bitten wir um einen + entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden + wir derartige Inhalte umgehend entfernen.

-

Quelle: eRecht24

-
+

Quelle: eRecht24

+ +
+ +
+ + diff --git a/index.html b/index.html index 34cc66c..dc690ca 100644 --- a/index.html +++ b/index.html @@ -1,31 +1,331 @@ --- -layout: coming-soon -title: Coming soon +layout: index +title: Startseite + +skills: + - { + label: "HTML5", + value: 90 + } + - { + label: "CSS3", + value: 80 + } + - { + label: "JavaScript", + value: 30 + } + - { + label: "PHP7", + value: 80 + } + - { + label: "SQL & Datenbanken", + value: 60 + } + +portfolio-cards: + - { + title: "Portfolio Item 1", + image: { url: "/_app/assets/img/img1-large.jpg", alt: "Portfolio Item 1 Image" }, + url: "portfolio/portfolio-item1.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." + } + - { + title: "Portfolio Item 2", + image: { url: "/_app/assets/img/img2-large.jpg", alt: "Portfolio Item 2 Image" }, + url: "portfolio/portfolio-item2.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." + } + - { + title: "Portfolio Item 3", + image: { url: "/_app/assets/img/img3-large.jpg", alt: "Portfolio Item 3 Image" }, + url: "portfolio/portfolio-item3.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." + } + - { + title: "Portfolio Item 4", + image: { url: "/_app/assets/img/img4-large.jpg", alt: "Portfolio Item 4 Image" }, + url: "portfolio/portfolio-item4.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." + } + - { + title: "Portfolio Item 5", + image: { url: "/_app/assets/img/img5-large.jpg", alt: "Portfolio Item 5 Image" }, + url: "portfolio/portfolio-item5.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." + } + - { + title: "Portfolio Item 6", + image: { url: "/_app/assets/img/img6-large.jpg", alt: "Portfolio Item 6 Image" }, + url: "portfolio/portfolio-item6.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." + } + +article-previews: + - { + title: "Article 1", + date: "2017-04-29 19:00:00 +0200", + date_string: "Samstag, 29.04.2017", + image: { url: "/_app/assets/img/img1-large.jpg", alt: "Article 1 Image" }, + url: "/blog/2017/04/29/article1.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + - { + title: "Article 2", + date: "2017-04-28 19:00:00 +0200", + date_string: "Freitag, 28.04.2017", + image: { url: "/_app/assets/img/img2-large.jpg", alt: "Article 2 Image" }, + url: "/blog/2017/04/28/article2.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + +resources: + - { + title: "Resource 1", + image: { url: "/_app/assets/img/img1-large.jpg", alt: "Resource 1 Image" }, + url: "resources/resource1.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." + } + - { + title: "Resource 2", + image: { url: "/_app/assets/img/img2-large.jpg", alt: "Resource 2 Image" }, + url: "resources/resource2.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." + } + - { + title: "Resource 3", + image: { url: "/_app/assets/img/img3-large.jpg", alt: "Resource 3 Image" }, + url: "resources/resource3.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." + } + --- -
-
- -

jr-cologne.de

-

Coming soon

-
- -
-

- Herzlich willkommen auf jr-cologne.de!
- Meine große Leidenschaft ist es, Webseiten zu entwickeln und zu designen, wessen sich diese Website zukünftig widmen wird. - So werde ich hier beispielsweise Infos über meine aktuellen Projekte sowie meine - alltägliche Arbeit veröffentlichen und Ressourcen zusammenstellen, - die euch den Alltag als Webfanatiker vereinfachen. Des Weiteren werde ich über - aktuelle Ereignisse aus der IT, aber ebenso über allgemeine Themen, - die gerade die Runde machen, bloggen. Darüber hinaus sind für die Zukunft - auch Tutorials geplant. Genauere Einsichten in meine Pläne gibt es dann - spätestens zum offiziellen Release.
- Solange diese Website noch in den Kinderschuhen steckt und darauf wartet, - das Licht der Welt zu erblicken, könnt ihr mir auf den anderen Kanälen - einen Besuch abstatten. Dort werde ich euch über den Status der Website auf dem Laufenden halten. -

-
- - {% include footer.html %} -
+
+ + + +
+ +
+
+
+
+

Willkommen auf

+

jr-cologne.de

+ + Lerne mich kennen +
+
+
+ +
+

Über mich

+ +
+
+ Logo + +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. +

+ +

+ Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci + eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris + sit amet nibh. Donec sodales sagittis magna. Sed consequat, + leo eget bibendum sodales, augue velit cursus nunc, +

+
+ +
+

Skills

+ + {% for skill in page.skills %} + +
+

{{ skill.label }}

+
+
+
+
+ + {% endfor %} + +
+
+
+ +
+

Portfolio

+ +
+ + {% for portfolio-card in page.portfolio-cards %} + + + {{ portfolio-card.image.alt }} + +
+

{{ portfolio-card.title }}

+ +

+ {{ portfolio-card.text }} +

+
+ + + {% endfor %} + +
+ + Gesamtes Portfolio +
+ +
+

Blog

+ +
+ + {% for article-preview in page.article-previews %} + + + + {% endfor %} + +
+ + Alle Artikel +
+ +
+

Ressourcen

+ +
+ + {% for resource in page.resources %} + + + {{ resource.image.alt }} + +
+

{{ resource.title }}

+
+ + + {% endfor %} + +
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. +

+
+ + Alle Ressourcen +
+ +
+

Kontakt

+ +

Folge mir auf ...

+ + + +

oder schreibe mir eine E-Mail

+ + +
+
+ + diff --git a/kontakt.php b/kontakt.php index 86480d3..ec7441f 100644 --- a/kontakt.php +++ b/kontakt.php @@ -1,41 +1,79 @@ --- layout: contact title: Kontakt +canonical: kontakt.php --- - + - if ($_POST['submit'] == 'Nachricht senden') { - $response = processContactForm($_POST); - } -?> + + + +
+ {% include back-button.html path='impressum.html' text='Zurück zum Impressum' %} + +

{{ page.title }}

+ +

+ Du möchtest Kontakt zu mir aufnehmen? Dann nutze dafür doch das folgende + Kontaktformular. Ich würde mich sehr über eine nette Nachricht freuen! +

+ + + +
+ + + + + + + + + + + + + + + +
+
+ +
+
+ + +
-
-

Du möchtest Kontakt zu mir aufnehmen? Dann nutze dafür doch das folgende Kontaktformular. Ich würde mich sehr über eine nette Nachricht freuen!

- - - -
-
- - -
-
- -
-
- -
- -
-
- - {% include footer.html %} - + +
diff --git a/package.json b/package.json index 17a3adc..e303342 100644 --- a/package.json +++ b/package.json @@ -12,15 +12,10 @@ "browser-sync": "^2.18.8", "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.1", - "gulp-cache": "^0.4.6", "gulp-cssnano": "^2.1.2", - "gulp-if": "^2.0.2", - "gulp-imagemin": "^3.2.0", - "gulp-rename": "^1.2.2", "gulp-run": "^1.7.1", "gulp-sass": "^3.1.0", "gulp-uglify": "^2.1.2", - "gulp-useref": "^3.1.2", "gulp-util": "^3.0.8", "run-sequence": "^1.2.2" } diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 0000000..1d341d4 --- /dev/null +++ b/portfolio.html @@ -0,0 +1,111 @@ +--- +layout: portfolio +title: Portfolio +canonical: portfolio.html + +portfolio-cards: + - { + title: "Portfolio Item 1", + image: { url: "/_app/assets/img/img1-large.jpg", alt: "Portfolio Item 1 Image" }, + url: "portfolio/portfolio-item1.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." + } + - { + title: "Portfolio Item 2", + image: { url: "/_app/assets/img/img2-large.jpg", alt: "Portfolio Item 2 Image" }, + url: "portfolio/portfolio-item2.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." + } + - { + title: "Portfolio Item 3", + image: { url: "/_app/assets/img/img3-large.jpg", alt: "Portfolio Item 3 Image" }, + url: "portfolio/portfolio-item3.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." + } + - { + title: "Portfolio Item 4", + image: { url: "/_app/assets/img/img4-large.jpg", alt: "Portfolio Item 4 Image" }, + url: "portfolio/portfolio-item4.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." + } + - { + title: "Portfolio Item 5", + image: { url: "/_app/assets/img/img5-large.jpg", alt: "Portfolio Item 5 Image" }, + url: "portfolio/portfolio-item5.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." + } + - { + title: "Portfolio Item 6", + image: { url: "/_app/assets/img/img6-large.jpg", alt: "Portfolio Item 6 Image" }, + url: "portfolio/portfolio-item6.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." + } + +--- + +
+ + + +
+ +
+

{{ page.title }}

+ +
+ + {% for portfolio-card in page.portfolio-cards %} + + + {{ portfolio-card.image.alt }} + +
+

{{ portfolio-card.title }}

+ +

+ {{ portfolio-card.text }} +

+
+ + + {% endfor %} + +
+
+ + diff --git a/portfolio/portfolio-item1.html b/portfolio/portfolio-item1.html new file mode 100644 index 0000000..4c2afb3 --- /dev/null +++ b/portfolio/portfolio-item1.html @@ -0,0 +1,147 @@ +--- +layout: portfolio-single +title: Portfolio Item 1 +image: "/_app/assets/img/img1-large.jpg" +canonical: portfolio/portfolio-item1.html +--- + +
+ + + +
+ +
+ {% include back-button.html path='../portfolio.html' text='Zurück zum Portfolio' %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam + semper libero, sit amet adipiscing sem neque sed ipsum. + Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut + libero venenatis faucibus. +

+ + {% include article-content-image.html image="/_app/assets/img/img6-large.jpg" alt="Portfolio Item 1 Content Image" description="Portfolio Item 1 Content Image" source='Bild: pixabay.com' %} + +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+
+
+
+ + diff --git a/portfolio/portfolio-item2.html b/portfolio/portfolio-item2.html new file mode 100644 index 0000000..2747234 --- /dev/null +++ b/portfolio/portfolio-item2.html @@ -0,0 +1,147 @@ +--- +layout: portfolio-single +title: Portfolio Item 2 +image: "/_app/assets/img/img2-large.jpg" +canonical: portfolio/portfolio-item2.html +--- + +
+ + + +
+ +
+ {% include back-button.html path='../portfolio.html' text='Zurück zum Portfolio' %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam + semper libero, sit amet adipiscing sem neque sed ipsum. + Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut + libero venenatis faucibus. +

+ + {% include article-content-image.html image="/_app/assets/img/img5-large.jpg" alt="Portfolio Item 2 Content Image" description="Portfolio Item 2 Content Image" source='Bild: pixabay.com' %} + +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+
+
+
+ + diff --git a/portfolio/portfolio-item3.html b/portfolio/portfolio-item3.html new file mode 100644 index 0000000..aae1ef5 --- /dev/null +++ b/portfolio/portfolio-item3.html @@ -0,0 +1,147 @@ +"--- +layout: portfolio-single +title: Portfolio Item 3 +image: "/_app/assets/img/img3-large.jpg" +canonical: portfolio/portfolio-item3.html +--- + +
+ + + +
+ +
+ {% include back-button.html path='../portfolio.html' text='Zurück zum Portfolio' %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam + semper libero, sit amet adipiscing sem neque sed ipsum. + Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut + libero venenatis faucibus. +

+ + {% include article-content-image.html image="/_app/assets/img/img4-large.jpg" alt="Portfolio Item 3 Content Image" description="Portfolio Item 3 Content Image" source='Bild: pixabay.com' %} + +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+
+
+
+ + diff --git a/portfolio/portfolio-item4.html b/portfolio/portfolio-item4.html new file mode 100644 index 0000000..0c94ddf --- /dev/null +++ b/portfolio/portfolio-item4.html @@ -0,0 +1,147 @@ +--- +layout: portfolio-single +title: Portfolio Item 4 +image: "/_app/assets/img/img4-large.jpg" +canonical: portfolio/portfolio-item4.html +--- + +
+ + + +
+ +
+ {% include back-button.html path='../portfolio.html' text='Zurück zum Portfolio' %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam + semper libero, sit amet adipiscing sem neque sed ipsum. + Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut + libero venenatis faucibus. +

+ + {% include article-content-image.html image="/_app/assets/img/img3-large.jpg" alt="Portfolio Item 4 Content Image" description="Portfolio Item 4 Content Image" source='Bild: pixabay.com' %} + +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+
+
+
+ + diff --git a/portfolio/portfolio-item5.html b/portfolio/portfolio-item5.html new file mode 100644 index 0000000..8a36b19 --- /dev/null +++ b/portfolio/portfolio-item5.html @@ -0,0 +1,147 @@ +--- +layout: portfolio-single +title: Portfolio Item 5 +image: "/_app/assets/img/img5-large.jpg" +canonical: portfolio/portfolio-item5.html +--- + +
+ + + +
+ +
+ {% include back-button.html path='../portfolio.html' text='Zurück zum Portfolio' %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam + semper libero, sit amet adipiscing sem neque sed ipsum. + Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut + libero venenatis faucibus. +

+ + {% include article-content-image.html image="/_app/assets/img/img2-large.jpg" alt="Portfolio Item 5 Content Image" description="Portfolio Item 5 Content Image" source='Bild: pixabay.com' %} + +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+
+
+
+ + diff --git a/portfolio/portfolio-item6.html b/portfolio/portfolio-item6.html new file mode 100644 index 0000000..b3cd342 --- /dev/null +++ b/portfolio/portfolio-item6.html @@ -0,0 +1,147 @@ +--- +layout: portfolio-single +title: Portfolio Item 6 +image: "/_app/assets/img/img6-large.jpg" +canonical: portfolio/portfolio-item6.html +--- + +
+ + + +
+ +
+ {% include back-button.html path='../portfolio.html' text='Zurück zum Portfolio' %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam + semper libero, sit amet adipiscing sem neque sed ipsum. + Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. + Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut + libero venenatis faucibus. +

+ + {% include article-content-image.html image="/_app/assets/img/img1-large.jpg" alt="Portfolio Item 6 Content Image" description="Portfolio Item 6 Content Image" source='Bild: pixabay.com' %} + +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, + pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, + fringilla vel, aliquet nec, vulputate eget, arcu. + In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. + Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, + blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec + odio et ante tincidunt tempus. Donec vitae sapien ut libero + venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget + eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. + Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, + augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec quam felis, ultricies nec, + pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. + Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. +

+
+
+
+ + diff --git a/resources.html b/resources.html new file mode 100644 index 0000000..209fcf8 --- /dev/null +++ b/resources.html @@ -0,0 +1,125 @@ +--- +layout: resources +title: Ressourcen +canonical: resources.html + +resources: + - { + title: "Article Components", + image: { url: "/_app/assets/img/article-components-large.png", alt: "Preview Image of the Article Components Resource" }, + url: "resources/article-components.html", + text: "This is the collection/showcase of all article components of this website. What does that mean? All elements, which are listed here, can be used in all types of articles across the website to display different types of content from simple headings over tables to code blocks. I will constantly update this, whenever I change something about it or add a new component." + } + - { + title: "Resource 1", + image: { url: "/_app/assets/img/img1-large.jpg", alt: "Resource 1 Image" }, + url: "resources/resource1.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." + } + - { + title: "Resource 2", + image: { url: "/_app/assets/img/img2-large.jpg", alt: "Resource 2 Image" }, + url: "resources/resource2.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." + } + - { + title: "Resource 3", + image: { url: "/_app/assets/img/img3-large.jpg", alt: "Resource 3 Image" }, + url: "resources/resource3.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." + } + - { + title: "Resource 4", + image: { url: "/_app/assets/img/img4-large.jpg", alt: "Resource 4 Image" }, + url: "resources/resource4.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." + } + - { + title: "Resource 5", + image: { url: "/_app/assets/img/img5-large.jpg", alt: "Resource 5 Image" }, + url: "resources/resource5.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." + } + - { + title: "Resource 6", + image: { url: "/_app/assets/img/img6-large.jpg", alt: "Resource 6 Image" }, + url: "resources/resource6.html", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." + } + +--- + +
+ + + +
+ +
+

{{ page.title }}

+ +
+ + {% for resource in page.resources %} + +
+
+ {{ resource.image.alt }} + + +

{{ resource.title }}

+ +
+ +
+

+ {{ resource.text }} +

+
+ + +
+ + {% endfor %} + +
+
+ + diff --git a/resources/article-components.html b/resources/article-components.html new file mode 100644 index 0000000..6a431e2 --- /dev/null +++ b/resources/article-components.html @@ -0,0 +1,270 @@ +--- +layout: resource +title: Article Components +image: "/_app/assets/img/article-components-large.png" +canonical: resources/article-components.html + +code: | + + + + + Document Title + + + + + + + + + + +--- + +
+ + + +
+ +
+ {% include back-button.html path='../resources.html' text='Zurück zu den Ressourcen' %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ This is the collection/showcase of all article components of this + website. What does that mean? All elements, which are listed here, + can be used in all types of articles across the website to display + different types of content from simple headings over tables to code + blocks. I will constantly update this, whenever I change components or add a new one. +

+ +

Currently supported components

+ +

These are the components that are currently existing:

+ + + +

Headings

+ +

If you are wondering why you can only find heading 3 to heading 6 here: Heading 1 and 2 are used as section headings or page headings and should therefore not be used inside articles itself.

+ +

Heading 3 (h3)

+ +

Heading 4 (h4)

+ +
Heading 5 (h5)
+ +
Heading 6 (h6)
+ +

Lists

+ +

Unordered List (ul)

+ +
    +
  • List Item 1
    • +
  • List Item 2
    • +
  • List Item 3
    • +
+ +
Nested Unordered List
+ +
    +
  • List Item 1
    • +
  • List Item 2 +
      +
    • Nested List Item 1
      • +
    • Nested List Item 2
      • +
    • Nested List Item 3
      • +
    +
    • +
  • List Item 3
    • +
+ +

Ordered List (ol)

+ +
    +
  1. List Item 1
    2. +
  2. List Item 2
    3. +
  3. List Item 3
    4. +
+ +
Nested Ordered List
+ +
    +
  1. List Item 1
    2. +
  2. List Item 2 +
      +
    1. Nested List Item 1
      2. +
    2. Nested List Item 2
      3. +
    3. Nested List Item 3
      4. +
    +
    3. +
  3. List Item 3
    4. +
+ +

Mixed Nested List

+ +
    +
  • List Item 1
    • +
  • List Item 2 +
      +
    1. Nested List Item 1
      2. +
    2. Nested List Item 2
      3. +
    3. Nested List Item 3
      4. +
    +
    • +
  • List Item 3
    • +
+ +

Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
This is the caption of the table
Column 1 HeadingColumn 2 HeadingColumn 3 Heading
Row 1 - Column 1Row 1 - Column 2Row 1 - Column 3
Row 2 - Column 1Row 2 - Column 2Row 2 - Column 3
Row 3 - Column 1Row 3 - Column 2Row 3 - Column 3
+ +

Images

+ +

Image with Caption

+ + {% include article-content-image.html image="/_app/assets/img/img4-large.jpg" alt="Image with Caption" description="Image with Caption" source='Bild: pixabay.com' %} + +

Image without Caption

+ +
+
+ Image without Caption +
+
+ +

Blockquote

+ +
+

+ Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, + eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. +

+ + Source +
+ +

Code Block

+ + 
{{ page.code | xml_escape }}
+ +

GitHub Gist

+ + + +

CodePen Pen

+ +

See the Pen Responsive Equal Height Columns without Flexbox by JR Cologne (@jr-cologne) on CodePen.

+ +

Twitter Tweet

+ +
+ +
+
+
+
+ + + + + + +{% include code-highlighter.html %} +{% include pen-embed-code.html %} +{% include tweet-embed-code.html %} diff --git a/resources/resource1.html b/resources/resource1.html new file mode 100644 index 0000000..8843f85 --- /dev/null +++ b/resources/resource1.html @@ -0,0 +1,95 @@ +--- +layout: resource +title: Resource 1 +image: "/_app/assets/img/img1-large.jpg" +canonical: resources/resource1.html +--- + +
+ + + +
+ +
+ {% include back-button.html path='../resources.html' text='Zurück zu den Ressourcen' %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla + ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla + ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+
+
+
+ + diff --git a/resources/resource2.html b/resources/resource2.html new file mode 100644 index 0000000..7ef5f6f --- /dev/null +++ b/resources/resource2.html @@ -0,0 +1,95 @@ +--- +layout: resource +title: Resource 2 +image: "/_app/assets/img/img2-large.jpg" +canonical: resources/resource2.html +--- + +
+ + + +
+ +
+ {% include back-button.html path='../resources.html' text='Zurück zu den Ressourcen' %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla + ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla + ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+
+
+
+ + diff --git a/resources/resource3.html b/resources/resource3.html new file mode 100644 index 0000000..864e73d --- /dev/null +++ b/resources/resource3.html @@ -0,0 +1,95 @@ +--- +layout: resource +title: Resource 3 +image: "/_app/assets/img/img3-large.jpg" +canonical: resources/resource3.html +--- + +
+ + + +
+ +
+ {% include back-button.html path='../resources.html' text='Zurück zu den Ressourcen' %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla + ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla + ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+
+
+
+ + diff --git a/resources/resource4.html b/resources/resource4.html new file mode 100644 index 0000000..44d4934 --- /dev/null +++ b/resources/resource4.html @@ -0,0 +1,95 @@ +--- +layout: resource +title: Resource 4 +image: "/_app/assets/img/img4-large.jpg" +canonical: resources/resource4.html +--- + +
+ + + +
+ +
+ {% include back-button.html path='../resources.html' text='Zurück zu den Ressourcen' %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla + ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla + ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+
+
+
+ + diff --git a/resources/resource5.html b/resources/resource5.html new file mode 100644 index 0000000..99ea3f8 --- /dev/null +++ b/resources/resource5.html @@ -0,0 +1,95 @@ +--- +layout: resource +title: Resource 5 +image: "/_app/assets/img/img5-large.jpg" +canonical: resources/resource5.html +--- + +
+ + + +
+ +
+ {% include back-button.html path='../resources.html' text='Zurück zu den Ressourcen' %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla + ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla + ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+
+
+
+ + diff --git a/resources/resource6.html b/resources/resource6.html new file mode 100644 index 0000000..70537b3 --- /dev/null +++ b/resources/resource6.html @@ -0,0 +1,95 @@ +--- +layout: resource +title: Resource 6 +image: "/_app/assets/img/img6-large.jpg" +canonical: resources/resource6.html +--- + +
+ + + +
+ +
+ {% include back-button.html path='../resources.html' text='Zurück zu den Ressourcen' %} + +
+
+

{{ page.title }}

+ +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla + ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla + ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+
+
+
+ + diff --git a/tags.html b/tags.html new file mode 100644 index 0000000..2430b5b --- /dev/null +++ b/tags.html @@ -0,0 +1,111 @@ +--- +layout: tags +title: Tags +canonical: tags.html + +tag-previews: + - { + url: "/tags/responsive-webdesign.html", + add_class: "tag--large", + title: "Responsive Webdesign", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim." + } + - { + url: "/tags/webdesign.html", + add_class: "", + title: "Webdesign", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim." + } + - { + url: "/tags/webentwicklung.html", + add_class: "", + title: "Webentwicklung", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim." + } + - { + url: "/tags/design.html", + add_class: "", + title: "Design", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim." + } + - { + url: "/tags/hardware.html", + add_class: "", + title: "Hardware", + text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim." + } + +--- + +
+ + + +
+ +
+

{{ page.title }}

+ +

Alle Tags von A bis Z

+ +
+ + {% for tag-preview in page.tag-previews %} + +
+
+ {{ tag-preview.title }} +
+ +
+

+ {{ tag-preview.text }} +

+
+ + +
+ + {% endfor %} + +
+
+ + diff --git a/tags/design.html b/tags/design.html new file mode 100644 index 0000000..23f90c4 --- /dev/null +++ b/tags/design.html @@ -0,0 +1,215 @@ +--- +layout: tag +title: Design +canonical: tags/design.html + +articles-same-tag: + - { + title: "Article 5", + date: "2017-04-25 19:00:00 +0200", + date_string: "Dienstag, 25.04.2017", + image: { url: "/_app/assets/img/img5-large.jpg", alt: "Article 5 Image" }, + url: "/blog/2017/04/25/article5.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + - { + title: "Article 2", + date: "2017-04-28 19:00:00 +0200", + date_string: "Freitag, 28.04.2017", + image: { url: "/_app/assets/img/img2-large.jpg", alt: "Article 2 Image" }, + url: "/blog/2017/04/28/article2.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + +articles-related-tags: + - { + title: "Article 1", + date: "2017-04-29 19:00:00 +0200", + date_string: "Samstag, 29.04.2017", + image: { url: "/_app/assets/img/img1-large.jpg", alt: "Article 1 Image" }, + url: "/blog/2017/04/29/article1.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + - { + title: "Article 2", + date: "2017-04-28 19:00:00 +0200", + date_string: "Freitag, 28.04.2017", + image: { url: "/_app/assets/img/img2-large.jpg", alt: "Article 2 Image" }, + url: "/blog/2017/04/28/article2.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + +related-tags: + - { title: "Webdesign", url: "/tags/webdesign.html" } + - { title: "Responsive Webdesign", url: "/tags/responsive-webdesign.html" } + - { title: "Webentwicklung", url: "/tags/webentwicklung.html" } + +--- + +
+ + + +
+ +
+
+ {% include back-button.html path='../tags.html' text='Zurück zu allen Tags' %} + +
+
+

{{ page.title }}

+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra + nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+ + + +
+ Mehr lesen +
+
+
+
+ +
+
+

Artikel, die unter diesem Tag veröffentlicht wurden:

+ + {% for article-preview in page.articles-same-tag %} + + + + {% endfor %} + +
+ +
+
+

Verwandte Tags:

+ +
+ {% for tag in page.related-tags %} + {{ tag.title }} + {% endfor %} +
+
+ +
+

Artikel, die unter verwandten Tags veröffentlicht wurden:

+ + {% for article-preview in page.articles-related-tags %} + + + + {% endfor %} +
+
+
+
+ + diff --git a/tags/hardware.html b/tags/hardware.html new file mode 100644 index 0000000..1597047 --- /dev/null +++ b/tags/hardware.html @@ -0,0 +1,214 @@ +--- +layout: tag +title: Hardware +canonical: tags/hardware.html + +articles-same-tag: + - { + title: "Article 4", + date: "2017-04-26 19:00:00 +0200", + date_string: "Mittwoch, 26.04.2017", + image: { url: "/_app/assets/img/img4-large.jpg", alt: "Article 4 Image" }, + url: "/blog/2017/04/26/article4.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + - { + title: "Article 3", + date: "2017-04-27 19:00:00 +0200", + date_string: "Donnerstag, 27.04.2017", + image: { url: "/_app/assets/img/img3-large.jpg", alt: "Article 3 Image" }, + url: "/blog/2017/04/27/article3.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + +articles-related-tags: + - { + title: "Article 5", + date: "2017-04-25 19:00:00 +0200", + date_string: "Dienstag, 25.04.2017", + image: { url: "/_app/assets/img/img5-large.jpg", alt: "Article 5 Image" }, + url: "/blog/2017/04/25/article5.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + - { + title: "Article 2", + date: "2017-04-28 19:00:00 +0200", + date_string: "Freitag, 28.04.2017", + image: { url: "/_app/assets/img/img2-large.jpg", alt: "Article 2 Image" }, + url: "/blog/2017/04/28/article2.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + +related-tags: + - { title: "Design", url: "/tags/design.html" } + - { title: "Webentwicklung", url: "/tags/webentwicklung.html" } + +--- + +
+ + + +
+ +
+
+ {% include back-button.html path='../tags.html' text='Zurück zu allen Tags' %} + +
+
+

{{ page.title }}

+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra + nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+ + + +
+ Mehr lesen +
+
+
+
+ +
+
+

Artikel, die unter diesem Tag veröffentlicht wurden:

+ + {% for article-preview in page.articles-same-tag %} + + + + {% endfor %} + +
+ +
+
+

Verwandte Tags:

+ +
+ {% for tag in page.related-tags %} + {{ tag.title }} + {% endfor %} +
+
+ +
+

Artikel, die unter verwandten Tags veröffentlicht wurden:

+ + {% for article-preview in page.articles-related-tags %} + + + + {% endfor %} +
+
+
+
+ + diff --git a/tags/responsive-webdesign.html b/tags/responsive-webdesign.html new file mode 100644 index 0000000..a9fb59c --- /dev/null +++ b/tags/responsive-webdesign.html @@ -0,0 +1,214 @@ +--- +layout: tag +title: Responsive Webdesign +canonical: tags/responsive-webdesign.html + +articles-same-tag: + - { + title: "Article 2", + date: "2017-04-28 19:00:00 +0200", + date_string: "Freitag, 28.04.2017", + image: { url: "/_app/assets/img/img2-large.jpg", alt: "Article 2 Image" }, + url: "/blog/2017/04/28/article2.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + - { + title: "Article 4", + date: "2017-04-26 19:00:00 +0200", + date_string: "Mittwoch, 26.04.2017", + image: { url: "/_app/assets/img/img4-large.jpg", alt: "Article 4 Image" }, + url: "/blog/2017/04/26/article4.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + +articles-related-tags: + - { + title: "Article 1", + date: "2017-04-29 19:00:00 +0200", + date_string: "Samstag, 29.04.2017", + image: { url: "/_app/assets/img/img1-large.jpg", alt: "Article 1 Image" }, + url: "/blog/2017/04/29/article1.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + - { + title: "Article 5", + date: "2017-04-25 19:00:00 +0200", + date_string: "Dienstag, 25.04.2017", + image: { url: "/_app/assets/img/img5-large.jpg", alt: "Article 5 Image" }, + url: "/blog/2017/04/25/article5.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + +related-tags: + - { title: "Webdesign", url: "/tags/webdesign.html" } + - { title: "Webentwicklung", url: "/tags/webentwicklung.html" } + +--- + +
+ + + +
+ +
+
+ {% include back-button.html path='../tags.html' text='Zurück zu allen Tags' %} + +
+
+

{{ page.title }}

+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra + nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+ + + +
+ Mehr lesen +
+
+
+
+ +
+
+

Artikel, die unter diesem Tag veröffentlicht wurden:

+ + {% for article-preview in page.articles-same-tag %} + + + + {% endfor %} + +
+ +
+
+

Verwandte Tags:

+ +
+ {% for tag in page.related-tags %} + {{ tag.title }} + {% endfor %} +
+
+ +
+

Artikel, die unter verwandten Tags veröffentlicht wurden:

+ + {% for article-preview in page.articles-related-tags %} + + + + {% endfor %} +
+
+
+
+ + diff --git a/tags/webdesign.html b/tags/webdesign.html new file mode 100644 index 0000000..0e20b82 --- /dev/null +++ b/tags/webdesign.html @@ -0,0 +1,215 @@ +--- +layout: tag +title: Webdesign +canonical: tags/webdesign.html + +articles-same-tag: + - { + title: "Article 1", + date: "2017-04-29 19:00:00 +0200", + date_string: "Samstag, 29.04.2017", + image: { url: "/_app/assets/img/img1-large.jpg", alt: "Article 1 Image" }, + url: "/blog/2017/04/29/article1.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + - { + title: "Article 2", + date: "2017-04-28 19:00:00 +0200", + date_string: "Freitag, 28.04.2017", + image: { url: "/_app/assets/img/img2-large.jpg", alt: "Article 2 Image" }, + url: "/blog/2017/04/28/article2.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + +articles-related-tags: + - { + title: "Article 4", + date: "2017-04-26 19:00:00 +0200", + date_string: "Mittwoch, 26.04.2017", + image: { url: "/_app/assets/img/img4-large.jpg", alt: "Article 4 Image" }, + url: "/blog/2017/04/26/article4.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + - { + title: "Article 6", + date: "2017-04-24 19:00:00 +0200", + date_string: "Montag, 24.04.2017", + image: { url: "/_app/assets/img/img6-large.jpg", alt: "Article 6 Image" }, + url: "/blog/2017/04/24/article6.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + +related-tags: + - { title: "Responsive Webdesign", url: "/tags/responsive-webdesign.html" } + - { title: "Webentwicklung", url: "/tags/webentwicklung.html" } + - { title: "Design", url: "/tags/design.html" } + +--- + +
+ + + +
+ +
+
+ {% include back-button.html path='../tags.html' text='Zurück zu allen Tags' %} + +
+
+

{{ page.title }}

+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra + nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+ + + +
+ Mehr lesen +
+
+
+
+ +
+
+

Artikel, die unter diesem Tag veröffentlicht wurden:

+ + {% for article-preview in page.articles-same-tag %} + + + + {% endfor %} + +
+ +
+
+

Verwandte Tags:

+ +
+ {% for tag in page.related-tags %} + {{ tag.title }} + {% endfor %} +
+
+ +
+

Artikel, die unter verwandten Tags veröffentlicht wurden:

+ + {% for article-preview in page.articles-related-tags %} + + + + {% endfor %} +
+
+
+
+ + diff --git a/tags/webentwicklung.html b/tags/webentwicklung.html new file mode 100644 index 0000000..1d24f3f --- /dev/null +++ b/tags/webentwicklung.html @@ -0,0 +1,214 @@ +--- +layout: tag +title: Webentwicklung +canonical: tags/webentwicklung.html + +articles-same-tag: + - { + title: "Article 1", + date: "2017-04-29 19:00:00 +0200", + date_string: "Samstag, 29.04.2017", + image: { url: "/_app/assets/img/img1-large.jpg", alt: "Article 1 Image" }, + url: "/blog/2017/04/29/article1.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + - { + title: "Article 2", + date: "2017-04-28 19:00:00 +0200", + date_string: "Freitag, 28.04.2017", + image: { url: "/_app/assets/img/img2-large.jpg", alt: "Article 2 Image" }, + url: "/blog/2017/04/28/article2.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + +articles-related-tags: + - { + title: "Article 1", + date: "2017-04-29 19:00:00 +0200", + date_string: "Samstag, 29.04.2017", + image: { url: "/_app/assets/img/img1-large.jpg", alt: "Article 1 Image" }, + url: "/blog/2017/04/29/article1.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + - { + title: "Article 2", + date: "2017-04-28 19:00:00 +0200", + date_string: "Freitag, 28.04.2017", + image: { url: "/_app/assets/img/img2-large.jpg", alt: "Article 2 Image" }, + url: "/blog/2017/04/28/article2.html", + preview-text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus." + } + +related-tags: + - { title: "Webdesign", url: "/tags/webdesign.html" } + - { title: "Responsive Webdesign", url: "/tags/responsive-webdesign.html" } + +--- + +
+ + + +
+ +
+
+ {% include back-button.html path='../tags.html' text='Zurück zu allen Tags' %} + +
+
+

{{ page.title }}

+
+ +
+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede + mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum + semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, + porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra + nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. + Etiam ultricies nisi vel augue. +

+ + + +
+ Mehr lesen +
+
+
+
+ +
+
+

Artikel, die unter diesem Tag veröffentlicht wurden:

+ + {% for article-preview in page.articles-same-tag %} + + + + {% endfor %} + +
+ +
+
+

Verwandte Tags:

+ +
+ {% for tag in page.related-tags %} + {{ tag.title }} + {% endfor %} +
+
+ +
+

Artikel, die unter verwandten Tags veröffentlicht wurden:

+ + {% for article-preview in page.articles-related-tags %} + + + + {% endfor %} +
+
+
+
+ +