Skip to content

Commit

Permalink
sub-page layout style #225
Browse files Browse the repository at this point in the history
  • Loading branch information
@openmindculture
openmindculture committed Apr 10, 2024
1 parent 8cc9cfa commit f0c6f9a
Show file tree
Hide file tree
Showing 16 changed files with 155 additions and 78 deletions.
4 changes: 2 additions & 2 deletions dist/index.html
View file

Large diffs are not rendered by default.

12 changes: 3 additions & 9 deletions dist/leistungen/webentwicklung.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/styles.css
View file

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions dist/webseiten-klimafreundlich-barrierefrei-optimieren/index.html
View file

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions dist/wordpress-website-nachhaltig-optimieren-lassen/index.html
View file

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions dist/zertifizierter-shopware-6-frontend-webentwickler/index.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist_en/index.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist_en/styles.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/_data/de/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ module.exports = {
"pDomainVerify": "4c4296e5835f4a47eb2c2e5488a99d71",
"googleSiteVerification": "Qs1p7JgqPLOGD3BYCMGe9EbyNJJEswyala44hnkO6d4",
/* page content */
"jumbotronImageAlt": "Portrait of Ingo Steinke",
"jumbotronImageAlt": "Portrait von Ingo Steinke",
"jumbotronHeader": "Ingo Steinke",
"jumbotronTagline": "Creative Web Developer",
"linkToTop": "Zum Seitenanfang",
Expand Down
20 changes: 19 additions & 1 deletion src/_includes/critical.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,10 @@ h4,
max-width: 99%;
}

ul.aside-heading {
text-align: left;
}

del {
text-decoration: line-through;
}
Expand Down Expand Up @@ -139,6 +143,10 @@ small {
}
}

.jumbotronHeader.has-text-paragraphs {
padding-top: 1rem;
}

.jumbotronHeader h1 {
font-size: 5rem;
line-height: 1.25;
Expand Down Expand Up @@ -258,7 +266,12 @@ small {
}
}

.text-content-layout-children {
padding: 0;
}

.text-content-layout,
.text-content-layout-children > *,
.privacy {
padding: 0.5em 0 1em 1em;
margin: 0 0 2em 0;
Expand Down Expand Up @@ -334,7 +347,8 @@ small {
grid-column-gap: 1em;
}

.text-width {
.text-width,
.text-width-children > * {
max-width: 1300px;
width: 90%;
}
Expand Down Expand Up @@ -420,6 +434,10 @@ small {
display: block;
}

.mb0 {
margin-bottom: 0;
}

a.tw-btn,
a.tw-btn:link,
a.tw-btn:visited,
Expand Down
3 changes: 2 additions & 1 deletion src/_includes/html-head-common.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@
@font-face {font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:local(''),
url('../fonts/montserrat-v15-latin-ext_latin-regular.woff2') format('woff2'),
url('../fonts/montserrat-v15-latin-ext_latin-regular.woff') format('woff');
}html{box-sizing:border-box;font-size:100%}*,:after,:before{box-sizing:inherit}body{background-color:#1d4950;color:#ebeff2;font-family:Montserrat,Helvetica,sans-serif;font-weight:400;line-height:1.75;margin:0;max-width:100%;overflow-x:hidden;padding:0}@media screen and (min-width:950px){body,html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}}#sticky-headline,#sticky-headline a,.aside-heading,h1,h2,h3,h4{color:#ebeff2;font-family:Bitter,serif;font-weight:700;letter-spacing:.0125rem}.aside-heading,h2,h3,h4{font-size:1.5rem;line-height:1.5;margin-bottom:1.5rem;margin-top:1.5rem}.aside-heading,.hashtags,.tagline,.tile,h1,h2,h3,h4{max-width:99%}del{text-decoration:line-through}small{font-size:.75rem}@media screen and (max-width:768px) and (-webkit-min-device-pixel-ratio:0){small{font-size:16px}}.nav-wrapper{display:inline}@media only screen{.only-print{display:none}.page-container{display:flex;flex-direction:row;width:100%}.jumbotronHeader{justify-content:center;align-items:center;text-align:center;background-color:rgba(29,73,80,.75);display:flex;flex-direction:column;height:auto;width:100%}.jumbotronHeader h1{font-size:2.5rem;letter-spacing:.125rem;line-height:1.25;margin:1rem 1rem 2rem 1rem;padding:0}.jumbotronHeader p{margin:1rem 2rem 2rem 1rem;padding:0;text-align:left;max-width:80%;color:#ebeff2;font-family:Montserrat,Helvetica,sans-serif;font-size:1.5rem;font-weight:400;}}@media only screen and (min-width:950px){.jumbotronHeader:not(.has-text-paragraphs) h1{font-size:3rem;margin-top:2rem;}.jumbotronHeader:not(.has-text-paragraphs) p{font-size:2rem}}@media only screen{img.avatar{border-radius:50%}.sticky-header{background-color:#1d4950;height:2.25em;position:sticky;text-align:center;top:-1px;width:100%;z-index:10}.sticky-header>.wrapper{box-shadow:0 7px 14px 0 rgba(29,73,80,.75);display:flex;flex-direction:row;justify-content:space-between;margin:0 auto;max-width:1500px}.sticky-header>.wrapper img.avatar{margin:6px 6px -6px}.sticky-header .temporary-nav-wrapper{margin:6px 1em -6px 6px}.sticky-header.is-unstuck .unsticky-hidden{display:none}.raised-layer{z-index:2000}.target-offset:before{content:" ";display:block;height:45px;margin-top:-45px;pointer-events:none;visibility:hidden}main{margin:0 auto;max-width:1500px}.page-content{align-items:flex-start;display:flex;flex-direction:column;width:100%;z-index:2}.decoration{animation:fadeIn 5s linear 10s 1 both;height:100vh;max-width:100%;opacity:0;overflow:hidden;position:fixed;width:100vw;z-index:1}}@media only screen and (prefers-reduced-transparency){box-shadow:0 7px 14px 0 #1d4950}@media only screen{@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.privacy,.text-content-layout{line-height:1.75;margin:0 0 2em;padding:.5em 0 1em 1em;text-align:left}.privacy{display:block}.privacy,.text-content-color{background-color:#d1d4d6;color:#000}.privacy .aside-heading,.privacy h3,.privacy h4,.text-content-color .aside-heading,.text-content-color h2,.text-content-color h3,.text-content-color h4{color:#053245}.capitalized:first-letter{float:left;font-size:3.25rem;line-height:1;margin:0;padding:0}.tiled-content{margin:0 1em 2em 0}.clear,section{clear:both}.grid-container{grid-column-gap:3em;grid-row-gap:2em;clear:both;display:flex;display:grid;flex-wrap:wrap;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));justify-content:space-between}.grid-container>*{flex-basis:49%;margin-bottom:2em}@supports (display:grid){.grid-container>*{margin-bottom:0}}ul.grid-container{grid-column-gap:1em;grid-template-columns:repeat(auto-fit,minmax(410px,1fr));list-style-type:none;margin:0;padding:0;text-indent:0}.text-width{max-width:1300px;width:90%}.text-center{margin-left:auto;margin-right:auto}.semitransparent .text-width{width:70%}.tile img.project-thumb{float:right;height:4em;margin:1em 0 1em 1em;width:4em}.tile img.project-thumb--shrink{height:3.5em;width:3.5em}.tile img.project-thumb--grow{height:4.625em;margin-left:.5em;width:4.625em}.tile img.project-thumb--kleiderordnung{margin:3em .5em 1em 1em}.tile img.project-thumb--atomic-design-system{margin:2em 0 1em 1em}.tile img.project-thumb--wordpress-woo{margin:0 0 1em 1em}.tile img.project-thumb--daskannstdutun{height:5em;margin:1.5em 0 .5em 1em;width:5em}.tile img.project-thumb--planted,.tile img.project-thumb--shopware-plugin{margin-right:.5em}.row{display:block;display:flex;flex-direction:row}.row>*{float:left}.page-navigation{display:none;position:relative}.credits{font-size:.75rem}.initially-hidden,.visually-hidden{display:none}.initially-hidden:target{display:block}a.tw-btn,a.tw-btn:active,a.tw-btn:hover,a.tw-btn:link,a.tw-btn:visited{background-color:#0c7abf;border-radius:.25em;color:#fff;display:inline-block;margin:.0325em .25em .25em 0;padding:.2em .5em .2em .25em;text-decoration:none}a.gh-btn,a.gh-btn:active,a.gh-btn:hover,a.gh-btn:link,a.gh-btn:visited{background-color:#24292e;border-radius:.25em;color:#fff;display:inline-block;margin:.0325em .25em .25em 0;padding:.15em .5em .25em .2em;text-decoration:none}.social-btn svg{margin:0 .25em}.page-navigation a:active,.page-navigation a:link,.page-navigation a:visited,.sticky-header a:active,.sticky-header a:link,.sticky-header a:visited{color:#fff;text-decoration:none}}@media only screen and (max-width:768px){.semitransparent .text-width,.text-width{width:90%}.jumbotronHeader{height:auto;}@media only screen and (max-width:440px){.jumbotronHeader h1{font-size:3em}h2,h3,h4{font-size:1.3125rem}.pl1{padding-left:.5em}.text-content-layout{margin-bottom:1em;padding-left:.5em}.semitransparent .text-width,.text-width{width:95%}ul.social-links{max-width:99%;padding-left:0;padding-right:0}ul.social-links li{padding:0;min-height:70px;}ul.social-links a{padding:.5em}.skills-wrapper{padding-left:0}.skills-wrapper h3,.skills-wrapper h4{padding-left:.5em}ul.skills>.tile{padding-left:0}ul.skills>.tile li,ul.skills>.tile ul{padding-right:0}.tile h3{margin-top:1em}.hashtags{overflow-x:hidden}}@media only screen and (max-width:375px){.jumbotronHeader h1{font-size:2rem;margin-bottom:.5em}.jumbotronHeader p{font-size:1.25rem;line-height:1.5}footer.page-footer{padding-left:0;}}}
}html{box-sizing:border-box;font-size:100%}*,:after,:before{box-sizing:inherit}body{background-color:#1d4950;color:#ebeff2;font-family:Montserrat,Helvetica,sans-serif;font-weight:400;line-height:1.75;margin:0;max-width:100%;overflow-x:hidden;padding:0}@media screen and (min-width:950px){body,html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}}#sticky-headline,#sticky-headline a,.aside-heading,h1,h2,h3,h4{color:#ebeff2;font-family:Bitter,serif;font-weight:700;letter-spacing:.0125rem}.aside-heading,h2,h3,h4{font-size:1.5rem;line-height:1.5;margin-bottom:1.5rem;margin-top:1.5rem}.aside-heading,.hashtags,.tagline,.tile,h1,h2,h3,h4{max-width:99%}del{text-decoration:line-through}small{font-size:.75rem}@media screen and (max-width:768px) and (-webkit-min-device-pixel-ratio:0){small{font-size:16px}}.nav-wrapper{display:inline}@media only screen{.only-print{display:none}.page-container{display:flex;flex-direction:row;width:100%}.jumbotronHeader{justify-content:center;align-items:center;text-align:center;background-color:rgba(29,73,80,.75);display:flex;flex-direction:column;height:auto;width:100%}.jumbotronHeader.has-text-paragraphs{padding-top:1rem;}.jumbotronHeader h1{font-size:2.5rem;letter-spacing:.125rem;line-height:1.25;margin:1rem 1rem 2rem 1rem;padding:0}.jumbotronHeader p{margin:1rem 2rem 2rem 1rem;padding:0;text-align:left;max-width:80%;color:#ebeff2;font-family:Montserrat,Helvetica,sans-serif;font-size:1.5rem;font-weight:400;}}@media only screen and (min-width:950px){.jumbotronHeader:not(.has-text-paragraphs) h1{font-size:3rem;margin-top:2rem;}.jumbotronHeader:not(.has-text-paragraphs) p{font-size:2rem}}@media only screen{img.avatar{border-radius:50%}.sticky-header{background-color:#1d4950;height:2.25em;position:sticky;text-align:center;top:-1px;width:100%;z-index:10}.sticky-header>.wrapper{box-shadow:0 7px 14px 0 rgba(29,73,80,.75);display:flex;flex-direction:row;justify-content:space-between;margin:0 auto;max-width:1500px}.sticky-header>.wrapper img.avatar{margin:6px 6px -6px}.sticky-header .temporary-nav-wrapper{margin:6px 1em -6px 6px}.sticky-header.is-unstuck .unsticky-hidden{display:none}.raised-layer{z-index:2000}.target-offset:before{content:" ";display:block;height:45px;margin-top:-45px;pointer-events:none;visibility:hidden}main{margin:0 auto;max-width:1500px}.page-content{align-items:flex-start;display:flex;flex-direction:column;width:100%;z-index:2}.decoration{animation:fadeIn 5s linear 10s 1 both;height:100vh;max-width:100%;opacity:0;overflow:hidden;position:fixed;width:100vw;z-index:1}}@media only screen and (prefers-reduced-transparency){box-shadow:0 7px 14px 0 #1d4950}@media only screen{@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.text-content-layout-children{padding:0}.privacy,.text-content-layout,.text-content-layout-children>*{line-height:1.75;margin:0 0 2em;padding:.5em 0 1em 1em;text-align:left}.privacy{display:block}.privacy,.text-content-color{background-color:#d1d4d6;color:#000}.privacy .aside-heading,.privacy h3,.privacy h4,.text-content-color .aside-heading,.text-content-color h2,.text-content-color h3,.text-content-color h4{color:#053245}.capitalized:first-letter{float:left;font-size:3.25rem;line-height:1;margin:0;padding:0}.tiled-content{margin:0 1em 2em 0}.clear,section{clear:both}.grid-container{grid-column-gap:3em;grid-row-gap:2em;clear:both;display:flex;display:grid;flex-wrap:wrap;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));justify-content:space-between}.grid-container>*{flex-basis:49%;margin-bottom:2em}@supports (display:grid){.grid-container>*{margin-bottom:0}}ul.grid-container{grid-column-gap:1em;grid-template-columns:repeat(auto-fit,minmax(410px,1fr));list-style-type:none;margin:0;padding:0;text-indent:0}.text-width,.text-width-children>*{max-width:1300px;width:90%}.text-center{margin-left:auto;margin-right:auto}.semitransparent .text-width{width:70%}.tile img.project-thumb{float:right;height:4em;margin:1em 0 1em 1em;width:4em}.tile img.project-thumb--shrink{height:3.5em;width:3.5em}.tile img.project-thumb--grow{height:4.625em;margin-left:.5em;width:4.625em}.tile img.project-thumb--kleiderordnung{margin:3em .5em 1em 1em}.tile img.project-thumb--atomic-design-system{margin:2em 0 1em 1em}.tile img.project-thumb--wordpress-woo{margin:0 0 1em 1em}.tile img.project-thumb--daskannstdutun{height:5em;margin:1.5em 0 .5em 1em;width:5em}.tile img.project-thumb--planted,.tile img.project-thumb--shopware-plugin{margin-right:.5em}.row{display:block;display:flex;flex-direction:row}.row>*{float:left}.page-navigation{display:none;position:relative}.credits{font-size:.75rem}.initially-hidden,.visually-hidden{display:none}.initially-hidden:target{display:block}.mb0{margin-bottom:0}a.tw-btn,a.tw-btn:active,a.tw-btn:hover,a.tw-btn:link,a.tw-btn:visited{background-color:#0c7abf;border-radius:.25em;color:#fff;display:inline-block;margin:.0325em .25em .25em 0;padding:.2em .5em .2em .25em;text-decoration:none}a.gh-btn,a.gh-btn:active,a.gh-btn:hover,a.gh-btn:link,a.gh-btn:visited{background-color:#24292e;border-radius:.25em;color:#fff;display:inline-block;margin:.0325em .25em .25em 0;padding:.15em .5em .25em .2em;text-decoration:none}.social-btn svg{margin:0 .25em}.page-navigation a:active,.page-navigation a:link,.page-navigation a:visited,.sticky-header a:active,.sticky-header a:link,.sticky-header a:visited{color:#fff;text-decoration:none}}@media only screen and (max-width:768px){.semitransparent .text-width,.text-width{width:90%}.jumbotronHeader{height:auto;}@media only screen and (max-width:440px){.jumbotronHeader h1{font-size:3em}h2,h3,h4{font-size:1.3125rem}.pl1{padding-left:.5em}.text-content-layout{margin-bottom:1em;padding-left:.5em}.semitransparent .text-width,.text-width{width:95%}ul.social-links{max-width:99%;padding-left:0;padding-right:0}ul.social-links li{padding:0;min-height:70px;}ul.social-links a{padding:.5em}.skills-wrapper{padding-left:0}.skills-wrapper h3,.skills-wrapper h4{padding-left:.5em}ul.skills>.tile{padding-left:0}ul.skills>.tile li,ul.skills>.tile ul{padding-right:0}.tile h3{margin-top:1em}.hashtags{overflow-x:hidden}}@media only screen and (max-width:375px){.jumbotronHeader h1{font-size:2rem;margin-bottom:.5em}.jumbotronHeader p{font-size:1.25rem;line-height:1.5}footer.page-footer{padding-left:0;}}}
.jumbotronHeader p a:active, .jumbotronHeader p a:focus, .jumbotronHeader p a:hover {color:#000;}
.imprint-contact {margin-top:2rem;}
.imprint-contact .aside-heading {font-family:Montserrat,sans-serif;font-size:1.5rem;font-weight:normal;}
ul.aside-heading {text-align:left;}
</style>
<link rel="stylesheet" media="screen" href="../styles.css?v=4.0.0">
<link rel="stylesheet" media="print" href="./print.css?v=4.0.0">
Expand Down
22 changes: 22 additions & 0 deletions src/_includes/jumbotron-image.liquid
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{% unless imgdirectory %}
{% assign imgdirectory = 'img' %}
{% endunless %}

<picture>
<source
type="image/webp"
sizes="100vw"
srcset="{{ imgdirectory }}/Ingo-Steinke-flower-shirt.webp 1x,
{{ imgdirectory }}/Ingo-Steinke-flower-shirt-496.webp 2x,
{{ imgdirectory }}/Ingo-Steinke-flower-shirt-large.webp 4x"
>
<img
src="{{ imgdirectory }}/Ingo-Steinke-flower-shirt.jpg"
srcset="{{ imgdirectory }}/Ingo-Steinke-flower-shirt-496.jpg 2x,
{{ imgdirectory }}/Ingo-Steinke-flower-shirt-large.jpg 4x"
width="248"
height="248"
alt="{{ content.jumbotronImageAlt }}"
class="avatar"
>
</picture>
Empty file added src/_includes/navigation.liquid
View file
Empty file.
19 changes: 1 addition & 18 deletions src/index.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,24 +103,7 @@
<div class="page-container" id="top">
<div class="page-content">
<header class="jumbotronHeader" id="jumbotronHeader">
<picture>
<source
type="image/webp"
sizes="100vw"
srcset="img/Ingo-Steinke-flower-shirt.webp 1x,
img/Ingo-Steinke-flower-shirt-496.webp 2x,
img/Ingo-Steinke-flower-shirt-large.webp 4x"
>
<img
src="img/Ingo-Steinke-flower-shirt.jpg"
srcset="img/Ingo-Steinke-flower-shirt-496.jpg 2x,
img/Ingo-Steinke-flower-shirt-large.jpg 4x"
width="248"
height="248"
alt="{{ content.jumbotronImageAlt }}"
class="avatar"
>
</picture>
{% include '_includes/jumbotron-image.liquid' %}
<h1>{{ content.jumbotronHeader }}</h1>
<p class="tagline">{{ content.jumbotronTagline }}</p>
</header>
Expand Down
Loading

0 comments on commit f0c6f9a

Please sign in to comment.