mirror of
https://github.com/TomHodson/tomhodson.github.com.git
synced 2025-06-26 10:01:18 +02:00
updacte css
This commit is contained in:
Tom
parent
636d27356e
commit
6c2559e3e6
@ -27,13 +27,9 @@ crossorigin=""></script>
|
||||
}
|
||||
</style>
|
||||
|
||||
<figure class="blogroll">
|
||||
<div id="map" style="height:90cqw; width:90cqw"></div>
|
||||
<figcaption>
|
||||
<br>
|
||||
The black and white map tiles are from <a href="https://stamen.com/">Stamen design</a>, essentially a really nice style sheet on top of © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributor data. The rest are OS Maps from the <a href="http://maps.nls.uk/projects/subscription-api/">National Library of Scotland</a>. The viewer is <a href="https://leafletjs.com/">leaflet.js</a>. I used CSS container queries to make this a nice square shape.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<div id="map" style="height:400px; width:100%; margin-top: 1em;"></div>
|
||||
|
||||
These black and white map tiles are from <a href="https://stamen.com/">Stamen design</a>, essentially a really nice style sheet on top of © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributor data. The rest are OS Maps from the <a href="http://maps.nls.uk/projects/subscription-api/">National Library of Scotland</a>. The viewer is <a href="https://leafletjs.com/">leaflet.js</a>.
|
||||
|
||||
<script>
|
||||
let Stamen_TonerBackground = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}{r}.{ext}', {
|
||||
@ -125,6 +121,8 @@ A blender render of what it might look like based on a 3D scan of my flat. This
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
Given how long those took to cut, I'm thinking that I'll split the design into multiple panels so I don't have to babysit the laser cutter for 24 hours.
|
||||
|
||||
<figure>
|
||||
<model-viewer src="/assets/blog/maps/bigmap.glb" ar ar-modes="scene-viewer webxr quick-look" camera-controls shadow-intensity="1" exposure="1.08" camera-orbit="30.45deg 63.68deg 27.8m" field-of-view="22.88deg" auto-rotate>
|
||||
</model-viewer>
|
||||
@ -133,8 +131,6 @@ Here's a 3D version. I got the scan with the lidar scanner on an ipad.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
Given how long those took to cut, I'm thinking that I'll split the design into multiple panels so I don't have to babysit the laser cutter for 24 hours.
|
||||
|
||||
Let's see how that pans out next time!
|
||||
|
||||
<!-- Ideas:
|
||||
|
||||
@ -4,10 +4,8 @@ h2.blogroll-title {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//clamp the size of the images on the blog roll
|
||||
figure.blogroll > img, figure.blogroll > svg {
|
||||
max-width: 100% !important;
|
||||
margin-bottom: 0;
|
||||
border-radius: 1em;
|
||||
figure.blogroll {
|
||||
img, svg {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -68,14 +68,13 @@ main {
|
||||
}
|
||||
}
|
||||
|
||||
/* increase line-height for everything except headings */
|
||||
main :not(:is(h1,h2,h3,h4,h5,h6)) {
|
||||
line-height: 1.3;
|
||||
p, figcaption {
|
||||
font-size: 1em;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
/* increase line-height for everything except headings */
|
||||
main :is(p,h1,h2,h3,h4,h5,h6) {
|
||||
margin-block-end: 0.0em;
|
||||
margin-block-end: 0.2em;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -85,41 +84,35 @@ a {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
header a {
|
||||
header a, nav a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
div.highlight {
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// .figure {
|
||||
// max-width: 400px;
|
||||
// display: block;
|
||||
// margin: 0 auto;
|
||||
// margin-top: 1em;
|
||||
// margin-bottom: 1em;
|
||||
// }
|
||||
p {
|
||||
margin-top: 0.7em;
|
||||
margin-bottom: 0.7em;
|
||||
padding-right: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
figure {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
container: fig / inline-size;
|
||||
max-width: 450px !important;
|
||||
width: 100%;
|
||||
padding-bottom: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
figure > img, figure > svg, figure > canvas {
|
||||
max-width: 90% !important;
|
||||
margin-bottom: 2em;
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media
|
||||
|
||||
@ -7,13 +7,6 @@ nav {
|
||||
color: darkslategray;
|
||||
}
|
||||
|
||||
|
||||
nav.page-table-of-contents {
|
||||
white-space: nowrap;
|
||||
li li {padding-right: 2em;}
|
||||
}
|
||||
|
||||
|
||||
@media
|
||||
only screen and (max-width: $horizontal_breakpoint),
|
||||
only screen and (max-height: $vertical_breakpoint)
|
||||
|
||||
@ -1,8 +1,15 @@
|
||||
article.project {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
|
||||
h2 {margin-top: 0;}
|
||||
|
||||
img {
|
||||
max-height: 7em;
|
||||
width: unset;
|
||||
aspect-ratio: 1 / 1;
|
||||
margin-right: 1em;
|
||||
border-radius: 2em;
|
||||
@ -13,25 +20,25 @@ article.project {
|
||||
}
|
||||
}
|
||||
|
||||
@media
|
||||
only screen and (max-width: $horizontal_breakpoint),
|
||||
only screen and (max-height: $vertical_breakpoint)
|
||||
{
|
||||
main {
|
||||
padding-top: 10px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin: 0px;
|
||||
}
|
||||
// @media
|
||||
// only screen and (max-width: $horizontal_breakpoint),
|
||||
// only screen and (max-height: $vertical_breakpoint)
|
||||
// {
|
||||
// main {
|
||||
// padding-top: 10px;
|
||||
// padding-left: 20px;
|
||||
// padding-right: 20px;
|
||||
// margin: 0px;
|
||||
// }
|
||||
|
||||
article {
|
||||
margin-left: 0px;
|
||||
}
|
||||
// article {
|
||||
// margin-left: 0px;
|
||||
// }
|
||||
|
||||
h1 {font-size: 1.5em !important;}
|
||||
.MathJax {
|
||||
font-size: 0.8em !important;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
// h1 {font-size: 1.5em !important;}
|
||||
// .MathJax {
|
||||
// font-size: 0.8em !important;
|
||||
// overflow-x: auto;
|
||||
// overflow-y: hidden;
|
||||
// }
|
||||
// }
|
||||
@ -7,7 +7,7 @@ figure {
|
||||
margin-inline-start: 0em;
|
||||
margin-inline-end: 0em;
|
||||
|
||||
max-width: 900px;
|
||||
max-width: 900px !important;
|
||||
|
||||
// border-bottom: solid #222 1px;
|
||||
padding-bottom: 1em;
|
||||
@ -27,19 +27,29 @@ figcaption {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
// For the table of contents, should probably put this in a container
|
||||
|
||||
//For the animation that plays in the nav as you scroll
|
||||
nav.page-table-of-contents a {
|
||||
transition: all 200ms ease-in-out;
|
||||
color: #000;
|
||||
font-weight:normal;
|
||||
nav.page-table-of-contents > ul > li:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav.page-table-of-contents li.active > a {
|
||||
color: #000!important;
|
||||
font-weight:bold;
|
||||
}
|
||||
//For the animation that plays in the nav as you scroll
|
||||
nav.page-table-of-contents {
|
||||
li li {font-size: 0.9em}
|
||||
|
||||
ul {
|
||||
padding-inline-start: 6px;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: all 200ms ease-in-out;
|
||||
color: #000;
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
li.active > a {
|
||||
color: #000!important;
|
||||
font-weight:bold;
|
||||
}
|
||||
}
|
||||
|
||||
// modify the spacing of the various levels
|
||||
li {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 380 KiB After Width: | Height: | Size: 366 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 431 KiB After Width: | Height: | Size: 312 KiB |
@ -7,9 +7,7 @@ redirect_from:
|
||||
{% for post in site.projects %}
|
||||
<article class="h-entry project">
|
||||
{% unless post.hide_image %}
|
||||
<figure class="blogroll">
|
||||
<img class="u-photo" src = "{{post.image}}" alt="{{post.alt}}">
|
||||
</figure>
|
||||
{% endunless %}
|
||||
|
||||
<section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user