fix minor stuff, rename some CSS classes

assets/css/home-style.css

@@ -21,23 +21,20 @@ h1 {
 }
 
 .mind-site-title h1 {
+	margin-top: 100px;
 	position: absolute;
 }
 
-.mind-feed {
+.mind-feed_main {
-	/* todo: move to generic class */
-	margin: auto;
-	width: 1260px;
-	box-sizing: border-box;
-
-	max-width: 100%;
 	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 {
+.post-card_main:hover {
-	transform:translate3d(0,-5px,0);
 	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;

assets/css/screen.css

@@ -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 */
+/* Begin Main Content */
-.mind-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;
 	}
 }

assets/js/scroll-navbar-color.js

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

index.hbs

@@ -1,27 +1,27 @@
 {{!< default}}
 
-  <div class="mind-site-title unselectable" id="vantajs">
+<div class="mind-site-title unselectable" id="vantajs">
-    			<h1>{{@site.title}}</h1>
+  			<h1>{{@site.title}}</h1>
-          <i class="arrow-down"></i>
+        <i class="arrow-down"></i>
-  </div>
+</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}}">
+        <a class="post-card_main" href="{{url}}">
-       		<header class="post-header">
+       		<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>

page.hbs

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