fix minor stuff, rename some CSS classes

This commit is contained in:
Bea 2020-08-13 15:41:45 +02:00
parent 3b02a75451
commit 25b37da7ce
5 changed files with 70 additions and 43 deletions

View File

@ -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;

View File

@ -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;
}
}

View File

@ -15,7 +15,10 @@ function makeOpaque()
}
$(document).ready(function() {
$("#navbar").addClass('navbar-allowmoving');
scroll_pos = $(this).scrollTop();
if(scroll_pos > offset)
{
makeOpaque();

View File

@ -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>

View File

@ -6,8 +6,6 @@
</div>
<main>
<div class="mind-content">
{{content}}
</div>
</main>
{{/post}}