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

Commit

Permalink
Significant Changes
Browse files Browse the repository at this point in the history
Legal pages updates, dark mode added, basic post page developed
  • Loading branch information
zaccomode committed Jun 6, 2020
1 parent 3d57988 commit 64de2fa
Show file tree
Hide file tree
Showing 14 changed files with 493 additions and 50 deletions.
Binary file modified .DS_Store
Binary file not shown.
Binary file added css/.DS_Store
Binary file not shown.
56 changes: 41 additions & 15 deletions css/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
color: var(--temp);
}
.hero.primary h1, .hero.primary h2{
color: var(--white);
color: var(--textAlt);
}
.hero.large h1{
font-size: 2.75rem;
Expand Down Expand Up @@ -333,7 +333,7 @@
}

/* Buttons */
.button{
.button {
display: inline-block;
margin: 0;
text-decoration: none;
Expand All @@ -350,15 +350,15 @@
border: 1px solid var(--white);
color: var(--primary);
}
.button:hover{
.button:hover {
text-decoration: none;
color: var(--primaryLight);
}
.button:active{
.button:active {
text-decoration: none;
color: var(--primaryDark);
}
.button:focus{
.button:focus {
text-decoration: none;
}

Expand All @@ -367,42 +367,52 @@
padding: 10px 11px;
}

.button.primary{
.icon-small {
display: flex;
align-items: center;
justify-content: center;

padding: 0px;
width: 35px;
height: 35px;
}

.button.primary {
background-color: var(--primary);
color: var(--white);
color: var(--textAlt);
border: 1px solid var(--primary);
}
.button.primary:hover{
.button.primary:hover {
background-color: var(--primaryLightAlt);
border-color: var(--primaryLightAlt);
}
.button.primary:active{
.button.primary:active {
background-color: var(--primaryDark);
border-color: var(--primaryDark)
}

.button.primaryAlt{
.button.primaryAlt {
background-color: var(--alpha);
color: var(--white);
border-color: var(--white);
}
.button.primaryAlt:hover{
.button.primaryAlt:hover {
background-color: var(--alphaHover);
}
.button.primaryAlt:active{
.button.primaryAlt:active {
background-color: var(--alphaDark);
}

.button.alt{
.button.alt {
background-color: var(--fill);
color: var(--text);
border: 1px solid var(--outline);
}
.button.alt:hover{
.button.alt:hover {
background-color: var(--white);
color: var(--text);
}
.button.alt:active{
.button.alt:active {
background-color: var(--temp);
color: var(--text);
}
Expand Down Expand Up @@ -513,6 +523,22 @@
margin-left: .75rem;
}

/* - Media Queries - */
@media (prefers-color-scheme: dark) {
h1, h2, h3 {
color: var(--textAlt);
}

.button {
background-color: var(--textAlt);
}

.button.primaryAlt {
color: var(--textAlt);
outline-color: var(--textAlt);
}
}


/* - Colors - */
/* Text */
Expand Down
3 changes: 3 additions & 0 deletions css/page-specific/legal.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
p {
text-align: justify;
}
164 changes: 164 additions & 0 deletions css/page-specific/post.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
/* General Elements */
.card-post > a {
font-style: italic;
}

/* Post Elements */
.title-header {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}

.title-info {
display: block;
flex-direction: column;
padding-right: 5rem;
}

.post-stats {
display: flex;
flex-direction: row;
}

.stat-container {
display: flex;
flex-direction: row;
align-items: center;

background-color: var(--temp);
border-radius: 1.2rem;
color: var(--text);

padding: 0.5rem 2rem;
margin: 1rem;
}

.stat-container.pos {
color: var(--primary);
}

.stat-container.neg {
color: var(--primaryNegative);
}


/* Post Content */
.card.post {
display: flex;
flex-direction: column;
}

.card.post > p {
width: 100%;

text-align: justify;
}

.post-embeds {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.post-embeds > img {
max-width: 49%;
height: auto;
max-height: 300px;
}


/* Comments */
textarea {
min-height: 50px;
max-height: 100px;
}

.comments {
margin-top: 2rem;
}

.comment {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;

padding-top: 0px;
padding-bottom: 0px;
}

.comment > .left {
display: flex;
flex-direction: column;
align-items: flex-start;

padding-bottom: 1rem;
}

.comment > .right {
display: flex;
flex-direction: column;
}

.comment-profile {
display: flex;
flex-direction: row;
align-items: center;
}

.comment-profile > img {
max-height: 30px;
border-radius: 50%;
margin: 10px;
}

.comment-content {
display: flex;
flex-direction: column;
align-items: flex-start;

width: 100%;
}

.comment-content > p {
margin: 0px 2rem;
}

.comment-content > a {
font-style: normal;
display: flex;
align-items: center;
justify-content: center;

width: 150px;
}

/* Comment Dropdown */
.commentDropdown {
position: absolute;
display: flex;
flex-direction: column;
margin: 0rem;
padding: 10px;

transform: translate(50px, -20px);

box-shadow: 0px 5px 20px rgba(40, 40, 40, .3);
z-index: 1;
display: none;
}

.show {
display: flex;
}

.commentDropdown > a {
margin: 0.5rem;

display: flex;
align-content: center;
justify-content: center;
}
23 changes: 23 additions & 0 deletions css/themes/default.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,37 @@
--primaryLightAlt: #306aaf;
--primaryLight: #4c7bb4;
--primaryDark: #1c4a80;
--primaryNegative: #CC6C4F;
--outline: #b3b3b3;
--fill: #f2f2f2;
--white: #ffffff;
--temp: #e5e5e5;
--text: #808080;
--textAlt: #ffffff;
--alphaDark: rgba(255, 255, 255, 0.08);
--alpha: rgba(255, 255, 255, 0.15);
--alphaHover: rgba(255, 255, 255, 0.18);
--alphaActive: rgba(255, 255, 255, 0.35);
--alphaLight: rgba(255, 255, 255, 0.75);
}

@media (prefers-color-scheme: dark) {
:root {
--primary: #224D82;
--primaryLightAlt: #2c63a5;
--primaryLight: #2c63a5;
--primaryDark: #1c4a80;
--primaryNegative: #CC6C4F;
--outline: #1A1A1A;
--fill: #3F3F3F;
--white: #333333;
--temp: #333333;
--text: #ffffff;
--textAlt: #ffffff;
--alphaDark: rgba(255, 255, 255, 0.08);
--alpha: rgba(255, 255, 255, 0.15);
--alphaHover: rgba(255, 255, 255, 0.18);
--alphaActive: rgba(255, 255, 255, 0.35);
--alphaLight: rgba(255, 255, 255, 0.75);
}
}
Binary file modified design_files/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 13 additions & 11 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -75,20 +75,16 @@ <h1>Welcome to STiBaRC</h1>
<span id="loggedin">
<!-- Quick Post -->
<div style="display: flex; flex-direction: row; align-items: center; justify-content: space-between;">
<h2 style="margin-bottom: 1rem">Quick Post</h2>
<h2 style="margin-bottom: 1rem">Have Something to Say?</h2>
<a class="button primary" style="margin-left: 1rem;" href="#">
<i class="material-icons" style="font-size: 1rem; vertical-align: middle;">open_in_new</i>
Full Post
</a>
</div>

<div class="card quick-post">
<textarea name="Quick Post Content">Make a Quick Post...</textarea>
<div style="flex-direction: column;">
<a class="button icon alt" style="margin-left: 1rem; margin-bottom: 1rem;" href="#">
<i class="material-icons" style="font-size: 1rem; vertical-align: middle;">clear</i>
</a>

<textarea name="Quick Post Content" placeholder="Make a Post..."></textarea>
<div style="flex-direction: column;">
<a class="button icon primary" style="margin-left: 1rem;" href="#">
<i class="material-icons" style="font-size: 1rem; vertical-align: middle;">send</i>
</a>
Expand All @@ -97,7 +93,7 @@ <h2 style="margin-bottom: 1rem">Quick Post</h2>

<!-- View Posts Header -->
<div style="display: flex; align-items: center; margin-bottom: 1rem">
<h1 style="display:inline-block; margin: auto 1rem auto 0; vertical-align: middle;" class="primary-text flex-grow">Recent Posts</h1>
<h1 style="margin-right: 1rem; vertical-align: middle;" class="primary-text flex-grow">Recent Posts</h1>
<a class="button primary" style="margin-right: 1rem;" href="#">Global Feed</a>
<a class="button alt" href="#">Followed Feed</a>
</div>
Expand Down Expand Up @@ -192,9 +188,15 @@ <h6 style="line-height: 0px"><i>4 Hours Ago</i></h6>
</main>

<footer>
<a href="css.html"><i> © 2020 Stibarc Team</i></a>
|
<a href="./css.html">CSS Framework</a>
<div class="footer-container">
<a href="css.html" style="text-align: center"><i> © 2020 STiBaRC Team</i></a>
<div style="flex-direction: row; margin: 10px;">
<a href="./index.html" class="button footer primary">Home</a>
<a href="./aboutus.html" class="button footer alt">About Us</a>
<a href="./legal/tos.html" class="button footer alt">Terms of Service</a>
<a href="legal/privacy.html" class="button footer alt">Privacy</a>
</div>
</div>
</footer>

</body>
Expand Down
4 changes: 4 additions & 0 deletions js/post.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/* COMMENT DROPDOWNS */
function CommentDropdown() {
document.getElementById("commentDropdown").classList.toggle("show");
}
Loading

0 comments on commit 64de2fa

Please sign in to comment.