From 248c6ba6984f310262208b50c892c9df38d2539e Mon Sep 17 00:00:00 2001
From: "max.mehl" <max.mehl@fsfe.org>
Date: Mon, 18 Sep 2017 17:56:44 +0200
Subject: [PATCH] Outsource non-JS CSS to not mess with JS behaviour

---
 site/layouts/partials/head.html   |  4 ++++
 site/static/css/custom.css        |  8 --------
 site/static/css/no-javascript.css | 11 +++++++++++
 3 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 site/static/css/no-javascript.css

diff --git a/site/layouts/partials/head.html b/site/layouts/partials/head.html
index 0c6258f..9a8549b 100644
--- a/site/layouts/partials/head.html
+++ b/site/layouts/partials/head.html
@@ -44,6 +44,10 @@
 <link rel="stylesheet" href="{{ "css/custom.css" | absURL }}" type="text/css">
 <link rel="stylesheet" href="{{ "css/buttons-spread.css" | absURL }}" type="text/css">
 <link rel="stylesheet" href="{{ "css/buttons-side.css" | absURL }}" type="text/css">
+{{ "<!-- CSS with JS disabled -->" | safeHTML }}
+<noscript>
+<link rel="stylesheet" href="{{ "css/no-javascript.css" | absURL }}" type="text/css">
+</noscript>
 
 <!-- Google webmaster tools verification -->
 <meta name="google-site-verification" content="w3YbMtsGJlDG25xOStnBvqmoJ2s3GXPEy4ckJSvSISs" />
diff --git a/site/static/css/custom.css b/site/static/css/custom.css
index dd1826e..33e4292 100644
--- a/site/static/css/custom.css
+++ b/site/static/css/custom.css
@@ -13,14 +13,6 @@ blockquote p {
   white-space: normal; /* wrap button words */
 }
 
-/* NAVBAR */
-/* make hamburger menu work without JS */
-.navbar-header:hover + .navbar-collapse,
-.navbar-collapse:hover {
-  display: block;
-  visibility: initial;
-}
-
 /* SUBPAGES */
 .subpage {
   background-image: url(../img/header_subpage.jpg);
diff --git a/site/static/css/no-javascript.css b/site/static/css/no-javascript.css
new file mode 100644
index 0000000..49327b7
--- /dev/null
+++ b/site/static/css/no-javascript.css
@@ -0,0 +1,11 @@
+/*
+ * CSS which is only loaded with JavaScript disabled
+ */
+
+/* NAVBAR */
+/* make hamburger menu work without JS */
+.navbar-header:hover + .navbar-collapse,
+.navbar-collapse:hover {
+  display: block;
+  visibility: initial;
+}