From b59e0d3a851ed4391ded2a5634162a044f4e7557 Mon Sep 17 00:00:00 2001 From: Samuel Hellawell Date: Mon, 10 May 2021 01:47:58 +0100 Subject: [PATCH] Fix mobile CSS styling Signed-off-by: Samuel Hellawell --- _layouts/cv.html | 3 +- media/davewhipp-screen.css | 56 +++++++++++++++++++++++++++---- media/kjhealy-screen.css | 67 ++++++++++++++++++++++++++++++-------- 3 files changed, 105 insertions(+), 21 deletions(-) diff --git a/_layouts/cv.html b/_layouts/cv.html index 991939d51b..98e3bd1291 100644 --- a/_layouts/cv.html +++ b/_layouts/cv.html @@ -2,6 +2,7 @@ + {% if page.title %} {{ page.title }} | {% endif %} CV @@ -13,4 +14,4 @@ - \ No newline at end of file + diff --git a/media/davewhipp-screen.css b/media/davewhipp-screen.css index adacc451b8..4229e16513 100644 --- a/media/davewhipp-screen.css +++ b/media/davewhipp-screen.css @@ -52,7 +52,8 @@ table { body { - font: normal normal 400; + font-family: normal; + font-weight: 400; font-size: 100%; line-height: 1.5em; /*also written as... font: normal normal 400 100%/1.5em;*/ @@ -187,9 +188,50 @@ strong { display: none; } - - -/* -@media only screen and (max-width: 480px) { - make one column somehow... -}*/ \ No newline at end of file +/* This hack fixes scrollable on x for tablets */ +@media only screen and (max-width: 1024px) { + body { + overflow-x: hidden; + } +} + +/* Mobile styling, starting at iPad portrait size */ +@media only screen and (max-width: 768px) { + h1, + h2, + h3, + h4, + p, + ul, + code, + #webaddress { + position: static; + width: 100%; + text-align: left; + } + + code { + width: auto; + } + + h1 { + margin-bottom: 0.1em; + } + + h2 { + margin-top: 1em; + } + + body { + margin-top: 0; + margin-left: 0; + padding: 1em; + } + + p code { + position: static; + margin-right: auto; + display: block; + text-align: left; + } +} diff --git a/media/kjhealy-screen.css b/media/kjhealy-screen.css index 9bff2e901e..712ff7da91 100644 --- a/media/kjhealy-screen.css +++ b/media/kjhealy-screen.css @@ -1,4 +1,4 @@ -/* http://meyerweb.com/eric/tools/css/reset/ +/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ @@ -12,8 +12,8 @@ b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; @@ -24,7 +24,7 @@ time, mark, audio, video { vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } @@ -83,7 +83,7 @@ p code { } -ul { +ul { position: relative; left: 33%; width: 65%; @@ -126,7 +126,7 @@ h1 { left: 33%; } -h1+p { +h1+p { /*subtitle*/ font-style: italic; font-size: 110%; @@ -144,7 +144,7 @@ h2 { h3 { font-size: 1em; - line-height: 2em; + line-height: 2em; position: relative; top: 1.7em; text-align: right; @@ -186,9 +186,50 @@ strong { display: none; } - - -/* -@media only screen and (max-width: 480px) { - make one column somehow... -}*/ +/* This hack fixes scrollable on x for tablets */ +@media only screen and (max-width: 1024px) { + body { + overflow-x: hidden; + } +} + +/* Mobile styling, starting at iPad portrait size */ +@media only screen and (max-width: 768px) { + h1, + h2, + h3, + h4, + p, + ul, + code, + #webaddress { + position: static; + width: 100%; + text-align: left; + } + + code { + width: auto; + } + + h1 { + margin-bottom: 0.1em; + } + + h2 { + margin-top: 1em; + } + + body { + margin-top: 0; + margin-left: 0; + padding: 1em; + } + + p code { + position: static; + margin-right: auto; + display: block; + text-align: left; + } +}