From 11450977f00a9559c9c99f6ffb6eb34ba42d7213 Mon Sep 17 00:00:00 2001 From: Isaac Shea Date: Thu, 2 Jul 2020 11:04:36 +1000 Subject: [PATCH] Mobile optimization begun --- css/global.css | 132 +++++++++++++++++++++++++++++++++++- css/page-specific/post.css | 2 +- design_files/logosquare.png | Bin 0 -> 3959 bytes index.html | 54 ++++++++++----- 4 files changed, 168 insertions(+), 20 deletions(-) create mode 100644 design_files/logosquare.png diff --git a/css/global.css b/css/global.css index b734896..4eb3e30 100644 --- a/css/global.css +++ b/css/global.css @@ -104,7 +104,7 @@ h1, h2, h3 { /* Cards */ .card { display: flex; - flex-direction: row; + flex-direction: column; align-items: center; background-color: var(--background); @@ -131,9 +131,11 @@ h1, h2, h3 { } .post-info { + width: 100%; display: flex; flex-direction: row; justify-content: space-between; + align-items: center; } .post-info img { @@ -148,8 +150,60 @@ h1, h2, h3 { align-content: flex-end; } +.post-stats { + display: flex; + flex-direction: column; + align-content: flex-end; + + text-align: right; +} + +.post-stats > h6 { + margin: 10px; +} + +.post-votes { + display: flex; +} + +.stat-con-small { + background-color: var(--backgroundTemp); + + align-items: center; + justify-content: center; + + padding: 0.5rem 1.2rem; + border-radius: 1.2rem; + margin: 0.2rem; + + display: flex; + flex-direction: row; +} + +.stat-con-small > .material-icons, .stat-con-small > h5 { + margin: 0px; +} + +.stat-con-small.pos { + color: var(--primaryText); +} + +.stat-con-small.neg { + color: var(--secondaryText); +} + .card h1, .card h2, .card h3 { color: var(--text); + margin: 0px; +} + +.card > .content { + display: flex; + flex-direction: row; +} + +.card > .content p { + margin-right: 1rem; } /* Quick Post */ @@ -164,6 +218,7 @@ h1, h2, h3 { /* Ad Cards */ .column-ad { justify-content: center; + text-align: center; padding: 2rem; margin-top: 20px; @@ -429,6 +484,12 @@ label { padding: 8px 1.25rem; } +.button.material-icons { + font-size: 20px; + + padding: 8px 1rem; +} + /* Nav */ .nav-height { margin-top: 4.25rem; @@ -460,7 +521,7 @@ label { font-size: 2rem; font-weight: 700; } -.nav .logo img{ +.nav .logo img { height: 25px; } .nav a:not(.button){ @@ -472,12 +533,16 @@ label { align-items: center; } +.nav-items > .button { + margin-left: 10px; +} + .pfpButton { display: inline-block; vertical-align: middle; padding: 0; border: none; - margin: 0 1.5rem; + margin-left: 10px; padding: 1.225rem; background: #ccc url("../design_files/newjimbo.png?raw=true"); background-size: cover; @@ -557,6 +622,67 @@ label { } +/* - Media Queries - */ +@media only screen and (min-width: 800px) { + .logo-small img { + display: none; + } + + .button.search { + display: none; + } +} + +@media only screen and (max-width: 800px) { + + /* Nav Items */ + .nav-items > .input.primaryAlt { + display: none; + } + + .logo-large img { + display: none; + } + + .button { + font-size: 15px; + + padding: 8px 1.5rem; + } + + /* Hero Header */ + .hero.large > h1 { + font-size: 2rem; + } + +} + +@media only screen and (max-width: 400px) { + + /* Nav Items */ + .button.search { + display: none; + } + + .nav-container { + margin: 1rem; + } + + /* Post Cards */ + .card.post > .content { + flex-direction: column; + } + + .card.post > .content p { + margin-right: 0px; + } + + .post-votes { + flex-direction: column; + } +} + + /* - Colors - */ /* Text */ .default-text { color: var(--text); } diff --git a/css/page-specific/post.css b/css/page-specific/post.css index e0ddf86..df27ecb 100644 --- a/css/page-specific/post.css +++ b/css/page-specific/post.css @@ -32,7 +32,7 @@ flex-direction: row; align-items: center; - background-color: var(--backgroundDark); + background-color: var(--background); border-radius: 1.2rem; color: var(--text); diff --git a/design_files/logosquare.png b/design_files/logosquare.png new file mode 100644 index 0000000000000000000000000000000000000000..9fd04b5382795885f9325520eee7a3a5408c5846 GIT binary patch literal 3959 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 Rr}Y2;002ovPDHLkV1ne6XO92? literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 6a97cfd..055641d 100644 --- a/index.html +++ b/index.html @@ -29,14 +29,17 @@