diff --git a/config.js.template b/config.js.template index 304c740..f54006c 100644 --- a/config.js.template +++ b/config.js.template @@ -2,7 +2,7 @@ const config = { domain: process.env.DOMAIN || '127.0.0.1', // Or for example 'teddit.net' use_reddit_oauth: process.env.USE_REDDIT_OAUTH === 'true' || false, // If false, teddit uses Reddit's public API. If true, you need to have your own Reddit app ID (enter the app ID to the "reddit_app_id" config key). cert_dir: process.env.CERT_DIR || '', // For example '/home/teddit/letsencrypt/live/teddit.net', if you are using https. No trailing slash. - theme: process.env.THEME || 'dark', // One of: 'dark', '' + theme: process.env.THEME || 'dark', // One of: 'dark', 'sepia', '' flairs_enabled: process.env.FLAIRS_ENABLED !== 'true' || true, // Enables the rendering of user and link flairs on teddit highlight_controversial: process.env.HIGHLIGHT_CONTROVERSIAL !== 'true' || true, // Enables controversial comments to be indicated by a typographical dagger (†) api_enabled: process.env.API_ENABLED !== 'true' || true, // Teddit API feature. Might increase loads significantly on your instance. diff --git a/static/css/sepia.css b/static/css/sepia.css new file mode 100644 index 0000000..e054f13 --- /dev/null +++ b/static/css/sepia.css @@ -0,0 +1,191 @@ +:root { + --bodybg: #ccc9b8; /* #cac5ad; */ + --bodytext: #53524b; + --topbarbg: #992c09; + --headerbg: #bf360c; + --headertext: white; + --headerfaded: #ecc3b7; + --linkbg: #e2dfd7; + --linktext: #979692; + --shadow: #9e9e9e; + --buttonbg: #f2f0ea; + --buttontext: #53524b; + --oddbg: #e2dfd7; + --oddborder: #616161; + --evenbg: #f2f0ea; + --evenborder: #919191; + /* Overrides */ + --graytext: #616161; + /* Copied from default theme */ + --linkcolor: #0645ad; + --lightlinkcolor: #406bb3; +} +/* Main page */ +body.sepia { + background: var(--bodybg); + color: var(--bodytext); +} +body.sepia nav { + background: var(--topbarbg); + color: var(--headertext); +} +body.sepia .top-links { + padding-bottom: 4px; + background: var(--headerbg); +} +body.sepia .top-links a { + padding-left: 4px; + background: var(--headerbg); + color: var(--headerfaded); +} +body.sepia #sr-more-link { + margin-top: 4px; + background: var(--buttonbg); +} +body.sepia header { + margin-top: -8px; + background: var(--headerbg); + color: var(--headertext); +} +body.sepia header a { + color: var(--headertext); +} +body.sepia header .tabmenu li a { + background: none; + color: var(--headerfaded); + text-transform: uppercase; +} +body.sepia header .tabmenu li.active a { + color: var(--headertext); +} +body.sepia #links { + max-width: calc(100% - 32px); + margin: 4px 16px; +} +body.sepia #links .link { + width: calc(100% - 8px); + margin: 6px 0; + padding: 16px 8px 16px 0; + background: var(--linkbg); + color: var(--linktext); + border-radius: 3px; + box-shadow: 0px 0px 2px var(--shadow); +} +body.sepia .flair, +body.sepia #links .link .entry .title span.flair, +body.sepia #post .info .title span.flair { + color: var(--bodytext); + background-color: var(--linkbg); +} +body.sepia .upvotes .arrow { + filter: brightness(90%); +} +body.sepia #links .link .entry .title a h2 { + padding-right: 4px; +} +body.sepia #links .link .entry .title span { + padding-left: 0; +} +body.sepia #user .upvotes, +body.sepia #links .link .upvotes, +body.sepia #links .link .entry .title span, +body.sepia #links .link .entry .meta, +body.sepia #links .link .entry .meta .links a { + color: var(--linktext); +} +body.sepia button, +body.sepia select, +body.sepia input, +body.sepia input[type="submit"], +body.sepia #search input[type="text"], +body.sepia #sr-more-link, +body.sepia .btn, +body.sepia .view-more-links a { + margin-bottom: 0; + background: var(--buttonbg); + color: var(--buttontext); + border-radius: 3px; + border: none; + box-shadow: 0px 0px 2px var(--shadow); +} +body.sepia .view-more-links a { + margin-left: 16px; + color: var(--linkcolor); + font-weight: normal; +} +body.sepia #sr-more-link { + border-radius: 3px 0 0 3px; +} +body.sepia input[type="checkbox"] { + margin-top: 6px; +} +body.sepia footer { + margin-top: 20px; + padding: 8px 0 8px 20px; + box-shadow: 0px 0px 2px var(--shadow); +} +/* Search */ +body.sepia #links.search { + width: calc(100% - 40px); +} +/* Comments */ +body.sepia #post .score { + color: var(--graytext); +} +body.sepia .score .arrow { + filter: brightness(70%); +} +body.sepia #post .submitted, +body.sepia #post .title .domain { + color: var(--graytext); +} +body.sepia #post .usertext-body { + background: var(--oddbg); + border-radius: 3px; + border: none; + box-shadow: 0px 0px 2px var(--shadow); +} +body.sepia .md { + color: var(--bodytext); +} +body.sepia #post header div a { + color: var(--headerfaded); +} +body.sepia .comment { + background: var(--oddbg); + border-left: 3px solid var(--oddborder); + border-radius: 3px 0 0 3px; + box-shadow: 1px 0px 1px var(--shadow); +} +body.sepia .comment.even-depth { + background: var(--evenbg); + border-left: 3px solid var(--evenborder); + box-shadow: 1px 0px 1px var(--shadow); +} +body.sepia .comments > .comment { + border: none; + border-radius: 0; +} +body.sepia .comment details { + padding-top: 8px; +} +body.sepia .comment details:not([open]) { + padding-bottom: 8px; +} +body.sepia .md .md-spoiler-text:not(.revealed), +body.sepia .md .md-spoiler-text:active:not(.revealed), +body.sepia .md .md-spoiler-text:focus:not(.revealed), +body.sepia .md .md-spoiler-text:hover:not(.revealed) { + background: var(--bodytext); + color: var(--bodytext); +} +body.sepia .md .md-spoiler-text:active:not(.revealed), +body.sepia .md .md-spoiler-text:focus:not(.revealed), +body.sepia .md .md-spoiler-text:hover:not(.revealed) { + background: none; +} +body.sepia .comments > form button { + margin: 12px 8px; + padding: 8px; + cursor: pointer; +} diff --git a/views/includes/head.pug b/views/includes/head.pug index 588875f..3d497b3 100644 --- a/views/includes/head.pug +++ b/views/includes/head.pug @@ -1,5 +1,7 @@ if(user_preferences.theme === 'dark') link(rel="stylesheet", type="text/css", href="/css/dark.css") +if(user_preferences.theme === 'sepia') + link(rel="stylesheet", type="text/css", href="/css/sepia.css") link(rel="stylesheet", type="text/css", href="/css/styles.css") link(rel="icon", type="image/png", sizes="32x32", href="/favicon.png") meta(name="viewport", content="width=device-width, initial-scale=1.0") diff --git a/views/preferences.pug b/views/preferences.pug index 7266eeb..9d173a7 100644 --- a/views/preferences.pug +++ b/views/preferences.pug @@ -16,9 +16,15 @@ html if(!user_preferences.theme || user_preferences.theme == '') option(value="", selected="selected") White option(value="dark") Dark + option(value="sepia") Sepia if(user_preferences.theme === 'dark') option(value="") White option(value="dark", selected="selected") Dark + option(value="sepia") Sepia + if(user_preferences.theme === 'sepia') + option(value="") White + option(value="dark") Dark + option(value="sepia", selected="selected") Sepia .setting label(for="flairs") Show flairs: if(!user_preferences.flairs || user_preferences.flairs == 'true')