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

Fix wrong aspect ratio in pages

Browse Source 
Pages have no columns, so we had to account for that.
This commit is contained in:
Bea 2021-03-17 16:54:14 +01:00
parent 63be0bf650
commit fbf125bf20
2 changed files with 99 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
assets/css/screen.css
View File

@ -701,7 +701,6 @@ instead of pages ".mind-page*".
img.mind-post_feature-image {
width: 100%;
object-fit: cover;
max-height: 360px; /* 21:9 aspect ratio */
/*
TODO: see .mind-post_content-header.
@ -710,6 +709,35 @@ img.mind-post_feature-image {
*/
}
.mind-post_main img.mind-post_feature-image {
/* 21:9 aspect ratio
the image is 840 pixels wide, because
the whole page content is 1260 pixels wide.
the two sidebars are 210 pixels each, so
the image is 840 pixels wide.
the image has to be 360 pixels high to have an accurate 21:9 aspect ratio.
THIS ONLY APPLIES TO POSTS, since pages have no sidebars.
*/
max-height: 360px;
}
.mind-page_main img.mind-post_feature-image {
/* 21:9 aspect ratio
the whole page content is 1260 pixels wide.
there are no sidebars.
so, the image is 1260px wide too.
the image has to be 540 pixels high to have an accurate 21:9 aspect ratio.
THIS ONLY APPLIES TO POSTS, since pages have no sidebars.
*/
max-height: 540px;
}
.mind-post_content code {
font-family: monospace;
background-color: rgb(20, 20, 20);
@ -1213,8 +1241,44 @@ Media queries are used to make the website responsive and cool on mobile.
font-size: 17px;
}
img.mind-post_feature-image {
max-height: 29vw; /* 21:9 aspect ratio */
.mind-post_main img.mind-post_feature-image {
/* 21:9 aspect ratio
the whole body is 100% wide.
the "content" (so excluding the sidebars) is about 67% large.
the image is also 67% large, since it takes 100% of the content width.
67 stands for 21,
x stands for 9.
x = 29% of the view width.
to be a perfect 21:9 ratio, the image has to be 29vw high.
THIS ONLY APPLIES TO POSTS, since pages do not have sidebars.
*/
max-height: 29vw;
}
.mind-page_main img.mind-post_feature-image {
/* 21:9 aspect ratio
the whole body is 100% wide.
there are no sidebars.
the image has to be 21:9, so:
100 stands for 21
x stands for 9
x = 42.8%.
the image has to be 42.8% wide to be 21:9.
THIS ONLY APPLIES TO PAGES, since posts have sidebars.
*/
max-height: 42.857vw;
}
.kg-gallery-image {
@ -1293,8 +1357,23 @@ Media queries are used to make the website responsive and cool on mobile.
padding: 0 20px;
}
img.mind-post_feature-image {
max-height: 42.857vw; /* 21:9 aspect ratio */
.mind-post_main img.mind-post_feature-image {
/* 21:9 aspect ratio
the body is 100% large.
there are no sidebars.
the image has to be 21:9, so:
100 stands for 21
x stands for 9
x = 42.8%.
the image has to be 42.8% wide to be 21:9.
*/
max-height: 42.857vw;
}
.kg-gallery-image {

28
page.hbs
View File

@ -13,22 +13,24 @@
<div class="mind-post_central-column">
{{#post}}
<div class="mind-post_content"> {{!-- Keeping this div to have the same structure as the post.hbs, even though not necessary --}}
<div class="mind-post_content-header">
<div class="mind-page_main">
<div class="mind-post_content-header">
{{#if feature_image}}
<img class="mind-post_feature-image" alt="{{title}}"
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 feature_image}}
<img class="mind-post_feature-image" alt="{{title}}"
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}}
{{/if}}
</div>
{{content}}
</div>
{{content}}
</div>
{{/post}}
</div>