askiiart/microblog.pub
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Better theme support

Browse source
This commit is contained in:
Thomas Sileo 2018-07-01 11:40:44 +02:00
parent 3bf77b2e82
commit a5b7e21600
8 changed files with 51 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
config.py
View file

@ -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})"

21
sass/base_theme.scss
View file

@ -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
View 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
View 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
View file

@ -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
View file

@ -1,2 +0,0 @@
*
!.gitignore

1
static/css/theme.css
View file

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

4
templates/layout.html
View file

@ -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">