mirror of
https://git.sr.ht/~tsileo/microblog.pub
synced 2024-12-22 05:04:27 +00:00
Better theme support
This commit is contained in:
Thomas Sileo
parent
3bf77b2e82
commit
a5b7e21600
8 changed files with 51 additions and 187 deletions
33
config.py
33
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})"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
8
sass/dark.scss
Normal file
8
sass/dark.scss
Normal file
|
|
@ -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;
|
||||
9
sass/light.scss
Normal file
9
sass/light.scss
Normal file
|
|
@ -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;
|
||||
160
static/base.css
160
static/base.css
|
|
@ -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;
|
||||
}
|
||||
2
static/css/.gitignore
vendored
2
static/css/.gitignore
vendored
|
|
@ -1,2 +0,0 @@
|
|||
*
|
||||
!.gitignore
|
||||
|
|
@ -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}
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>{% block title %}{{ config.NAME }}{% endblock %} - microblog.pub</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="/static/css/theme.css">
|
||||
<link rel="authorization_endpoint" href="{{ config.ID }}/indieauth">
|
||||
<link rel="token_endpoint" href="{{ config.ID }}/token">
|
||||
<link rel="micropub" href="{{ config.ID }}/micropub">
|
||||
|
|
@ -15,6 +14,9 @@
|
|||
<link rel="alternate" href="{{ config.ID }}/feed.rss" type="application/rss+xml" title="RSS">
|
||||
<link rel="alternate" href="{{ config.ID }}/feed.atom" type="application/atom+xml" title="Atom 0.3">
|
||||
{% if config.THEME_COLOR %}<meta name="theme-color" content="{{ config.THEME_COLOR }}">{% endif %}
|
||||
<style>
|
||||
{{ config.CSS }}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="base-container">
|
||||
|
|
|
|||
Loading…
Reference in a new issue