commit 4b5d84473971fecdde089d49d0db7718aea50d56
parent 24d953b15f9e1973c6461c6659a5a4b8f11fcd97
Author: Hugo Soucy <hugo@soucy.cc>
Date: Thu, 21 Oct 2021 21:35:34 -0400
Enhance the interface for browsers like dillo & netsurf
Diffstat:
7 files changed, 136 insertions(+), 65 deletions(-)
diff --git a/src/css/atoms/typography/titles.css b/src/css/atoms/typography/titles.css
@@ -11,12 +11,6 @@
margin-bottom: 0;
}
-.title-h1, h1,
-.title-h2, h2,
-.title-h3, h3 {
- font-family: sans-serif;
-}
-
.title-h1:first-child, h1:first-child,
.title-h2:first-child, h2:first-child,
.title-h3:first-child, h3:first-child,
diff --git a/src/css/global/base.css b/src/css/global/base.css
@@ -22,45 +22,15 @@
}
}
-html,
-body {
- height: 100%;
- min-height: 100%;
- position: relative;
-}
-
body {
background: var(--base-bg) url("/images/noise.png") repeat;
- margin: 0;
- padding: 0;
-}
-
-[hidden] {
- display: none;
+ line-height: var(--base-line-height);
}
[hidden] + * {
margin-top: 0 !important;
}
-details,
-footer,
-header,
-main,
-nav {
- display: block
-}
-
-body,
-button,
-input,
-select,
-textarea {
- color: var(--base-fg);
- font-family: var(--base-font-family);
- line-height: var(--base-line-height);
-}
-
a {
background: linear-gradient(180deg,transparent 70%, var(--base-link-bg) 0);
color: var(--base-link-fg);
diff --git a/src/css/modules/go-to.css b/src/css/modules/go-to.css
@@ -1,16 +1,23 @@
/* @module go-to */
.go-to-nav {
- align-items: center;
background: var(--base-darkest);
color: var(--base-brightest);
- display: flex;
+ float: right;
font-family: sans-serif;
font-weight: 700;
- justify-content: flex-start;
padding-right: 2rem;
text-transform: capitalize;
}
+@supports (display: flex) {
+ .go-to-nav {
+ align-items: center;
+ display: flex;
+ float: none;
+ justify-content: flex-start;
+ }
+}
+
.go-to-nav:focus,
.go-to-nav:hover {
color: var(--base-fg);
diff --git a/src/css/modules/header-banner.css b/src/css/modules/header-banner.css
@@ -25,9 +25,15 @@
}
.header-banner > div {
- align-items: center;
- display: flex;
- justify-content: space-between;
+ overflow: hidden;
padding-bottom: 0;
padding-top: 0;
}
+
+@supports (display: flex) {
+ .header-banner > div {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ }
+}
diff --git a/src/css/modules/layout.css b/src/css/modules/layout.css
@@ -6,16 +6,8 @@
min-height: 100vh;
}
-.layout > * {
- margin-top: 1rem;
- margin-bottom: 1rem;
-}
-
.layout > * > * {
- margin-left: auto;
- margin-right: auto;
max-width: var(--grid-max-width);
- padding: 2rem 1rem;
}
@media screen and (min-width: 15rem) {
@@ -32,14 +24,6 @@
}
}
-.layout > :first-child:not(main) {
- margin-top: 0;
-}
-
-.layout > :last-child:not(main) {
- margin-bottom: 0;
-}
-
.layout > main {
margin-bottom: auto;
margin-top: auto;
diff --git a/templates/head.html b/templates/head.html
@@ -2,12 +2,110 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title><%= title -%> — <%= siteurl:match('^%w+://([^/]+)') -%></title>
+
+ <style id="initCSS">
+ body,
+ button,
+ input,
+ select,
+ textarea {
+ color: #111;
+ font-family: "Ubuntu mono", monospace;
+ }
+
+ html,
+ body {
+ height: 100%;
+ min-height: 100%;
+ position: relative;
+ }
+
+ body {
+ background: #f9f9f9;
+ margin: 0;
+ padding: 0;
+ }
+
+ body > * {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ body > * > * {
+ margin-left: auto;
+ margin-right: auto;
+ padding: 2rem 1rem;
+ }
+
+ body > nav,
+ body > footer,
+ body > header {
+ background: #111;
+ }
+
+ body > nav,
+ body > nav a,
+ body > footer,
+ body > footer a,
+ body > header,
+ body > header a {
+ color: #f9f9f9;
+ }
+
+ body > footer,
+ body > header {
+ margin-top: 0;
+ }
+
+ body > header {
+ padding: 1rem 0;
+ }
+
+ body > nav,
+ body > footer {
+ margin-bottom: 0;
+ }
+
+ h1,
+ h2,
+ h3 {
+ font-family: sans-serif;
+ }
+
+ aside,
+ article,
+ details,
+ footer,
+ header,
+ main,
+ nav,
+ section,
+ summary {
+ display: block
+ }
+
+ [hidden] {
+ display: none;
+ }
+
+ .visuallyhidden {
+ border: 0;
+ clip: rect(1px, 1px, 1px, 1px);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding:0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+ }
+ </style>
+
<link
href="/css/index.min.css"
- id="ui_css"
- media="screen"
- rel="stylesheet"
- type="text/css"/>
+ id="indexCSS"
+ media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0), (-ms-high-contrast: none), only all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm)"
+ rel="stylesheet"/>
<link
href="<%= permalink -%>"
diff --git a/templates/layout.html b/templates/layout.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="<%= language -%>">
<%- head -%>
- <% local posttype = posttype or 'default' %>
+ <% local posttype = posttype or template or 'default' %>
<body class="layout <%- template or posttype -%>" id="t">
<svg aria-hidden="true" height="0" style="position:absolute" width="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="ico_note" width="24" height="24" fill="none"><path d="M3 2h18v14h-2v2h-2v-2h-2v2h2v2h-2v2H3V2zm2 2v16h8v-6h6V4H5z" fill="currentColor"/></symbol>
@@ -32,6 +32,18 @@
<%- navigation -%>
<%- footer -%>
- <script src="/js/index.min.js"></script>
+ <script>
+ (function() {
+ var indexCSS = document.getElementById('indexCSS');
+
+ if (window.matchMedia && window.matchMedia(indexCSS.media).matches) {
+ var script = document.createElement('script');
+
+ script.src = '/js/index.min.js';
+ script.async = true;
+ document.body.appendChild(script);
+ }
+ })();
+ </script>
</body>
</html>
