[content/blog] Add email article.

content/blog/treat-email-right-kat-arena.md

@@ -0,0 +1,141 @@
+---
+title: "Treat your email right. Kat-arena"
+mobile_menu_title: "Treat your email right"
+date: 2022-06-30
+Author: "Katerina"
+description: "Kat-arena is trying to make sure her major internet identification, the email, is secured nicely. but getting rid of spam for free is not that easy."
+series: [ "Kat-arena" ]
+categories: [ "software", "privacy" ]
+tags: [ "email", "privacy", "tracking", "Free Open Source Software", "FOSS" ]
+news_keywords: [ "email", "privacy", "tracking", "Free Open Source Software", "FOSS", "webmail", "webmail system" ]
+---
+
+# Treat your email right
+
+Email was born as a more convenient and rapid way to exchange messages
+in an attempt to replace physical letters.
+Indeed, this is what has happened in the 50 years that passed since its inception.
+Nowadays email is considered an absolute basic communication medium.
+It is required for accessing almost any digital, and sometimes physical, service
+(even the dentist asked for my email address!).
+As such, an email address may convey more personal details than a physical one.
+
+So, today seems like a good time to update your email safety.
+
+Your email address is split in 3 major parts
+(as specified by [RFC-5322](https://datatracker.ietf.org/doc/html/rfc5322#section-3.4.1)):
+
+```goat { width=400 height=240 }
+ .-------------------------. .-----------.
+ |username (the local-part)| |Domain name|
+ '---+---------------------' '-+---------'
+      \                       /
+       \                     /
+        username @ domain.com
+                 |
+                 |
+        .--------+----------.
+        |at-sign separates  |
+        |username and domain|
+        '-------------------'
+```
+
+Usually the domain name conveys information about your affiliation or your email
+service provider.
+
+Having multiple emails, unaffiliated with a company,
+is a common way to protect your digital privacy, improve decentralization
+of the Internet, and help confining and reducing spam.
+
+To put it in Lorenzo Cogotti's words:
+
+> The strategy works by making it harder to associate different services'
+> subscriptions together by a single email address, reducing the chance to
+> track you. Keep in mind though, that other information may still be used
+> to link them together (e.g. there's still your phone number).
+
+## Some basic tips
+
+Let's cover some basics on how you can improve your safety even with
+non Free and Open Source (FOSS) email solutions.
+
+* To minimize tracking, don't open your inbox inside a browser
+  (**webmail** **client**), prefer installing specific software
+  (**mail client**, **email reader**).
+  Otherwise, the safety of the inbox contents is in the hand of the browser
+  as much as the email provider.
+* Avoid sending "heavy" files or any important document via email.
+  The first ones have a high chance of never reaching the recipient due to
+  attachment filters. While the other ones may be scanned automatically by your
+  email service provider or accessed in case your email password's leaked.
+  Some alternatives are, for example, file-sharing platforms with restricted
+  access or actual physical devices.
+* Use different accounts for social media authorization,
+  e-commerce and subscription services. Do not share this email anywhere.
+  The same goes for deliveries.
+* For any suspicious website or one-time promo solutions,
+  consider an auto-generated email with an automatic verification function
+  (below).
+
+This won't be enough to ensure you won't receive spam.
+In practice, we have to accept nothing on the Internet can guarantee you a 100%
+spam-free life, unless you use services expressly designed to fight spam and
+promo emails. However, it will make the lives of those who are trying to
+reach you, for this reason, a bit more complicated.
+
+## What about email service providers?
+
+This partially settles the problem with other services using email addresses to track us,
+but what if we suspect **the email service provider** is the one scanning us?
+
+Probably, the best bet would be configuring your own mail server.
+Unfortunately, it cannot be considered gratis or easy, but if you are a
+business owner or an enthusiast it may be viable.
+Creating a domain is not enough, as managing emails needs storage space
+on a server. Which practically means buying a piece of hardware.
+Prices range from 30 to several thousands euros, with the basic options being
+a good solution for small initiatives and individuals.
+For some business owners, the hardware price and the increase in energy bills
+may justify renting a server.
+Though, running it still requires advanced knowledge and maintenance.
+
+The average user may look for simpler solutions, like relying on existing
+servers provided by dependable mail service providers.
+Surely, it is not that easy.
+
+Let's introduce a sad fact about our world.
+
+> Nothing is gratis.
+
+As we have just seen, running a mail hosting server is not trivial.
+It involves expensive hardware, complex knowledge, storage space,
+disaster recovery plans, web traffic distribution and Internet domain management,
+to name a few, - so, it is naïve to expect it all free of charge.
+
+In fact, it is not.
+Even when there is no subscription fee, one should look for a more complex one.
+Most "gratis" mail services actively track their users' data,
+for further monetization, such as targeted advertising.
+In other words, some mail servers may scan your emails or share the history of
+your message with third parties and governments.
+This practice is not considered illegal, as some of this data is
+not regarded as personal or sensitive.
+Plus, a user should be aware of everything as they are always welcome to read
+the 20+ pages of Privacy Notice to understand how their data is treated
+(and do not forget to check yearly privacy updates timely).
+
+Additionally, big famous mail servers are the most popular targets of attacks
+and consequent password leaks, plus their email addresses are easier to guess.
+As for smaller ones, if you are unsure where to look, it is not obvious to
+avoid third-party involvement and ensure data safety.
+For example, numerous services still use ReCaptcha, a service by Google
+(the existential "I am not a robot" thing).
+
+So, it is important to stay informed and make sure you understand how the
+service treats your data and who can access it.
+
+The [Free Software Foundation](https://www.fsf.org/resources/webmail-systems) provides some interesting insights on the subject.
+
+Stay informed, and stay safe!
+
+Katerina

themes/doublefourteen/assets/sass/fonts.sass

@@ -0,0 +1,59 @@
+// Fira Mono
+
+@font-face
+  font-family: 'Fira Mono'
+  src: local("Fira Mono"), url("fonts/FiraMono-Regular.woff2") format("woff2"), url("fonts/FiraMono-Regular.woff") format("woff")
+  font-weight: 400
+  font-style: normal
+
+@font-face
+  font-family: 'Fira Mono'
+  src: local("Fira Mono Bold"), url("fonts/FiraMono-Bold.woff2") format("woff2"), url("fonts/FiraMono-Bold.woff") format("woff")
+  font-weight: 600
+  font-style: normal
+
+
+// Fira Sans
+
+@font-face
+  font-family: 'Fira Sans'
+  src: local("Fira Sans Light"), url("fonts/FiraSans-Light.woff2") format("woff2"), url("fonts/FiraSans-Light.woff") format("woff")
+  font-weight: 300
+  font-style: normal
+
+@font-face
+  font-family: 'Fira Sans'
+  src: local("Fira Sans Light Italic"), url("fonts/FiraSans-LightItalic.woff2") format("woff2"), url("fonts/FiraSans-LightItalic.woff") format("woff")
+  font-weight: 300
+  font-style: italic
+
+@font-face
+  font-family: 'Fira Sans'
+  src: local("Fira Sans Regular"), url("fonts/FiraSans-Regular.woff2") format("woff2"), url("fonts/FiraSans-Regular.woff") format("woff")
+  font-weight: 400
+  font-style: normal
+
+@font-face
+  font-family: 'Fira Sans'
+  src: local("Fira Sans Medium"), url("fonts/FiraSans-Medium.woff2") format("woff2"), url("fonts/FiraSans-Medium.woff") format("woff")
+  font-weight: 500
+  font-style: normal
+
+@font-face
+  font-family: 'Fira Sans'
+  src: local("Fira Sans Medium Italic"), url("fonts/FiraSans-MediumItalic.woff2") format("woff2"), url("fonts/FiraSans-MediumItalic.woff") format("woff")
+  font-weight: 500
+  font-style: italic
+
+@font-face
+  font-family: 'Fira Sans'
+  src: local("Fira Sans Bold"), url("fonts/FiraSans-Bold.woff2") format("woff2"), url("fonts/FiraSans-Bold.woff") format("woff")
+  font-weight: 600
+  font-style: normal
+
+@font-face
+  font-family: 'Fira Sans'
+  src: local("Fira Sans Bold Italic"), url("fonts/FiraSans-BoldItalic.woff2") format("woff2"), url("fonts/FiraSans-BoldItalic.woff") format("woff")
+  font-weight: 600
+  font-style: italic
+

themes/doublefourteen/assets/sass/style.sass

@@ -1,4 +1,5 @@
 @import "variables"
+@import "fonts"
 
 // Some convenience class to manage resolution specific elements
 @media only screen and (max-width:600px)
@@ -54,14 +55,19 @@ h1.page-title:first-letter
 
 body
   margin: 0
-  font-family: var(--body-font)
+  font-family: var(--sans-font)
-  font-size: $body-font-size
+  font-size: $sans-font-size
-  line-height: $body-line-height
+  line-height: $sans-line-height
   color: var(--foreground-color)
   background-color: var(--background-color)
   -webkit-text-size-adjust: 100%
       -ms-text-size-adjust: 100%
 
+code, .goat text
+  font-family: var(--mono-font)
+  font-size: $mono-font-size
+  line-height: $mono-line-height
+
 a
   color: var(--link-color)
 
@@ -186,7 +192,7 @@ thead th
   padding: 7px 12px
   display: block
   margin: 10px 0
-  font-size: $body-font-size
+  font-size: $sans-font-size
   font-weight: 700
   text-decoration: none !important
   a

themes/doublefourteen/assets/sass/variables.sass

@@ -15,12 +15,14 @@ $large-spacer: $spacer * 1.5
 $huge-spacer: $spacer * 3
 
 // Fonts
-$body-line-height: 1.5
+$sans-line-height: 1.5
+$mono-line-height: 1
 
 $huge-font-size: 3em
 $large-font-size: 2em
-$bigger-font-size: 1em
+$bigger-font-size: 1.2em
-$body-font-size: 20px
+$sans-font-size: 1em
+$mono-font-size: 1em
 
 // Consistent border radius
 $border-radius: 0.25rem
@@ -88,7 +90,8 @@ $title-text-color-dark: #ddd
   --foreground-color: #{$foreground-color}
 
 
-  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
+  --sans-font: 'Fira Sans', 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif
+  --mono-font: 'Fira Mono', Menlo, 'Lucida Console', Consolas, monaco, monospace
 
   --text-color: #{$text-color}
   --title-text-color: #{$title-text-color}
@@ -104,8 +107,6 @@ $title-text-color-dark: #ddd
   --heading-color: #{$gray-900}
   --border-color: #{$gray-300}
 
-  // --code-font: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
-
 @media (prefers-color-scheme:dark)
   \:root
     --background-color: #{$background-color-dark}

themes/doublefourteen/layouts/partials/footer.html

@@ -1,7 +1,7 @@
 {{ $hasGetintouch := default false (index .Params "get_in_touch") }}
 {{ $hasMotto := or .IsHome ( default false (index .Params "motto")) }}
 
-<footer>
+<footer role="contentinfo">
   {{ if or $hasMotto $hasGetintouch }}
     <div class="container footer-elements">
       {{ if $hasMotto }}

themes/doublefourteen/layouts/partials/getintouch.html

@@ -41,7 +41,7 @@
   <!-- email -->
   <a class="button email-button"
      title="Drop an email to info@doublefourteen.io"
-     href="mailto:The DoubleFourteen Staff<info@doublefourteen.io>">
+     href="mailto:info@doublefourteen.io">
     <img class="on-light-theme"
       src="{{ "/mail-gray-64.png" | relURL }}"
       srcset="{{ "/mail-gray-128.png" | relURL }} 128w,