WebDev
/
mind-overflow-website-ghost-theme
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Implement more image resizing, fix responsiveness 

- Two new image sizes have been added: xl and xxl.
- Image resizing has been implemented in featured images.
- Some elements were not responsive, such as the link preview and code block.
This commit is contained in:
Bea 2020-11-06 17:35:02 +01:00
parent dfb76da486
commit e899839211
6 changed files with 60 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/css/screen.css
View File

@ -135,11 +135,11 @@ Used to define how every page is displayed.
*/
main {
min-height: calc(100vh - 400px);
display: block;
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-height: calc(100vh - 400px); /* To avoid having the footer appearing in the middle of the page */
}
.mind-content_main {
@ -739,6 +739,7 @@ img.mind-post_feature-image {
font-size: 18px;
color: rgb(200, 200, 200);
box-sizing: border-box;
min-height: calc(100vh - 400px); /* To avoid having the div finish in the middle of the page, leaving an empty part */
}
.mind-post_content h1, .mind-post_content h2, .mind-post_content h3, .mind-post_content h4, .mind-post_content h5, .mind-post_content h6 {
@ -1126,6 +1127,7 @@ div.mind-policy-popup {
}
}
/* BEGIN RESPONSIVE MEDIA QUERIES */
@media only screen and (max-width: 1300px) {
h1 {
@ -1315,6 +1317,29 @@ div.mind-policy-popup {
font-size: 15px;
}
.mind-post_content pre,
.mind-post_content code,
.kg-card-hascaption figcaption,
.kg-bookmark-description {
font-size: 12px;
}
.kg-bookmark-title {
font-size: 13px;
}
.kg-bookmark-publisher {
font-size: 10px;
}
.kg-bookmark-content {
padding: 10px 10px 0;
}
.kg-bookmark-metadata {
margin-bottom: 10px;
}
.mind-global-navbar_primary img {
margin-left: -35px;
width: 25px;
@ -1363,6 +1388,11 @@ div.mind-policy-popup {
font-size: 14px;
}
.mind-post_content pre, .mind-post_content code {
font-size: 11px;
}
.mind-site-footer_main {
font-size: 16px;
}

6
package.json
View File

@ -30,6 +30,12 @@
},
"l": {
"width": 1200
},
"xl": {
"width": 1600
},
"xxl": {
"width": 2000
}
}
}

11
page.hbs
View File

@ -16,7 +16,16 @@
<div class="mind-post_content-header">
{{#if feature_image}}
<img class="mind-post_feature-image" src="{{img_url feature_image size="l"}}" alt="Feature Image"/>
<img class="mind-post_feature-image" alt="Feature Image"
srcset="
{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1200w,
{{img_url feature_image size="xl"}} 1600w,
{{img_url feature_image size="xxl"}} 2000w"
src="{{img_url feature_image size="l"}}"
/>
{{/if}}
</div>
{{content}}

5
partials/post-card-big.hbs
View File

@ -2,7 +2,10 @@
<a class="mind-post-card-big_main" href="{{url}}">
{{#if feature_image}}
<img class="mind-post-card-big_feature-image" src="{{img_url feature_image size="m"}}" alt="Feature Image"/>
<img class="mind-post-card-big_feature-image" src="{{img_url feature_image size="m"}}" alt="Feature Image"
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w"
/>
{{/if}}
<header class="mind-post-card-big_header">
<p class="mind-post-card-big_meta"><span class="mind-post-card-big_tag">{{primary_tag.name}}</span>

0
partials/posts-card-small.hbs → partials/post-card-small.hbs
View File

11
post.hbs
View File

@ -27,7 +27,14 @@
<div class="mind-post_content-header">
{{#if feature_image}}
<img class="mind-post_feature-image" src="{{img_url feature_image size="l"}}"
<img class="mind-post_feature-image"
srcset="
{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1200w,
{{img_url feature_image size="xl"}} 1600w,
{{img_url feature_image size="xxl"}} 2000w"
src="{{img_url feature_image size="l"}}"
alt="Feature Image"/>
{{/if}}
</div>
@ -40,7 +47,7 @@
{{/post}}
<aside class="mind-post_sidebar unselectable">
<div class="mind-post_sidebar-content">
{{> "posts-card-small"}}
{{> "post-card-small"}}
</div>
</aside>
</div>