improve German landing pages #225

openmindculture · Apr 10, 2024 · 18ce49b · 18ce49b
1 parent d275fdf
commit 18ce49b
Show file tree

Hide file tree

Showing 18 changed files with 94 additions and 68 deletions.
diff --git a/dist/index.html b/dist/index.html
diff --git a/dist/styles.css b/dist/styles.css
diff --git a/dist/webseiten-klimafreundlich-barrierefrei-optimieren/index.html b/dist/webseiten-klimafreundlich-barrierefrei-optimieren/index.html
diff --git a/dist/wordpress-website-nachhaltig-optimieren-lassen/index.html b/dist/wordpress-website-nachhaltig-optimieren-lassen/index.html
diff --git a/dist/zertifizierter-shopware-6-frontend-webentwickler/index.html b/dist/zertifizierter-shopware-6-frontend-webentwickler/index.html
diff --git a/dist_en/index.html b/dist_en/index.html
diff --git a/dist_en/styles.css b/dist_en/styles.css
diff --git a/src/_data/de/content.js b/src/_data/de/content.js
@@ -124,7 +124,7 @@ module.exports = {
   "projectKleiderordnungHashtag3": "JavaScript",
   "projectKleiderordnungHashtag4": "PHP",
   "projectKleiderordnungHashtag5": "WordPress",
-  "projectDaskannstdutunHeading": "Klimapsychologiekampagne",
+  "projectDaskannstdutunHeading": "Klimapsychologie-Kampagne",
   "projectDaskannstdutun1": "Als Teamarbeit von",
   "projectDaskannstdutunAnd": "und",
   "projectDaskannstdutunCreatedSpaced": " entstand die Website",

diff --git a/src/_includes/contactform.liquid b/src/_includes/contactform.liquid
@@ -1,4 +1,6 @@
-<form action="/contact/send/index.php" class="contactform no-print status-initial">
+<form action="/contact/send/index.php" class="contactform no-print status-initial">{% comment %}
+<!-- This snippet can be included in all types of contact sections -->
+{% endcomment %}
   <span class="contactform-title">{{ content.contactFormTitle }}</span>
   <fieldset>
     <div class="contactform-row contactform-row-name">

diff --git a/src/_includes/critical.css b/src/_includes/critical.css
@@ -124,13 +124,13 @@ small {
   .jumbotronHeader {
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
     width: 100%;
     height: 100vh;
     margin-bottom: -2.25em;
     background-color: rgba(29, 73, 80, 0.75);
+    justify-content: center;
+    align-items: center;
+    text-align: center;
   }
 
   @media (prefers-reduced-transparency) {
@@ -157,10 +157,10 @@ small {
   }
 
   @media screen and (min-width: 950px) {
-    .jumbotronHeader h1 {
+    .jumbotronHeader:not(.has-text-paragraphs) h1 {
       font-size: 13vh;
     }
-    .jumbotronHeader p {
+    .jumbotronHeader:not(.has-text-paragraphs) p {
       font-size: 6vh;
     }
   }

diff --git a/src/_includes/html-head-common.liquid b/src/_includes/html-head-common.liquid
@@ -1,18 +1,20 @@
-<meta name="language" content="de"><meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="language" content="de"><meta name="viewport" content="width=device-width,initial-scale=1">{% comment %}
+<!-- This snippet is only used on sub-pages, not on the homepage! -->
+{% endcomment %}
 <style>@font-face{font-family:'Bitter';font-style:normal;font-weight:700;font-display:swap;src:local(''),
   url('../fonts/bitter-v16-latin-700.woff2') format('woff2'),url('../fonts/bitter-v16-latin-700.woff') format('woff');
   }
   @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{align-items:center;background-color:rgba(29,73,80,.75);display:flex;flex-direction:column;height:auto;justify-content:center;text-align:center;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 h1{font-size:3rem;margin-top:2rem;}.jumbotronHeader 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 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;}}}
   .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;}
 </style>
-<link rel="stylesheet" media="screen" href="https://www.ingo-steinke.de/styles.css?v=4.0.0">
-<link rel="stylesheet" media="print" href="https://www.ingo-steinke.de/print.css?v=4.0.0">
-<script src="https://www.ingo-steinke.de/js/scripts.js?v=4.0.0"></script>
+<link rel="stylesheet" media="screen" href="../styles.css?v=4.0.0">
+<link rel="stylesheet" media="print" href="./print.css?v=4.0.0">
+<script src="../js/scripts.js?v=4.0.0"></script>
 <meta name="author" content="Ingo Steinke">
 <meta name="p:domain_verify" content="4c4296e5835f4a47eb2c2e5488a99d71">
 <meta name="google-site-verification" content="Qs1p7JgqPLOGD3BYCMGe9EbyNJJEswyala44hnkO6d4">

diff --git a/src/_includes/page-footer.liquid b/src/_includes/page-footer.liquid
@@ -1,4 +1,6 @@
-<footer class="page-footer">
+<footer class="page-footer">{% comment %}
+<!-- This snippet is only used on sub-pages, not on the homepage! -->
+{% endcomment %}
   <p class="legal legal--links no-print">
     <a href="https://www.ingo-steinke.de/#contact">Kontakt</a>
     <a href="https://www.ingo-steinke.de/#imprint">Impressum</a>

diff --git a/src/_includes/section-imprint-contact.liquid b/src/_includes/section-imprint-contact.liquid
@@ -1,6 +1,9 @@
-<section class="imprint-contact">
-  <div class="aside-heading center target-offset" id="imprint">Impressum und Kontaktdaten</div>
-  <article id="contact" class="target-offset"><div class="vcard"><h2 class="fn">Ingo Steinke</h2><br>
+<section class="imprint-contact">{% comment %}
+<!-- This snippet is only used on sub-pages, not on the homepage! -->
+{% endcomment %}
+  <div class="aside-heading center target-offset" id="imprint">Kontakt und Terminbuchung</div>
+  <article id="contact" class="target-offset"><div class="vcard">
+      <span class="fn">Ingo Steinke</span><br>
       <span class="adr"><span class="street-address">Donaustr. 83 II</span><br><span class="postal-code">12043</span> Berlin<br>
   <span class="country-name">Deutschland</span><br></span><br>
 

diff --git a/src/index.liquid b/src/index.liquid
@@ -432,12 +432,11 @@
                       {{ content.projectShopwareCostPlugin1 }}
                       <!-- TODO change link -->
                       <a
-                        href="https://store.shopware.com/waoio62482995391f/wao.io-cache-control.html"
-                        title="store.shopware.com/waoio62482995391f/wao.io-cache-control.html"
+                        href="https://github.com/openmindculture/sw-IngoSCostTransparency"
                         target="_blank"
                         rel="noopener"
                       >{{ content.projectShopwareCostPlugin2 }}</a> {{ content.projectShopwareCostPlugin3 }}
-                      <span class="only-print code-link">store.shopware.com/waoio62482995391f/wao.io-cache-control.html</span>
+                      <span class="only-print code-link">github.com/openmindculture/sw-IngoSCostTransparency</span>
                     </span><!-- TODO change link -->
                   </p>
 

diff --git a/src/styles.css b/src/styles.css
@@ -1018,6 +1018,16 @@ ul.grid-container.skills {
   padding: 0.4rem 0.875rem 0.35rem 0.875rem;
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
+ul.aside-heading > li {
+  margin-bottom: 1rem;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+ul.aside-heading > li:last-child {
+  margin-bottom: 2rem;
+}
+
 .brand-coral {
   background-color: var(--interior-rose);
   color: #000;