css,ori-templates: margin-inline on body > * instead of body to allow figures to grow
This commit is contained in:
parent
7d5a0dbe50
commit
e1455783c8
130
css/style.css
130
css/style.css
|
|
@ -1,68 +1,90 @@
|
|||
:root {
|
||||
/* size variables */
|
||||
/* more pronounced, perfect fifth on narrow screens */
|
||||
/* @link https://utopia.fyi/type/calculator?c=360,16,1.5,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
|
||||
:root {
|
||||
/* size variables */
|
||||
/* more pronounced, perfect fifth on narrow screens */
|
||||
/* @link https://utopia.fyi/type/calculator?c=360,16,1.5,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
|
||||
|
||||
--step--2: clamp(0.4444rem, 0.299rem + 0.6465vw, 0.8rem);
|
||||
--step--1: clamp(0.6667rem, 0.5303rem + 0.6061vw, 1rem);
|
||||
--step-0: clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);
|
||||
--step-1: clamp(1.5rem, 1.4744rem + 0.1136vw, 1.5625rem);
|
||||
--step-2: clamp(1.9531rem, 2.3714rem + -0.5398vw, 2.25rem);
|
||||
--step-3: clamp(2.4414rem, 3.7569rem + -1.6974vw, 3.375rem);
|
||||
--step-4: clamp(3.0518rem, 5.8851rem + -3.6559vw, 5.0625rem);
|
||||
--step-5: clamp(3.8147rem, 9.1397rem + -6.871vw, 7.5938rem);
|
||||
--step--2: clamp(0.4444rem, 0.299rem + 0.6465vw, 0.8rem);
|
||||
--step--1: clamp(0.6667rem, 0.5303rem + 0.6061vw, 1rem);
|
||||
--step-0: clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);
|
||||
--step-1: clamp(1.5rem, 1.4744rem + 0.1136vw, 1.5625rem);
|
||||
--step-2: clamp(1.9531rem, 2.3714rem + -0.5398vw, 2.25rem);
|
||||
--step-3: clamp(2.4414rem, 3.7569rem + -1.6974vw, 3.375rem);
|
||||
--step-4: clamp(3.0518rem, 5.8851rem + -3.6559vw, 5.0625rem);
|
||||
--step-5: clamp(3.8147rem, 9.1397rem + -6.871vw, 7.5938rem);
|
||||
|
||||
/* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
|
||||
/* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
|
||||
|
||||
--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
|
||||
--space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
|
||||
--space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
|
||||
--space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
|
||||
--space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
|
||||
--space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
|
||||
--space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
|
||||
--space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
|
||||
--space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
|
||||
--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
|
||||
--space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
|
||||
--space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
|
||||
--space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
|
||||
--space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
|
||||
--space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
|
||||
--space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
|
||||
--space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
|
||||
--space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
|
||||
|
||||
/* One-up pairs */
|
||||
--space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
|
||||
--space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
|
||||
--space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
|
||||
--space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
|
||||
--space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
|
||||
--space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
|
||||
--space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
|
||||
--space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
|
||||
/* One-up pairs */
|
||||
--space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
|
||||
--space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
|
||||
--space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
|
||||
--space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
|
||||
--space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
|
||||
--space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
|
||||
--space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
|
||||
--space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
|
||||
|
||||
/* Custom pairs */
|
||||
--space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
|
||||
/* Custom pairs */
|
||||
--space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
|
||||
|
||||
|
||||
/*COLORS*/
|
||||
--blue: #d7f0e1;
|
||||
--darkblue: #2c6a88;
|
||||
--oc-gray-3: #dee2e6;
|
||||
--oc-gray-5: #adb5bd;
|
||||
--oc-gray-6: #868e96;
|
||||
--oc-gray-7: #495057;
|
||||
--oc-gray-8: #343a40;
|
||||
--oc-cyan-6: #15aabf;
|
||||
--oc-cyan-9: #0b7285;
|
||||
--oc-blue-1: #d0ebff;
|
||||
--oc-blue-3: #74c0fc;
|
||||
--oc-blue-4: #4dabf7;
|
||||
--oc-blue-7: #1c7ed6;
|
||||
--oc-blue-9: #1864ab;
|
||||
--oc-grape-9: #862e9c;
|
||||
--oc-violet-4: #9775fa;
|
||||
--oc-violet-9: #5f3dc4;
|
||||
/*COLORS*/
|
||||
--blue: #d7f0e1;
|
||||
--darkblue: #2c6a88;
|
||||
--oc-gray-3: #dee2e6;
|
||||
--oc-gray-5: #adb5bd;
|
||||
--oc-gray-6: #868e96;
|
||||
--oc-gray-7: #495057;
|
||||
--oc-gray-8: #343a40;
|
||||
--oc-cyan-6: #15aabf;
|
||||
--oc-cyan-9: #0b7285;
|
||||
--oc-blue-1: #d0ebff;
|
||||
--oc-blue-3: #74c0fc;
|
||||
--oc-blue-4: #4dabf7;
|
||||
--oc-blue-7: #1c7ed6;
|
||||
--oc-blue-9: #1864ab;
|
||||
--oc-grape-9: #862e9c;
|
||||
--oc-violet-4: #9775fa;
|
||||
--oc-violet-9: #5f3dc4;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
body {
|
||||
font-family: "sans-serif";
|
||||
margin: 0 auto;
|
||||
max-width: 66ch;
|
||||
& > :not(.wider) {
|
||||
max-width: 38rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
& > .wider {
|
||||
max-width: min(55rem, 100%);
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
|
||||
figure img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin-inline: auto;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
trl-group {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@layer translations {
|
||||
body > trl-selector:first-child {display: none;} /* was adding a grid row! */
|
||||
trl-selector {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
title: page.title
|
||||
_body: Tree.indent`
|
||||
<h1>${page.title}</h1>
|
||||
<span>${page.fnd.addr} ${page.fnd.tags || ''}</span>
|
||||
<p><span>${page.fnd.addr} ${page.fnd.tags || ''}</span></p>
|
||||
${page._body}
|
||||
<a href="/">↖index</a>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@
|
|||
---
|
||||
<article>
|
||||
<a href=${key}><h1>${value.title}</h1></a>
|
||||
<span>${value.fnd.addr} ${value.fnd.tags || ''}</span>
|
||||
<p><span>${value.fnd.addr} ${value.fnd.tags || ''}</span></p>
|
||||
${value.summary || ""}
|
||||
</article>
|
||||
|
|
|
|||
Loading…
Reference in New Issue