Merge main & update to bikkelhart/internet-nl@42214526

    git fetch bikkelhart
    git merge -X theirs internetnl/main
    git checkout --no-overlay bikkelhart/bikkelhart-redesign -- frontend interface/templates interface/static translations
    git checkout --no-overlay main -- interface/static/question@internet.nl_0x45028563.asc interface/templates/statistics.html
    convert -resize 48x48 interface/static/favicon.{png,ico}
    git add interface/static/favicon.ico
    git commit --amend -m "Merge main & update to bikkelhart/internet-nl@$(git rev-parse bikkelhart/bikkelhart-redesign | cut -c1-8)"

Author: bwbroersma

Changelog.md

@@ -20,6 +20,10 @@ _Compared to the latest 1.10 release._
 
 - ...
 
+## 1.10.3
+
+- Added [missing User-Agent](https://github.com/internetstandards/Internet.nl/issues/1048) to 0-RTT HTTP requests
+
 ## 1.10.2
 
 - Updated unbound to fix an issue where

frontend/src/css/components.css

@@ -161,10 +161,7 @@
   a {
     display: inline;
     color: var(--body-link-color);
-
-    &:hover {
-      text-decoration: underline;
-    }
+    text-decoration: underline;
   }
 
   code {
@@ -238,14 +235,29 @@
 
   a {
     display: flex;
-    flex-direction: column;
     padding: 1.5rem;
     gap: 1.5rem;
     position: relative;
     z-index: 1;
-    justify-content: space-between;
     height: 100%;
     border-radius: 0.5rem;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+  }
+
+  .secondary-button.rounded {
+    flex-shrink: 0;
+    align-self: center;
+  }
+
+  hgroup {
+    gap: 1rem;
+    flex: 1;
+
+    h2, h3 {
+      font: var(--card-header-l);
+    }
   }
 
   &.news-card {
@@ -261,21 +273,10 @@
 
     a {
       color: var(--card-heading-color-knowledge);
-    }
-  }
-
-  hgroup {
-    gap: 1rem;
 
-    h2, h3 {
-      font: var(--card-header-l);
     }
   }
 
-  &:hover h2,
-  &:hover h3 {
-    text-decoration: underline;
-  }
 
   &.large {
     translate: 0 3rem;

frontend/src/css/global.css

@@ -106,6 +106,10 @@ a {
   display: flex;
 }
 
+p a { 
+  text-decoration: underline;
+}
+
 button {
   cursor: pointer;
   border: none;
@@ -216,9 +220,13 @@ body:has(.nav-controls.active) {
   font: var(--section-header-xxs);
 }
 
+
+
 .body-xl, .body-l, .body-m, .body-s {
   color: var(--body-color-primary);
 
+
+
   &.color-secondary {
     color: var(--body-color-secondary);
   }

frontend/src/css/header.css

@@ -62,16 +62,11 @@ header {
 
 .header-logo {
   transition: opacity 0.3s;
+  width: 227.5px;
 
   &:hover {
     opacity: 0.8;
   }
-
-  img {
-    @media (width <= 73.125rem) {
-      width: 182px;
-    }
-  }
 }
 
 .toggle-menu {
@@ -302,6 +297,7 @@ header nav {
       }
 
       @media (width >= 73.125rem) {
+        border: 1px solid var(--nav-sublist-border-color);
         gap: 1rem;
         position: absolute;
         padding: 1.25rem 1.5rem;

frontend/src/css/knowledge-section.css

@@ -91,8 +91,7 @@
   gap: 0.5rem;
   height: auto;
 
-  > *,
-  &::before {
+  > * {
     z-index: 1;
     position: relative;
   }
@@ -121,10 +120,16 @@
     padding: 3rem 1.5rem 2rem;
   }
 
-  &::before {
-    display: block;
-    width: 2rem;
-    height: 2rem;
+  .card-container.knowledge {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+
+    &::before {
+      display: block;
+      width: 1.6rem;
+      height: 1.6rem;
+    }
   }
 
   &:nth-child(1) {
@@ -133,7 +138,7 @@
       grid-column: 1 / 4;
     }
 
-    &::before {
+    .card-container.knowledge::before {
       mask-image: url("/static/icons/search.svg");
     }
   }
@@ -144,7 +149,7 @@
       grid-column: 1 / 4;
     }
 
-    &::before {
+    .card-container.knowledge::before {
       mask-image: url("/static/icons/graph.svg");
     }
   }
@@ -156,7 +161,7 @@
       align-self: center;
     }
 
-    &::before {
+    .card-container.knowledge::before {
       mask-image: url("/static/icons/eye.svg");
     }
   }

frontend/src/css/test-section.css

@@ -305,7 +305,6 @@
   .card-container {
     display: flex;
     gap: 1rem;
-    align-items: center;
     color: var(--card-heading-color-test);
 
     &::before {

frontend/src/css/variables.css

@@ -130,18 +130,18 @@
     --card-header-l: var(--heading-font-s);
     --card-header-m: var(--heading-font-xs);
     --card-header-s: var(--heading-font-xs);
-    --card-header-xs: var(--heading-font-xxs);
+    --card-header-xs: var(--heading-font-xs);
     --card-body-l: var(--body-font-xs);
     --card-body-m: var(--body-font-xs);
-    --card-body-s: var(--body-font-xxs);
+    --card-body-s: var(--body-font-xs);
     --card-body-xs: var(--body-font-s);
     --card-input: var(--body-font-s);
 
     /* ACCORDION FONTS DESKTOP */
     --accordion-header: var(--heading-font-xs);
-    --accordion-header-semibold: var(--heading-font-xxs-semibold);
-    --accordion-body: var(--body-font-xxs);
-    --accordion-body-semibold: var(--body-font-xxs-semibold);
+    --accordion-header-semibold: var(--heading-font-xs-semibold);
+    --accordion-body: var(--body-font-xs);
+    --accordion-body-semibold: var(--body-font-xs-semibold);
   }
 
   /* MARK: COLOR VARIABLES
@@ -152,6 +152,7 @@
 
   /* HEADER COLORS LIGHTMODE */
   --nav-bg-color: light-dark(var(--white-100), var(--black-200));
+  --nav-sublist-border-color: light-dark(var(--green-400), var(--white-100));
   --nav-text-color: light-dark(var(--green-500), var(--white-100));
   --nav-mobile-bg-color: light-dark(var(--green-200), var(--green-600));
   --nav-mobile-border: 0.5px solid light-dark(var(--green-400), var(--black-200));
@@ -208,7 +209,7 @@
   --card-bg-color-contact: light-dark(var(--green-400), var(--green-500));
   --card-heading-color-contact: light-dark(var(--white-100), var(--white-100));
   --card-body-color-contact: light-dark(var(--white-100), var(--white-100));
-  --card-border: 2px solid light-dark(var(--transparent-100), var(--white-100));
+  --card-border: 2px solid light-dark(var(--green-400), var(--white-100));
   --card-box-shadow: 0 4px 32px 0 light-dark(var(--transparent-600), var(--transparent-600));
   --card-bg-color-action: light-dark(var(--green-400), var(--green-500));
   --card-heading-color-action: var(--white-100);

frontend/src/js/base/theme.js

@@ -48,12 +48,9 @@ function setCookie(name, value, days) {
  * @returns {string} Theme name
  */
 function getPreferredTheme() {
-  return (
-    getCookie("theme") ||
-    (window.matchMedia("(prefers-color-scheme: dark)").matches
-      ? "dark"
-      : "light")
-  );
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
 }
 
 /**
@@ -70,7 +67,7 @@ function setTheme(theme) {
  */
 function themeSwitch() {
   // Set initial theme
-  setTheme(getPreferredTheme());
+  if (!getCookie("theme")) setTheme(getPreferredTheme());
 
   // Add click handler for theme toggle
   elements.toggleTheme.addEventListener("click", () => {

interface/templates/about.html

@@ -73,16 +73,22 @@ <h2 class="h3 color-secondary">{% include "string.html" with name="about_why_tes
         <p class="body-l">{% include "string.html" with name="about_why_test_description_newstring" %}</p>
       </hgroup>
       <ul class="knowledge-list" id="card-carousel">
-        <li class="card home-variant knowledge-card ellipse icon">
-          <h3 id="knowledge-dia-1">{% include "string.html" with name="about_reason_1_title_newstring" %}</h3>
+        <li class="card home-variant knowledge-card ellipse">
+          <div class="card-container knowledge icon">
+            <h3 id="knowledge-dia-1">{% include "string.html" with name="about_reason_1_title_newstring" %}</h3>
+          </div>
           <p>{% include "string.html" with name="about_reason_1_description_newstring" %}</p>
         </li>
-        <li class="card home-variant knowledge-card ellipse icon">
-          <h3 id="knowledge-dia-2">{% include "string.html" with name="about_reason_2_title_newstring" %}</h3>
+        <li class="card home-variant knowledge-card ellipse">
+          <div class="card-container knowledge icon">
+            <h3 id="knowledge-dia-2">{% include "string.html" with name="about_reason_2_title_newstring" %}</h3>
+          </div>
           <p>{% include "string.html" with name="about_reason_2_description_newstring" %}</p>
         </li>
-        <li class="card home-variant knowledge-card ellipse icon">
-          <h3 id="knowledge-dia-3">{% include "string.html" with name="about_reason_3_title_newstring" %}</h3>
+        <li class="card home-variant knowledge-card ellipse">
+          <div class="card-container knowledge icon">
+            <h3 id="knowledge-dia-3">{% include "string.html" with name="about_reason_3_title_newstring" %}</h3>
+          </div>
           <p>{% include "string.html" with name="about_reason_3_description_newstring" %}</p>
         </li>
       </ul>

interface/templates/base.html

@@ -2,7 +2,7 @@
 {% load static %}
 {% load i18n %}
 {% load translate %}
-<html lang="{{request.current_language_code}}" >
+<html lang="{{request.current_language_code}}" data-theme="{{request.COOKIES.theme}}">
 
 <head>
   <meta charset="utf-8">
@@ -15,14 +15,14 @@
   <link rel="icon" href="{% static 'favicon.png' %}" sizes="192x192" />
   <link rel="apple-touch-icon-precomposed" href="{% static 'favicon.png' %}" />
   <meta name="msapplication-TileImage" content="{% static 'favicon.png' %}" />
-
+    
   <link rel="stylesheet" href="{% static 'css/style-min.css' %}" />
-
+  
   {% block scripting %}
-    <script type="module" src="{% static 'js/base-min.js' %}"></script>
-    <script nomodule src="{% static 'js/legacy-min.js' %}"></script>
+  <script type="module" src="{% static 'js/base-min.js' %}"></script>
+  <script nomodule src="{% static 'js/legacy-min.js' %}"></script>
   {% endblock %}
-
+  
 </head>
 <body class="{{pageclass}}">
 
@@ -40,11 +40,11 @@
         <a class="header-logo" href="/" aria-label="{% include "string.html" with name="base_header_homepage_label_newstring" %}">
           <picture class="light-visible">
             <source srcset="/static/logos/logo.svg" media="(width >= 900px)">
-            <img src="/static/logos/logo-mobile.svg" alt="Internet.nl Logo" width="227.5" height="50">          
+            <img src="/static/logos/logo.svg" alt="Internet.nl Logo" width="227.5" height="50">          
           </picture>
           <picture class="dark-visible">
             <source srcset="/static/logos/logo-white.svg" media="(width >= 900px)">
-            <img src="/static/logos/logo-white-mobile.svg" alt="Internet.nl Logo" width="227.5" height="50">          
+            <img src="/static/logos/logo-white.svg" alt="Internet.nl Logo" width="227.5" height="50">          
           </picture>
         </a>
         {% endif %}