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 0000000..8c7d63b Binary files /dev/null and b/static/images/by-nd-mobile.png differ diff --git a/static/images/by-sa-mobile.png b/static/images/by-sa-mobile.png new file mode 100644 index 0000000..c93f753 Binary files /dev/null and b/static/images/by-sa-mobile.png differ