linus 1.1.1 → 1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5949bb016b70155dca317784a98e9783a48c3851aea3bb8f813afb068a52b9e0
-  data.tar.gz: 682fa54a962a60258240d723bedca14c3fcd67e7a86e38feb322ec44d677e813
+  metadata.gz: e6ef61bce272b57806979abeda05d1dd895f435e939bc6fe640c6936e594cf1f
+  data.tar.gz: 17382c845e534a4dc595d655c5d78c3344b3e6f6bbee6116901b1f1eb5d9772f
 SHA512:
-  metadata.gz: 34bbf2305e48925d06437fc715f9e7be0824c6b587c5d7c9a33d1883ac68f89a4f31b18adab83627a0ee490949af2ab5a3473c8a1b4333b48f73aa2f68fa49bb
-  data.tar.gz: 89b6db8973d0cb96375d027264f7e2e8f9c9b5419c5d853539e26eaefbad18e44bdb034338e43782610bbd9b0d1b9feef7b43ac1b1c69ade83cc593af9f41ea9
+  metadata.gz: 563603f3cb23ade2ac523e356c544c01ea1da28ba77c933c5ff25418c0b0de7fb8947b8d5a4ae07fcd0d0cd3b6e4fbf938f9f7e979ae893a7191a5ea49fbf6f9
+  data.tar.gz: 4cc9fa4f54df10650fe5c585064c070d8c391f53b58a98caaf4959a6eb52544205b230964f271f80978ca4e7a544f90e7d293e63986627e9764e162c834b48ce

data/_includes/blog/post.html

@@ -57,6 +57,10 @@
     {%- endif -%}
   {%- else -%}
     <div class="post-content e-content">
+      {% if post.title != "" and post.source %}
+        {%- include link-preview.html url=post.source -%}
+      {% endif %}
+      
       {{ include.post.content }}
     </div>
   {%- endif -%}

data/_includes/link-preview.html

@@ -0,0 +1,30 @@
+{%- if include.url -%}
+
+  {%- assign preview = include.url | metadata -%}
+  <blockquote class="link-preview h-cite u-in-reply-to">
+    <cite class="preview-title p-name">
+      <a class="preview-link u-url" href="{{ include.url }}" rel="nofollow">
+        {{- preview['og:title'] | default: preview.title | default: include.url }} ↦
+      </a>
+    </cite>
+    <div class="preview-details">
+      {%- if preview['article:author'] -%}
+        <span class="preview-author p-author h-card">
+          {{ preview['article:author'] }}
+        </span>
+      {%- endif -%}
+      
+      {%- if preview['article:published_time'] -%}
+        <time class="preview-date dt-published" datetime="{{ preview['og:publication_date'] | date_to_xmlschema }}">
+          {{ preview['article:published_time'] | date: site.date_formats.day }}
+        </time>
+      {%- endif -%}
+      
+      {% assign preview_domain = include.url | remove: "http://" | remove: "https://" | split: "/" | first | remove: "/" %}
+      
+      <a class="preview-website u-url" href="{{- preview_domain -}}" rel="nofollow">
+        {{ preview["og:site_name"] | default: preview_domain }}
+      </a>
+    </div>
+  </blockquote>
+{%- endif -%}

data/_layouts/post.html

@@ -54,6 +54,11 @@ layout: default
   </header>
   
     <div class="post-content e-content">
+      
+      {% if page.title != "" and page.source %}
+        {%- include link-preview.html url=page.source -%}
+      {% endif %}
+      
       {{ page.content }}
     </div>
   

data/assets/css/base.css

@@ -6,6 +6,11 @@ q {
 blockquote {
   padding-inline-start: 1lh;
   border-left: 1px solid var(--color-border);
+  margin-right: 0;
+  
+  blockquote {
+    margin-left: 1lh;
+  }
 }
 
 blockquote > *:not(:last-child) {
@@ -119,7 +124,7 @@ input[type="submit"],
   padding: calc(var(--spacing) / 4) calc(var(--spacing) / 2);
   background-color: var(--color-support);
   border: 2px solid var(--color-border);
-  box-shadow: 5px 2px 0 var(--color-shadows);
+  box-shadow: var(--shadow);
   color: var(--color-background) !important;
   font-weight: 700;
   text-decoration: none !important;
@@ -128,11 +133,11 @@ input[type="submit"],
   transition-timing-function: ease;
   
   &:hover {
-    box-shadow: 4px 2px 0 var(--color-shadows-hover);
+    box-shadow: var(--shadow-hover);
   }
   
   &:active {
-    box-shadow: 2px 2px 0 var(--color-shadows-hover);
+    box-shadow: var(--shadow-active);
   }
   
   ~ & {
@@ -173,10 +178,23 @@ del, ins {
 /* Details */
 
 details {
-  border: 1px solid var(--color-border);
+  outline: 1px solid var(--color-border);
+  outline-offset: -1px;
   border-radius: .3rem;
   padding: calc(var(--spacing) / 2);
-  box-shadow: 1rem .5rem 0 var(--color-shadows);
+  box-shadow: var(--shadow);
+  transform: scale(1);
+  transform-origin: center center;
+  transition: transform var(--transition-duration) ease;
+  
+  &:hover,
+  &:focus {
+    transform: scale(1.025)
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
   
   summary + * {
     border-top: 1px solid var(--color-border);
@@ -194,7 +212,9 @@ summary {
 
 img, video, audio, iframe {
   border-radius: .3rem;
-  box-shadow: 1rem .5rem 0 var(--color-shadows);
+  box-shadow: var(--shadow);
+  outline: 1px solid var(--color-border);
+  outline-offset: -1px;
 }
 
 video, audio, iframe {
@@ -219,24 +239,29 @@ figcaption {
 /* Tables */
 
 table {
-  border: 1px solid var(--color-shadows);
+  outline: 1px solid var(--color-border);
+  outline-offset: -1px;
   border-radius: .3rem;
   border-collapse: collapse;
   border-spacing: 0;
-  box-shadow: 1rem .5rem 0 var(--color-shadows);
+  box-shadow: var(--shadow);
   
   td, th {
     padding-block: calc(var(--spacing) / 2);
     padding-inline: calc(var(--spacing) / 2);
+    border-bottom: 1px solid var(--color-border);
+  }
+  
+  th {
+    background-color: var(--color-border);
   }
 }
 
 /* Horizontal rule */
 hr {
-  margin-block: calc(var(--spacing) * 2);
-  background: var(--color-border);
   border: none;
-  height: 1px;
+  height: var(--spacing);
+  width: 100%;
 }
 
 /* Footnotes */
@@ -244,7 +269,7 @@ hr {
 .footnotes {
   padding-top: var(--spacing);
   margin-top: calc(var(--spacing) * 2);
-  border-top: 1px solid var(--color-shadows);
+  border-top: 1px solid var(--color-border);
   font-size: 1.2rem;
 }
 
@@ -254,6 +279,8 @@ hr {
   background-color: var(--color-shadows);
   padding: .3rem;
   border-radius: .3rem;
+  outline: 1px solid var(--color-border);
+  outline-offset: -1px;
   font-size: 1.2rem;
 }
 
@@ -261,5 +288,5 @@ pre {
   font-size: 1.2rem;
   padding: calc(var(--spacing) / 2);
   border-radius: .3rem;
-  box-shadow: 1rem .5rem 0 var(--color-shadows);
+  box-shadow: var(--shadow);
 }

data/assets/css/layout.css

@@ -26,7 +26,12 @@
     --color-support: #D9634E;
     --color-shadows: color-mix(in srgb, var(--color-text), transparent 85%);
     --color-shadows-hover: color-mix(in srgb, var(--color-text), transparent 75%);
-    --color-border: color-mix(in srgb, currentcolor, transparent 50%);
+    --color-border: color-mix(in srgb, currentcolor, transparent 90%);
+    
+    --shadow:
+      0px 0px 0px 1px var(--color-shadows),
+      0px 1px 2px -1px var(--color-shadows),
+      0px 2px 4px 0px var(--color-shadows);
   }
   
    @media (prefers-color-scheme: dark) {
@@ -63,6 +68,8 @@
   dl, dd, ol, ul,
   figure, picture, audio, video,
   table, iframe {
+    -webkit-font-smoothing: antialiased
+    font-variant-numeric: tabular-nums 
     margin: 0;
     padding: 0;
   }
@@ -70,6 +77,7 @@
   img, video, audio, figure, picture,
   table {
     max-width: 100%;
+    margin-right: 0;
   }
   
   iframe {
@@ -200,12 +208,25 @@ body {
   display: inline-flex;
   padding-inline: 8px;
   border-radius: 3px;
-  box-shadow: 0.5rem 0.2rem 0 var(--color-shadows);
+  box-shadow: var(--shadow);
+  outline: 1px solid var(--color-border);
+  outline-offset: -1px;
   color: var(--color-text) !important;
   font-size: var(--text-size);
   line-height: 1.85;
   text-decoration: none !important;
-  transition: box-shadow var(--transition-duration) ease;
+  transform: scale(1);
+  transform-origin: center center;
+  transition: transform var(--transition-duration) ease;
+  
+  &:hover,
+  &:focus {
+    transform: scale(1.025)
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -214,15 +235,6 @@ body {
   }
 }
 
-.category:hover,
-.category:focus {
-  box-shadow: 0.4rem 0.2rem 0 var(--color-shadows-hover);
-}
-
-.category:active {
-  box-shadow: 0.1rem 0.1rem 0 var(--color-shadows-hover);
-}
-
 .blog-categories {
   margin-bottom: calc(var(--spacing) * 2);
 }
@@ -340,6 +352,29 @@ body {
   }
 }
 
+.link-preview {
+  border: none;
+  border-radius: .3rem;
+  outline: 1px solid var(--color-border);
+  outline-offset: -1px;
+  box-shadow: var(--shadow);
+  padding: 1lh;
+  
+  .preview-title {
+    display: block;
+    font-size: 1.6rem;
+    font-weight: bold;
+    font-style: normal;
+    margin-bottom: 0;
+  }
+  
+  .preview-details {
+    display: inline-flex;
+    flex-flow: row wrap;
+    gap: 1ch;
+  }
+}
+
 /*
   Site Footer
 */

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: linus
 version: !ruby/object:Gem::Version
-  version: 1.1.1
+  version: '1.2'
 platform: ruby
 authors:
 - Arthur Freitas
@@ -136,6 +136,7 @@ files:
 - _includes/blog/post.html
 - _includes/end.html
 - _includes/head.html
+- _includes/link-preview.html
 - _includes/site/footer.html
 - _includes/site/header.html
 - _layouts/archive.html