From ddb67aef5e96326de83350a5c86bbb74751d579e Mon Sep 17 00:00:00 2001
From: Ana Isabel Carvalho <a@manufacturaindependente.org>
Date: Aug 30 2021 10:09:36 +0000
Subject: Layout for blog, single post and page - wip


---

diff --git a/website/content/posts/crawling.md b/website/content/posts/crawling.md
index 8f0a1bf..733b1f9 100644
--- a/website/content/posts/crawling.md
+++ b/website/content/posts/crawling.md
@@ -4,7 +4,7 @@ title: Measurement of JavaScript API usage on the web
 
 The world wide web is a complex environment. Web pages can access many APIs ranging from text formatting to access to nearby Bluetooth devices. While many APIs are used for legitimate purposes, some are misused to track and identify their users without their knowledge. In this paper, we propose a methodology to measure the usage of JavaScript APIs on the public web. The methodology consists of an automated visit of several thousand websites and intercepting JavaScript calls performed by the pages. We also provide a design and architecture of a measurement platform that can be used for an automated visit of a list of websites. The proposed platform is based on OpenWPM. The browser is instrumented by OpenWPM and a customized Web API Manager extension is responsible for capturing JavaScript API calls.
 
-## Introduction
+### Introduction
 
 Web browsers offer a wide range of possibilities. on the surface
 they _just_ display web pages, but under the hood, web
@@ -40,7 +40,7 @@ APIs were specified and implemented in web browsers, see the figure below
 
 ![Progress of Web APIs amount implemented in distinct browsers in time.]({attach}/images/crawling-apis.png)
 
-## Methodology proposal
+### Methodology proposal
 
 This section describes the methodology that we plan to use.
 This methodology is based on
@@ -75,7 +75,7 @@ measurements on every page in two different modes. Firstly, we will
 visit the page using the a browser withou adblocker. Later, we will also employ an adblocker.
 Hence, the study will show the difference API usage of regular pages and trackers.
 
-### The original study
+#### The original study
 
 The Snyders' study suggests that some of the JavaScript APIs are
 extremely popular and they are used on more than 90% of measured pages
@@ -101,7 +101,7 @@ JavaScript APIs were blocked in 90% of cases resulting in a fact that
 83% of APIs were used on less than 1% of websites when the page was
 visited with active blocking extension.
 
-### Web API Manager
+#### Web API Manager
 
 Web API Manager is a browser extension, that aims to block explicitly
 defined JavaScript APIs. It has been developed by Snyders in 2016 and
@@ -123,7 +123,7 @@ calls.
 To provide a Web API Manager the list of JavaScript APIs members we need
 a list of supported APIs. The APIs implemented in Mozilla Firefox are available as [IDL files](https://searchfox.org/mozilla-central/source/dom/webidl).
 
-### Measurement tools
+#### Measurement tools
 
 The figure below shows a simplified
 illustration of the measurement platform. There is OpenWPM in the middle of the
@@ -132,7 +132,7 @@ Selenium and Mozilla Firefox with the proxy-based intercepting Web API Manager.
 
 ![image]({attach}/images/crawling-architecture.png)
 
-## The impact on JSR
+### The impact on JSR
 
 Once we have data from our crawling study, we will compare the data with [another recent study](https://github.com/uiowa-irl/FP-Inspector/blob/master/Data/potential_fingerprinting_APIs.md). As already mentioned, we want to develop a fingerprinting detection based on  counting the number of different
 APIs employed by a page, especially APIs that are not frequently used for benign purposes. When
diff --git a/website/content/posts/localportscanning.md b/website/content/posts/localportscanning.md
index 719ef73..62716af 100644
--- a/website/content/posts/localportscanning.md
+++ b/website/content/posts/localportscanning.md
@@ -25,7 +25,7 @@ access. Having a remote desktop port open means that the computer may be used by
 We do not know what the real reason behind the scanning is. It might be one of the above, both, or a
 similar reason.
 
-## Ethical and legal issues
+### Ethical and legal issues
 
 Although it could be that the underlying intentions are benign and users actually do benefit from
 the scanning, the scanning raises some ethical issues.
@@ -58,7 +58,7 @@ for which purposes. From the [linked](https://blog.avast.com/why-is-ebay-port-sc
 Another GDPR issue might be data transfers to third countries. Data transfers of open ports may not be
 compatible with GDPR in the light of the [CJEU C-311/18](https://curia.europa.eu/juris/liste.jsf?num=C-311/18) decision if the information leaves EEA.
 
-## Why is not my browser protecting me from remote servers accessing local information?
+### Why is not my browser protecting me from remote servers accessing local information?
 
 OK, so even though the scanning could be legal, one can disagree that others should be allowed to sniff on
 local applications. So why does a browser leak the information?
@@ -70,7 +70,7 @@ such a port scanning script URL needs to match a rule in a block list. Once info
 misbehaving script becomes public, a rule can be added to a block list. However, this could take some time. Additional techniques like [DNS de-cloaking](https://blog.lukaszolejnik.com/large-scale-analysis-of-dns-based-tracking-evasion-broad-data-leaks-included/)
 need to be applied in this case.
 
-## Network Boundary Shield to the rescue
+### Network Boundary Shield to the rescue
 
 JSR contains a Network Boundary Shield (NBS) that blocks outgoing browser requests based on the observed behaviour, i.e. a
 page hosted on public internet tries to access local URLs.
diff --git a/website/theme/static/css/main.css b/website/theme/static/css/main.css
index caebea0..5e688f2 100644
--- a/website/theme/static/css/main.css
+++ b/website/theme/static/css/main.css
@@ -61,9 +61,11 @@ body {
 a {
   color: var(--text-color);
   text-decoration-color: var(--link-color);
+  transition: color 0.3s ease-in;
 }
 
 a:hover {
+  color: #4B5358; /*lighter text color shade */
 }
 
 a[href*="//"]:not([href*="jsr.manufacturaindependente.org"]):not(.button):after {
@@ -155,7 +157,7 @@ ol:not(:last-child) {
 }
 
 #main-content {
-  padding-bottom: calc(2 * var(--mg-xlarge));
+  padding: 0 var(--mg-medium) calc(2 * var(--mg-xlarge));
 }
 
 #main-content .header {
@@ -607,3 +609,46 @@ a.button {
 .grid article header {
   margin-bottom: var(--mg-medium);
 }
+
+/* Blog and article page
+*/
+
+.blog-index .hentry {
+  margin-bottom: var(--mg-xlarge);
+}
+
+.blog-index .hentry a {
+  text-decoration: none;
+  display: grid;
+  grid-gap: 0 var(--mg-xlarge);
+  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
+}
+
+.blog-index .hentry a:hover {
+  color: var(--link-color);
+}
+
+.hentry.post,
+.hentry.page {
+  max-width: 42rem;
+}
+
+.hentry header {
+  margin-bottom: var(--mg-xlarge);
+}
+
+.blog-index .hentry header {
+  margin-bottom: var(--mg-medium);
+}
+
+.entry-date {
+  margin-bottom: var(--mg-small);
+  font-size: 85%;
+  opacity: 0.8;
+}
+
+.entry-title {
+  line-height: 1.1;
+  margin-top: 0;
+  margin-bottom: var(--mg-small) !important;
+}
diff --git a/website/theme/templates/article.html b/website/theme/templates/article.html
index e1e2379..2ea8a56 100644
--- a/website/theme/templates/article.html
+++ b/website/theme/templates/article.html
@@ -1,18 +1,22 @@
 {% extends "base.html" %}
 
-{% set title = article.title %}
-
-  <header>
-  {% block title %}
-    <h2 class="entry-title">{{ article.title }}</h2>
-  {% endblock %}
-  </header>
-
 {% block content %}
+  <article class="hentry post">
+      {% set title = article.title %}
+      <header>
+      {% block title %}
+        <h2 class="entry-title">{{ article.title }}</h2>
+        <p class="entry-date">
+          <time class="published" datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }}</time>
+        </p>
+      {% endblock %}
+      </header>
 
-  {{ article.content }}
-
-  {# source link #}
-  {# <p><a href="{{ page.relPath }}{{ compound.sourceFileName }}{{ config.HTML_FILE_EXTENSION }}">{{ tr.gotoSourceCode }}</a></p> #}
+      <div class="entry-content">
+        {{ article.content }}
 
+        {# source link #}
+        {# <p><a href="{{ page.relPath }}{{ compound.sourceFileName }}{{ config.HTML_FILE_EXTENSION }}">{{ tr.gotoSourceCode }}</a></p> #}
+      </div>
+  </article>
 {% endblock %}
diff --git a/website/theme/templates/index.html b/website/theme/templates/index.html
index 06e8978..15c86a4 100644
--- a/website/theme/templates/index.html
+++ b/website/theme/templates/index.html
@@ -3,19 +3,21 @@
 {% set title = "Blog posts" %}
 
 {% block content %}
-<section>
+<section class="blog-index">
 
 {% for article in articles_page.object_list %}
         <article class="hentry">
-                <header>
-                  <h3 class="entry-title">
-                    <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a>
-                  </h3>
-                </header>
-                <footer class="post-info">
-                    <time class="published" datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time>
-                </footer><!-- /.post-info -->
-                <div class="entry-content"> {{ article.summary }} </div><!-- /.entry-content -->
+          <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">
+            <header>
+              <h3 class="entry-title">
+                {{ article.title }}
+              </h3>
+              <p class="entry-date">
+                <time class="published" datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }}</time>
+              </p>
+            </header>
+            <div class="entry-content"> {{ article.summary | striptags }} </div><!-- /.entry-content -->
+          </a>
         </article>
 {% endfor %}
 
diff --git a/website/theme/templates/page.html b/website/theme/templates/page.html
index a5e2c42..ccdbf45 100644
--- a/website/theme/templates/page.html
+++ b/website/theme/templates/page.html
@@ -3,16 +3,18 @@
 {% set title = page.title %}
 
 {% block content %}
-
+<article class="hentry page">
   <header>
   {% block title %}
     <h2 class="entry-title">{{ page.title }}</h2>
   {% endblock %}
   </header>
 
-  {{ page.content }}
+  <div class="entry-content">
+    {{ page.content }}
+  </div>
 
   {# source link #}
   {# <p><a href="{{ page.relPath }}{{ compound.sourceFileName }}{{ config.HTML_FILE_EXTENSION }}">{{ tr.gotoSourceCode }}</a></p> #}
-
+</article>
 {% endblock %}