Merge pull request #14 from openmindculture/12-content-update-22

Content Update '22 #12
openmindculture · Jul 21, 2022 · b1ca2d6 · b1ca2d6
2 parents 37e1e69 + 9a175e5
commit b1ca2d6
Show file tree

Hide file tree

Showing 11 changed files with 729 additions and 655 deletions.
diff --git a/.gitignore b/.gitignore
@@ -53,9 +53,6 @@ htdocs/js
 htdocs/.htpasswd
 htdocs/beta/.htpasswd
 
-# Materialordner
-material
-
 # Logfiles #
 yarn-error.loyarn-error.log
 

diff --git a/README.md b/README.md
@@ -1,8 +1,10 @@
 # Kleiderordnung-Duesseldorf.de
 
 Small business website as a responsive single page application.
-Images and original CI by Vivien Kruggel.
-Web development by Ingo Steinke.
+Images and original design by Vivien Kruggel,
+web development by Ingo Steinke in 2016.
+
+Content update in 2022: contact update, teaser for upcoming https://www.kleiderordnung-berlin.de/
 
 ## SCREENSHOTS
 
@@ -24,8 +26,6 @@ Web development by Ingo Steinke.
 
 http://www.kleiderordnung-duesseldorf.de/
 
-https://www.kleiderordnung-duesseldorf.de/piwik/ (statistics)
-
 ## DEPENDENCIES
 
 ### Development
@@ -34,7 +34,6 @@ https://www.kleiderordnung-duesseldorf.de/piwik/ (statistics)
 ### Production
 * Apache webserver (HTTP header settings in .htaccess)
 * PHP (with email service, to send contact form)
-* Piwik analytics installed at www.kleiderordnung-duesseldorf.de/piwik
 
 ## BUILD TARGETS
 

diff --git a/htdocs/css/styles.css b/htdocs/css/styles.css
diff --git a/htdocs/img/Tina-Steinke-Kleiderordnung.png b/htdocs/img/Tina-Steinke-Kleiderordnung.png
diff --git a/htdocs/index.html b/htdocs/index.html
@@ -49,6 +49,7 @@
            src="img/faden-kleider-ordnung.png" alt="Kleiderordnung - Ihr roter Faden zum eigenen Stil">
       </div>
     </div>
+    <div class="sticker">coming soon:<br> Kleiderordnung Berlin</div>
   </header>
   <div class="content-wrapper">
     <ul class="tablist" id="tablist">
@@ -76,10 +77,13 @@
     <section class="tabs" id="tabcontainer">
       <div id="ueber-mich" class="hidden tab tab-blue">
         <article>
-          <img class="floatcircle" src="img/Martina-Klein-Kleiderordnung.png" width="198" height="198" alt="Martina Steinke (Foto)"><!-- 198 x2 =396 -->
+          <img class="floatcircle" src="img/Tina-Steinke-Kleiderordnung.png" width="198" height="198" alt="Martina Steinke (Foto)"><!-- 198 x2 =396 -->
           <h2>Über mich</h2>
           <p>
-          Mein Herz schlägt für Mode und eine individuelle Stilfindung.
+            Hallo! Ich bin Tina Steinke.
+          </p>
+          <p>
+            Mein Herz schlägt für Mode und eine individuelle Stilfindung.
           </p>
           <p>
           Ich bringe eine große Begeisterung für Mode und Kombination von Mode und Stilen mit. Ich habe selbst einen starken Stil
@@ -203,19 +207,38 @@ <h2>
             <div>
               <h1 class=fn itemprop=name><img src="img/Martina-Steinke.svg" alt="Martina Steinke" width="438" height="119"></h1>
               <div class=jobtitle itemprop=jobTitle>Modeberaterin und Stylistin</div>
-              <a class=telephone itemprop=telephone href="tel:+491625445028">0 162 . 54 450 28</a>
-              <a class=email itemprop=email itemscope=email href="mailto:mklein@meine-modeberaterin.de">mklein@meine-modeberaterin.de</a>
+              <a class=telephone itemprop=telephone href="tel:+491636823820">
+                <span class="visually-spaced">0</span>
+                <span class="visually-spaced dot-after">163</span>
+                <span class="visually-spaced">682</span>
+                <span class="visually-spaced">382</span>
+                <span class="visually-spaced">0</span>
+              </a>
+              <a class=email itemprop=email itemscope=email href="mailto:martinasteinke@posteo.de">martinasteinke@posteo.de</a>
               <a itemscope=url href="//www.kleiderordnung-duesseldorf.de/">www.kleiderordnung-duesseldorf.de</a>
             </div>
             <div class=social>
-              <a href="https://www.instagram.com/kleider.ordnung/" target="_blank" rel=noopener>
+              <a href="https://www.instagram.com/kleider.ordnung/" target="_blank" rel="noopener" title="Instagram">
                 <svg x="0px" y="0px" width=25 height=25 viewBox="0 0 512 512">
                   <path style="fill:#fff;" d="M256,49.471c67.266,0,75.233.257,101.8,1.469,24.562,1.121,37.9,5.224,46.778,8.674a78.052,78.052,0,0,1,28.966,18.845,78.052,78.052,0,0,1,18.845,28.966c3.45,8.877,7.554,22.216,8.674,46.778,1.212,26.565,1.469,34.532,1.469,101.8s-0.257,75.233-1.469,101.8c-1.121,24.562-5.225,37.9-8.674,46.778a83.427,83.427,0,0,1-47.811,47.811c-8.877,3.45-22.216,7.554-46.778,8.674-26.56,1.212-34.527,1.469-101.8,1.469s-75.237-.257-101.8-1.469c-24.562-1.121-37.9-5.225-46.778-8.674a78.051,78.051,0,0,1-28.966-18.845,78.053,78.053,0,0,1-18.845-28.966c-3.45-8.877-7.554-22.216-8.674-46.778-1.212-26.564-1.469-34.532-1.469-101.8s0.257-75.233,1.469-101.8c1.121-24.562,5.224-37.9,8.674-46.778A78.052,78.052,0,0,1,78.458,78.458a78.053,78.053,0,0,1,28.966-18.845c8.877-3.45,22.216-7.554,46.778-8.674,26.565-1.212,34.532-1.469,101.8-1.469m0-45.391c-68.418,0-77,.29-103.866,1.516-26.815,1.224-45.127,5.482-61.151,11.71a123.488,123.488,0,0,0-44.62,29.057A123.488,123.488,0,0,0,17.3,90.982C11.077,107.007,6.819,125.319,5.6,152.134,4.369,179,4.079,187.582,4.079,256S4.369,333,5.6,359.866c1.224,26.815,5.482,45.127,11.71,61.151a123.489,123.489,0,0,0,29.057,44.62,123.486,123.486,0,0,0,44.62,29.057c16.025,6.228,34.337,10.486,61.151,11.71,26.87,1.226,35.449,1.516,103.866,1.516s77-.29,103.866-1.516c26.815-1.224,45.127-5.482,61.151-11.71a128.817,128.817,0,0,0,73.677-73.677c6.228-16.025,10.486-34.337,11.71-61.151,1.226-26.87,1.516-35.449,1.516-103.866s-0.29-77-1.516-103.866c-1.224-26.815-5.482-45.127-11.71-61.151a123.486,123.486,0,0,0-29.057-44.62A123.487,123.487,0,0,0,421.018,17.3C404.993,11.077,386.681,6.819,359.866,5.6,333,4.369,324.418,4.079,256,4.079h0Z"/>
                   <path style="fill:#fff;" d="M256,126.635A129.365,129.365,0,1,0,385.365,256,129.365,129.365,0,0,0,256,126.635Zm0,213.338A83.973,83.973,0,1,1,339.974,256,83.974,83.974,0,0,1,256,339.973Z"/>
                   <circle style="fill:#fff;" cx="390.476" cy="121.524" r="30.23"/>
                 </svg>
               </a>
-              <a href="https://www.xing.com/profile/Martina_Klein12" target="_blank" rel=noopener>
+              <a href="https://www.reflecta.network/changemaker/martina-steinke" target="_blank" rel="noopener" title="reflecta network">
+                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="32" viewBox="0 0 36 32">
+                  <g fill="none" fill-rule="evenodd">
+                    <g fill-rule="nonzero">
+                      <g>
+                        <path fill="#ffffff" d="M11.515 21.8v-6.794c0-.588.133-1.079.398-1.473.265-.394.648-.591 1.15-.591.53 0 .917.161 1.161.484.244.322.365.706.365 1.15v.494h2.623c.015-.086.033-.236.054-.451.022-.215.033-.43.033-.645 0-1.018-.27-1.835-.807-2.451-.537-.616-1.3-.925-2.29-.925-.616 0-1.15.122-1.601.366-.452.244-.796.509-1.032.795-.237.287-.384.51-.441.667l-.387-1.613H8.419V21.8h3.096zm12.144.215c.889 0 1.71-.154 2.462-.462.753-.308 1.358-.789 1.817-1.44.458-.653.688-1.46.688-2.42h-3.01c0 .717-.19 1.258-.57 1.624-.38.365-.9.548-1.559.548-.73 0-1.308-.24-1.73-.72-.423-.48-.635-1.079-.635-1.796v-.516h7.525V15.2c0-.946-.229-1.766-.688-2.461-.458-.695-1.068-1.226-1.827-1.591-.76-.366-1.584-.549-2.473-.549h-.344c-1.017 0-1.931.215-2.74.645-.81.43-1.452 1.054-1.925 1.871-.473.817-.71 1.777-.71 2.881v.623c0 1.118.233 2.082.7 2.892.465.81 1.106 1.43 1.923 1.86.817.43 1.735.645 2.752.645h.344zm1.806-6.902h-4.343c.058-.688.283-1.254.678-1.698.394-.444.906-.667 1.537-.667.745 0 1.286.212 1.623.635.337.423.505 1 .505 1.73z" transform="translate(-16 -12) translate(16 12)"></path>
+                        <path fill="#006d76" d="M9 0c.552 0 1 .448 1 1 0 .527-.408.96-.925.997L9 2H2v28h7c.527 0 .96.408.997.925L10 31c0 .527-.408.96-.925.997L9 32H1c-.527 0-.96-.408-.997-.925L0 31V1C0 .473.408.04.925.003L1 0h8z" transform="translate(-16 -12) translate(16 12)"></path>
+                        <path fill="#006d76" d="M34.5 0c.552 0 1 .448 1 1 0 .527-.408.96-.925.997L34.5 2h-7v28h7c.527 0 .96.408.997.925L35.5 31c0 .527-.408.96-.925.997L34.5 32h-8c-.527 0-.96-.408-.997-.925L25.5 31V1c0-.527.408-.96.925-.997L26.5 0h8z" transform="translate(-16 -12) translate(16 12) matrix(-1 0 0 1 61 0)"></path>
+                      </g>
+                    </g>
+                  </g>
+                </svg>
+              </a>
+              <a href="https://www.xing.com/profile/Martina_Steinke11" target="_blank" rel="noopener" title="XING">
                 <svg height=25 width=25 x="0px" y="0px" viewBox="0 0 400 400" style="enable-background:new 0 0 455.731 455.731">
                   <g>
                     <rect x="0" y="0" style="fill:#fff;" width="455.731" height="455.731"/>
@@ -226,67 +249,12 @@ <h1 class=fn itemprop=name><img src="img/Martina-Steinke.svg" alt="Martina Stein
                   </g>
                 </svg>
               </a>
-              <a href="https://de-de.facebook.com/people/Martina-Klein/100014543049789" target="_blank" rel=noopener>
-                <svg width=25 height=25 x="0px" y="0px" viewBox="0 0 266.893 266.895" enable-background="new 0 0 266.893 266.895">
-                  <path id=bg fill="#fff" d="M248.082,262.307c7.854,0,14.223-6.369,14.223-14.225V18.812
-                    c0-7.857-6.368-14.224-14.223-14.224H18.812c-7.857,0-14.224,6.367-14.224,14.224v229.27c0,7.855,6.366,14.225,14.224,14.225
-                    H248.082z"/>
-                  <path id=f fill="#283583" d="M182.409,262.307v-99.803h33.499l5.016-38.895h-38.515V98.777c0-11.261,3.127-18.935,19.275-18.935
-                    l20.596-0.009V45.045c-3.562-0.474-15.788-1.533-30.012-1.533c-29.695,0-50.025,18.126-50.025,51.413v28.684h-33.585v38.895h33.585
-                    v99.803H182.409z"/>
-                </svg>
-              </a>
             </div>
           </address>
         </article>
       </div>
     </section><!-- /section.tabcontainer -->
 
-    <form action="//www.kleiderordnung-duesseldorf.de/contact/send/" id="kontaktformular" class="contactform hidden" method="POST" onsubmit="return helper.form.validate(this)" onfocus="helper.class.remove(this,'invalid');">
-      <fieldset id="formularfelder">
-      <label for="Name">
-        <input type=text required name="Name" id="Name" placeholder="Mein Name" label="Name" onfocus="helper.class.remove(this,'invalid'); helper.class.remove(this.previousSibling,'invalid')">
-      </label>
-
-      <label for="E-Mail">
-        <input type=email name="E-Mail" id="E-Mail" placeholder="Meine E-Mail-Adresse" label="E-Mail" onfocus="helper.class.remove(this,'invalid'); helper.class.remove(this.previousSibling,'invalid')">
-      </label>
-
-      <label for="Telefon">
-        <input type=tel name="Telefon" id="Telefon" placeholder="Meine Telefonnummer" label="Telefon" onfocus="helper.class.remove(this,'invalid'); helper.class.remove(this.previousSibling,'invalid')">
-      </label>
-
-      <label for="Nachricht">
-        <textarea name="Nachricht" id="Nachricht" placeholder="Meine Nachricht an Martina Steinke" label="Meine Nachricht an Martina Steinke"></textarea>
-      </label>
-      <!-- TODO Der folgende Datenschutztext ist für mobile zu lang oder groß -->
-      <label for="Datenschutzerklaerung_zur_Kenntnis genommen">
-        <textarea name="Datenschutzhinweis" id="Datenschutzhinweis" readonly="readonly" placeholder="Meine Kontaktdaten werden zwecks eventueller vorvertraglicher Maßnahmen übermittelt und gespeichert. Die Datenschutzerklärung informiert über Rechtsgrundlage, Art der Datenverarbeitung, Lösch- und Widerrufsmöglichkeit.
-Es gelten die allgemeinen Geschäftsbedingungen."></textarea>
-      </label>
-
-      <label for="captcha" class="captcha">1+2</label>
-      <input type="text" name="Captcha" value="" class="captcha" id="captchafield">
-      <input type="text" name="Homepage" id="homepageurl" value="" class="homepage">
-      <input type="submit" class="submit" value="absenden">
-      </fieldset>
-      <div id="formularsendet" class="hidden sent">
-        <aside>
-          Ihre Nachricht wird versendet ...
-        </aside>
-      </div>
-      <div id="formularversandt" class="hidden sent">
-        <aside>
-          Vielen Dank für Ihre Nachricht!
-        </aside>
-      </div>
-      <div id="formularfehler" class="hidden sent">
-        <aside>
-          Leider konnte Ihre Nachricht nicht versendet werden.
-        </aside>
-      </div>
-    </form>
-
     <aside id="agb" class="tos hidden">
       <h2>Allgemeine Geschäftsbedingungen</h2>
 	<p>
@@ -311,7 +279,7 @@ <h4>§ 4 Widerrufsrecht</h4>
 	<br>
 	<b>Widerrufsbelehrung</b>
 	<br>
-	<p>Sie haben das Recht, binnen vierzehn Tagen ohne Angabe von Gründen diesen Vertrag zu widerrufen. Die Widerrufsfrist beträgt 14 Tage ab Vertragsschluss. Um Ihr Widerrufsrecht auszuüben, müssen Sie  mir (Kleiderordnung Düsseldorf, Frau Martina Steinke, Neunzigstraße 6a, 40625 Düsseldorf, mklein@meine-modeberaterin.de) mittels einer eindeutigen Erklärung (z.B. einem mit der Post versandten Brief, einer E-Mail) über Ihren Entschluss, diesen Vertrag zu widerrufen, informieren. Sie können dafür das unten stehende Muster-Widerrufsformular verwenden, das jedoch nicht vorgeschrieben ist oder eine andere eindeutige Erklärung übermitteln. Machen Sie von dieser Möglichkeit Gebrauch, so werden wir Ihnen unverzüglich eine Bestätigung über den Eingang des Widerrufs übermitteln. Zur Wahrung der Widerrufsfrist reicht es aus, dass Sie die Mitteilung über die Ausübung des Widerrufsrechts vor Ablauf der Widerrufsfrist absenden.</p>
+	<p>Sie haben das Recht, binnen vierzehn Tagen ohne Angabe von Gründen diesen Vertrag zu widerrufen. Die Widerrufsfrist beträgt 14 Tage ab Vertragsschluss. Um Ihr Widerrufsrecht auszuüben, müssen Sie  mir (Kleiderordnung Düsseldorf, Frau Martina Steinke, Neunzigstraße 6a, 40625 Düsseldorf, martinasteinke@posteo.de) mittels einer eindeutigen Erklärung (z.B. einem mit der Post versandten Brief, einer E-Mail) über Ihren Entschluss, diesen Vertrag zu widerrufen, informieren. Sie können dafür das unten stehende Muster-Widerrufsformular verwenden, das jedoch nicht vorgeschrieben ist oder eine andere eindeutige Erklärung übermitteln. Machen Sie von dieser Möglichkeit Gebrauch, so werden wir Ihnen unverzüglich eine Bestätigung über den Eingang des Widerrufs übermitteln. Zur Wahrung der Widerrufsfrist reicht es aus, dass Sie die Mitteilung über die Ausübung des Widerrufsrechts vor Ablauf der Widerrufsfrist absenden.</p>
 	<br>
 	<b>Folgen des Widerrufs</b>
 	<br>
@@ -390,8 +358,15 @@ <h4>Verantwortliche Anbieterin:</h4>
     Neunzigstraße 6a<br>
     40625 Düsseldorf<br>
     Deutschland<br>
-    Tel.: <a class="telephone" itemprop="telephone" href="tel:+491625445028">+49 (0) 162 . 54 450 28</a><br>
-    E-Mail: <a class="email" href="mailto:mklein@meine-modeberaterin.de">mklein@meine-modeberaterin.de</a></p>
+    Tel.: <a class="telephone" itemprop="telephone" href="tel:+491636823820">
+      <span class="visually-spaced">+49</span>
+      <span class="visually-spaced">(0)</span>
+      <span class="visually-spaced dot-after">163</span>
+      <span class="visually-spaced">682</span>
+      <span class="visually-spaced">382</span>
+      <span class="visually-spaced">0</span>
+    </a><br>
+    E-Mail: <a class="email" href="mailto:martinasteinke@posteo.de">martinasteinke@posteo.de</a></p>
 
     <h4>Ihr gutes Recht: Auskunft, Korrektur, Löschung, Widerruf</h4>
 

diff --git a/material/annabella-testimonial.jpg b/material/annabella-testimonial.jpg
diff --git a/material/flea-market.jpg b/material/flea-market.jpg
diff --git a/material/glasses-schoeller-exhibition.jpg b/material/glasses-schoeller-exhibition.jpg
diff --git a/material/leipzig-cafe.jpg b/material/leipzig-cafe.jpg
diff --git a/src/stylesheets/partials/_main.scss b/src/stylesheets/partials/_main.scss
@@ -284,14 +284,19 @@ ul.tablist {
 
   & .social {
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     margin: 1em auto 0 auto;
     width: 8em;
     & a {
       display: inline-block;
       padding: 0 .25em;
       & svg {
         border-radius: .125em;
+        height: 36px;
+        width: auto;
+      }
+      & + a {
+        margin-left: .5em;
       }
     }
   }
@@ -579,3 +584,33 @@ ul.tablist {
     display: none !important;
   }
 }
+
+.visually-spaced+.visually-spaced::before {
+  content: " ";
+  letter-spacing: .25rem;
+}
+
+.dot-after::after {
+  content: ".";
+  margin-left: .25rem;
+}
+
+.sticker {
+  border: solid 0 transparent;
+  border-radius: 5px;
+  width: 200px;
+  height: auto;
+  background: rgba(255,0,0,.75);
+  box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.5);
+  color: #ffffff;
+  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
+  font-size: 0.95em;
+  font-weight: bold;
+  position: absolute;
+  transform: rotate(7deg);
+  right: 10%;
+  top: 2rem;
+  @media screen and (max-width: $breakpoint_twocol) {
+    top: 7rem;
+  }
+}