Published
Edited
Aug 12, 2021
13 stars
<style>
:root {
--viewport-height: 100vh;
}
.g-section {
height: var(--viewport-height);
}
.g-header {
height: calc(var(--viewport-height) * 0.05);
}
</style>
{
const windowWidth = document.documentElement.clientWidth;
const windowHeight = document.documentElement.clientHeight;
if (windowWidth < 740) {
document.documentElement.style.setProperty('--viewport-height', `${windowHeight}px`);
}
}
<style>
:root {
--font-serif: "Times New Roman", Times, serif;
--font-sans: Arial, Helvetica, sans-serif;
--font-size-small: 13px/14px;
--font-size-medium: 18px/25px;
--font-size-large: 21px/25px;
--type-caption: var(--font-size-small) var(--font-sans);
--type-body: var(--font-size-medium) var(--font-serif);
--type-subhed: var(--font-size-large) var(--font-serif);
--text-width: 600px;
@media (min-width: 740px) {
--font-size-small: 14px/15px;
--font-size-medium: 21px/30px;
--font-size-large: 27px/30px;
}
}
.g-caption,
.g-credit {
font: var(--type-caption);
}
.g-body {
font: var(--type-body);
}
.g-asset,
.g-body {
width: 100%;
max-width: var(--text-width);
}
img {
width: 100%;
}
</style>
<style>
:root {
--color-dark-bg: rgb(10, 10, 10);
--color-dark-text: rgb(230, 230, 230);
--color-light-bg: white;
--color-light-text: #333;
--color-bg: var(--color-light-bg);
--color-text: var(--color-light-text);
}
body {
background-color: var(--color-bg);
color: var(--color-text);
}
p, h2, button {
color: var(--color-text);
}
button {
background-color: var(--color-bg);
}
</style>
viewof colorMode = Inputs.button("Switch color mode", {value: 'light', reduce: (value) => {
return value === 'dark' ? 'light' : 'dark';
}})
{
if (colorMode === 'dark') {
document.documentElement.style.setProperty('--color-bg', 'var(--color-dark-bg)');
document.documentElement.style.setProperty('--color-text', 'var(--color-dark-text)');
} else {
document.documentElement.style.setProperty('--color-bg', 'var(--color-light-bg)');
document.documentElement.style.setProperty('--color-text', 'var(--color-light-text)');
};
}
images = [
{
asset: 'https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/slideshows/is_my_cat_normal_slideshow/1800x1200_is_my_cat_normal_slideshow.jpg',
column_desktop: '5/13',
column_mobile: '1/9',
},
{
asset: 'https://images.theconversation.com/files/350865/original/file-20200803-24-50u91u.jpg',
column_desktop: '2/7',
column_mobile: '1/4',
},
{
asset: 'https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/scoop_on_cat_poop_other/1800x1200_scoop_on_cat_poop_other.jpg',
column_desktop: '8/13',
column_mobile: '4/9',
},
{
asset: 'https://www.humanesociety.org/sites/default/files/styles/1240x698/public/2018/08/cat-home-441939.jpg',
column_desktop: '5/11',
column_mobile: '3/8',
}
]
markup = images.map((image, i) => {
return `<div class="g-asset" style="--column-desktop: ${image.column_desktop}; --column-mobile: ${image.column_mobile};">
<img src="${image.asset}">
</div>`
});
<style>
.g-gallery {
--padding: 10px;
box-sizing: border-box;
display: grid;
grid-gap: var(--padding);
grid-template-rows: auto;
grid-template-columns: repeat(8, 1fr);
width: 100%;
padding: var(--padding);
}
.g-asset {
grid-column: var(--column-mobile);
}
@media (min-width: 740px) {
.g-gallery {
--padding: 20px;
grid-template-columns: repeat(12, 1fr);
}
.g-asset {
grid-column: var(--column-desktop);
}
}
</style>
html `<div class="g-gallery">${markup}</div>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
