Skip to content

Instantly share code, notes, and snippets.

View ostermanj's full-sized avatar

John Osterman ostermanj

  • US Holocaust Memorial Museum
  • Washington DC
View GitHub Profile
<img
srcset="images/my-cat-xs.jpg 250w, image/my-cat-s.jpg 500w, image/my-cat-m.jpg 1000w, image/my-cat-l.jpg 1000w, image/my-cat-xl.jpg 1500w"
sizes="(min-width: 1300px) 1300px, (min-width: 1024px) 69vw, (min-width: 700px) 85vw, 50vw"
src="image/my-cats-s.jpg"
/>
@ostermanj
ostermanj / index.html
Last active January 12, 2023 15:22
Example html for container query
<article class="tl-all-wrapper" title="Assassination of Archduke Franz Ferdinand">
<a class="tl-all-link" href="/content/en/timeline-event/holocaust/before-1933/assassination-of-archduke-franz-ferdinand">
<div class="tl-all-info-cont tl-event-dot">
<header>
<p class="tl-all-event-date">
June 28, 1914
</p>
<p class="tl-all-event-title">
<strong>Assassination of Archduke Franz Ferdinand</strong>
</p>
@ostermanj
ostermanj / styles.css
Created January 12, 2023 15:16
Container query
.tl-all-event-desc {
max-width: 400px;
font-size: 1em;
display: none;
}
@container article-item (min-width: 470px) {
.tl-all-event-desc {
display: block;
}
}
@ostermanj
ostermanj / styles.css
Created January 12, 2023 15:15
Declaring a container
.tl-all-wrapper {
container: article-item / inline-size;
}
@ostermanj
ostermanj / styles.css
Created January 12, 2023 15:11
Media query example
.tl-all-event-desc {
max-width: 400px;
font-size: 1em;
display: none;
}
@media screen and (min-width: 500px) {
.tl-all-event-desc {
display: block;
}
}
@ostermanj
ostermanj / +page.server.ts
Created August 31, 2022 00:12
Importing private environment variables into SvelteKit
import { initContentful, getPageContent, getEntry } from '$utils/contentful';
import { C_SPACE, C_TOKEN } from "$env/static/private";
initContentful(C_SPACE, C_TOKEN);
[...]
@ostermanj
ostermanj / mbhelper-example.js
Created August 15, 2022 13:25
mbHelper addSourceAndLayers() example
mbHelper.addSourceAndLayers.call(map,
{ // source
"type": "vector",
"url": "mapbox://mapbox.us_census_states_2015",
"name": "states"
}, [ // layers
{ // layer one
"id": "states-join",
"type": "fill",
"source-layer": 'states',