Upstream/littlelink-server
1
0
Fork 0
mirror of https://github.com/techno-tim/littlelink-server.git synced 2025-02-10 18:11:24 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(style): Added CSS theme based on OS #100 (#367)

Browse Source
This commit is contained in:
Choubakawa 2023-04-14 04:45:50 +02:00 committed by GitHub
parent c8b41d7311
commit 2132c29f47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 249 additions and 377 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
public/css/dark.css
View File

@ -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;
}

200
public/css/light.css
View File

@ -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;
}

197
public/css/littlelink.css Normal file
View File

@ -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;
}

23
public/css/os.css Normal file
View File

@ -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;
}
}

4
src/config.js
View File

@ -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,
};

12
src/server.js
View File

@ -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(
`<!doctype html>
<html lang="${runtimeConfig.LANG || 'en'}">
<html lang="${runtimeConfig.LANG || 'en'}" class="${theme}">
<head>
<title >${runtimeConfig.META_TITLE || 'My Site'}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -167,7 +167,13 @@ server
}
<link href="css/fonts.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/${theme}">
<link rel="stylesheet" href="css/${theme}.css">
${
runtimeConfig.THEME_OS
? `<link rel="stylesheet" href="css/os.css">`
: ''
}
<link rel="stylesheet" href="css/littlelink.css">
<link rel="stylesheet" href="css/brands.css">
${cssLinksFromAssets(assets, 'client')}
<link rel="icon" type="image/png" href="${runtimeConfig.FAVICON_URL}">