tom/personal_site
1
0
Fork 0
mirror of https://github.com/TomHodson/tomhodson.github.com.git synced 2025-06-26 10:01:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

tweak the grid

Browse Source
This commit is contained in:
Tom 2024-03-15 08:40:42 +00:00
parent d964baa546
commit 11262d2f03
3 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_posts/2024-03-04-book-shelf.md
View File

@ -37,7 +37,8 @@ Playing around with different designs, I went for the middle ground of having so
<section class="image-grid-4x4">
<img src = "{{page.assets}}/img/laser_cutting.jpeg">
<img src = "{{page.assets}}/img/hot_off_the_press.jpeg">
<img src = "{{page.assets}}/img/in_place.jpeg">
<img src = "{{page.assets}}/img/in_place.jpeg" style=" grid-column: 1 / 3;
grid-row: 2;">
</section>
<figcaption>
The final product, I'm not fully happy with the proportions, it's a little too big relative to the books in real life. I created the books from that polycam scan so I must have gotten the scale wrong somehow.

25
_sass/base.scss
View File

@ -136,10 +136,9 @@ figure.centered {
section.image-grid-4x4 {
aspect-ratio: 1 / 1;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
gap: 0 0;
border: solid 1px var(--theme-subtle-outline);
grid-template-columns: auto auto;
grid-template-rows: auto auto;
gap: 2px;
margin-bottom: 1em;
place-items: stretch stretch;
@ -152,24 +151,6 @@ section.image-grid-4x4 {
}
}
// For fallback images inside custom outline-model-viewer elements
.outline-model-poster {
width: 100%;
height: 100%;
}
outline-model-viewer {
width: 100%;
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
border: var(--theme-subtle-outline) 1px solid;
border-radius: 10px;
margin-top: 1em;
margin-bottom: 1em;
}
// If the browser doesn't support web components, hide anything with has-wc class
body.has-wc .no-wc {
display: none;

19
_sass/model_viewer.scss
View File

@ -1,3 +1,21 @@
// For fallback images inside custom outline-model-viewer elements
.outline-model-poster {
width: 100%;
height: 100%;
}
outline-model-viewer {
width: 100%;
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
border: var(--theme-subtle-outline) 1px solid;
border-radius: 10px;
margin-top: 1em;
margin-bottom: 1em;
}
.Hotspot {
background: #fff;
border-radius: 32px;
@ -62,4 +80,5 @@
transform: translateY(calc(-50% + 4px));
transition: transform 0.3s, opacity 0.3s;
}