make newsletter secret

https://practicaltypography.com/typography-in-ten-minutes.html
problem is, loading a custom font results in flashing.
I could preload the font, or load it from a cdn,
but that would add complexity

apps/blagh/app.rc

@@ -80,18 +80,28 @@ fn blagh_body {
 
     # Direct links to feeds are disabled because they are not very useful, add clutter and might waste pagerank.
     # An user can add this on their own using handlers_body_head anyway.
-    echo '<p><a href="index.rss">RSS Feed</a>, <a href="../.subscribe">subscribe per email</a>, <a href="../sitemap">all content</a></p>'
+    if (! ~ $base_url 'https://gartzea.com')
+    	# echo '<p style="font-size: 25px;"><a href="index.rss">RSS Feed</a>, <a href="../.newsletter">subscribe per email</a>, <a href="../sitemap">all content</a></p>'
+    	echo '<p style="font-size: 25px;"><a href="index.rss">RSS Feed</a>, <a href="../sitemap">all content</a></p>'
+    if (~ $base_url 'https://gartzea.com')
+    	echo '<p><a href="index.rss">RSS</a>, <a href="../gaceta">gaceta</a>, <a href="../sitemap">todo</a></p>'
+    # echo "$base_url"
     # |<a href="index.atom">Atom Feed</a></div>'
 
     # Markdown posts
     # XXX Not sure why this fixes issues with blog setup, probably bug in fltr_cache!
     for(p in `{get_post_list $blagh_root^$blagh_dirs}) {
         l=`{echo -n $p|sed 's!'$sitedir^'/?(.*)([0-9][0-9][0-9][0-9]/[0-9][0-9]/[0-9][0-9])(/[^/]+/)!\2 /\1\2\3!'}
-        sed '1s!.*![&]('^$l(2)^') ('^$l(1)^')!' < $p/index.md 
+        sed '1s!.*![&]('^$l(2)^') ('^$l(1)^')!' < $p/index.md | head -n 10
+	echo 
+	echo '<p style="text-align: left; margin-right: 10%; font-size: 28px;"><a style="text-decoration: none;" href="'^$l(2)^'"><b>&rarr;</b> &#42604; ...</a></p>'
+	# &rArr;
+	# &#x27A1;
+	# https://www.smashingmagazine.com/2009/07/designing-read-more-and-continue-reading-links/
         # cat $p/index.md | sed '1s!.*![&]('^$l(2)^') ('^$l(1)^')!' | sed -n '/^.\{15\}/p' | echo
         echo # Needed extra \n so markdown doesn't mess up the formatting, probably can be done in sed.
   echo #
-    } | head -n 9 | $formatter | sed 's/h[2-9]/i/g'| sed 's/h1/h3/g'
+    } | head -n 12 | $formatter | sed 's/h[2-9]/i/g'| sed 's/h1/h3/g'
     # HTML posts
     for(p in `{get_post_list $blagh_root^$blagh_dirs}) {
         cat < $p/index.html

pub/fonts/charter/artifacts/Charter 210112/Charter license.txt

@@ -0,0 +1,3 @@
+This is a copy of the Charter fonts which Bitstream contributed to the X consortium. This is the original notice included with the fonts: 
+
+(c) Copyright 1989-1992, Bitstream Inc., Cambridge, MA. You are hereby granted permission under all Bitstream propriety rights to use, copy, modify, sublicense, sell, and redistribute the 4 Bitstream Charter (r) Type 1 outline fonts and the 4 Courier Type 1 outline fonts for any purpose and without restriction; provided, that this notice is left intact on all copies of such fonts and that Bitstream's trademark is acknowledged as shown below on all unmodified copies of the 4 Charter Type 1 fonts. BITSTREAM CHARTER is a registered trademark of Bitstream Inc. 

pub/fonts/charter/artifacts/Charter 210112/OTF format (best for Mac OS)/Mac OS Quick Start.txt

@@ -0,0 +1,11 @@
+MB Type: Quick Start Instructions
+
+Open one of the adjacent subdirectories to reveal the font files, which all have the .otf file extension.
+
+Option 1: From the main directory of your system drive, open the folder `Library`, then the folder `Fonts`. Drag the fonts into this folder.
+
+Option 2: Open Applications > Font Book. Drag the fonts into the font list that appears.
+
+For more details on how to use the fonts, see the FAQ at https://mbtype.com/faq
+
+This font was not designed by me. The license is in the top level of this zip archive. I can't offer technical support for this font.

pub/fonts/charter/artifacts/Charter 210112/TTF format (best for Windows)/Windows Quick Start.txt

@@ -0,0 +1,11 @@
+MB Type: Quick Start Instructions
+
+Open one of the adjacent subdirectories to reveal the font files, which all have the .ttf file extension.
+
+Option 1: Select the fonts you want to install. Right-click the fonts and select `Install` from the popup menu.
+
+Option 2: Go to the `Start` menu and open `Control Panel > Appearance and Personalization > Fonts`. Drag the fonts into this folder.
+
+For more details on how to use the fonts, see the FAQ at https://mbtype.com/faq
+
+This font was not designed by me. The license is in the top level of this zip archive. I can't offer technical support for this font.

pub/fonts/charter/artifacts/Charter 210112/WOFF2 format (best for web)/Charter/sample.css

@@ -0,0 +1,31 @@
+@font-face {
+font-family: charter;
+font-style: normal;
+font-weight: normal;
+font-stretch: normal;
+src: url('charter_regular.woff2') format('woff2');
+}
+
+@font-face {
+font-family: charter;
+font-style: italic;
+font-weight: normal;
+font-stretch: normal;
+src: url('charter_italic.woff2') format('woff2');
+}
+
+@font-face {
+font-family: charter;
+font-style: normal;
+font-weight: bold;
+font-stretch: normal;
+src: url('charter_bold.woff2') format('woff2');
+}
+
+@font-face {
+font-family: charter;
+font-style: italic;
+font-weight: bold;
+font-stretch: normal;
+src: url('charter_bold_italic.woff2') format('woff2');
+}

pub/fonts/charter/artifacts/Charter 210112/WOFF2 format (best for web)/Charter/sample.html

@@ -0,0 +1,11 @@
+<html>
+<head>
+<link rel="stylesheet" type="text/css" href="sample.css" />
+</head>
+<body style="font-size: 24px">
+<p style="font-family: charter">charter_regular.woff2</p>
+<p style="font-family: charter"><em>charter_italic.woff2</em></p>
+<p style="font-family: charter"><strong>charter_bold.woff2</strong></p>
+<p style="font-family: charter"><strong><em>charter_bold_italic.woff2</em></strong></p>
+</body>
+</html>

pub/fonts/charter/artifacts/Charter 210112/WOFF2 format (best for web)/WOFF2 Quick Start.txt

@@ -0,0 +1,19 @@
+MB Type: Quick Start Instructions
+
+The process of getting WOFF2 fonts onto your website varies depending on how you're publishing your site.
+
+Roughly, however:
+
+1) Each HTML page needs to load a CSS file that contains `@font-face` declarations for each style of the font that you want to use. The text of the HTML page needs to be annotated with formatting tags that invoke the font.
+
+2) Each `@font-face` declaration needs to map a distinct combination of attributes — `font-family` (= the name of the family), `font-weight` (= regular or bold weight) and `font-style` (= roman or italic) — to a specific WOFF2 file on disk.
+
+THE GOLDEN RULE: The regular, italic, bold, and bold italic styles of a family should all be declared with the same `font-family` name in the respective `@font-face` declarations, so that the web browser understands them as related styles of a single family.
+
+3) The WOFF2 files need to be at the locations specified by the `@font-face` declarations.
+
+There's more than one way to do this. But each subdirectory here contains a "sample.css" and "sample.html" file that shows a simple working example.
+
+For more details on how to use the fonts, see the FAQ at https://mbtype.com/faq
+
+This font was not designed by me. The license is in the top level of this zip archive. I can't offer technical support for this font.

pub/style/style-blue.css

@@ -0,0 +1,337 @@
+/* Font */
+@font-face {
+  font-family: 'Source Serif Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://nunosempere.com/.resources/source-serif-pro-latin-ext.woff2) format('woff2'),
+       url(https://nunosempere.com/.resources/source-serif-pro-latin.woff2) format('woff2');
+  unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* Body */
+
+body {
+  display: flex;
+  flex-wrap: wrap; 
+  font-family: serif; 
+  font-size: 1.5em;
+  background-color: #fcfcfc;
+  color:#333;
+}
+
+* { /* incorporates the padding and borders into the object size*/
+  box-sizing: border-box;
+}
+
+/* header */
+header {
+  flex-basis: 100%;
+  border-bottom: 2px solid #eee;
+}
+
+header h1 {
+  margin-left: 0.7em;
+  color:#333;
+}
+
+header a {
+  text-decoration: none;
+  color: #333;
+}
+
+header h1 span {
+  margin-left: 0em;
+  color: #555;
+  /*
+  font-size: 70%;
+  font-style: italic;
+  */
+}
+
+header nav { /* Not used by me, but used by suckless.org */
+  display: flex;
+  justify-content: space-between;
+}
+
+/* Navigation bar */
+
+nav {
+  display: flex;
+  flex-basis: 20%;
+  max-width: 20%;
+  min-width: 20%;
+  float: left;
+  margin: 0 1px 0 0;
+  border-right: 2px solid #eee;
+  /* width: 350px; */
+}
+
+nav a{
+  text-decoration: none; 
+  color: #005386;
+}
+
+nav a:hover {
+  background-color: #ddd;
+}
+
+nav ul {
+  display: flex;
+  flex-direction: column;
+  list-style-type: none;
+  list-style-position: outside;
+  padding-left: 0;
+}
+
+nav li ul {
+  padding-left: 0.6em;
+}
+
+nav li a {
+  display: block;
+  margin: 0;
+  padding: 0.3em 2em 0.8ex 1em;
+}
+
+/* article */
+article{
+  flex-basis: 70%;
+  max-width: 70%;
+  min-width: 70%;
+  padding-left: 1em;
+  color: #333;
+  /* padding: 0.3em 0 0 0; */
+}
+
+/* footer */
+footer {
+  /* display: block; */
+  flex-grow: 1;
+  flex-basis: 100%;
+  flex-shrink: 0;
+  justify-content: space-between;
+  padding: 0.1em 0em 1em 1em;
+  border-top: 2px solid #eee
+}
+
+/* links */
+
+a {
+  color: #005386;
+}
+
+/* Images and figures */
+
+figure figcaption {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+figcaption {
+  text-align: center;
+  font-size: 16px;
+}
+
+.img-frontpage-center,
+.img-medium-center,
+img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+img {
+  width: 80%;
+}
+
+.img-frontpage-center {
+  width: 40%;
+}
+
+.img-medium-center {
+  width: 50%;
+}
+
+/* Block quotes */
+
+blockquote{
+  width:60%;
+  margin: 5px auto;
+  color: #555555;
+  padding: 1.2em 30px 1.2em 75px;
+  border-left:8px solid #005386 ;
+  line-height:1.3;
+  position: relative;
+  background: #F0F0F0;
+}
+
+blockquote::before{
+  font-family:Arial;
+  content: "\201C";
+  color:#005386;
+  font-size:4em;
+  position: absolute;
+  left: 10px;
+  top:-10px;
+}
+
+/* Code bloocks */
+pre { 
+  background-color: #eeeeee; 
+  border: 2px solid; 
+  overflow-x: auto; 
+}
+pre, 
+code { 
+  display: block;
+  padding: 0.5em; 
+}
+
+/* Lists */
+/* this aligns the sitemap */
+
+ul {
+  margin-left: 15px;
+}
+
+li{
+  list-style-position: outside;
+  /* list-style-type: '- ' /* ndash, a*/
+}
+
+/* Tables */
+/* old style:
+table {
+  border-collapse: collapse;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+td,
+th {
+  border: 1px solid var(--border);
+  text-align: left;
+  padding: 0.5rem;
+}
+
+th {
+  background: var(--accent-bg);
+  font-weight: bold;
+}
+*/
+
+table {
+    border: 3px solid #005386;
+    border-collapse: collapse;
+    table-layout: fixed;
+    text-align: left;
+    width: 100%;
+}
+
+table thead {
+     /* position: sticky;
+     top: 0; */
+}
+
+table tbody tr:nth-child(even) {
+     background: #E9F1F4;
+}
+
+table th {
+     background: #005386;
+     color: #fcfcfc;
+     font-weight: bold;
+}
+ table th, table td {
+     padding: 1em 1em 1em 1em;
+     /* border: 3px solid #005386; */
+}
+
+/* Newsletter stuff */
+
+.subscribe-button {
+  background: #0055d4;
+  padding: 15px 30px;
+  border-radius: 3px;
+  border: 0;
+  cursor: pointer;
+  text-decoration: none;
+  color: #ffff;
+  display: inline-block;
+  min-width: 150px;
+  font-size: 20px;
+  text-align: center;
+}
+
+.subscribe-input {
+  padding: 10px 15px;
+  border: 1px solid #888;
+  border-radius: 3px;
+  width: 33%;
+  box-shadow: 2px 2px 0 #f3f3f3;
+  border: 1px solid #ddd;
+  font-size: 20px;
+}
+
+input:focus {
+  border-color: #0055d4;
+}
+
+input:focus::placeholder {
+  color: transparent;
+}
+
+/* Figcaptions for markdown
+ * Per <https://stackoverflow.com/questions/19331362/using-an-image-caption-in-markdown-jekyll> 
+ */
+
+img + em {
+  display: block; 
+  text-align: center; 
+  font-size: 1em;
+}
+
+/* Isso comments */
+/* You  can see the general comments style: <https://comments.nunosempere.com/css/isso.css> */
+
+.isso-textarea, #isso-postbox-author, #isso-postbox-email, #isso-postbox-website, .isso-post-action > input {
+    font-size: 20px;
+}
+
+.isso-textarea {
+  height: 15em;
+  resize: vertical !important;
+
+}
+
+/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
+@media screen and (max-width: 1400px) {
+  body {
+    display: block;
+  }
+  .hidden-mobile {
+    display: none;
+  }
+  article {
+    flex-basis: 100%;
+    max-width: 100%;
+    min-width: 100%;
+    padding: 5px;
+  }
+  header h1 {
+    margin-left: 0;
+  }
+  .img-frontpage-center {
+    width: 28%; /* 40% * 70%, so that the relative size stays the same*/
+  }
+}
+
+@media screen and (min-width: 1400px) {
+  .hide-not-mobile {
+    display: none;
+  }
+}

pub/style/style.css

@@ -1,25 +1,68 @@
-/* Font */
+/* Fonts */
+
+/*
+@font-face {
+  font-family: charter;
+  font-style: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  src: url('/pub/fonts/charter/charter_regular.woff2') format('woff2');
+}
+
 @font-face {
   font-family: 'Source Serif Pro';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(https://nunosempere.com/.resources/source-serif-pro-latin-ext.woff2) format('woff2'),
+  src: url(https://nunosempere.com/pub/fonts/source-serif/source-serif-pro-latin-ext.woff2) format('woff2'),
-       url(https://nunosempere.com/.resources/source-serif-pro-latin.woff2) format('woff2');
+       url(https://nunosempere.com/pub/fonts/source-serif/source-serif-pro-latin.woff2) format('woff2');
   unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
+
+@font-face {
+  font-family: charter;
+  font-style: italic;
+  font-weight: normal;
+  font-stretch: normal;
+  src: url('/pub/fonts/charter/charter_italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: charter;
+  font-style: normal;
+  font-weight: bold;
+  font-stretch: normal;
+  src: url('/pub/fonts/charter/charter_bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: charter;
+  font-style: italic;
+  font-weight: bold;
+  font-stretch: normal;
+  src: url('/pub/fonts/charter/charter_bold_italic.woff2') format('woff2');
+}
+*/
 /* Body */
 
 body {
   display: flex;
   flex-wrap: wrap; 
-  font-family: serif; 
+  /* font-family: 'Source Serif Pro'; */
-  font-size: 1.5em;
+  /* font-family: 'Times New Roman'; */
+  font-family: "Garamond", 'serif';
+  /* font-family: 'charter'; */
+  font-size: 25px;
   background-color: #fcfcfc;
+  line-height: 130%;
   color:#333;
 }
 
+* { /* incorporates the padding and borders into the object size*/
+  box-sizing: border-box;
+}
+
 /* header */
 header {
   flex-basis: 100%;
@@ -27,7 +70,7 @@ header {
 }
 
 header h1 {
-  margin-left: 0.7em;
+  margin: 0.5em 0 0.5em 0.7em;
   color:#333;
 }
 
@@ -50,6 +93,12 @@ header nav { /* Not used by me, but used by suckless.org */
   justify-content: space-between;
 }
 
+/* Header */
+
+h1 {
+  line-height: 110%;
+}
+
 /* Navigation bar */
 
 nav {
@@ -65,7 +114,8 @@ nav {
 
 nav a{
   text-decoration: none; 
-  color: #005386;
+  /* color: #005386; */
+  color: #333;
 }
 
 nav a:hover {
@@ -102,19 +152,23 @@ article{
 
 /* footer */
 footer {
+  display: none;
   /* display: block; */
+  /* 
   flex-grow: 1;
   flex-basis: 100%;
   flex-shrink: 0;
   justify-content: space-between;
   padding: 0.1em 0em 1em 1em;
   border-top: 2px solid #eee
+  */
 }
 
 /* links */
 
 a {
-  color: #005386;
+  /* color: #005386; */
+  color: #333;
 }
 
 /* Images and figures */
@@ -155,9 +209,11 @@ img {
 blockquote{
   width:60%;
   margin: 5px auto;
-  color: #555555;
+  /* color: #555555; */
+  color: #333;
   padding: 1.2em 30px 1.2em 75px;
-  border-left:8px solid #005386 ;
+  /* border-left: 8px solid #005386 ; */
+  border-left: 8px solid #333;
   line-height:1.3;
   position: relative;
   background: #F0F0F0;
@@ -166,7 +222,8 @@ blockquote{
 blockquote::before{
   font-family:Arial;
   content: "\201C";
-  color:#005386;
+  /* color:#005386; */
+  color: #333;
   font-size:4em;
   position: absolute;
   left: 10px;
@@ -221,7 +278,8 @@ th {
 */
 
 table {
-    border: 3px solid #005386;
+    /* border: 3px solid #005386; */
+    border: 3px solid #333;
     border-collapse: collapse;
     table-layout: fixed;
     text-align: left;
@@ -234,11 +292,13 @@ table thead {
 }
 
 table tbody tr:nth-child(even) {
-     background: #E9F1F4;
+     /* background: #E9F1F4; */
+     background: #ededed;
 }
 
 table th {
-     background: #005386;
+     /* background: #005386; */
+     background: #333;
      color: #fcfcfc;
      font-weight: bold;
 }
@@ -250,7 +310,8 @@ table th {
 /* Newsletter stuff */
 
 .subscribe-button {
-  background: #0055d4;
+  /* background: #0055d4; */
+  background: #333;
   padding: 15px 30px;
   border-radius: 3px;
   border: 0;
@@ -304,8 +365,31 @@ img + em {
 
 }
 
-/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
+/* Set image-frontpage-center size across devices */
-@media screen and (max-width: 1400px) {
+@media screen and (max-width: 1000px) {
+  body {
+    display: block;
+    font-size: 40px;
+  }
+  .img-frontpage-center {
+    width: 60%; /* 700px * 0.6 = 420px */ 
+  }
+}
+
+@media screen and (min-width: 1000px) and (max-width: 1500px) {
+  .img-frontpage-center {
+    width: 420px
+  }
+}
+
+@media screen and (min-width: 1500px) {
+  .img-frontpage-center {
+    width: 40%; /* 1500px * 0.7 (article) * 0.4 = 420px */
+  }
+}
+
+/* General media stuff */
+@media screen and (max-width: 1500px) {
   body {
     display: block;
   }
@@ -321,12 +405,9 @@ img + em {
   header h1 {
     margin-left: 0;
   }
-  .img-frontpage-center {
-    width: 28%; /* 40% * 70%, so that the relative size stays the same*/
-  }
 }
 
-@media screen and (min-width: 1400px) {
+@media screen and (min-width: 1500px) {
   .hide-not-mobile {
     display: none;
   }