make splash images look better on small devices

this is really pushing my patience for CSS, but I've always thought this
looked nice, so I'm going to try to retain it

incorporealcms/config.py

@@ -34,11 +34,7 @@ class Config(object):
 
     MARKDOWN_EXTENSIONS = ['meta', 'tables']
 
-    PAGE_STYLES = {
+    DEFAULT_PAGE_STYLE = 'light'
-        'DEFAULT': 'css/light.css',
-        'dark': 'css/dark.css',
-        'light': 'css/light.css',
-    }
 
     TITLE_SUFFIX = 'incorporeal.org'
     MEDIA_DIR = 'media'

incorporealcms/pages.py

@@ -44,13 +44,18 @@ def render(template_name_or_list, **context):
 
     * Determine the proper site theme to use in the template and provide it.
     """
+    PAGE_STYLES = {
+        'dark': 'css/dark.css',
+        'light': 'css/light.css',
+    }
+
     selected_style = request.args.get('style', None)
     if selected_style:
         user_style = selected_style
     else:
         user_style = request.cookies.get('user-style')
         logger.debug("user style cookie: %s", user_style)
-    context['user_style'] = app.config['PAGE_STYLES'].get(user_style, app.config['PAGE_STYLES']['DEFAULT'])
+    context['user_style'] = PAGE_STYLES.get(user_style, PAGE_STYLES.get(app.config['DEFAULT_PAGE_STYLE']))
 
     resp = make_response(render_template(template_name_or_list, **context))
     if selected_style:

incorporealcms/static/css/dark.css

@@ -1,13 +1,13 @@
 html {
-    color: #CCC;
+    color: #DDD;
 }
 
 body {
-    background: #444;
+    background: black;
 }
 
 .site-wrap {
-    background: black;
+    background: #111;
 
     border: 1px solid #222;
     border-top: none;
@@ -19,13 +19,13 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 a:link, a:visited {
-    color: #BBB;
+    color: #EEE;
-    border-bottom: 1px dotted #CCC;
+    border-bottom: 1px dotted #EEE;
 }
 
 a:hover, a:active {
-    color: #B14640;
+    color: #B31D15;
-    border-bottom: 1px dotted #CCC;
+    border-bottom: 1px dotted #EEE;
 }
 
 section.nav, section.styles {
@@ -50,3 +50,12 @@ blockquote {
     background-color: rgba(120, 120, 120, 0.3);
     border: 1px solid #222;
 }
+
+figure {
+    background: #222;
+    border: 1px solid #333;
+}
+
+figcaption {
+    color: #BBB;
+}

incorporealcms/static/css/light.css

@@ -19,13 +19,13 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 a:link, a:visited {
-    color: #222;
+    color: #111;
-    border-bottom: 1px dotted #222;
+    border-bottom: 1px dotted #111;
 }
 
 a:hover, a:active {
     color: #811610;
-    border-bottom: 1px dotted #222;
+    border-bottom: 1px dotted #111;
 }
 
 section.nav, section.styles {
@@ -50,3 +50,12 @@ blockquote {
     background-color: rgba(120, 120, 120, 0.1);
     border: 1px solid #CCC;
 }
+
+figure {
+    background: #EFEFEF;
+    border: 1px solid #CCCCCC;
+}
+
+figcaption {
+    color: #777777;
+}

incorporealcms/static/css/style.css

@@ -4,8 +4,11 @@ html {
 }
 
 body {
-
     margin: 0;
+    text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
 }
 
 .site-wrap {
@@ -104,3 +107,69 @@ blockquote {
     background-color: rgba(120, 120, 120, 0.3);
     padding: 1px 10px;
 }
+
+.splash {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    text-align: center;
+}
+
+.splash img {
+    max-width: 100%;
+}
+
+.img-50 {
+    max-width: 50% !important;
+}
+
+/* For screens with width smaller than 400px */
+.figure-left .figure-right {
+    max-width: 95%;
+    float: none;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+/* For larger screens */
+@media only screen and (min-width: 400px) {
+    .figure-left {
+        float: left;
+        margin-top: 0;
+        margin-left: 0;
+    }
+
+    .figure-right {
+        float: right;
+        margin-top: 0;
+        margin-right: 0;
+    }
+}
+
+figure {
+    max-width: 400px;
+    padding: 5px;
+    margin: 10px;
+    margin-top: 0;
+    margin-bottom: 5px;
+}
+
+figure img {
+    max-width: 100%;
+    height: auto;
+}
+
+figcaption {
+    font-family: "Times New Roman", serif;
+    color: #777777;
+    text-align: center;
+    font-style: italic;
+    line-height: 1.3em;
+    margin-top: 5px;
+}
+
+.thumbnail-image {
+    width: 150px;
+    height: auto;
+    margin: 5px;
+    display: inline;
+}

incorporealcms/templates/base.html

@@ -1,5 +1,6 @@
 <!doctype html>
 <title>{{ title }}{% if title %} - {% endif %}{{ config.TITLE_SUFFIX }}</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
 <link rel="stylesheet" href="{{ url_for('static', filename=user_style) }}">
 <link rel="icon" href="{{ url_for('static', filename='img/favicon.png') }}">

requirements/requirements-dev.txt

@@ -5,17 +5,17 @@
 #    pip-compile --output-file=requirements/requirements-dev.txt requirements/requirements-dev.in
 #
 appdirs==1.4.4            # via virtualenv
-attrs==20.2.0             # via pytest
+attrs==20.3.0             # via pytest
-bandit==1.6.2             # via -r requirements/requirements-dev.in
+bandit==1.6.3             # via -r requirements/requirements-dev.in
 click==7.1.2              # via flask, pip-tools
 coverage==5.3             # via pytest-cov
 distlib==0.3.1            # via virtualenv
-dlint==0.10.3             # via -r requirements/requirements-dev.in
+dlint==0.11.0             # via -r requirements/requirements-dev.in
 filelock==3.0.12          # via tox, virtualenv
 flake8-blind-except==0.1.1  # via -r requirements/requirements-dev.in
 flake8-builtins==1.5.3    # via -r requirements/requirements-dev.in
 flake8-docstrings==1.5.0  # via -r requirements/requirements-dev.in
-flake8-executable==2.0.4  # via -r requirements/requirements-dev.in
+flake8-executable==2.1.0  # via -r requirements/requirements-dev.in
 flake8-fixme==1.1.1       # via -r requirements/requirements-dev.in
 flake8-isort==4.0.0       # via -r requirements/requirements-dev.in
 flake8-logging-format==0.6.0  # via -r requirements/requirements-dev.in
@@ -23,18 +23,17 @@ flake8-mutable==1.2.0     # via -r requirements/requirements-dev.in
 flake8==3.8.4             # via -r requirements/requirements-dev.in, dlint, flake8-builtins, flake8-docstrings, flake8-executable, flake8-isort, flake8-mutable
 flask==1.1.2              # via -r requirements/requirements.in
 gitdb==4.0.5              # via gitpython
-gitpython==3.1.9          # via bandit
+gitpython==3.1.11         # via bandit
-importlib-metadata==2.0.0  # via flake8, markdown, pluggy, pytest, stevedore, tox, virtualenv
 iniconfig==1.1.1          # via pytest
 isort==5.6.4              # via flake8-isort
 itsdangerous==1.1.0       # via flask
 jinja2==2.11.2            # via flask
-markdown==3.3.2           # via -r requirements/requirements.in
+markdown==3.3.3           # via -r requirements/requirements.in
 markupsafe==1.1.1         # via jinja2
 mccabe==0.6.1             # via flake8
-packaging==20.4           # via pytest, tox
+packaging==20.7           # via pytest, tox
 pbr==5.5.1                # via stevedore
-pip-tools==5.3.1          # via -r requirements/requirements-dev.in
+pip-tools==5.4.0          # via -r requirements/requirements-dev.in
 pluggy==0.13.1            # via pytest, tox
 py==1.9.0                 # via pytest, tox
 pycodestyle==2.6.0        # via flake8
@@ -42,23 +41,22 @@ pydocstyle==5.1.1         # via flake8-docstrings
 pyflakes==2.2.0           # via flake8
 pyparsing==2.4.7          # via packaging
 pytest-cov==2.10.1        # via -r requirements/requirements-dev.in
-pytest==6.1.1             # via -r requirements/requirements-dev.in, pytest-cov
+pytest==6.1.2             # via -r requirements/requirements-dev.in, pytest-cov
-pytz==2020.1              # via tzlocal
+pytz==2020.4              # via tzlocal
 pyyaml==5.3.1             # via bandit
-six==1.15.0               # via bandit, packaging, pip-tools, tox, virtualenv
+six==1.15.0               # via bandit, pip-tools, tox, virtualenv
 smmap==3.0.4              # via gitdb
 snowballstemmer==2.0.0    # via pydocstyle
-stevedore==3.2.2          # via bandit
+stevedore==3.3.0          # via bandit
 testfixtures==6.15.0      # via flake8-isort
-toml==0.10.1              # via pytest, tox
+toml==0.10.2              # via pytest, tox
-tox-wheel==0.5.0          # via -r requirements/requirements-dev.in
+tox-wheel==0.6.0          # via -r requirements/requirements-dev.in
 tox==3.20.1               # via -r requirements/requirements-dev.in, tox-wheel
 tzlocal==2.1              # via -r requirements/requirements.in
-versioneer==0.18          # via -r requirements/requirements-dev.in
+versioneer==0.19          # via -r requirements/requirements-dev.in
-virtualenv==20.0.35       # via tox
+virtualenv==20.2.2        # via tox
 werkzeug==1.0.1           # via flask
-wheel==0.35.1             # via tox-wheel
+wheel==0.36.1             # via tox-wheel
-zipp==3.3.1               # via importlib-metadata
 
 # The following packages are considered to be unsafe in a requirements file:
 # pip

requirements/requirements.txt

@@ -6,12 +6,10 @@
 #
 click==7.1.2              # via flask
 flask==1.1.2              # via -r requirements/requirements.in
-importlib-metadata==2.0.0  # via markdown
 itsdangerous==1.1.0       # via flask
 jinja2==2.11.2            # via flask
-markdown==3.3.2           # via -r requirements/requirements.in
+markdown==3.3.3           # via -r requirements/requirements.in
 markupsafe==1.1.1         # via jinja2
-pytz==2020.1              # via tzlocal
+pytz==2020.4              # via tzlocal
 tzlocal==2.1              # via -r requirements/requirements.in
 werkzeug==1.0.1           # via flask
-zipp==3.3.1               # via importlib-metadata

tests/functional_tests.py

@@ -52,3 +52,24 @@ def test_that_dir_request_does_not_redirect(client):
     response = client.get('/subdir/')
     assert response.status_code == 200
     assert b'another page' in response.data
+
+
+def test_setting_selected_style_includes_cookie(client):
+    """Test that a request with style=foo sets the cookie and renders appropriately."""
+    response = client.get('/')
+    style_cookie = next((cookie for cookie in client.cookie_jar if cookie.name == 'user-style'), None)
+    assert style_cookie is None
+
+    response = client.get('/?style=light')
+    style_cookie = next((cookie for cookie in client.cookie_jar if cookie.name == 'user-style'), None)
+    assert response.status_code == 200
+    assert b'light.css' in response.data
+    assert b'dark.css' not in response.data
+    assert style_cookie.value == 'light'
+
+    response = client.get('/?style=dark')
+    style_cookie = next((cookie for cookie in client.cookie_jar if cookie.name == 'user-style'), None)
+    assert response.status_code == 200
+    assert b'dark.css' in response.data
+    assert b'light.css' not in response.data
+    assert style_cookie.value == 'dark'