From b9d5983b17adbd238fdb8a41d926dacf53730675 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sun, 14 Nov 2021 17:53:31 +0100 Subject: Inline style sheet in EJS template to prevent FOUC. --- public/fonts/fonts.css | 103 +++++++------------------------------------------ public/style.css | 74 ++++++++--------------------------- server.js | 9 ++++- views/header.ejs | 6 ++- 4 files changed, 43 insertions(+), 149 deletions(-) diff --git a/public/fonts/fonts.css b/public/fonts/fonts.css index 641373e..2dfe776 100644 --- a/public/fonts/fonts.css +++ b/public/fonts/fonts.css @@ -1,88 +1,15 @@ -@font-face { - font-family: 'Circled Numbers'; - src: url('CircledNumbers.woff2') format('woff2'); - unicode-range: U+2460-2465, U+2776-277B; -} - -@font-face { - font-family: 'Dingbats'; - src: url('Dingbats.woff2') format('woff2'); - unicode-range: U+2701-27FF; -} - -@font-face { - font-family: 'Noto Emoji'; - src: url('NotoEmoji.woff2') format('woff2'); -} - -@font-face { - font-family: 'Source Sans'; - src: url('SourceSans3-Regular.woff2') format('woff2'); -} - -@font-face { - font-family: 'Source Sans'; - font-style: italic; - src: url('SourceSans3-It.woff2') format('woff2'); -} - -@font-face { - font-family: 'Source Sans'; - font-weight: bold; - src: url('SourceSans3-Semibold.woff2') format('woff2'); -} - -@font-face { - font-family: 'Source Sans'; - font-weight: bold; - font-style: italic; - src: url('SourceSans3-SemiboldIt.woff2') format('woff2'); -} - -@font-face { - font-family: 'Source Serif'; - src: url('SourceSerif4-Regular.woff2') format('woff2'); -} - -@font-face { - font-family: 'Source Serif'; - font-style: italic; - src: url('SourceSerif4-It.woff2') format('woff2'); -} - -@font-face { - font-family: 'Source Serif'; - font-weight: bold; - src: url('SourceSerif4-Semibold.woff2') format('woff2'); -} - -@font-face { - font-family: 'Source Serif'; - font-weight: bold; - font-style: italic; - src: url('SourceSerif4-SemiboldIt.woff2') format('woff2'); -} - -@font-face { - font-family: 'Source Serif SmText'; - src: url('SourceSerif4SmText-Regular.woff2') format('woff2'); -} - -@font-face { - font-family: 'Source Serif SmText'; - font-style: italic; - src: url('SourceSerif4SmText-It.woff2') format('woff2'); -} - -@font-face { - font-family: 'Source Serif SmText'; - font-weight: bold; - src: url('SourceSerif4SmText-Semibold.woff2') format('woff2'); -} - -@font-face { - font-family: 'Source Serif SmText'; - font-weight: bold; - font-style: italic; - src: url('SourceSerif4SmText-SemiboldIt.woff2') format('woff2'); -} +@font-face{font-family:'Circled Numbers';src:url('/fonts/CircledNumbers.woff2')format('woff2');unicode-range:U+2460-2465, U+2776-277B} +@font-face{font-family:'Dingbats';src:url('/fonts/Dingbats.woff2')format('woff2');unicode-range:U+2701-27FF} +@font-face{font-family:'Noto Emoji';src:url('/fonts/NotoEmoji.woff2')format('woff2')} +@font-face{font-family:'Source Sans';src:url('/fonts/SourceSans3-Regular.woff2')format('woff2')} +@font-face{font-family:'Source Sans';font-style:italic;src:url('/fonts/SourceSans3-It.woff2')format('woff2')} +@font-face{font-family:'Source Sans';font-weight:bold;src:url('/fonts/SourceSans3-Semibold.woff2')format('woff2')} +@font-face{font-family:'Source Sans';font-weight:bold;font-style:italic;src:url('/fonts/SourceSans3-SemiboldIt.woff2')format('woff2')} +@font-face{font-family:'Source Serif';src:url('/fonts/SourceSerif4-Regular.woff2')format('woff2')} +@font-face{font-family:'Source Serif';font-style:italic;src:url('/fonts/SourceSerif4-It.woff2')format('woff2')} +@font-face{font-family:'Source Serif';font-weight:bold;src:url('/fonts/SourceSerif4-Semibold.woff2')format('woff2')} +@font-face{font-family:'Source Serif';font-weight:bold;font-style:italic;src:url('/fonts/SourceSerif4-SemiboldIt.woff2')format('woff2')} +@font-face{font-family:'Source Serif SmText';src:url('/fonts/SourceSerif4SmText-Regular.woff2')format('woff2')} +@font-face{font-family:'Source Serif SmText';font-style:italic;src:url('/fonts/SourceSerif4SmText-It.woff2')format('woff2')} +@font-face{font-family:'Source Serif SmText';font-weight:bold;src:url('/fonts/SourceSerif4SmText-Semibold.woff2')format('woff2')} +@font-face{font-family:'Source Serif SmText';font-weight:bold;font-style:italic;src:url('/fonts/SourceSerif4SmText-SemiboldIt.woff2')format('woff2')} diff --git a/public/style.css b/public/style.css index f72cdb7..76d6ff2 100644 --- a/public/style.css +++ b/public/style.css @@ -1,21 +1,9 @@ -button, select { - font-family: "Source Sans", "Verdana", "Dingbats", "Noto Emoji", sans-serif; - font-size: 16px; -} -html, input, textarea { - font-family: "Source Serif", "Georgia", "Dingbats", "Noto Emoji", serif; - font-size: 16px; -} +html, input, textarea { font-family: "Source Serif", "Georgia", "Dingbats", "Noto Emoji", serif; font-size: 16px; } +button, select { font-family: "Source Sans", "Verdana", "Dingbats", "Noto Emoji", sans-serif; font-size: 16px; } html, body { margin: 0; } h1 { margin-left: -2px; } h2 { margin-left: -1px; } -.header { - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 2px solid brown; - padding-right: 1em; -} +.header { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid brown; padding-right: 1em; } .header img { display: block; margin: 4px 0 -2px 2px; } .header span { margin: 0 1em; } .header a { color: black; } @@ -24,29 +12,25 @@ h2 { margin-left: -1px; } .main hr { max-width: 50rem; margin-right: auto; margin-left: 0; } .main hr { border: none; border-top: 2px dotted brown; } .main hr + p { font-style: italic; } +img.logo { float: left; margin: 0 20px 5px 0; box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5); height: 200px; } +img.avatar { float: left; margin: 0 20px 5px 0; box-shadow: 2px 2px 4px 0px rgba(0,0,0,.5); width: 80px; height: 80px; } .is_active { background-color: lemonchiffon; } .error { color: brown; font-style: italic; white-space: pre-wrap; } .warning { color: brown; } .warning::before { content: "\26a0"; } -img.logo { - float: left; - margin: 0 20px 5px 0; - box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5); - height: 200px; -} -img.avatar { - float: left; - margin: 0 20px 5px 0; - box-shadow: 2px 2px 4px 0px rgba(0,0,0,.5); - width: 80px; height: 80px; -} - +form { display: inline; } +label { user-select: none; } +input[type="text"], input[type="password"], textarea { padding: 5px; } +select { padding-right: 20px; } +button, input, select { font-size: 1rem; margin: 5px 0; } +button, select { margin: 5px 10px 5px 0; padding: 1px 10px; background-color: gainsboro; vertical-align: top; } +button:disabled { color: gray; border: 2px solid gainsboro; outline: 1px solid gray; } +button:enabled, select { border: 2px outset white; outline: 1px solid black; } +button:enabled:active:hover, select:active { border: 2px inset white; padding: 2px 9px 0px 11px; } table { border-collapse: collapse; } -tfoot td { background-color: gainsboro; } +tfoot { background-color: gainsboro; } th { text-align: left; background-color: gainsboro; } -th, td { border: 1px solid black; } -th, td { padding: 3px 1ex; } - +th, td { border: 1px solid black; padding: 3px 1ex; } table.game { min-width: min(50rem,100%); } table.game .title { white-space: nowrap; } table.game .scenario { white-space: nowrap; } @@ -54,7 +38,6 @@ table.game .role { white-space: nowrap; } table.game .time { white-space: nowrap; } table.game td a { text-decoration: none; color: black; } table.game td.command a { text-decoration: underline; color: blue; } - table.post { min-width: min(50rem,100%); } table.post .author { white-space: nowrap; width: 10rem; } table.post .time { white-space: nowrap; text-align: right; width: 5rem; } @@ -63,28 +46,3 @@ table.post .unread { background-color: lightyellow; } table.post .body { white-space: pre-wrap; padding: 10px 10px; } table.post th a { text-decoration: none; color: black; } table.post td:not(.body):not(.edit) a { text-decoration: none; color: black; } - -label { user-select: none; } -button, input, select { font-size: 1rem; margin: 5px 0; } -input[type="text"], input[type="password"], textarea { padding: 5px; } -select { padding-right: 20px; } -form { display: inline; } -button, select { - margin: 5px 10px 5px 0; - padding: 1px 10px; - background-color: gainsboro; - vertical-align: top; -} -button:disabled { - color: gray; - border: 2px solid gainsboro; - outline: 1px solid gray; -} -button:enabled, select { - border: 2px outset white; - outline: 1px solid black; -} -button:enabled:active:hover, select:active { - border: 2px inset white; - padding: 2px 9px 0px 11px; -} diff --git a/server.js b/server.js index 470eba9..a6c8394 100644 --- a/server.js +++ b/server.js @@ -87,7 +87,14 @@ io.use(passport_socket.authorize({ store: session_store, })); -app.use(express.static('public')); +const is_immutable = /\.(svg|png|jpg|jpeg|woff2)$/; + +function setHeaders(res, path) { + if (is_immutable.test(path)) + res.set("Cache-Control", "public, max-age=86400, immutable"); +} + +app.use(express.static('public', { setHeaders: setHeaders })); /* * MISC FUNCTIONS diff --git a/views/header.ejs b/views/header.ejs index 337290a..c8337fc 100644 --- a/views/header.ejs +++ b/views/header.ejs @@ -4,9 +4,11 @@ <% if (typeof refresh !== 'undefined' && refresh > 0) { %><% } %> - - <%= title %> +
-- cgit v1.2.3