fix minor stuff, rename some CSS classes
This commit is contained in:
parent
3b02a75451
commit
25b37da7ce
@ -21,23 +21,20 @@ h1 {
|
||||
}
|
||||
|
||||
.mind-site-title h1 {
|
||||
margin-top: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mind-feed {
|
||||
/* todo: move to generic class */
|
||||
margin: auto;
|
||||
width: 1260px;
|
||||
box-sizing: border-box;
|
||||
|
||||
max-width: 100%;
|
||||
.mind-feed_main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 30px;
|
||||
|
||||
/* This padding is used so that the last posts' shadows doesn't overlap the footer */
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.post-card {
|
||||
.post-card_main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
@ -54,20 +51,33 @@ h1 {
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.post-card:hover {
|
||||
transform:translate3d(0,-5px,0);
|
||||
.post-card_main:hover {
|
||||
box-shadow: 1px 3px 15px 2px black;
|
||||
|
||||
/* TODO: decide:
|
||||
1. move up
|
||||
transform:translate3d(0,-5px,0);
|
||||
|
||||
2. scale up
|
||||
transform: scale(1.04);
|
||||
|
||||
3. scale down
|
||||
transform: scale(0.96);
|
||||
|
||||
ATM: scale up
|
||||
*/
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
a.post-card {
|
||||
a.post-card_main {
|
||||
color: white;
|
||||
}
|
||||
|
||||
a.post-card:hover {
|
||||
a.post-card_main:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer.post-meta {
|
||||
footer.post-card_footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
@ -7,12 +7,12 @@ html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
color: white;
|
||||
width: 100%;
|
||||
background-color: #151515;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -57,16 +57,12 @@ h4 {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
main {
|
||||
display: block;
|
||||
background-color: #151515;
|
||||
}
|
||||
.nav {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
@ -82,6 +78,14 @@ main {
|
||||
|
||||
transition: 1s;
|
||||
}
|
||||
/* This class is applied by a JS script, so that users with JS disabled
|
||||
can still see the navbar, but it won't move while they're scrolling.
|
||||
This is needed because the navbar is transparent, and a black background
|
||||
is applied by the script on scroll.
|
||||
*/
|
||||
.navbar-allowmoving {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.navbar-colored {
|
||||
background: rgba(0, 0, 0, 1);
|
||||
@ -116,16 +120,20 @@ main {
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* Begin Content */
|
||||
.mind-content {
|
||||
/* Begin Main Content */
|
||||
main {
|
||||
margin: auto;
|
||||
width: 1260px;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
text-align: justify;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
padding-top: 20px;
|
||||
padding-left: 20%;
|
||||
padding-right: 20%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
/* End Content */
|
||||
/* End Main Content */
|
||||
|
||||
/* Begin footer */
|
||||
/* .mind-fullscreen-title is only used by pages (no homepage), however other pages have the footer too. */
|
||||
@ -294,6 +302,14 @@ main {
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
img {
|
||||
-moz-user-select: none;
|
||||
-webkis-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
/* COLORED TEXT SELECTION */
|
||||
::selection {
|
||||
color: #2d0670;
|
||||
@ -339,7 +355,7 @@ main {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.mind-content {
|
||||
main {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
@ -378,7 +394,7 @@ main {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.mind-content {
|
||||
main {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
@ -415,7 +431,7 @@ main {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mind-content {
|
||||
main {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@ -452,7 +468,7 @@ main {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.mind-content {
|
||||
main {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
@ -485,7 +501,7 @@ main {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.mind-content {
|
||||
main {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
@ -518,7 +534,7 @@ main {
|
||||
font-size: 29px;
|
||||
}
|
||||
|
||||
.mind-content {
|
||||
main {
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
@ -553,7 +569,7 @@ main {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.mind-content {
|
||||
main {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,7 +15,10 @@ function makeOpaque()
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#navbar").addClass('navbar-allowmoving');
|
||||
scroll_pos = $(this).scrollTop();
|
||||
|
||||
if(scroll_pos > offset)
|
||||
{
|
||||
makeOpaque();
|
||||
|
||||
10
index.hbs
10
index.hbs
@ -6,22 +6,22 @@
|
||||
</div>
|
||||
|
||||
|
||||
<main class="mind-index">
|
||||
<main>
|
||||
<h2>Last posts</h2>
|
||||
<div class="mind-feed">
|
||||
<div class="mind-feed_main">
|
||||
|
||||
<!-- Looping through every post -->
|
||||
{{#foreach posts}}
|
||||
<article class="{{post_class}}">
|
||||
<a class="post-card" href="{{url}}">
|
||||
<header class="post-header">
|
||||
<a class="post-card_main" href="{{url}}">
|
||||
<header class="post-card_header">
|
||||
<img class="post-card_feature-image" src="{{feature_image}}" />
|
||||
<h3>{{title}}</h3>
|
||||
</header>
|
||||
<section class="post-excerpt">
|
||||
<p>{{excerpt words="26"}}</p>
|
||||
</section>
|
||||
<footer class="post-meta">
|
||||
<footer class="post-card_footer">
|
||||
{{primary_author.name}}
|
||||
{{#if primary_author.profile_image}}<img class="post-card_profile-image" src="{{primary_author.profile_image}}" alt="Author image" />{{/if}}
|
||||
</footer>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user