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:
parent
dfb76da486
commit
e899839211
@ -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;
|
||||
}
|
||||
|
@ -30,6 +30,12 @@
|
||||
},
|
||||
"l": {
|
||||
"width": 1200
|
||||
},
|
||||
"xl": {
|
||||
"width": 1600
|
||||
},
|
||||
"xxl": {
|
||||
"width": 2000
|
||||
}
|
||||
}
|
||||
}
|
||||
|
11
page.hbs
11
page.hbs
@ -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}}
|
||||
|
@ -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>
|
||||
|
11
post.hbs
11
post.hbs
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user