From f90273e0115fd3e97f210c36f19d2534b08a91cd Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Fri, 10 Jul 2020 10:36:13 +0200
Subject: [PATCH] Improve contact lines in content blocks, fix bleeding styles
in pirate center contact
---
.../responsive-contact-line.mustache | 5 ++--
.../content-block/content-block.mustache | 2 ++
.../03-templates/pirate-center.mustache | 24 ++++++++++---------
source/css/atoms/contact-line.pcss | 4 ++++
source/css/molecules/content-block.pcss | 6 +----
5 files changed, 23 insertions(+), 18 deletions(-)
diff --git a/source/_patterns/00-atoms/02-contact-lines/responsive-contact-line.mustache b/source/_patterns/00-atoms/02-contact-lines/responsive-contact-line.mustache
index 99f2a8f..d33cc93 100644
--- a/source/_patterns/00-atoms/02-contact-lines/responsive-contact-line.mustache
+++ b/source/_patterns/00-atoms/02-contact-lines/responsive-contact-line.mustache
@@ -1,3 +1,4 @@
-<a href="mailto:example@example.com" class="contact-line contact-line--responsive {{ classes }}">
- <i class="{{ icon }}"></i>{{ caption }}{{^caption}}example@example.com{{/caption}}
+<a href="mailto:example@example.com" class="contact-line contact-line--responsive icon-link {{ classes }}">
+ <i class="{{ icon }}"></i>
+ <span>{{ caption }}{{^caption}}example@example.com{{/caption}}</span>
</a>
diff --git a/source/_patterns/01-molecules/content-block/content-block.mustache b/source/_patterns/01-molecules/content-block/content-block.mustache
index d59afaa..734b821 100644
--- a/source/_patterns/01-molecules/content-block/content-block.mustache
+++ b/source/_patterns/01-molecules/content-block/content-block.mustache
@@ -71,4 +71,6 @@
<p>{{ excerpt.long }}</p>
{{> atoms-figure }}
<p>{{ excerpt.long }}</p>
+
+ {{> molecules-basic-badge }}
</div>
diff --git a/source/_patterns/03-templates/pirate-center.mustache b/source/_patterns/03-templates/pirate-center.mustache
index 611df61..b428b57 100644
--- a/source/_patterns/03-templates/pirate-center.mustache
+++ b/source/_patterns/03-templates/pirate-center.mustache
@@ -73,18 +73,20 @@
</div>
<div class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0">
<div class="lg:card lg:elevation-10">
- <div class="lg:card__body content-block">
- <h2>Kde to najdu?</h2>
- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82007.99920528589!2d15.688131074078123!3d50.034780639742856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470dc94b239307b5%3A0x12d59894ccf624ae!2sPardubice!5e0!3m2!1scs!2scz!4v1589382658695!5m2!1scs!2scz" width="100%" height="300" id="mapa-mobile" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
- <p>
- Pardubické pirátské centrum<br>
- Budova T-STRING<br>
- Masarykovo náměstí 1484<br>
- 530 02 Pardubice I
- </p>
- <p><small>Vstup do pirátského centra naleznete z boku budovy T-STRING naproti „AFI paláci“, vedle kadeřnictví. Vchod je v prostoru vjezdu na parkoviště ve vnitrobloku.</small></p>
+ <div class="lg:card__body">
+ <div class="content-block">
+ <h2>Kde to najdu?</h2>
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82007.99920528589!2d15.688131074078123!3d50.034780639742856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470dc94b239307b5%3A0x12d59894ccf624ae!2sPardubice!5e0!3m2!1scs!2scz!4v1589382658695!5m2!1scs!2scz" width="100%" height="300" id="mapa-mobile" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
+ <p>
+ Pardubické pirátské centrum<br>
+ Budova T-STRING<br>
+ Masarykovo náměstí 1484<br>
+ 530 02 Pardubice I
+ </p>
+ <p><small>Vstup do pirátského centra naleznete z boku budovy T-STRING naproti „AFI paláci“, vedle kadeřnictví. Vchod je v prostoru vjezdu na parkoviště ve vnitrobloku.</small></p>
+ </div>
<hr>
- <h2>Kontakt</h2>
+ <h2 class="head-heavy-sm mb-2">Kontakt</h2>
{{> molecules-condensed-badge(occupation: "Správce coworku", avatarSizeMd: true)}}
{{> molecules-condensed-badge(occupation: "Produkce a program akcí", classes: "mt-4", avatarSizeMd: true)}}
</div>
diff --git a/source/css/atoms/contact-line.pcss b/source/css/atoms/contact-line.pcss
index 95c3aa6..3ca0e8c 100644
--- a/source/css/atoms/contact-line.pcss
+++ b/source/css/atoms/contact-line.pcss
@@ -1,4 +1,8 @@
.contact-line {
+ /* this battles whitespace between otherwise inline blocks */
+ /* @see: https://stackoverflow.com/a/33257267/303184 */
+ @apply inline-flex;
+
i {
@apply pr-2;
}
diff --git a/source/css/molecules/content-block.pcss b/source/css/molecules/content-block.pcss
index 2beb3f3..fe57819 100644
--- a/source/css/molecules/content-block.pcss
+++ b/source/css/molecules/content-block.pcss
@@ -55,12 +55,8 @@
@apply text-sm;
}
- a {
+ a:not(.contact-line) {
@apply underline;
-
- &:hover {
- @apply text-blue-300;
- }
}
p, ul, ol {
--
GitLab