diff --git a/public/css/dark.css b/public/css/dark.css index efe2c52..297590e 100644 --- a/public/css/dark.css +++ b/public/css/dark.css @@ -1,183 +1,9 @@ -/* -* littlelink V1 -* https://littlelink.com -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 12/21/2019 -* -* Built using: -* -* Skeleton V2.0.4 -* Copyright 2014, Dave Gamache -* www.getskeleton.com -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 12/29/2014 -*/ - - -/* Table of contents -–––––––––––––––––––––––––––––––––––––––––––––––––– -- Grid -- Base Styles -- Typography -- Links -- Code -- Spacing -- Utilities -* -* You'll find the button css in css/brands.css. -* -*/ - - -/* Grid -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.container { - position: relative; - width: 100%; - max-width: 600px; - text-align: center; - margin: 0 auto; - padding: 0 20px; - box-sizing: border-box; } -.column { - position: center; - width: 100%; - float: center; - box-sizing: border-box; } - -/* For devices larger than 400px */ -@media (min-width: 400px) { - .container { - width: 85%; - padding: 0; } +:root { + --bg-color: #292929; + --hr-color: #F1F1F1; + --code-color: #F1F1F1; + --font-color: #FFFFFF; + --a-color: #0085FF; + --border-color: #292929; + --button-border-style: none; } - -/* For devices larger than 550px */ -@media (min-width: 550px) { - .container { - width: 80%; } - .column, - .columns { - margin-left: 0; } - .column:first-child, - .columns:first-child { - margin-left: 0; } - -} - - -/* Base Styles -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* NOTE -html is set to 62.5% so that all the REM measurements throughout Skeleton -are based on 10px sizing. So basically 1.5rem = 15px :) */ - -html { - font-size: 100%; } -body { - background-color: #292929; - font-size: 18px; - line-height: 24px; - font-weight: 400; - font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #FFFFFF; } - - -/* Typography -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -h1 { - margin-top: 0; - margin-bottom: 16px; - font-weight: 800; } -h1 { font-size:24px; line-height: 64px; letter-spacing: 0;} - - -/* Larger than phablet */ -@media (min-width: 550px) { - h1 { font-size: 48px; line-height: 96px;} -} - -p { - margin-top: 0; } - - -/* Links -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -a { - color: #0085FF; } -a:hover { - color: #0085FF; } - - -/* Code -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -code { - padding: .2rem .5rem; - margin: 0 .2rem; - font-size: 90%; - color: #000000; - white-space: nowrap; - background: #F1F1F1; - border: 1px solid #E1E1E1; - border-radius: 4px; } -pre > code { - display: block; - padding: 1rem 1.5rem; - white-space: pre; } - -/* Spacing -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -button, -.button { - margin-bottom: 1rem; } -input, -textarea, -select, -fieldset { - margin-bottom: 1.5rem; } -pre, -blockquote, -dl, -figure, -p, -ol { - margin-bottom: 2.5rem; } - - -/* Utilities -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.u-full-width { - width: 100%; - box-sizing: border-box; } -.u-max-full-width { - max-width: 100%; - box-sizing: border-box; } -.u-pull-right { - float: right; } -.u-pull-left { - float: left; } - - -/* Misc -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -hr { - margin-top: 3rem; - margin-bottom: 3.5rem; - border-width: 0; - border-top: 1px solid #E1E1E1; } - - -.avatar { - vertical-align: middle; - width: 128px; - height: 128px; - border-radius: 50%; -} - - -.footer { - margin-top: 36px; - padding-bottom: 36px; -} \ No newline at end of file diff --git a/public/css/light.css b/public/css/light.css index afe1e3b..8240831 100644 --- a/public/css/light.css +++ b/public/css/light.css @@ -1,193 +1,9 @@ -/* -* littlelink V1 -* https://littlelink.com -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 12/21/2019 -* -* Built using: -* -* Skeleton V2.0.4 -* Copyright 2014, Dave Gamache -* www.getskeleton.com -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 12/29/2014 -*/ - - -/* Table of contents -–––––––––––––––––––––––––––––––––––––––––––––––––– -- Grid -- Base Styles -- Typography -- Links -- Code -- Spacing -- Utilities -* -* You'll find the button css in css/brands.css. -* -*/ - - -/* Grid -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.container { - position: relative; - width: 100%; - max-width: 600px; - text-align: center; - margin: 0 auto; - padding: 0 20px; - box-sizing: border-box; } -.column { - position: center; - width: 100%; - float: center; - box-sizing: border-box; } - -/* For devices larger than 400px */ -@media (min-width: 400px) { - .container { - width: 85%; - padding: 0; } -} - -/* For devices larger than 550px */ -@media (min-width: 550px) { - .container { - width: 80%; } - .column, - .columns { - margin-left: 0; } - .column:first-child, - .columns:first-child { - margin-left: 0; } - -} - - -/* Base Styles -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* NOTE -html is set to 62.5% so that all the REM measurements throughout Skeleton -are based on 10px sizing. So basically 1.5rem = 15px :) */ -html { - font-size: 100%; } -body { - font-size: 18px; - line-height: 24px; - font-weight: 400; - font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #222; } - - -/* Typography -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -h1 { - margin-top: 0; - margin-bottom: 16px; - font-weight: 800; } -h1 { font-size:24px; line-height: 64px; letter-spacing: 0;} - - -/* Larger than phablet */ -@media (min-width: 550px) { - h1 { font-size: 48px; line-height: 96px;} -} - -p { - margin-top: 0; } - - -/* Links -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -a { - color: #0085FF; } -a:hover { - color: #0085FF; } - - -/* Code -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -code { - padding: .2rem .5rem; - margin: 0 .2rem; - font-size: 90%; - white-space: nowrap; - background: #F1F1F1; - border: 1px solid #E1E1E1; - border-radius: 4px; } -pre > code { - display: block; - padding: 1rem 1.5rem; - white-space: pre; } - -/* Spacing -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -button, -.button { - margin-bottom: 1rem; } -input, -textarea, -select, -fieldset { - margin-bottom: 1.5rem; } -pre, -blockquote, -dl, -figure, -p, -ol { - margin-bottom: 2.5rem; } - - -/* Utilities -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.u-full-width { - width: 100%; - box-sizing: border-box; } -.u-max-full-width { - max-width: 100%; - box-sizing: border-box; } -.u-pull-right { - float: right; } -.u-pull-left { - float: left; } - - -/* Misc -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -hr { - margin-top: 3rem; - margin-bottom: 3.5rem; - border-width: 0; - border-top: 1px solid #E1E1E1; } - - -.avatar { - vertical-align: middle; - width: 128px; - height: 128px; - border-radius: 50%; -} - -.footer { - margin-top: 36px; - padding-bottom: 36px; -} - -/* Buttons -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -.button.button-gitlab, -.button.button-devto, -.button.button-stackoverflow, -.button.button-gitea, -.button.button-signal, -.button.button-ghost { - border-style: solid; - border-color: #292929; - border-width: 1px; +:root { + --bg-color: transparent; + --hr-color: #F1F1F1; + --code-color: #F1F1F1; + --font-color: #222; + --a-color: #0085FF; + --border-color: #292929; + --button-border-style: solid; } diff --git a/public/css/littlelink.css b/public/css/littlelink.css new file mode 100644 index 0000000..bea1897 --- /dev/null +++ b/public/css/littlelink.css @@ -0,0 +1,197 @@ +/* +* littlelink V1 +* https://littlelink.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 12/21/2019 +* +* Built using: +* +* Skeleton V2.0.4 +* Copyright 2014, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 12/29/2014 +*/ + + +/* Table of contents +–––––––––––––––––––––––––––––––––––––––––––––––––– +- Grid +- Base Styles +- Typography +- Links +- Code +- Spacing +- Utilities +* +* You'll find the button css in css/brands.css. +* +*/ + + +/* Grid +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.container { + position: relative; + width: 100%; + max-width: 600px; + text-align: center; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; } +.column { + position: center; + width: 100%; + float: center; + box-sizing: border-box; } + +/* For devices larger than 400px */ +@media (min-width: 400px) { + .container { + width: 85%; + padding: 0; } +} + +/* For devices larger than 550px */ +@media (min-width: 550px) { + .container { + width: 80%; } + .column, + .columns { + margin-left: 0; } + .column:first-child, + .columns:first-child { + margin-left: 0; } + +} + + +/* Base Styles +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* NOTE +html is set to 62.5% so that all the REM measurements throughout Skeleton +are based on 10px sizing. So basically 1.5rem = 15px :) */ +html { + font-size: 100%; } +body { + background-color: var(--bg-color); + font-size: 18px; + line-height: 24px; + font-weight: 400; + font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: var(--font-color); } + + +/* Typography +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +h1 { + margin-top: 0; + margin-bottom: 16px; + font-weight: 800; } +h1 { font-size:24px; line-height: 64px; letter-spacing: 0;} + + +/* Larger than phablet */ +@media (min-width: 550px) { + h1 { font-size: 48px; line-height: 96px;} +} + +p { + margin-top: 0; } + + +/* Links +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +a { + color: var(--a-color); } +a:hover { + color: var(--a-color); } + + +/* Code +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +code { + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + color: var(--font-color); + white-space: nowrap; + background: var(--code-color); + border: 1px solid var(--code-color); + border-radius: 4px; } +pre > code { + display: block; + padding: 1rem 1.5rem; + white-space: pre; } + +/* Spacing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +button, +.button { + margin-bottom: 1rem; } +input, +textarea, +select, +fieldset { + margin-bottom: 1.5rem; } +pre, +blockquote, +dl, +figure, +p, +ol { + margin-bottom: 2.5rem; } + + +/* Utilities +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.u-full-width { + width: 100%; + box-sizing: border-box; } +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; } +.u-pull-right { + float: right; } +.u-pull-left { + float: left; } + + +/* Misc +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +hr { + margin-top: 3rem; + margin-bottom: 3.5rem; + border-width: 0; + border-top: 1px solid var(--hr-color); } + + +.avatar { + vertical-align: middle; + width: 128px; + height: 128px; + border-radius: 50%; +} + +.footer { + margin-top: 36px; + padding-bottom: 36px; +} + + +/* Buttons +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +.button.button-gitlab, +.button.button-devto, +.button.button-stackoverflow, +.button.button-gitea, +.button.button-signal, +.button.button-ghost { + border-style: var(--button-border-style); + border-color: var(--border-color); + border-width: 1px; +} + diff --git a/public/css/os.css b/public/css/os.css new file mode 100644 index 0000000..851f52e --- /dev/null +++ b/public/css/os.css @@ -0,0 +1,23 @@ +@media (prefers-color-scheme: dark) { + :root { + --bg-color: #292929; + --hr-color: #F1F1F1; + --code-color: #F1F1F1; + --font-color: #FFFFFF; + --a-color: #0085FF; + --border-color: #292929; + --button-border-style: none; + } +} + +@media (prefers-color-scheme: light) { + :root { + --bg-color: transparent; + --hr-color: #F1F1F1; + --code-color: #F1F1F1; + --font-color: #222; + --a-color: #0085FF; + --border-color: #292929; + --button-border-style: solid; + } +} diff --git a/src/config.js b/src/config.js index 531d430..03472c0 100644 --- a/src/config.js +++ b/src/config.js @@ -128,6 +128,7 @@ export const runtimeConfig = DROP_SHADOW: window?.env?.DROP_SHADOW, FIVEHUNDREDPX: window?.env?.FIVEHUNDREDPX, JETPHOTOS: window?.env?.JETPHOTOS, + THEME_OS: window?.env?.THEME_OS, } : { // server @@ -459,4 +460,7 @@ export const runtimeConfig = JETPHOTOS: nodeIsProduction ? process.env.JETPHOTOS : process.env.RAZZLE_JETPHOTOS, + THEME_OS: nodeIsProduction + ? process.env.THEME_OS + : process.env.RAZZLE_THEME_OS, }; diff --git a/src/server.js b/src/server.js index fb20f06..59a25d0 100644 --- a/src/server.js +++ b/src/server.js @@ -30,7 +30,7 @@ const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => { : ''; }; -const theme = runtimeConfig.THEME === 'Dark' ? 'dark.css' : 'light.css'; +const theme = runtimeConfig.THEME === 'Dark' ? 'dark' : 'light'; const helmet = require('helmet'); const server = express(); @@ -71,7 +71,7 @@ server } else { res.status(200).send( ` - + ${runtimeConfig.META_TITLE || 'My Site'} @@ -167,7 +167,13 @@ server } - + + ${ + runtimeConfig.THEME_OS + ? `` + : '' + } + ${cssLinksFromAssets(assets, 'client')}