[content/*,layouts/*,themes/*] Improve theme and prose links

content/_index.md

@@ -32,17 +32,17 @@ We believe in the synergy between conscious business, research and coding.
 
 {{% div title="Get our help" %}}
 {{% div style="text-align:left" %}}
-- See how [digital tools](portfolio/) can help you.
+- See how <a class="prose-link" href="portfolio/">digital tools</a> can help you.
-- Get [advice](contacts/) on your digitalization.
+- Get <a class="prose-link" href="contacts/">advice</a> on your digitalization.
-- Create your new software [with us](team/).
+- Create your new software <a class="prose-link" href="team/">with us</a>.
 {{% /div %}}
 {{% /div %}}
 
 {{% div title="Join us" %}}
 {{% div style="text-align:left" %}}
-- [Official blog](blog/) to share our thoughts.
+- <a class="prose-link" href="blog/">Official blog</a> to share our thoughts.
-- [Git repository](https://git.doublefourteen.io/explore/repos) to share our code.
+- <a class="external-prose-link" href="https://git.doublefourteen.io/explore/repos">Git repository</a> to share our code.
-- IRC on `#doublefourteen`@[Libera.Chat](https://liberachat.net).
+- IRC on `#doublefourteen`@<a class="external-prose-link" href="https://libera.chat">Libera.Chat</a>.
 {{% /div %}}
 {{% /div %}}
 

content/contacts/index.en.md

@@ -17,10 +17,10 @@ projects and ideas!
 
 The DoubleFourteen Code Forge is a community effort to promote digitalization.
 
-- Join `#doublefourteen` on IRC at [Libera.Chat](https://libera.chat).
+- Join `#doublefourteen` on IRC at <a class="external-prose-link" href="https://libera.chat">Libera.Chat</a>.
-- Check Code Forge's updates, news, and memes on Twitter [@1414codeforge](https://twitter.com/1414codeforge).
+- Check Code Forge's updates, news, and memes on Twitter <a class="external-prose-link" href="https://twitter.com/1414codeforge">@1414codeforge</a>.
-- Discuss our code on the official [Git Repository](https://git.doublefourteen.io/explore/repos).
+- Discuss our code on the official <a class="external-prose-link" href="https://git.doublefourteen.io/explore/repos">Git Repository</a>.
-- Fork us on [GitHub](https://github.com/doublefourteen).
+- Fork us on <a class="external-prose-link" href="https://github.com/doublefourteen">GitHub</a>.
 
 -----
 

content/portfolio/index.en.md

@@ -28,10 +28,18 @@ formats, and allows interesting network traffic analysis at the routing level.
 *It makes the Internet better.*
 
 ## Video games
+{{< flexrow >}}
 
+{{% div style="margin-right:30px" %}}
 Our great mystery.
 
 *It is fun to make.*
+{{% /div %}}
+{{% div %}}
+![Hack in progress...](wip.png)
+{{% /div %}}
+
+{{< /flexrow >}}
 
 ## Consultancy and education courses
 

layouts/shortcodes/mail.html

@@ -1,3 +1 @@
-<a href="mailto:{{ default "The DoubleFourteen Staff<info@doublefourteen.io>" ( .Get "address") }}">
+<span><a class="prose-link" href="mailto:{{ default "The DoubleFourteen Staff<info@doublefourteen.io>" ( .Get "address") }}"> {{ .Inner }}</a> 📧</span>
-    {{ .Inner }} 📧
-</a>

themes/doublefourteen/assets/sass/style.sass

@@ -75,6 +75,22 @@ a
 a:not(:hover)
   text-decoration: none
 
+.prose-link
+  color: var(--prose-link-color)
+  opacity: 0.8
+  text-decoration: none
+  font-weight: bold
+  transition: opacity 0.25s ease-in, color 0.25s ease-in, text-shadow 0.15s ease-in
+
+  &:hover, &:focus
+    opacity: 1.0
+    color: var(--prose-link-hover-color)
+    text-shadow: -0.5px 0.5px 0 var(--prose-link-shadow-color), 0.5px 0.5px 0 var(--prose-link-shadow-color), 0.5px -0.5px 0 var(--prose-link-shadow-color), -0.5px -0.5px 0 var(--prose-link-shadow-color)
+
+
+  &:focus
+    outline: 1px dotted
+
 .container
   margin: 0 auto
   position: relative
@@ -156,29 +172,29 @@ thead th
     size: 400px 386px
 
 .get-in-touch
-    display: flex
+  display: flex
-    flex-direction: row
+  flex-direction: row
-    flex-wrap: wrap
+  flex-wrap: wrap
-    justify-content: right
+  justify-content: right
-    gap: $large-spacer
+  gap: $large-spacer
-    margin: $large-spacer $huge-spacer $large-spacer auto
+  margin: $large-spacer $huge-spacer $large-spacer auto
 
 .button, .button:hover
   background-color: transparent
-  border: 2px solid #ced4da
+  border: 2px solid $gray-400
-  color: #333
+  color: var(--heading-color)
   padding: 7px 12px
   display: block
   margin: 10px 0
   font-size: $body-font-size
   font-weight: 700
   text-decoration: none !important
-.button a
+  a
-  display: inline
+    display: inline
-  text-decoration: none !important
+    text-decoration: none !important
-  color: #333
+    color: var(--heading-color)
-.button:hover
+  &:hover
-  background-color: #fefefe
+    background-color: var(--highlight-color)
 
 .twitter-button, .email-button
   padding 0px
@@ -203,14 +219,9 @@ thead th
   .header-image
     background-image: url(/doublefourteen-logo-light.svg)
 
-  // FIXME
+.external-prose-link
-  .button, .button:hover
+  @extend .external-link
-    color: inherit
+  @extend .prose-link
-  .button a
-    color: #ccc
-  .button:hover
-    background-color: #383838
-
 
 @media only screen and (max-width:800px)
   .work-in-progress-content

themes/doublefourteen/assets/sass/variables.sass

@@ -67,11 +67,11 @@ $yellow-100: #fff3bf
 // Color Theme
 
 $background-color: #efefef
-$background-color-dark: #292929
+$background-color-dark: #151515
 $alt-background-color: #dfdfdf
-$alt-background-color-dark: #0a1922
+$alt-background-color-dark: #111
 $foreground-color: $gray-700
-$foreground-color-dark: $gray-300
+$foreground-color-dark: $gray-500
 $surface-color: $cyan
 $surface-color-dark:  $cyan
 $accent-color: $cyan
@@ -95,6 +95,11 @@ $title-text-color-dark: #ddd
 
   --link-color: #{$blue}
   --link-hover-color: #1c7ed6
+  --prose-link-color: #{$gray-800}
+  --prose-link-hover-color: #{$gray-500}
+  --prose-link-shadow-color: #{$gray-000}
+
+  --highlight-color: #fff
 
   --heading-color: #{$gray-900}
   --border-color: #{$gray-300}
@@ -110,6 +115,12 @@ $title-text-color-dark: #ddd
     --text-color: #{$text-color-dark}
     --title-text-color: #{$title-text-color-dark}
 
+    --prose-link-color: #fff
+    --prose-link-hover-color: #{$gray-200}
+    --prose-link-shadow-color: #{$gray-500}
+
+    --highlight-color: #{$gray-800}
+
     --heading-color: #fff
 
     --link-color: #{$blue-300}