Updates

_includes/HakkenDates.tsx

@@ -1,4 +1,4 @@
-export default ({ lang }) => <div
+export default ({ lang, className }) => <div
   id={`dates-list-${lang}`}
-  className="ps-hakken-dates"
+  className={`ps-hakken-dates ${className}`}
 ></div>;

_includes/Logo.tsx

@@ -1,4 +1,4 @@
-export default () => <div id="logo" className="ps-logo">
+export default ({ className }) => <div id="logo" className={`ps-logo ${className}`}>
   <svg data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 275.3 276.37" className="ps-logo--base">
     <title>PubSolar logo</title>
     <defs>

_includes/layouts/default.tsx

@@ -50,7 +50,7 @@ export default ({
             className="ps-page--section-contents"
           ></div>
 
-          {showHakkenDates ? <HakkenDates lang="en" /> : null}
+          {showHakkenDates ? <HakkenDates lang="en" className="ps-page--section-contents" /> : null}
           {showISOIFrame ? <ISOIFrame /> : null}
         </section>
 
@@ -72,7 +72,7 @@ export default ({
             className="ps-page--section-contents"
           ></div>
 
-          {showHakkenDates ? <HakkenDates lang="de" /> : null}
+          {showHakkenDates ? <HakkenDates lang="de" className="ps-page--section-contents" /> : null}
         </section>
       </main>
     </body>

_includes/styles/background.scss

@@ -6,13 +6,8 @@
   speak: none;
 
   &--logo {
-    width: calc(100vw / 9);
+    width: 100px;
-    height: 4rem;
     margin: 0.1rem;
-
-    @media screen and (orientation: landscape) {
-      width: calc(100vw / 16);
-    }
   }
 
   &--1312 {

_includes/styles/page.scss

@@ -99,7 +99,7 @@
 
     > * {
       margin-bottom: 0;
-      margin-top: 16px;
+      margin-top: 8px;
     }
 
     > h1, h2 {

_includes/styles/style.scss

@@ -9,7 +9,7 @@ html {
   --background-alt: #f5f5f5;
 
   font-family: 'Open Sans', Arial, sans-serif;
-  font-weight: 900;
+  font-weight: 800;
   background: var(--background);
   color: var(--foreground);
   -ms-text-size-adjust: 100%;
@@ -25,8 +25,8 @@ html {
 
 @import './main';
 @import './page';
-@import './background';
 @import './logo';
+@import './background';
 @import './footer';
 @import './homelink';
 @import './iso-iframe.scss';

scripts/background.js

@@ -2,10 +2,12 @@
   const background = document.getElementById("background");
   const logo = document.getElementById("logo").cloneNode(true);
   logo.id = "";
-  (new Array(Math.ceil(window.innerWidth / 100) * Math.ceil(window.innerHeight / 100)))
+  const generateBackground = () => (new Array(Math.ceil(window.innerWidth / 100) * Math.ceil(window.innerHeight / 100)))
     .fill(null)
     .map(_ => logo.cloneNode(true))
     .forEach(l => {
       background.appendChild(l);
     });
+
+  generateBackground();
 })();