Review linkcard style

vokimon · Nov 17, 2022 · ad7be1c · ad7be1c
1 parent af92546
commit ad7be1c
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -110,9 +110,9 @@ That would generate this HTML:
 <div attrib1="value 1" attrib2="value2">Indented Content</div>
 ```
 
-The previous example, works and may be enough for you,
+The previous example, may work for simple cases,
 but it won't work in a general scenario.
-Parameters and content are included and
+Parameters and content are included as is and
 they should be escaped or processed as Markdown content.
 Luckily, the extension provides some useful tools for that:
 the hyperscript generator and the Markdown subparser:

diff --git a/css/linkcard.css b/css/linkcard.css
@@ -1,49 +1,89 @@
+:root {
+  --linkcard-background-color: #fafaf5;
+  --linkcard-border-color: #e5e5e5;
+  --linkcard-text-color: #72777c;
+  --linkcard-heading-color: #32373c;
+  --linkcard-more-color: #a4b9ce;
+  --linkcard-body-font-size: 14px;
+  --linkcard-heading-font-size: 22px;
+  --linkcard-padding: 25px;
+  --linkcard-border-radius: 5pt;
+  --linkcard-box-shadow: 0 1px 1px rgba(0,0,0,.05);
+  --linkcard-site-icon-size: 25px;
+  --linkcard-side-image-max-width: 30%;
+  --linkcard-side-image-min-height: 5rem;
+  --linkcard-side-image-max-height: 12rem;
+}
+
 .linkcard {
- padding:25px;
- font-size:14px;
- font-weight:400;
- line-height:1.5;
- color:#82878c;
- background:#fafaf5;
- border:1px solid #e5e5e5;
- box-shadow:0 1px 1px rgba(0,0,0,.05);
- overflow:auto;
- margin-bottom: 1em;
+  color: var(--linkcard-text-color);
+  background: var(--linkcard-background-color);
+  border-radius: var(--linkcard-border-radius);
+  border:1px solid var(--linkcard-border-color);
+  box-shadow: var(--linkcard-box-shadow);
+  padding: var(--linkcard-padding);
+  font-size: var(--linkcard-body-font-size);
+  font-weight: 400;
+  line-height: 1.5;
+  margin-bottom: 1em;
+  overflow: auto;
 }
 .linkcard a {
- color:#82878c;
- text-decoration:none
+  color: var(--linkcard-text-color);
+  text-decoration:none
 }
 .linkcard a:hover {
  text-decoration:underline
 }
 .linkcard-featured-image {
- margin-bottom:20px
+ margin-bottom:20px;
+ width: 100%;
+ margin-inline: auto;
+ text-align: center;
+ padding: 1pt;
+ overflow: hidden;
+ max-height: 20rem;
 }
 .linkcard-featured-image img {
- width:100%;
- height:auto;
- border:none
+ height: auto;
+ border: none;
+ max-width: 100%;
+ max-height: 100%;
+ margin-left: auto;
 }
-.linkcard-featured-image.square {
- float:left;
- max-width:30%;
- margin-right:1ex
+
+@media(min-width: 500px) {
+  .linkcard-featured-image.side img {
+    width: 100%;
+    max-height: var(--linkcard-side-image-max-height);
+  }
+  .linkcard-featured-image.side {
+   float: left;
+   width: auto;
+   min-height: var(--linkcard-side-image-min-height);
+   max-width: var(--linkcard-side-image-max-width);
+   margin-right: 1.5rem;
+   overflow: none;
+  }
 }
+
 .linkcard p {
- margin:0
+ margin:0;
 }
 p.linkcard-heading {
  margin:0 0 15px;
  font-weight:600;
- font-size:22px;
+ font-size: var(--linkcard-heading-font-size);
  line-height:1.3
 }
 .linkcard-heading a {
- color:#32373c
+ color: var(--linkcard-heading-color);
+}
+.linkcard .linkcard-more a {
+ color: var(--linkcard-more-color);
 }
 .linkcard .linkcard-more {
- color:#b4b9be;
+ color: var(--linkcard-more-color);
  float: right;
 }
 .linkcard-footer {
@@ -53,17 +93,17 @@ p.linkcard-heading {
 .linkcard-site-icon {
  position:absolute;
  left:0;
- height:25px;
- width:25px;
+ height: var(--linkcard-site-icon-size);
+ width: var(--linkcard-site-icon-size);
  border:0;
 }
 .linkcard-site-icon img {
  padding: 0;
 }
 .linkcard-site-title {
  float: left;
- font-weight:600;
- line-height:25px
+ font-weight: 600;
+ line-height: var(--linkcard-site-icon-size);
 }
 .linkcard-site-title a {
  position:relative;
@@ -72,4 +112,3 @@ p.linkcard-heading {
 }
 
 
-
diff --git a/customblocks/generators.py b/customblocks/generators.py
@@ -60,8 +60,8 @@ def linkcard(ctx, url, *args, wideimage=True, **overrides):
 
     nl='\n'
     return E('.linkcard',
-        info.image and E('.linkcard-featured-image' + ('.square' if not wideimage else ''), nl,
-            dict(_class=' '.join(args)),
+        dict(_class=' '.join(args)),
+        info.image and E('.linkcard-featured-image' + ('.side' if not wideimage else ''), nl,
             E('a', dict(href=url, target='_blank'), nl,
                 E('img', src=info.image), nl,
             ), nl,

diff --git a/customblocks/generators_test.py b/customblocks/generators_test.py
@@ -339,7 +339,7 @@ def test_linkcard_nowideimage(self):
             ::: linkcard nowideimage https://www.eldiario.es/economia/Congreso-decreto-ingreso-minimo-vital_0_1036596743.html
             ""","""\
 <div class="linkcard">
-<div class="linkcard-featured-image square">""" # difference here
+<div class="linkcard-featured-image side">""" # difference here
 """
 <a href="https://www.eldiario.es/economia/Congreso-decreto-ingreso-minimo-vital_0_1036596743.html" target="_blank">
 <img src="https://static.eldiario.es/clip/79066be9-947d-4b83-bab9-a0d092bb391f_facebook-watermarked-aspect-ratio_default_0.jpg" />

diff --git a/docs/generators-linkcard.md b/docs/generators-linkcard.md
@@ -50,6 +50,8 @@ Content, if provided, will be used as description instead of the summary in the
 
 The above example uses [this css](css/linkcard.css).
 
+That stylesheet have some configurable css vars you may modify.
+
 ## Examples
 
 ```markdown