Skip to content
This repository has been archived by the owner on Nov 16, 2023. It is now read-only.

Commit

Permalink
Mobile optimization begun
Browse files Browse the repository at this point in the history
  • Loading branch information
@zaccomode
zaccomode committed Jul 2, 2020
1 parent fb24890 commit 1145097
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 20 deletions.
132 changes: 129 additions & 3 deletions css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ h1, h2, h3 {
/* Cards */
.card {
display: flex;
flex-direction: row;
flex-direction: column;
align-items: center;

background-color: var(--background);
Expand All @@ -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 {
Expand All @@ -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 */
Expand All @@ -164,6 +218,7 @@ h1, h2, h3 {
/* Ad Cards */
.column-ad {
justify-content: center;
text-align: center;

padding: 2rem;
margin-top: 20px;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -460,7 +521,7 @@ label {
font-size: 2rem;
font-weight: 700;
}
.nav .logo img{
.nav .logo img {
height: 25px;
}
.nav a:not(.button){
Expand All @@ -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;
Expand Down Expand Up @@ -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); }
Expand Down
2 changes: 1 addition & 1 deletion css/page-specific/post.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
Binary file added design_files/logosquare.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 38 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,17 @@
<!-- Nav Bar -->
<nav class="nav">
<div class="nav-container">
<a class="logo" href="./"><img src="./design_files/logo.png" alt="STiBaRC Logo"></a>
<a class="logo logo-large" href="./"><img src="./design_files/logo.png" alt="STiBaRC Logo"></a>
<a class="logo logo-small" href="./"><img src="./design_files/logosquare.png" alt="STiBaRC Logo"></a>

<span class="flex-grow"></span>

<!-- Logged Out Buttons -->
<span id="loggedout">
<span class="nav-items">
<input class="input primaryAlt" placeholder="Search">
<a href="login.html" class="button m-left m-right primaryAlt">Log In</a>
<a href="" class="button search primaryAlt material-icons">search</a>
<a href="login.html" class="button primaryAlt">Log In</a>
<a href="signup.html" class="button">Sign Up</a>
</span>
</span>
Expand All @@ -45,6 +48,7 @@
<span id="loggedin">
<span class="nav-items">
<input class="input primaryAlt" placeholder="Search">
<a href="" class="button search primaryAlt material-icons">search</a>

<img class="pfpButton" tabindex="0">
<button class="button dropdown"><i class="material-icons" style="vertical-align: middle; line-height: 5px; font-size: 1.75rem;">keyboard_arrow_down</i></button>
Expand Down Expand Up @@ -103,22 +107,40 @@ <h1 style="margin-bottom: 1rem;">Recent Posts</h1>

<!-- Large Card -->
<a class="card post" href="post.html">
<span class="content">
<div class="post-info">
<img src="./design_files/newjimbo.png" alt="Profile picture" height="50px">
<div class="post-name" style="flex-grow: 1;">
<h2 style="line-height: 0rem;">Post Title</h2>
<h7 style="line-height: 0rem;"><i>Post Author</i></h7>
<div class="post-info">
<img src="./design_files/newjimbo.png" alt="Profile picture" height="50px">
<div class="post-name" style="flex-grow: 1;">
<h2>Post Title</h2>
<h7><i>Post Author</i></h7>
</div>
<div class="post-stats">
<div class="post-votes">
<div class="stat-con-small pos">
<span class="material-icons" style="font-size: 15px; margin-right: 10px;">
thumb_up
</span>
<h5 style="font-size: 12px;">114K</h5>
</div>
<div class="stat-con-small neg">
<span class="material-icons" style="font-size: 15px; margin-right: 10px;">
thumb_down
</span>
<h5 style="font-size: 12px;">50</h5>
</div>
</div>
<h6 style="flex-grow: 1"> <i>4 Hours Ago</i></h6>
<h6><i>4 Hours Ago</i></h6>
</div>
<p style="text-align: justify; max-width: 90%; max-height: 75px; overflow: hidden;">
Here is a paragraph. This paragraph would be either the first 3-4 lines of the post, or a set description given by the user upon publishing, although that feature may have to wait until another post making page refresh. This particular card is the larger size, presumably to be used for full posts.
</p>
</span>
<span class="embed">
<img src="./sample_assets/placeholderimage.png" alt="Embed placeholder">
</span>
</div>
<div class="content">
<span class="left">
<p style="text-align: justify; max-height: 75px; overflow: hidden;">
Here is a paragraph. This paragraph would be either the first 3-4 lines of the post, or a set description given by the user upon publishing, although that feature may have to wait until another post making page refresh. This particular card is the larger size, presumably to be used for full posts.
</p>
</span>
<span class="right">
<img src="./sample_assets/placeholderimage.png" alt="Embed placeholder">
</span>
</div>
</a>

<br>
Expand Down

0 comments on commit 1145097

Please sign in to comment.