implement some image resizing (todo: implement in whole website)

fix/improve css
change arrow-fade mode

assets/css/home-style.css

@@ -147,7 +147,7 @@ article {
 }
 
 .post-card_author-image {
-	border-radius: 20%;
+	border-radius: 100%;
 	margin-left: 10px;
 	max-width: 30px;
 }

assets/css/page-style.css

@@ -35,20 +35,50 @@ h1 {
 	margin: auto;
 }
 
-.mind-post_header {
+.mind-post_content-header {
+	/*
+		TODO: decide whether the image should be full-size (without rounded borders),
+		or with the same margin as the content, with rounded borders.
+
+		SAME-AS-CONTENT:
 		margin-top: 50px;
+
+		CURRENTLY:
+		full-size.
+	 */
+
+	margin: 0 -60px;
+	padding: 0 0 20px;
 }
 
 img.mind-post_feature-image {
 	width: 100%;
+	/*
+	TODO: see .mind-post_content-header.
+
+	SAME-AS-CONTENT:
 	border-radius: 5px;
+	*/
 }
 
-pre {
+.mind-post_content code {
+	font-family: monospace;
+	background-color: rgb(20, 20, 20);
+	border-radius: 2px;
+	font-size: 14px;
+	padding: 7px 5px 2px;
+}
+
+.mind-post_content pre code {
+	border-radius: 0;
+	padding: 0;
+}
+
+.mind-post_content pre {
+	background-color: rgb(20, 20, 20);
 	overflow-x: scroll;
 	border: 1px solid black;
 	border-radius: 5px;
-	background-color: rgb(20, 20, 20);
 	font-size: 14px;
 	color: white;
 	padding: 10px;
@@ -56,10 +86,7 @@ pre {
 }
 
 .mind-post_content {
-	overflow: hidden; /* to hide, eg. overflowing code */
+	overflow: hidden; /* to hide, eg., overflowing code */
-	display: flex;
-	max-width: 100%;
-	flex-direction: column;
 	padding: 0 60px;
   text-align: justify;
 	background-color: rgb(40, 40, 40);
@@ -68,6 +95,7 @@ pre {
 	z-index: 2;
 	font-size: 19px;
 	color: rgb(200, 200, 200);
+  box-sizing: border-box;
 }
 
 .mind-post_content h1, .mind-post_content h2, .mind-post_content h3, .mind-post_content h4, .mind-post_content h5, .mind-post_content h6 {
@@ -75,22 +103,21 @@ pre {
 }
 
 .mind-post_content blockquote {
+	border-left: 4px solid paleturquoise;
+	border-radius: 6px;
+
 	color: rgb(180, 180, 180);
-	font-style: italic;
+	background-color: rgb(30, 30, 30);
-	margin-left: 0;
+
-	padding-left: 40px;
+	margin: 20px 0;
-	border-left: 2px solid paleturquoise;
+	padding: 10px 30px;
 }
 
 .mind-post_content li {
 	margin: 0 0 1em;
 }
 
-.mind-post_content a {
+/*.mind-post_content a {
-	position: relative;
-}
-
-.mind-post_content a {
   position: relative;
 }
 
@@ -113,7 +140,7 @@ pre {
 	visibility: visible;
 	-webkit-transform: scaleX(1);
 	transform: scaleX(1);
-}
+}*/
 
 .mind-post_sidebar {
 	padding: 0 20px;
@@ -138,7 +165,12 @@ pre {
 	background-color: rgb(40, 40, 40);
 	border-radius: 5px;
 	box-shadow: 0 0 2px rgb(0,0,0),0 2px 3px rgb(0,0,0);
-	transition: 0.5s;
+	transition: .3s;
+}
+
+.post-card-sidebar_main:hover {
+	transform:translate3d(0,-5px,0);
+	box-shadow: 0 0 2px rgb(0,0,0),0 2px 15px rgb(0,0,0);
 }
 
 .post-card-sidebar_feature-image {
@@ -161,11 +193,6 @@ pre {
 	border-radius: 5px;
 }
 
-.post-card-sidebar_main:hover {
-	transform:translate3d(0,-5px,0);
-
-}
-
 .post-card-sidebar_meta {
 	font-weight: 700;
 	text-transform: uppercase;

assets/css/screen.css

@@ -21,28 +21,25 @@ a {
 }
 
 h1, h2, h3, h4, h5, h6 {
+  margin: 0;
   font-family: 'Montserrat', sans-serif;
   font-weight: 800;
 	color: rgb(230, 230, 230);
 }
 
 h2 {
-  margin: 38px 0 0;
   font-size: 35px;
 }
 
 h3 {
-  margin: 0;
   font-size: 28px;
 }
 
 h4 {
-  margin: 0;
   font-size: 24px;
 }
 
 h5 {
-  margin: 0;
   font-size: 20px;
 }
 
@@ -254,69 +251,170 @@ nav.mind-site-footer_nav {
 }
 
 /* Begin Ghost mandatory CSS */
-.kg-width-wide {
 
-}
+  /* Begin images
 
-.kg-width-full {
+  [structure]
+  class ".kg-card" is applied to all cards!
 
-}
+  class ".kg-image" is applied to all images.
+  class ".kg-image-card" is applied to all image containers (includes description)
 
-.kg-gallery-container {
+  there are 3 sizes:
+    - normal
+    - wide (class ".kg-width-wide")
+    - full (class ".kg-width-full")
 
+  if an image has a description, class ".kg-card-hascaption" is applied to the container.
+  */
 
-}
+  .kg-card {
-.kg-gallery-image {
+    padding: 20px 0 20px;
+  }
 
-}
+  .kg-image {
-
+    width: 100%;
-.kg-gallery-row {
-
-}
-
-.kg-bookmark-card {
-
-}
-
-.kg-bookmark-container {
-
-}
-
-.kg-bookmark-content {
-
-}
-
-.kg-bookmark-title {
-
-}
-
-.kg-bookmark-description {
-
-}
-
-.kg-bookmark-metadata {
-
-}
-
-.kg-bookmark-icon {
-
-}
-
-.kg-bookmark-author {
-
-}
-
-.kg-bookmark-publisher {
-
-}
-
-.kg-bookmark-thumbnail {
-
-}
-
-.kg-image {
     max-width: 100%;
-}
+  }
+
+  .kg-image-card img {
+      border-radius: 5px;
+  }
+
+  .kg-image-card {
+    margin: 0 40px;
+  }
+
+  .kg-width-wide {
+    margin: 0;
+  }
+
+  .kg-width-full {
+    margin: 0 -60px;
+  }
+
+  .kg-width-full img {
+    border-radius: 0;
+  }
+
+  .kg-card-hascaption figcaption {
+    padding: 0 20px 0;
+    font-style: italic;
+    font-size: 18px;
+    line-height: 1em;
+    color: rgb(150, 150, 150);
+  }
+
+  /* End images */
+
+  /* Begin Bookmarks */
+
+
+  .kg-bookmark-card {
+    margin: 0;
+  }
+
+  .kg-bookmark-container {
+    display: flex;
+    min-height: 148px;
+    border: 1px solid rgb(80, 80, 80);
+    border-radius: 5px;
+    transition: .3s;
+  }
+
+  .kg-bookmark-container:hover {
+  	transform:translate3d(0,-3px,0);
+  	box-shadow: 0 0 3px rgb(0,0,0),0 3px 10px rgb(0,0,0);
+  }
+
+  .kg-bookmark-content {
+    display: flex;
+    flex-direction: column;
+    padding: 20px 20px 0;
+    color: white;
+  }
+
+  .kg-bookmark-title {
+    font-size: 15px;
+    font-weight: 700;
+
+  }
+
+  .kg-bookmark-description {
+    margin-top: 12px;
+    max-height: 48px;
+    font-size: 14px;
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+
+  }
+
+  .kg-bookmark-metadata {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    margin-top: auto;
+
+  }
+
+  .kg-bookmark-icon {
+    width: 22px;
+    height: 22px;
+    margin-right: 10px;
+
+  }
+
+  .kg-bookmark-author {
+
+  }
+
+  .kg-bookmark-publisher {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 12px;
+
+  }
+
+  .kg-bookmark-thumbnail {
+    font-size: 0;
+    max-height: 100%;
+    min-width: 33%;
+  }
+
+  .kg-bookmark-thumbnail img {
+    border-radius: 0 5px 5px 0;
+    object-fit: cover;
+    height: 157px;
+    width: 100%;
+  }
+
+  /* End Bookmarks */
+
+  /* Begin Gallery */
+  .kg-gallery-container {
+    margin: 0 -40px;
+  }
+
+  .kg-gallery-row {
+    display: flex;
+    justify-content: center;
+  }
+
+  .kg-gallery-image {
+    margin: 10px 10px;
+  }
+  .kg-gallery-image img {
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+  }
+
+  /* End Gallery */
 /* End Ghost mandatory CSS */
 
 /* Generic class to make things unselectable */

assets/js/arrow-fade.js

@@ -1,7 +1,9 @@
 // JavaScript Document
 $(document).ready(function(){
 	$(window).scroll(function(){
-		if($(this).scrollTop() > $(window).height()*0.3){
+		if($(this).scrollTop() >
+		//$(window).height()*0.3){
+		100) {
 			$(".arrow-down").css({"opacity" : "0"});
 		} else {
 			$(".arrow-down").css({"opacity" : "0.4"});

assets/js/remark42-comments.js

@@ -1,5 +1,5 @@
 var remark_config = {
-  host: "https://comments.mind-overflow.net", // hostname of remark server, same as REMARK_URL in backend config, e.g. "https://demo.remark42.com"
+  host: "https://comments.mind-overflow.net",
   site_id: 'mindoverflow',
   components: ['embed'], // optional param; which components to load. default to ["embed"]
                          // to load all components define components as ['embed', 'last-comments', 'counter']

default.hbs

@@ -46,7 +46,7 @@
 
       <nav id="navbar" class="navbar unselectable">
           <a href="/">
-            <img src="{{@site.icon}}" />
+            <img src="{{img_url @site.icon size="xxs"}}" />
           </a>
           {{navigation}}
       </nav>

index.hbs

@@ -17,7 +17,7 @@
       {{#foreach posts}}
       	<article class="{{post_class}}">
           <a class="post-card_main" href="{{url}}">
-            <img class="post-card_feature-image" src="{{img_url feature_image size="s"}}" />
+            <img class="post-card_feature-image" src="{{img_url feature_image size="m"}}" />
          		<header class="post-card_header">
               <p class="post-card_meta"><span class="post-card_tag">{{primary_tag.name}}</span> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
            		<h3>{{title}}</h3>
@@ -27,7 +27,7 @@
             </section>
             <footer class="post-card_footer">
               {{primary_author.name}}
-              {{#if primary_author.profile_image}}<img class="post-card_author-image" src="{{primary_author.profile_image}}" alt="Author image" />{{/if}}
+              {{#if primary_author.profile_image}}<img class="post-card_author-image" src="{{img_url primary_author.profile_image size="xxs"}}" alt="Author image" />{{/if}}
             </footer>
           </a>
         </article>

package.json

@@ -1,7 +1,7 @@
 {
     "name": "mindtheme",
     "description": "Mind Overflow's official website style",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "engines": {
         "ghost-api": "v3"
     },
@@ -13,8 +13,17 @@
     "config": {
         "posts_per_page": 10,
         "image_sizes": {
+          "xxs": {
+            "width": 64
+          },
+          "xs": {
+            "width": 100
+          },
           "s": {
             "width": 300
+          },
+          "m": {
+            "width": 600
           }
         }
     }

post.hbs

@@ -13,7 +13,7 @@
       </aside>
       {{#post}}
       <div class="mind-post_content">
-        <div class="mind-post_header">
+        <div class="mind-post_content-header">
           <img class="mind-post_feature-image" src="{{img_url feature_image}}"/>
         </div>
         {{content}}