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

fix/improve css
change arrow-fade mode
This commit is contained in:
Bea 2020-08-16 17:58:46 +02:00
parent 3b4b716667
commit 061b6dc122
9 changed files with 206 additions and 70 deletions

View File

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

View File

@ -35,20 +35,50 @@ h1 {
margin: auto; 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; margin-top: 50px;
CURRENTLY:
full-size.
*/
margin: 0 -60px;
padding: 0 0 20px;
} }
img.mind-post_feature-image { img.mind-post_feature-image {
width: 100%; width: 100%;
/*
TODO: see .mind-post_content-header.
SAME-AS-CONTENT:
border-radius: 5px; 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; overflow-x: scroll;
border: 1px solid black; border: 1px solid black;
border-radius: 5px; border-radius: 5px;
background-color: rgb(20, 20, 20);
font-size: 14px; font-size: 14px;
color: white; color: white;
padding: 10px; padding: 10px;
@ -56,10 +86,7 @@ pre {
} }
.mind-post_content { .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; padding: 0 60px;
text-align: justify; text-align: justify;
background-color: rgb(40, 40, 40); background-color: rgb(40, 40, 40);
@ -68,6 +95,7 @@ pre {
z-index: 2; z-index: 2;
font-size: 19px; font-size: 19px;
color: rgb(200, 200, 200); 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 { .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 { .mind-post_content blockquote {
border-left: 4px solid paleturquoise;
border-radius: 6px;
color: rgb(180, 180, 180); 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 { .mind-post_content li {
margin: 0 0 1em; margin: 0 0 1em;
} }
.mind-post_content a { /*.mind-post_content a {
position: relative;
}
.mind-post_content a {
position: relative; position: relative;
} }
@ -113,7 +140,7 @@ pre {
visibility: visible; visibility: visible;
-webkit-transform: scaleX(1); -webkit-transform: scaleX(1);
transform: scaleX(1); transform: scaleX(1);
} }*/
.mind-post_sidebar { .mind-post_sidebar {
padding: 0 20px; padding: 0 20px;
@ -138,7 +165,12 @@ pre {
background-color: rgb(40, 40, 40); background-color: rgb(40, 40, 40);
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 2px rgb(0,0,0),0 2px 3px rgb(0,0,0); 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 { .post-card-sidebar_feature-image {
@ -161,11 +193,6 @@ pre {
border-radius: 5px; border-radius: 5px;
} }
.post-card-sidebar_main:hover {
transform:translate3d(0,-5px,0);
}
.post-card-sidebar_meta { .post-card-sidebar_meta {
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;

View File

@ -21,28 +21,25 @@ a {
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 800; font-weight: 800;
color: rgb(230, 230, 230); color: rgb(230, 230, 230);
} }
h2 { h2 {
margin: 38px 0 0;
font-size: 35px; font-size: 35px;
} }
h3 { h3 {
margin: 0;
font-size: 28px; font-size: 28px;
} }
h4 { h4 {
margin: 0;
font-size: 24px; font-size: 24px;
} }
h5 { h5 {
margin: 0;
font-size: 20px; font-size: 20px;
} }
@ -254,51 +251,120 @@ nav.mind-site-footer_nav {
} }
/* Begin Ghost mandatory CSS */ /* Begin Ghost mandatory CSS */
.kg-width-wide {
/* Begin images
[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)
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 {
padding: 20px 0 20px;
}
.kg-image {
width: 100%;
max-width: 100%;
}
.kg-image-card img {
border-radius: 5px;
}
.kg-image-card {
margin: 0 40px;
}
.kg-width-wide {
margin: 0;
} }
.kg-width-full { .kg-width-full {
margin: 0 -60px;
} }
.kg-gallery-container { .kg-width-full img {
border-radius: 0;
}
.kg-gallery-image {
} }
.kg-gallery-row { .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 { .kg-bookmark-card {
margin: 0;
} }
.kg-bookmark-container { .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 { .kg-bookmark-content {
display: flex;
flex-direction: column;
padding: 20px 20px 0;
color: white;
} }
.kg-bookmark-title { .kg-bookmark-title {
font-size: 15px;
font-weight: 700;
} }
.kg-bookmark-description { .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 { .kg-bookmark-metadata {
display: flex;
align-items: center;
margin-bottom: 15px;
margin-top: auto;
} }
.kg-bookmark-icon { .kg-bookmark-icon {
width: 22px;
height: 22px;
margin-right: 10px;
} }
@ -307,16 +373,48 @@ nav.mind-site-footer_nav {
} }
.kg-bookmark-publisher { .kg-bookmark-publisher {
font-family: 'Roboto', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 12px;
} }
.kg-bookmark-thumbnail { .kg-bookmark-thumbnail {
font-size: 0;
max-height: 100%;
min-width: 33%;
} }
.kg-image { .kg-bookmark-thumbnail img {
max-width: 100%; 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 */ /* End Ghost mandatory CSS */
/* Generic class to make things unselectable */ /* Generic class to make things unselectable */

View File

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

View File

@ -1,5 +1,5 @@
var remark_config = { 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', site_id: 'mindoverflow',
components: ['embed'], // optional param; which components to load. default to ["embed"] components: ['embed'], // optional param; which components to load. default to ["embed"]
// to load all components define components as ['embed', 'last-comments', 'counter'] // to load all components define components as ['embed', 'last-comments', 'counter']

View File

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

View File

@ -17,7 +17,7 @@
{{#foreach posts}} {{#foreach posts}}
<article class="{{post_class}}"> <article class="{{post_class}}">
<a class="post-card_main" href="{{url}}"> <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"> <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> <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> <h3>{{title}}</h3>
@ -27,7 +27,7 @@
</section> </section>
<footer class="post-card_footer"> <footer class="post-card_footer">
{{primary_author.name}} {{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> </footer>
</a> </a>
</article> </article>

View File

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

View File

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