diff --git a/juconnect-patterns-plugin/juconnect-patterns.zip b/juconnect-patterns-plugin/juconnect-patterns.zip new file mode 100644 index 0000000..0a790ba Binary files /dev/null and b/juconnect-patterns-plugin/juconnect-patterns.zip differ diff --git a/juconnect-patterns-plugin/juconnect-patterns/juconnect-patterns.php b/juconnect-patterns-plugin/juconnect-patterns/juconnect-patterns.php new file mode 100644 index 0000000..719ef06 --- /dev/null +++ b/juconnect-patterns-plugin/juconnect-patterns/juconnect-patterns.php @@ -0,0 +1,299 @@ + __('JuConnect', 'juconnect'), + ]); + + register_block_pattern('juconnect/hero-pagehead', [ + 'title' => __('Hero (Styleguide)', 'juconnect'), + 'categories' => ['juconnect'], + 'description' => __('Hero wie im lokalen Styleguide (einspaltig).', 'juconnect'), + 'content' => << +
+
+

Hilfen zur Erziehung - strukturiert und verlaesslich

+ + + +

Informationen fuer oeffentliche Traeger und Kooperationspartner.

+ + + +
+
Kontakt
+ + + +
Leistungen
+
+
+
+ +HTML + ]); + + register_block_pattern('juconnect/section-grid-3', [ + 'title' => __('Section + 3 Cards', 'juconnect'), + 'categories' => ['juconnect'], + 'content' => << +
+
+

Leistungen

+ + + +

Kurz erklaert - Details findest du auf den Unterseiten.

+
+ + + +
+
+

Card 1

+ + + +

Kurzbeschreibung.

+
+ + + +
+

Card 2

+ + + +

Kurzbeschreibung.

+
+ + + +
+

Card 3

+ + + +

Kurzbeschreibung.

+
+
+
+ +HTML + ]); + + register_block_pattern('juconnect/steps-4', [ + 'title' => __('Ablauf (4 Steps)', 'juconnect'), + 'categories' => ['juconnect'], + 'content' => << +
+
+

So laeuft's ab

+ + + +

Transparent und nachvollziehbar.

+
+ + + +
+ +
+

1. Anfrage

+ + + +

Kontakt aufnehmen, kurz klaeren.

+
+ + + +
+

2. Erstgespraech

+ + + +

Ziele, Rahmen, Erwartungen.

+
+ + + +
+

3. Start

+ + + +

Plan + regelmaessige Termine.

+
+ + + +
+

4. Review

+ + + +

Fortschritt messen, nachsteuern.

+
+ +
+
+ +HTML + ]); + + register_block_pattern('juconnect/steps-4-with-graphic-right', [ + 'title' => __('Ablauf (4 Steps) + Grafik rechts', 'juconnect'), + 'categories' => ['juconnect'], + 'content' => << +
+
+

So laeuft's ab

+ + + +

Transparent und nachvollziehbar.

+
+ + + +
+
+
+ +
+

1. Anfrage

+ + +

Kontakt aufnehmen, kurz klaeren.

+
+ + + +
+

2. Erstgespraech

+ + +

Ziele, Rahmen, Erwartungen.

+
+ + + +
+

3. Start

+ + +

Plan + regelmaessige Termine.

+
+ + + +
+

4. Review

+ + +

Fortschritt messen, nachsteuern.

+
+ +
+
+ + + +
+
+ + +

Rechts: Grafik oder Bild.

+
+
+
+ +HTML + ]); + + register_block_pattern('juconnect/steps-4-with-graphic-left', [ + 'title' => __('Ablauf (4 Steps) + Grafik links', 'juconnect'), + 'categories' => ['juconnect'], + 'content' => << +
+
+

So laeuft's ab

+ + + +

Transparent und nachvollziehbar.

+
+ + + +
+
+
+ + +

Links: Grafik oder Bild.

+
+ + + +
+
+ +
+

1. Anfrage

+ + +

Kontakt aufnehmen, kurz klaeren.

+
+ + + +
+

2. Erstgespraech

+ + +

Ziele, Rahmen, Erwartungen.

+
+ + + +
+

3. Start

+ + +

Plan + regelmaessige Termine.

+
+ + + +
+

4. Review

+ + +

Fortschritt messen, nachsteuern.

+
+ +
+
+
+
+ +HTML + ]); +}); diff --git a/juconnect-strict-theme-v3/juconnect-strict.zip b/juconnect-strict-theme-v3/juconnect-strict.zip new file mode 100644 index 0000000..dfb383d Binary files /dev/null and b/juconnect-strict-theme-v3/juconnect-strict.zip differ diff --git a/juconnect-strict-theme-v3/juconnect-strict/assets/img/juconnect.svg b/juconnect-strict-theme-v3/juconnect-strict/assets/img/juconnect.svg index ad3ce82..2b5ac3d 100644 --- a/juconnect-strict-theme-v3/juconnect-strict/assets/img/juconnect.svg +++ b/juconnect-strict-theme-v3/juconnect-strict/assets/img/juconnect.svg @@ -1,51 +1,52 @@ - + + - - - + + + - - - - - - - - - + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/juconnect-strict-theme-v3/juconnect-strict/assets/img/juconnect_light.svg b/juconnect-strict-theme-v3/juconnect-strict/assets/img/juconnect_light.svg index aca41c9..0cc8e70 100644 --- a/juconnect-strict-theme-v3/juconnect-strict/assets/img/juconnect_light.svg +++ b/juconnect-strict-theme-v3/juconnect-strict/assets/img/juconnect_light.svg @@ -1,51 +1,52 @@ - + + - - - + + + - - - - - - - - - + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/juconnect-strict-theme-v3/juconnect-strict/style.css b/juconnect-strict-theme-v3/juconnect-strict/style.css index 5904df2..60d31f1 100644 --- a/juconnect-strict-theme-v3/juconnect-strict/style.css +++ b/juconnect-strict-theme-v3/juconnect-strict/style.css @@ -262,11 +262,8 @@ a{ color: inherit; } /* Page head */ .pagehead{ - display:grid; - grid-template-columns: 1fr 340px; - gap: var(--s5); - align-items: start; - margin-bottom: var(--s6); + display:block; + margin-bottom: var(--s6) !important; position: relative; padding: var(--s6); border: 1px solid var(--header-shell-border); @@ -278,11 +275,26 @@ a{ color: inherit; } box-shadow: var(--shadow-sm); overflow: hidden; } +/* Legacy content guard: + only collapse pagehead columns if a steps grid was accidentally nested into it. */ +.pagehead .wp-block-columns:has(.grid.grid--4){ + margin: 0; + display: block !important; +} +.pagehead .wp-block-columns:has(.grid.grid--4) > .wp-block-column{ + margin: 0; + flex-basis: 100% !important; + max-width: 100% !important; + width: 100% !important; +} +.pagehead .wp-block-columns:has(.grid.grid--4) > .wp-block-column:last-child{ + display: none !important; +} +.pagehead .wp-block-buttons{ + margin-top: var(--s3); +} @media (max-width: 1020px){ - .pagehead{ - grid-template-columns: 1fr; - padding: var(--s5); - } + .pagehead{ padding: var(--s5); } } .pagehead__left{ display: flex; @@ -294,6 +306,9 @@ a{ color: inherit; } align-items: center; gap: var(--s2); } +.pagehead__eyebrow .badge{ + display: none; +} .pagehead__chips{ display:flex; gap: 10px; @@ -311,6 +326,10 @@ a{ color: inherit; } .pagehead .lead{ max-width: 64ch; } +.pagehead .wp-block-button .wp-block-button__link, +.hero .wp-block-button .wp-block-button__link{ + border-radius: 12px !important; +} .pagehead__right .card{ border-color: var(--header-shell-border); background: var(--surface); @@ -322,6 +341,16 @@ a{ color: inherit; } /* Sections */ .section{ margin: 0 0 var(--s6) 0; } .section__head{ margin-bottom: var(--s4); } +.main .wp-block-group.section{ + width: 100%; + max-width: none !important; +} +.main .wp-block-group.section > .wp-block-group__inner-container{ + width: 100%; + max-width: none !important; + margin-left: 0 !important; + margin-right: 0 !important; +} .footer{ padding-top: var(--s4); border-top: 1px solid var(--line); @@ -337,13 +366,37 @@ a{ color: inherit; } /* Layout utilities */ .grid{ display:grid; gap: var(--s4); } +.wp-block-group.grid{ display:block !important; gap: var(--s4); } +.wp-block-group.grid > .wp-block-group__inner-container{ + display: grid !important; + gap: var(--s4); + max-width: none !important; + margin-left: 0 !important; + margin-right: 0 !important; +} +.wp-block-group.grid{ max-width: none !important; } .grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } +.grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); } +.wp-block-group.grid.grid--2 > .wp-block-group__inner-container{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } +.wp-block-group.grid.grid--3 > .wp-block-group__inner-container{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } +.wp-block-group.grid.grid--4 > .wp-block-group__inner-container{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .section > .grid + .grid{ margin-top: var(--s4); } .section > .grid + .card, .section > .card + .grid{ margin-top: var(--s4); } @media (max-width: 1020px){ - .grid--2, .grid--3{ grid-template-columns: 1fr; } + .grid--2, .grid--3, + .wp-block-group.grid.grid--2 > .wp-block-group__inner-container, + .wp-block-group.grid.grid--3 > .wp-block-group__inner-container{ + grid-template-columns: 1fr !important; + } +} + +@media (max-width: 760px){ + .grid--4, + .wp-block-group.grid.grid--4 > .wp-block-group__inner-container{ + grid-template-columns: 1fr !important; + } } .row{ display:flex; gap: var(--s2); align-items:center; } .wrap{ flex-wrap: wrap; } @@ -426,35 +479,35 @@ a{ color: inherit; } .btn:active{ transform: translateY(1px); } .btn[disabled]{ opacity: .55; cursor: not-allowed; transform: none; } -.btn--primary{ +.btn.btn--primary{ background: var(--primary); border-color: rgba(0,0,0,.06); color: #fff; } -.btn--primary:hover{ filter: brightness(0.98); } +.btn.btn--primary:hover{ filter: brightness(0.98); } -.btn--secondary{ +.btn.btn--secondary{ background: var(--surface2); border-color: var(--line); color: var(--text); } -.btn--secondary:hover{ filter: brightness(0.98); } +.btn.btn--secondary:hover{ filter: brightness(0.98); } -.btn--ghost{ +.btn.btn--ghost{ border-color: var(--line); background: transparent; color: var(--text); } -.btn--ghost:hover{ background: var(--surface2); } +.btn.btn--ghost:hover{ background: var(--surface2); } -.btn--danger{ +.btn.btn--danger{ border-color: rgba(197,48,48,.35); background: rgba(197,48,48,.10); color: var(--danger); } -.btn--sm{ padding: 8px 10px; border-radius: 12px; font-size: var(--fs-s); } -.btn--icon{ padding: 8px 10px; } +.btn.btn--sm{ padding: 8px 10px; border-radius: 12px; font-size: var(--fs-s); } +.btn.btn--icon{ padding: 8px 10px; } .btn__icon{ opacity: .9; } @@ -707,6 +760,7 @@ a{ color: inherit; } /* Hero pattern */ .hero{ margin-top: var(--s4); + margin-bottom: var(--s6); border-radius: var(--radius); border: 1px solid var(--header-shell-border); background: