From 9cc6fdbce3e79dc77140b0ed2e9b4b023bca7dca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=96zcan=20O=C4=9Fuz?= Date: Mon, 24 Aug 2020 02:59:36 +0300 Subject: [PATCH] Responsiveness enhancements --- layouts/partials/footer.html | 32 ++++++++---- static/css/style.css | 93 +++++++++++++++++++++++++++++++-- static/images/by-nd-mobile.png | Bin 0 -> 449 bytes static/images/by-sa-mobile.png | Bin 0 -> 446 bytes 4 files changed, 112 insertions(+), 13 deletions(-) create mode 100644 static/images/by-nd-mobile.png create mode 100644 static/images/by-sa-mobile.png diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 5561e11..61d421c 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,15 +1,27 @@ diff --git a/static/css/style.css b/static/css/style.css index 08a992e..252d989 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -18,6 +18,12 @@ body { font-family: 'Liberation Serif', serif; } +@media only screen and (max-width: 600px) { + h1 { + font-size: 2rem !important; + } +} + /* Typography */ h1, h2, h3, h4, h5, h6 { line-height: 1.1; @@ -71,13 +77,24 @@ a:hover { text-decoration: underline; } +img { + max-width: 100%; +} + /* Grid */ .container { - max-width: 1200px; + max-width: 60%; padding: 0 2rem; margin: auto; } +@media only screen and (max-width: 600px) { + .container { + max-width: 100%; + margin: auto; + } +} + .row { display: flex; flex-flow: row wrap; @@ -196,6 +213,19 @@ article hr:last-child { align-items: center; } +@media only screen and (max-width: 600px) { + .navbar-container { + max-width: 100%; + margin: 0 auto; + padding: 0 2rem; + height: 40px; + display: flex; + justify-content: space-between; + align-items: center; + } +} + + .navbar h1 { font-size: 1.4rem; margin: 0; @@ -239,6 +269,17 @@ article hr:last-child { justify-content: space-between; } +@media only screen and (max-width: 600px) { + .page { + max-width: 100%; + margin: auto; + margin-top: 80px; + display: flex; + flex-flow: row wrap; + justify-content: space-between; + } +} + .article-list > article { display: flex; margin-bottom: 2rem; @@ -261,7 +302,7 @@ article hr:last-child { .article-img { margin-right: 1rem; - width: 150px; + max-width: 150px; } .article-body { @@ -273,6 +314,7 @@ article hr:last-child { flex-basis: 0; width: 75%; padding-right: 2rem; + max-width: 100%; } .article-list { @@ -356,7 +398,7 @@ body > footer { .member img, .project img { - width: 120px; + max-width: 120px; } .member-name { @@ -395,6 +437,12 @@ body > footer { margin-top: 80px; } +@media only screen and (max-width: 600px) { + .band:first-child { + margin-top: 0px; + } +} + .band .column:first-child { margin-right: 3rem; } @@ -528,6 +576,10 @@ body > footer { .article-title { margin-top: 0px; } +.article-header { + max-width: 100%; +} + .article-header .photo { width: 100%; height: 120px; @@ -829,4 +881,39 @@ table { background-color: rgba(255, 255, 255, 0.075); } +.license { + border: none; + float: right; +} +.license-mobile { + display: flex; + align-items: center; + justify-content: center; + vertical-align: middle; +} + +.license-mobile img { + padding-left: 5px; + vertical-align: middle; +} + +@media only screen and (max-width: 600px) { + .license { + display: none; + } + .copyright { + display: flex; + align-items: center; + justify-content: center; + vertical-align: middle; + } + .copyright a { + padding-left: 5px; + } +} +@media only screen and (min-width: 601px) { + .license-mobile { + display: none; + } +} diff --git a/static/images/by-nd-mobile.png b/static/images/by-nd-mobile.png new file mode 100644 index 0000000000000000000000000000000000000000..8c7d63b7a251f51b5674d269cdb4070b5412923a GIT binary patch literal 449 zcmV;y0Y3hTP)IWd00004XF*Lt007q5 z)K6G40001%P)t-s|NsB)?(W^)-OA3&%*@Ql%*e*d#>K|Py1%-+ySuZvva7MGs;a7) znVFQClaG*(h=_=XhlhrShJb*8eS&>=cXx7jac661W@ctvURzaFRZC1uL_|bGLqkGB zLP0`7J3Tu&J2^8mGchwUE-)@9C?_N(BO)RqAt50kARrkT84(c?4-gLy4h{_t4Gj$q z4Gjzc000fQuD$>O0MHF?SIWd00004XF*Lt007q5 z)K6G40001%P)t-s|NsB)?(W^)-OA3&%*@Ql%*e*d#>K|Py1%-+ySuZvva7MGs;a7) znVFQClaG*(h=_=XhlhrShJb*8eS&>=cXx7jac661W@ctvURzaFRZC1uL_|bGLqkGB zLP0`7J3Tu&J2^8mGchwUE-)@9C?_N(BO)RqAt50kARrkT84(c?4-gLy4h{_t4Gj$q z4Gjzc000fQuD$>O0MkiCK~#9!t&?dJf*=rvU&_u^vx5$!`>-;r{r`WiAx!g2Hpvb! z%q~2<>;l-bfnn7&khD!WNL?!NiR#zC^%z2bmgWP0vEDR9IcL?NV%h37)vh}ta^H!b7k&hNl6J3?0_-0C~ags9uh z1f?2b#@7r#Dpb>0NDuN}R9Fy%pA^zPfE)8vDBjkv*cWp6vHzXZa^U7{xyt^dp8=Og o3-6G|JV<$~OVyuZ`!8FzCy+atcfZ1f6aWAK07*qoM6N<$f_NsoUjP6A literal 0 HcmV?d00001