From ec9b86cbbab545d0d94dc7e6e7e8844ad31c21b2 Mon Sep 17 00:00:00 2001 From: Caesar Schinas Date: Tue, 28 May 2019 22:18:49 +0100 Subject: [PATCH] feat: improve mobile layout --- index.html | 3 ++- style.css | 35 +++++++++++++++++++++++++++++++++-- 2 files changed, 35 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 4c1b74f..4785787 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ Caesar Schinas + @@ -27,7 +28,7 @@

Caesar Schinas

/ ˈsiːzə ˈskɪnəs /

-

Sailor;  programmer;  web designer;  publisher.

+

Sailor;  programmer;  web designer;  publisher.

Hello. Thanks for dropping by. There’s not much to see here at the moment, but feel free to drop me a line using one of the links below. diff --git a/style.css b/style.css index 6a8cda6..27306e6 100644 --- a/style.css +++ b/style.css @@ -12,7 +12,7 @@ body { max-width: 30em; margin: auto; padding: 2em; - font-size: 20px; + font-size: 16px; line-height: 1.5em; } h1, p { @@ -23,13 +23,15 @@ header { } h1 { font-weight: normal; + font-size: 2em; + margin-right: 0.5em; } h1, .ipa { display: inline-block; } .ipa { color: #888; - margin: 0 0 0 1em; + margin: 0; letter-spacing: 0.05em; } img.profile { @@ -76,3 +78,32 @@ img.profile { border-color: #999; } } + +@media (min-width: 480px) { + body { + font-size: 18px; + } +} +@media (min-width: 800px) { + body { + font-size: 20px; + } +} + +@media (max-width: 580px) { + img.profile { + height: 5em; + width: 5em; + /* margin-top: 0; */ + } +} +@media (max-width: 400px) { + h1 { + font-size: 1.75em; + } + img.profile { + height: 5em; + width: 5em; + margin-top: 0; + } +}