Merge pull request #28 from openmindculture/fix/layout-color-enhancem…

…ents Layout and Color Enhancements
openmindculture · Sep 10, 2023 · aaf6f55 · aaf6f55
2 parents b8a420f + abd7fa2
commit aaf6f55
Show file tree

Hide file tree

Showing 19 changed files with 155 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kleiderordnung-berlin",
-  "version": "2.9.0",
+  "version": "2.9.2",
   "description": "portfolio website for sustainable stylist Tina Steinke",
   "scripts": {
     "install": "node install-local-environment.js",

diff --git a/src/css/1_colors-design-settings.css b/src/css/1_colors-design-settings.css
diff --git a/src/css/1_globals.css b/src/css/1_globals.css
@@ -32,7 +32,8 @@ html, body, main, .main, p {
   padding: 0;
   font-family: var(--font-family-default);
   font-weight: var(--font-weight-regular);
-  text-rendering: optimizespeed;
+  /* stylelint-disable-next-line value-keyword-case */
+  text-rendering: optimizeLegibility;
   font-size: var(--font-size-16);
   line-height: 140%;
 }

diff --git a/src/css/1_mixins.css b/src/css/1_mixins.css
@@ -166,7 +166,6 @@ $(className) {
 @define-mixin typography-weight-bold $className {
   $(className) {
     font-weight: var(--font-weight-bold);
-  letter-spacing: -0.03125rem;
     @mixin-content;
   }
 }

diff --git a/src/css/m_contact.css b/src/css/m_contact.css
@@ -38,6 +38,7 @@
 }
 
 @media (min-width: 992px) {
+
   .contact__columns__column-wrapper {
     flex-direction: row;
   }
@@ -47,7 +48,7 @@
   }
 
   .contact__columns__column--50:first-child {
-    flex-basis: 28rem;
+    flex-basis: 30rem;
   }
 
   .contact__columns__column--50:last-child {
@@ -91,10 +92,14 @@
   margin-bottom: 2.125rem;
 }
 
-@mixin typography-weight-bold .contact__calltoactiontext--fieldset {
+.contact__calltoactiontext--fieldset {
   margin-bottom: 0.6875rem;
 }
 
+.contact__calltoactiontext--fieldset p:first-child {
+  font-size: var(--font-size-20);
+}
+
 .contact__socialmedia__links__wrapper {
   display: flex;
   background-color: var(--color-inverted-background);
@@ -177,6 +182,16 @@ input[name="Email"] {
   input[name="Email"]  {
     max-width: 100%;
   }
+
+  .contact {
+    padding-right: 1rem;
+  }
+}
+
+@media (min-width: 1500px) {
+  .contact {
+    padding-right: 0;
+  }
 }
 
 input[name="Nachricht"],
@@ -226,30 +241,27 @@ textarea[name="Nachricht"]::placeholder {
   line-height: 1.6;
 }
 
-.contact__checkboxline:focus > *,
-.contact__checkboxline:focus-within > *,
-.contact__checkboxline:hover > *,
-.contact__checkboxline > *:focus,
-.contact__checkboxline > *:hover {
+.contact__checkboxline label:focus,
+.contact__checkboxline label:hover {
   padding-top: 0.125rem;
   padding-right: 0.25rem;
-  border-radius: 0.25rem;
-  background-color: var(--color-hover-background);
+  background-image: linear-gradient(var(--color-hover-background), var(--color-hover-background));
+  background-position: right bottom;
+  background-size: calc(100% - 2rem) 100%;
+  background-repeat: no-repeat;
   color: var(--color-primary-foreground);
 }
 
-.contact__checkboxline:focus label,
-.contact__checkboxline:focus-within label,
-.contact__checkboxline:hover label,
-.contact__checkboxline label:hover,
-.contact__checkboxline:focus label span,
-.contact__checkboxline:focus-within label span,
-.contact__checkboxline:hover label span,
+.contact__checkboxline label:focus span,
 .contact__checkboxline label:hover span {
-  background-color: var(--color-hover-background);
   color: var(--color-primary-foreground);
 }
 
+.contact__checkboxline label:focus span::before,
+.contact__checkboxline label:hover span::before {
+  background-color: var(--color-hover-background-semitransparent);
+}
+
 .contact__checkboxline input[type="checkbox"] {
   position: absolute;
   opacity: 0;

diff --git a/src/css/m_intro.css b/src/css/m_intro.css
@@ -20,7 +20,7 @@
 }
 
 .intro__keytext {
-  width: var(--width-spaced);
+  width: var(--width-spaced-slightly-larger);
   max-width: var(--width-max);
   margin: 0 auto;
 }
@@ -34,10 +34,22 @@
   @mixin typography-heading-h1-sm .intro__keytext__headline {}
 }
 
-@media (max-width: 768px) { /* smartphone < 555px */
+@media (max-width: 555px) { /* smartphone < 555px */
   @mixin typography-heading-h1-xs .intro__keytext__headline {}
 }
 
+.intro__keytext__paragraphs,
+.intro__keytext__paragraphs p {
+  font-size: var(--font-size-18);
+}
+
+@media (min-width: 768px) {
+  .intro__keytext__paragraphs,
+  .intro__keytext__paragraphs p {
+    font-size: var(--font-size-24);
+  }
+}
+
 .intro__keytext__paragraphs p + p {
   margin-top: 1.5rem;
 }

diff --git a/src/css/m_mission.css b/src/css/m_mission.css
@@ -5,11 +5,6 @@
  * @author openmindculture
  */
 
-
-.mission {
-  max-width: calc(100% - 1rem);
-}
-
 @mixin typography-heading-h2-mission .mission__headline {}
 
 .mission__card {
@@ -23,12 +18,27 @@
 }
 
 @media (min-width: 768px) {
+  .mission {
+    max-width: calc(100% - 1rem);
+  }
   .mission__card {
-    padding: 7.3125rem 5rem 5rem 5rem;
+    padding: 5rem;
     margin: 0 auto;
   }
 }
 
+.mission__headline {
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-24);
+  font-style: normal;
+  letter-spacing: 0;
+  line-height: 160%;
+  margin: 0 0 2rem 0;
+  text-align: center;
+  text-transform: none;
+}
+
 .mission__text,
 .mission__text p {
   font-family: var(--font-family-heading);

diff --git a/src/css/m_navigation.css b/src/css/m_navigation.css
@@ -27,7 +27,7 @@
 }
 
 .navigation__list li {
-  margin: 0 0 1.25rem 0;
+  margin: 1rem 0 2rem 0;
   text-align: center;
   width: 100%;
 }
@@ -36,6 +36,7 @@
 .navigation__list-wrapper--main a.button {
   background-color: var(--color-inverted-background);
   display: inline-block;
+  font-size: 1rem;
 }
 
 .navigation__list-wrapper--main a.button:hover,
@@ -47,7 +48,7 @@
   text-decoration: none;
   text-transform: uppercase;
   font-weight: 600;
-  font-size: var(--font-size-13);
+  font-size: 1rem;
 }
 
 /* inverted colors inside mobile navigation wrapper */
@@ -201,13 +202,15 @@
     margin-top: 0.5rem;
     margin-left: 0.25rem;
     margin-right: 0.5rem;
+    font-size: var(--font-size-13);
   }
 
   .navigation__list-wrapper--main a:not(.button),
   .navigation__list-wrapper--main a:not(.button):link,
   .navigation__list-wrapper--main a:not(.button):visited {
     padding: 0.5rem 0 0.25rem 0;
     margin: 0.25rem 0.75rem 0.5rem 0;
+    font-size: var(--font-size-13);
     background-position-y: 90%,90%,90%;
     background-size: 100% 40%,50% 40%,100% 40%;
     background-color: transparent !important;

diff --git a/src/css/m_news.css b/src/css/m_news.css
@@ -7,7 +7,7 @@
 
 .news {
   width: var(--width-full);
-  max-width: var(--width-max);
+  max-width: var(--width-max-larger);
   margin: 0 auto 7rem auto;
 }
 

diff --git a/src/css/m_offers.css b/src/css/m_offers.css
@@ -145,9 +145,8 @@ body.single .offers__offer {
 }
 
 /* overlapping 2 columns layout */
-@media (min-width: 992px) {
+@media (min-width: 768px) {
   .offers__offer {
-    position: relative;
     display: flex;
   }
   .offers__offer--has-no-image {
@@ -225,6 +224,7 @@ body.single .offers__offer {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  flex-wrap: wrap;
 }
 
 .offers__offer__pricingwrapper {
@@ -271,9 +271,14 @@ body.single .offers__offer {
   }
   .offers__offer__card__footer {
     flex-direction: row;
+    flex-wrap: nowrap;
   }
   .offers__offer__pricingwrapper {
     margin-bottom: 0;
+    max-width: calc(100% - 14rem);
+  }
+  .offers__offer__buttonwrapper {
+    white-space: nowrap;
   }
 }
 

diff --git a/src/css/m_stories.css b/src/css/m_stories.css
@@ -9,7 +9,7 @@
 
 .stories {
   width: var(--width-full);
-  max-width: var(--width-max);
+  max-width: var(--width-max-larger);
   margin: 0 auto 5rem auto;
 }
 

diff --git a/src/functions.php b/src/functions.php
@@ -9,7 +9,7 @@
 }
 
 if ( ! defined( 'KLEIDERORDNUNG_THEME_VERSION' ) ) {
-  define( 'KLEIDERORDNUNG_THEME_VERSION', '2.9.0' );
+  define( 'KLEIDERORDNUNG_THEME_VERSION', '2.9.2' );
 }
 
 if ( ! defined( 'KLEIDERORDNUNG_DIR' ) ) {

diff --git a/src/inc/functions/insert-soft-hyphenation.php b/src/inc/functions/insert-soft-hyphenation.php
@@ -0,0 +1,41 @@
+<?php
+/**
+ * insert soft hyphenation recommendations into known long words using &shy; entities
+ *
+ * @package KleiderOrdnung
+ * @author openmindculture
+ */
+
+function kleiderordnung_insert_soft_hyphenation(string $phrase) {
+  $dictionary = array(
+    'Kleiderordnung',
+    'Stilberatung',
+    'nachhaltigem',
+    'Gutscheine',
+    'Consultation',
+    'Professional',
+    'Outfit',
+    'Sustainability',
+    'Startups',
+    'Startup',
+    'Subscription',
+    'individuell',
+    'buchbar',
+  );
+  $replacements = array(
+    'Kleider&shy;ordnung',
+    'Stil&shy;beratung',
+    'nach&shy;hal&shy;tigem',
+    'Gut&shy;sche&shy;ine',
+    'Con&shy;sul&shy;ta&shy;tion',
+    'Pro&shy;fessional',
+    'Out&shy;fit',
+    'Sus&shy;tain&shy;abil&shy;ity',
+    'Start&shy;ups',
+    'Start&shy;up',
+    'Sub&shy;scription',
+    'in&shy;di&shy;vi&shy;du&shy;ell',
+    'buch&shy;bar',
+  );
+  return str_replace($dictionary, $replacements, $phrase);
+}
diff --git a/src/inc/structure/contact.php b/src/inc/structure/contact.php
@@ -21,7 +21,7 @@
           <div class="contact__vcard__company" itemprop="company"><?php _e( 'Kleiderordnung', 'kleiderordnung' ) ?></div>
           <div class="contact__vcard__fullname fn" itemprop="name">Tina Steinke</div>
           <div class="contact__vcard__jobtitle jobtitle role" itemprop="jobTitle"><?php echo get_field('page_contact_job_title', KLEIDERORDNUNG_FRONT_PAGE_ID) ?></div>
-          <div class="contact__vcard__phone">Tel. <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>
+          <div class="contact__vcard__phone">Tel. <a class=telephone itemprop=telephone href=tel:+491636823820><span class="visually-spaced dot-after">0163</span><span class=visually-spaced>682</span><span class=visually-spaced>382</span><span class=visually-spaced>0</span></a>
           </div>
           <div class="contact__vcard__email">
             <a class="contact__vcard__email__mailto email" itemprop="email" itemscope href="#" data-mailing="lazy" data-user="martinasteinke" data-domain="posteo.de"><span class="spamprotected">mar</span><span class="blockspam" aria-hidden="true">[...]</span><span class="spamprotected">tinasteinke</span><span class="blockspam" aria-hidden="true">[...]</span><span class="spamprotected">@</span><span class="spamprotected">posteo</span><span class="blockspam" aria-hidden="true">[...]</span><span class="spamprotected">.</span><span class="spamprotected">de</span></a>

diff --git a/src/inc/structure/html-head.php b/src/inc/structure/html-head.php
@@ -27,8 +27,7 @@
   <link rel="preload" href="<?php echo get_template_directory_uri() ?>/fonts/17af_vdef_emp_883a.woff2?45711c4b8486ec30fae30fb185b8d8b9bb1d822f" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="<?php echo get_template_directory_uri() ?>/fonts/17ae_vdef_emp_8839.woff2?45711c4b8486ec30fae30fb185b8d8b9bb1d822f" as="font" type="font/woff2" crossorigin>
   <!-- load licensed font styles from TypeNetwork / Fastly CDN server -->
-  <!-- TODO remove the following stylesheet when no longer needed -->
-  <link href="https://fastly-cloud.typenetwork.com/projects/7215/fontface.css?64529db9" rel="stylesheet" type="text/css" media="all">
+  <!-- link href="https://fastly-cloud.typenetwork.com/projects/7215/fontface.css?64529db9" rel="stylesheet" type="text/css" media="all" -->
   <style>
     <?php include( KLEIDERORDNUNG_DIR . '/css/0_critical.css') ?>
     <?php include( KLEIDERORDNUNG_DIR . '/css/0_typography.css.php') ?>