[themes/doublefourteen] Generate mail mipmaps and rename twitter icons.

mkfavicons.sh also manages general mipmaps generation now,
thus it has been renamed accordingly.

content/team/index.en.md

@@ -1,13 +1,32 @@
 ---
-title: team
+title: Team
+menu_title: "The DoubleFourteen Code Forge Team"
+mobile_menu_title: "1414° Team"
 date: 2022-03-10T00:40:51+02:00
 ---
 
-**Lorenzo Cogotti** - the founder of Doublefourteen, software architect, game developer.
-He promotes open-source, practice-based research and common wisdom "any life worth living has enough time to play video games".
 
+{{< flexcolumn style="justify-content:center;align-items:center" >}}
+
+{{% div class="container cards-list" style="width:75%" %}}
+
+{{% div %}}
+**Lorenzo Cogotti** - founder of The DoubleFourteen Code Forge, software architect,
+game developer. He promotes free-software, open-source, practice-based research,
+and common wisdom:
+{{% div style="text-align:center" %}}
+*"Any life worth living has enough time to play video games."*
+{{% /div %}}
+
+{{% spacer %}}
+
+{{% div %}}
 **Katerina Zykova** - communication manager, master in innovation and puzzle fun.
 Stand for equality, personal approach, and memes. 
+{{% /div %}}
+
+{{% /div %}}
 
+{{% spacer %}}
 
-Join us <!-- TODO(micia): Add email here. -->
+{{< /flexcolumn >}}

themes/doublefourteen/assets/sass/style.sass

@@ -29,6 +29,13 @@
   .up-to-small-screen
     display: none !important
 
+@media (prefers-color-scheme:dark)
+  .on-light-theme
+    display: none !important
+@media (prefers-color-scheme:light)
+  .on-dark-theme
+    display: none !important
+
 *
   box-sizing: border-box
   z-index: $foreground
@@ -148,9 +155,17 @@ thead th
     repeat: no-repeat
     size: 400px 386px
 
+.get-in-touch
+    display: flex
+    flex-direction: row
+    flex-wrap: wrap
+    justify-content: right
+    gap: 1.5em
+    margin: 2em 3em 2em 2em
+
 .button, .button:hover
   background-color: transparent
-  border: 2px solid #737475
+  border: 2px solid #ced4da
   color: #333
   padding: 7px 12px
   display: block
@@ -161,10 +176,16 @@ thead th
 .button a
   display: inline
   text-decoration: none !important
-  color: #666
+  color: #333
 .button:hover
-  background-color: #7f7f7f
-
+  background-color: #fefefe
+
+.twitter-button, .email-button
+  padding 0px
+  > img
+    min-width: 16px
+    min-height: 16px
+    margin-bottom: 0px
 
 .footer
   text-align: center

themes/doublefourteen/layouts/partials/footer.html

@@ -1,4 +1,7 @@
-<footer class="container footer">
+<footer>
+  {{- partial "getintouch.html" . -}}
+
+  <div class="container footer">
     <small>
       &copy;
       <time datetime="{{ now.UTC.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
@@ -9,4 +12,5 @@
           CC BY-SA</a>.
       </em>
     </small>
+  </div>
 </footer>

themes/doublefourteen/layouts/partials/getintouch.html

@@ -0,0 +1,80 @@
+<div class="container get-in-touch">
+  <!-- twitter -->
+  <a class="button twitter-button"
+     title="Follow us on Twitter @1414codeforge"
+     href="https://twitter.com/1414codeforge">
+     <img class="on-light-theme"
+          src="{{ "/twitter-logo-blue-64.png" | relURL }}"
+          srcset="{{ "/twitter-logo-blue-128.png" | relURL }} 128w,
+                  {{ "/twitter-logo-blue-120.png" | relURL }} 120w,
+                  {{ "/twitter-logo-blue-114.png" | relURL }} 114w,
+                  {{ "/twitter-logo-blue-110.png" | relURL }} 110w,
+                  {{ "/twitter-logo-blue-72.png" | relURL }} 72w,
+                  {{ "/twitter-logo-blue-64.png" | relURL }} 64w,
+                  {{ "/twitter-logo-blue-57.png" | relURL }} 57w,
+                  {{ "/twitter-logo-blue-48.png" | relURL }} 48w,
+                  {{ "/twitter-logo-blue-32.png" | relURL }} 32w,
+                  {{ "/twitter-logo-blue-16.png" | relURL }} 16w"
+            sizes="(min-width: 2000px) 128px,
+                   (max-width: 2000px) and (min-width: 640px) 3vw,
+                   10vw"
+            max-width="128px"
+            alt="Follow us on Twitter @1414codeforge">
+     <img class="on-dark-theme"
+       src="{{ "/twitter-logo-white-64.png" | relURL }}"
+       srcset="{{ "/twitter-logo-white-128.png" | relURL }} 128w,
+               {{ "/twitter-logo-white-120.png" | relURL }} 120w,
+               {{ "/twitter-logo-white-114.png" | relURL }} 114w,
+               {{ "/twitter-logo-white-110.png" | relURL }} 110w,
+               {{ "/twitter-logo-white-72.png" | relURL }} 72w,
+               {{ "/twitter-logo-white-64.png" | relURL }} 64w,
+               {{ "/twitter-logo-white-57.png" | relURL }} 57w,
+               {{ "/twitter-logo-white-48.png" | relURL }} 48w,
+               {{ "/twitter-logo-white-32.png" | relURL }} 32w,
+               {{ "/twitter-logo-white-16.png" | relURL }} 16w"
+       sizes="(min-width: 2000px) 128px,
+              (max-width: 2000px) and (min-width: 640px) 3vw,
+              10vw"
+       max-width="128px"
+       alt="Follow us on Twitter @1414codeforge">
+  </a>
+  <!-- email -->
+  <a class="button email-button"
+     title="Drop an email to info@doublefourteen.io"
+     href="mailto:The DoubleFourteen Staff<info@doublefourteen.io>">
+    <img class="on-light-theme"
+      src="{{ "/mail-gray-64.png" | relURL }}"
+      srcset="{{ "/mail-gray-128.png" | relURL }} 128w,
+              {{ "/mail-gray-120.png" | relURL }} 120w,
+              {{ "/mail-gray-114.png" | relURL }} 114w,
+              {{ "/mail-gray-110.png" | relURL }} 110w,
+              {{ "/mail-gray-72.png" | relURL }} 72w,
+              {{ "/mail-gray-64.png" | relURL }} 64w,
+              {{ "/mail-gray-57.png" | relURL }} 57w,
+              {{ "/mail-gray-48.png" | relURL }} 48w,
+              {{ "/mail-gray-32.png" | relURL }} 32w,
+              {{ "/mail-gray-16.png" | relURL }} 16w"
+      sizes="(min-width: 2000px) 128px,
+             (max-width: 2000px) and (min-width: 640px) 3vw,
+             10vw"
+      max-width="128px"
+      alt="Drop an email to info@doublefourteen.io">
+    <img class="on-dark-theme"
+      src="{{ "/mail-white-64.png" | relURL }}"
+      srcset="{{ "/mail-white-128.png" | relURL }} 128w,
+              {{ "/mail-white-120.png" | relURL }} 120w,
+              {{ "/mail-white-114.png" | relURL }} 114w,
+              {{ "/mail-white-110.png" | relURL }} 110w,
+              {{ "/mail-white-72.png" | relURL }} 72w,
+              {{ "/mail-white-64.png" | relURL }} 64w,
+              {{ "/mail-white-57.png" | relURL }} 57w,
+              {{ "/mail-white-48.png" | relURL }} 48w,
+              {{ "/mail-white-32.png" | relURL }} 32w,
+              {{ "/mail-white-16.png" | relURL }} 16w"
+      sizes="(min-width: 2000px) 128px,
+             (max-width: 2000px) and (min-width: 640px) 3vw,
+             10vw"
+      max-width="128px"
+      alt="Drop an email to info@doublefourteen.io">
+  </a>
+</div>

themes/doublefourteen/mkfavicons.sh

@@ -1,25 +0,0 @@
-#!/bin/sh
-
-for i in 152 144 120 114 180; do
-  rsvg-convert -f png -w $i -h $i "static/favicon.svg" > "static/favicon-$i-precomposed.png"
-  pngcrush -reduce -brute -ow "static/favicon-$i-precomposed.png"
-done
-for i in 57 32; do
-  rsvg-convert -f png -w $i -h $i "static/favicon.svg" > "static/favicon-$i.png"
-  pngcrush -reduce -brute -ow "static/favicon-$i.png"
-done
-
-convert "static/favicon.svg" -bordercolor white -border 0 \
-  \( -clone 0 -resize 16x16 \) \
-  \( -clone 0 -resize 32x32 \) \
-  \( -clone 0 -resize 48x48 \) \
-  \( -clone 0 -resize 57x57 \) \
-  \( -clone 0 -resize 64x64 \) \
-  \( -clone 0 -resize 72x72 \) \
-  \( -clone 0 -resize 110x110 \) \
-  \( -clone 0 -resize 114x114 \) \
-  \( -clone 0 -resize 120x120 \) \
-  \( -clone 0 -resize 128x128 \) \
-  \( -clone 0 -resize 144x144 \) \
-  \( -clone 0 -resize 152x152 \) \
-  -delete 0 -alpha off -colors 256 "static/favicon.ico"

themes/doublefourteen/mkimgmips.sh

@@ -0,0 +1,50 @@
+#!/bin/sh
+
+readonly PNGCRUSHOPTS="-reduce -brute -ow"
+
+# Favicon
+#########
+
+for i in 152 144 120 114 180; do
+  rsvg-convert -f png -w ${i} -h ${i} "static/favicon.svg" > "static/favicon-${i}-precomposed.png"
+  pngcrush ${PNGCRUSHOPTS} "static/favicon-${i}-precomposed.png"
+done
+for i in 57 32; do
+  rsvg-convert -f png -w ${i} -h ${i} "static/favicon.svg" > "static/favicon-${i}.png"
+  pngcrush ${PNGCRUSHOPTS} "static/favicon-${i}.png"
+done
+
+convert "static/favicon.svg" -bordercolor white -border 0 \
+  \( -clone 0 -resize 16x16 \) \
+  \( -clone 0 -resize 32x32 \) \
+  \( -clone 0 -resize 48x48 \) \
+  \( -clone 0 -resize 57x57 \) \
+  \( -clone 0 -resize 64x64 \) \
+  \( -clone 0 -resize 72x72 \) \
+  \( -clone 0 -resize 110x110 \) \
+  \( -clone 0 -resize 114x114 \) \
+  \( -clone 0 -resize 120x120 \) \
+  \( -clone 0 -resize 128x128 \) \
+  \( -clone 0 -resize 144x144 \) \
+  \( -clone 0 -resize 152x152 \) \
+  -delete 0 -alpha off -colors 256 "static/favicon.ico"
+
+# Other scalable logos/images
+#############################
+
+for i in 16 32 48 57 64 72 110 114 120 128; do
+    NAMTWITBLUE="twitter-logo-blue-${i}.png"
+    NAMTWITWHIT="twitter-logo-white-${i}.png"
+    NAMMAILGRAY="mail-gray-${i}.png"
+    NAMMAILWHIT="mail-white-${i}.png"
+
+    convert "static/twitter-logo-blue.png" -resize ${i}x${i} "static/${NAMTWITBLUE}"
+    pngcrush ${PNGCRUSHOPTS} "static/${NAMTWITBLUE}"
+    convert "static/twitter-logo-white.png" -resize ${i}x${i} "static/${NAMTWITWHIT}"
+    pngcrush ${PNGCRUSHOPTS} "static/${NAMTWITWHIT}"
+    convert "static/mail-gray.png" -resize ${i}x${i} "static/${NAMMAILGRAY}"
+    pngcrush ${PNGCRUSHOPTS} "static/${NAMMAILGRAY}"
+    convert "static/mail-white.png" -resize ${i}x${i} "static/${NAMMAILWHIT}"
+    pngcrush ${PNGCRUSHOPTS} "static/${NAMMAILWHIT}"
+done
+