diff --git a/config.py b/config.py index 1a00bb7..3e883c0 100644 --- a/config.py +++ b/config.py @@ -1,9 +1,11 @@ import os import subprocess from datetime import datetime +from enum import Enum import requests import yaml +import sass from itsdangerous import JSONWebSignatureSerializer from pymongo import MongoClient @@ -13,6 +15,19 @@ from utils.key import get_key from utils.key import get_secret_key +class ThemeStyle(Enum): + LIGHT = "light" + DARK = "dark" + + +DEFAULT_THEME_STYLE = ThemeStyle.LIGHT.value + +DEFAULT_THEME_PRIMARY_COLOR = { + ThemeStyle.LIGHT: "#1d781d", # Green + ThemeStyle.DARK: "#e14eea", # Purple +} + + def noop(): pass @@ -54,8 +69,22 @@ with open(os.path.join(KEY_DIR, "me.yml")) as f: ICON_URL = conf["icon_url"] PASS = conf["pass"] PUBLIC_INSTANCES = conf.get("public_instances", []) - # TODO(tsileo): choose dark/light style - THEME_COLOR = conf.get("theme_color") + + # Theme-related config + theme_conf = conf.get("theme", {}) + THEME_STYLE = ThemeStyle(theme_conf.get("style", DEFAULT_THEME_STYLE)) + THEME_COLOR = theme_conf.get("color", DEFAULT_THEME_PRIMARY_COLOR[THEME_STYLE]) + + +SASS_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "sass") +theme_css = f"$primary-color: {THEME_COLOR};\n" +with open(os.path.join(SASS_DIR, f"{THEME_STYLE.value}.scss")) as f: + theme_css += f.read() + theme_css += '\n' +with open(os.path.join(SASS_DIR, "base_theme.scss")) as f: + raw_css = theme_css + f.read() + CSS = sass.compile(string=raw_css) + USER_AGENT = ( f"{requests.utils.default_user_agent()} (microblog.pub/{VERSION}; +{BASE_URL})" diff --git a/sass/base_theme.scss b/sass/base_theme.scss index 1cbe524..c54114d 100644 --- a/sass/base_theme.scss +++ b/sass/base_theme.scss @@ -1,24 +1,3 @@ -// a4.io dark theme -$background-color: #060606; -$background-light: #222; -$color: #808080; -$color-title-link: #fefefe; -$color-summary: #ddd; -$color-light: #bbb; -$color-menu-background: #222; -$color-note-link: #666; -$primary-color: #f7ca18; - -$background-color: #eee; -$background-light: #ccc; -$color: #111; -$color-title-link: #333; -$color-light: #555; -$color-summary: #111; -$color-note-link: #333; -$color-menu-background: #ddd; -$primary-color: #1d781d; - .note-container p:first-child { margin-top: 0; } diff --git a/sass/dark.scss b/sass/dark.scss new file mode 100644 index 0000000..68a9f40 --- /dev/null +++ b/sass/dark.scss @@ -0,0 +1,8 @@ +$background-color: #060606; +$background-light: #222; +$color: #808080; +$color-title-link: #fefefe; +$color-summary: #ddd; +$color-light: #bbb; +$color-menu-background: #222; +$color-note-link: #666; diff --git a/sass/light.scss b/sass/light.scss new file mode 100644 index 0000000..9c4c251 --- /dev/null +++ b/sass/light.scss @@ -0,0 +1,9 @@ +$background-color: #eee; +$background-light: #ccc; +$color: #111; +$color-title-link: #333; +$color-light: #555; +$color-summary: #111; +$color-note-link: #333; +$color-menu-background: #ddd; +// $primary-color: #1d781d; diff --git a/static/base.css b/static/base.css deleted file mode 100644 index aeab1f3..0000000 --- a/static/base.css +++ /dev/null @@ -1,160 +0,0 @@ -.note-container p:first-child { - margin-top: 0; -} -html, body { - height: 100%; -} -body { - background-color: #060606; - color: #808080; -display: flex; -flex-direction: column; -} -.base-container { - flex: 1 0 auto; -} -.footer { -flex-shrink: 0; -} -a, h1, h2, h3, h4, h5, h6 { - color: #fefefe; -} -a { - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -.gold { - color: #f7ca18; -} - -#header { - margin-bottom: 40px; -} -#header .h-card { -} -#header .title { -font-size:1.2em;padding-right:15px;color:#fefefe; -} -#header .title:hover { -text-decoration: none; -} -#header .menu { -padding: 20px 0 10px 0; -} -#header .menu ul { -display:inline;list-style-type:none;padding:0; -} -#header .menu li { -float:left; -padding-right:10px; -margin-bottom:10px; -} -#header .menu a { - padding: 2px 7px; -} -#header .menu a.selected { -background:#f7ca18;color:#634806; -border-radius:2px; -} -#header .menu a:hover { -background:#f7ca18;color:#060606; -text-decoration: none; -} -#container { -width:90%;max-width: 720px;margin:40px auto; -} -#container #notes { -margin-top:20px; -} -.actor-box { -display:block;text-decoration:none;margin-bottom:40px; -} -.actor-box .actor-icon { -width: 100%; -max-width:120px; -border-radius:2px; -} -.actor-box h3 { margin:0; } -.note .l { -color:#666; -} -.note { -display:flex;margin-bottom:70px; -} -.note .h-card { -flex:initial;width:50px; -} -.note .u-photo { -width:50px;border-radius:2px; -} -.note .note-wrapper { -flex:1;padding-left:15px; -} -.note .bottom-bar { -margin-top:10px; -} -.bar-item { -background: #222; -padding: 5px; -color:#bbb; -margin-right:5px; -border-radius:2px; -} -.bottom-bar .perma-item { -margin-right:5px; -} -.bottom-bar a.bar-item:hover { - text-decoration: none; -} -.note .img-attachment { -max-width:100%; -border-radius:2px; -} -.note h3 { -font-size:1.1em;color:#ccc; -} -.note .note-container { -clear:right;padding:10px 0; -} -.note strong { -font-weight:600; -} -.footer > div { -width:90%;max-width: 720px;margin:40px auto; -} -.footer a, .footer a:hover, .footer a:visited { - text-decoration:underline; - color:#808080; -} -.summary { -color: #ddd; -font-size:1.3em; -margin-top:50px; -margin-bottom:70px; -} -.summary a, .summay a:hover { -color:#ddd; -text-decoration:underline; -} -#followers, #following, #new { - margin-top:50px; -} -#admin { - margin-top:50px; -} -textarea, input { - background: #222; - padding: 10px; - color: #bbb; - border: 0px; - border-radius: 2px; -} -input { - padding: 10px; -} -input[type=submit] { - color: #f7ca18; - text-transform: uppercase; -} diff --git a/static/css/.gitignore b/static/css/.gitignore deleted file mode 100644 index d6b7ef3..0000000 --- a/static/css/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -* -!.gitignore diff --git a/static/css/theme.css b/static/css/theme.css deleted file mode 100644 index 138747f..0000000 --- a/static/css/theme.css +++ /dev/null @@ -1 +0,0 @@ -.note-container p:first-child{margin-top:0}html,body{height:100%}body{background-color:#eee;color:#111;display:flex;flex-direction:column}.base-container{flex:1 0 auto}.footer{flex-shrink:0}a,h1,h2,h3,h4,h5,h6{color:#333}a{text-decoration:none}a:hover{text-decoration:underline}.gold{color:#1d781d}#header{margin-bottom:70px}#header .title{font-size:1.2em;padding-right:15px;color:#333}#header .title:hover{text-decoration:none}#header .subtitle-username{color:#111}#header .menu{clear:both;padding:0 0 10px 0}#header .menu ul{display:inline;list-style-type:none;padding:0}#header .menu ul li{float:left;padding-right:10px;margin-bottom:10px}#header .menu a{padding:5px 10px}#header .menu a small.badge{background-color:#ddd;color:#555;border-radius:2px;margin-left:5px;padding:3px 5px 0px 5px;font-weight:bold}#header .menu a.selected{background:#1d781d;color:#eee;border-radius:2px}#header .menu a.selected .badge{color:#1d781d;background:#eee}#header .menu a:hover{background:#1d781d;color:#eee;text-decoration:none;border-radius:2px}#header .menu a:hover .badge{color:#1d781d;background:#eee}#container{width:90%;max-width:720px;margin:40px auto}#container #notes{margin-top:20px}.actor-box{display:block;text-decoration:none;margin-bottom:40px}.actor-box .actor-icon{width:120px;border-radius:2px}.actor-box h3{margin:0}.actor-box .actor-inline{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.actor-box-big{display:block;text-decoration:none}.actor-box-big .actor-box-wrapper{margin-bottom:40px}.actor-box-big .actor-box-wrapper .actor-icon{width:120px;border-radius:2px}.actor-box-big .actor-box-wrapper h3{margin:0}.note{display:flex;margin-bottom:70px}.note .l{color:#333}.note .h-card{flex:initial;width:50px}.note .u-photo{width:50px;border-radius:2px}.note .note-wrapper{flex:1;padding-left:15px}.note .bottom-bar{margin-top:10px}.note .img-attachment{max-width:100%;border-radius:2px}.note h3{font-size:1.1em;color:#555}.note strong{font-weight:600}.note .note-container{clear:right;padding:10px 0}.bar-item{background:#ddd;padding:5px;color:#555;margin-right:5px;border-radius:2px}button.bar-item{border:0}form.action-form{display:inline}.perma{font-size:1.25em}.bottom-bar .perma-item{margin-right:5px}.bottom-bar a.bar-item:hover{text-decoration:none}.footer>div{width:90%;max-width:720px;margin:40px auto}.footer a,.footer a:hover,.footer a:visited{text-decoration:underline;color:#111}.summary{color:#111;font-size:1.1em;margin-top:10px;margin-bottom:30px}.summary a,.summay a:hover{color:#111;text-decoration:underline}#followers,#following,#new{margin-top:50px}#admin{margin-top:50px}textarea,input{background:#ddd;padding:10px;color:#555;border:0px;border-radius:2px}input{padding:10px}input[type=submit]{color:#1d781d;text-transform:uppercase} diff --git a/templates/layout.html b/templates/layout.html index b6f159d..6d4190f 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -6,7 +6,6 @@ {% block title %}{{ config.NAME }}{% endblock %} - microblog.pub - @@ -15,6 +14,9 @@ {% if config.THEME_COLOR %}{% endif %} +