add media query and mobile stylesheet for future changes

diff --git a/conf/nginx.conf b/conf/nginx.conf
index 23c07ad1cb999ec4344f07d103118e1bf00e1b25..5166c330d0308ffabcf323793bc3a8e452d67962 100644 (file)
--- a/conf/nginx.conf
+++ b/conf/nginx.conf
@@ -5,30 +5,25 @@ server {
     root /var/www/vexingworkshop;
   }
 
-    listen 443 ssl; # managed by Certbot
-    ssl_certificate /etc/letsencrypt/live/vexingworkshop.com/fullchain.pem; # managed by Certbot
-    ssl_certificate_key /etc/letsencrypt/live/vexingworkshop.com/privkey.pem; # managed by Certbot
-    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
-    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
-
-
+  listen 443 ssl; # managed by Certbot
+  ssl_certificate /etc/letsencrypt/live/vexingworkshop.com/fullchain.pem; # managed by Certbot
+  ssl_certificate_key /etc/letsencrypt/live/vexingworkshop.com/privkey.pem; # managed by Certbot
+  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
+  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
 }
+
 server {
-    if ($host = www.vexingworkshop.com) {
-        return 301 https://$host$request_uri;
-    } # managed by Certbot
+  if ($host = www.vexingworkshop.com) {
+    return 301 https://$host$request_uri;
+  } # managed by Certbot
 
 
-    if ($host = vexingworkshop.com) {
-        return 301 https://$host$request_uri;
-    } # managed by Certbot
+  if ($host = vexingworkshop.com) {
+    return 301 https://$host$request_uri;
+  } # managed by Certbot
 
 
   listen 80;
   server_name vexingworkshop.com www.vexingworkshop.com;
-    return 404; # managed by Certbot
-
-
-
-
+  return 404; # managed by Certbot
 }

diff --git a/themes/vexingworkshop/static/css/main.css b/themes/vexingworkshop/static/css/main.css
index a57881f3b9d97c224146c689925e488e6d61ea79..411a078703f3e086429b2ae1bea1dbda62d21996 100644 (file)
--- a/themes/vexingworkshop/static/css/main.css
+++ b/themes/vexingworkshop/static/css/main.css
@@ -139,24 +139,6 @@ section#content img.banner {
   width: 700px;
 }
 
-@media (max-width: 400px) {
-  article img.image {
-    width: 240px;
-  }
-
-  article img.image-med {
-    width: 240px;
-  }
-
-  article img.image-lg {
-    width: 240px;
-  }
-
-  section#content img.banner {
-    width: 240px;
-  }
-}
-
 section#content article .entry-content {
   display: flex;
   flex-direction: column;

diff --git a/themes/vexingworkshop/static/css/mobile.css b/themes/vexingworkshop/static/css/mobile.css
new file mode 100644 (file)
index 0000000..1535f5c
--- /dev/null
+++ b/themes/vexingworkshop/static/css/mobile.css
@@ -0,0 +1,19 @@
+header#banner h1 {
+  font-size: 5em;
+}
+
+article img.image {
+  width: 240px;
+}
+
+article img.image-med {
+  width: 240px;
+}
+
+article img.image-lg {
+  width: 240px;
+}
+
+section#content img.banner {
+  width: 240px;
+}

diff --git a/themes/vexingworkshop/templates/base.html b/themes/vexingworkshop/templates/base.html
index db4fa7e6e6e293247944b5e27f015f00f45a42da..310eb454126483ffb8cecded6ea8c402911be6a6 100644 (file)
--- a/themes/vexingworkshop/templates/base.html
+++ b/themes/vexingworkshop/templates/base.html
@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="generator" content="Pelican" />
     <title>{% block title %}{{ SITENAME|striptags }}{%endblock%}</title>
-    <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/{{ CSS_FILE }}" />
+    <link rel="stylesheet" media="all" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/main.css" />
+    <link rel="stylesheet" media="(max-width: 480px)" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/mobile.css" />
     {% if FEED_ALL_ATOM %}
       <link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_ATOM_URL %}{{ FEED_ALL_ATOM_URL }}{% else %}{{ FEED_ALL_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME|striptags }} Atom Feed" />
     {% endif %}