aaron/text_proxy
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

theme

Browse Source
This commit is contained in:
Aaron Gutierrez
2019-03-08 19:55:07 -08:00
parent 4b6ace88b1
commit 182d14fcaf
3 changed files with 52 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
cgi-bin/proxy.cgi
View File

@@ -8,7 +8,7 @@ from goose3 import Goose
cgitb.enable() cgitb.enable()
goose = Goose({'enable_image_fetching': True}) goose = Goose()
def fetch_site(url): def fetch_site(url):
return goose.extract(url=url) return goose.extract(url=url)
@@ -17,14 +17,11 @@ def format_output(article):
with open('template.html', 'r') as f: with open('template.html', 'r') as f:
template = f.read() template = f.read()
extra = ""
if article.top_image:
extra += """<img src="{}" />""".format(article.top_image.src)
return template.format( return template.format(
title=article.title, title=article.title,
body=article.cleaned_text, body=article.cleaned_text,
extra=extra) )
def print_headers(): def print_headers():
print('Content-Type: text/html; charset=utf8\r\n\r\n') print('Content-Type: text/html; charset=utf8\r\n\r\n')

38
site.css
View File

@@ -1,7 +1,24 @@
.light {
--background: #fff;
--foreground: #333;
}
.dark {
--background: #2e3440;
--foreground: #d8dee9;
}
.darker {
--background: #000;
--foreground: #d8dee9;
}
html, html,
body { body {
background-color: #2e3440; background-color: var(--background);
color: #d8dee9; color: var(--foreground);
font-family: serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@@ -9,6 +26,7 @@ body {
h1 { h1 {
font-size: 28px; font-size: 28px;
font-weight: 800; font-weight: 800;
hyphens: auto;
text-align: center; text-align: center;
} }
@@ -19,6 +37,11 @@ h1 {
padding: 32px; padding: 32px;
} }
.theme {
align-items: center;
display: flex;
}
.text { .text {
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
@@ -48,10 +71,10 @@ form {
} }
input { input {
border: 1px solid #d8dee9; border: 1px solid var(--foreground);
border-radius: 22px; border-radius: 22px;
background-color: #2e3440; background-color: var(--background);
color: #d8dee9; color: var(--foreground);
height: 44px; height: 44px;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -70,6 +93,11 @@ input:focus {
outline: none; outline: none;
} }
select {
margin-left: auto;
margin-right: auto;
}
@media(min-width: 500px) { @media(min-width: 500px) {
form { form {
align-items: baseline; align-items: baseline;

20
template.html
View File

@@ -10,10 +10,24 @@
<link rel="icon" type="image/png" href="/favicon@2x.png" size="128x128"> <link rel="icon" type="image/png" href="/favicon@2x.png" size="128x128">
<link rel="icon" type="image/png" href="/favicon@3x.png" size="192x192"> <link rel="icon" type="image/png" href="/favicon@3x.png" size="192x192">
</head> </head>
<body> <body class="dark">
<h1>{title}</h1> <h1>{title}</h1>
<div class="main"> <div class="theme">
<div class="text">{extra}{body}</div> <select onchange="setTheme(event)">
<option value="darker">Light-on-Black</option>
<option value="dark" selected>Light-on-Dark</option>
<option value="light">Dark-on-White</option>
</select>
</div> </div>
<div class="main">
<div class="text">
{body}
</div>
</div>
<script type="text/javascript">
function setTheme(e) {{
document.body.className = e.currentTarget.value;
}}
</script>
</body> </body>
</html> </html>