diff options
| -rw-r--r-- | components/loop.tsx | 2 | ||||
| -rw-r--r-- | pages/_app.tsx | 2 | ||||
| -rw-r--r-- | pages/present.tsx | 7 | ||||
| -rw-r--r-- | styles/keyframes.css | 1 | ||||
| -rw-r--r-- | styles/presentation.css | 13 | ||||
| -rw-r--r-- | styles/util.css | 105 |
6 files changed, 128 insertions, 2 deletions
diff --git a/components/loop.tsx b/components/loop.tsx index beaf019..ec45c08 100644 --- a/components/loop.tsx +++ b/components/loop.tsx @@ -5,7 +5,7 @@ export default function Loop(props: { }) { return <div style={{ width: props.width }} className='loop'> <SlideKeyframe type='loop' /> - <div className='connector' /> + <div className='connector dispinbl' /> <SlideKeyframe type='loop' loopEnd /> </div>; } diff --git a/pages/_app.tsx b/pages/_app.tsx index 6f00f79..6592b09 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -4,6 +4,8 @@ import '../styles/colors.css'; import '../styles/globals.css'; import '../styles/keyframes.css'; import '../styles/paper.css'; +import '../styles/util.css'; +import '../styles/presentation.css'; export default function Blog({ Component, pageProps }) { return <> diff --git a/pages/present.tsx b/pages/present.tsx new file mode 100644 index 0000000..27e2f1a --- /dev/null +++ b/pages/present.tsx @@ -0,0 +1,7 @@ +export default function Present() { + return <div className="presentation posfix a0 h100vh"> + <div className="slideWrapper abscenterv posrel"> + <div className="slide"></div> + </div> + </div>; +} diff --git a/styles/keyframes.css b/styles/keyframes.css index 71586f1..67b99eb 100644 --- a/styles/keyframes.css +++ b/styles/keyframes.css @@ -1,5 +1,4 @@ .loop .connector { - display: inline-block; height: 16px; background-color: var(--gruble); opacity: .25; diff --git a/styles/presentation.css b/styles/presentation.css new file mode 100644 index 0000000..309b616 --- /dev/null +++ b/styles/presentation.css @@ -0,0 +1,13 @@ +.presentation { + background-color: #000; +} + +.slideWrapper { + margin: 0 auto; + max-width: calc(16 / 9 * 100vh); +} + +.slide { + padding-top: calc(9 / 16 * 100%); + background-color: #ff00ff; +} diff --git a/styles/util.css b/styles/util.css new file mode 100644 index 0000000..3589267 --- /dev/null +++ b/styles/util.css @@ -0,0 +1,105 @@ +.drop-1 { box-shadow: var(--drop-level-1); } +.drop-2 { box-shadow: var(--drop-level-2); } + +.pad-s { padding: var(--spacing-small); } +.pad-m { padding: var(--spacing-medium); } +.pad-l { padding: var(--spacing-large); } + +.round-l { border-radius: var(--loose-corner); } +.round-t { border-radius: var(--tight-corner); } + +.bg-100 { background-color: var(--gray-100); } +.bg-200 { background-color: var(--gray-200); } +.bg-300 { background-color: var(--gray-300); } +.bg-700 { background-color: var(--gray-700); } +.bg-800 { background-color: var(--gray-800); } +.bg-900 { background-color: var(--gray-900); } + +.fg-100 { color: var(--gray-100); } +.fg-900 { color: var(--gray-900); } + +.outcome.win { color: var(--disk-a-alt); } +.outcome.lose { color: var(--disk-b-alt); } +.outcome.draw { color: var(--gray-600); } + +.posabs { position: absolute; } +.posrel { position: relative; } +.posfix { position: fixed; } + +.t0 { top: 0; } +.b0 { bottom: 0; } +.r0 { right: 0; } +.l0 { left: 0; } + +.h0 { left: 0; right: 0; } +.v0 { top: 0; bottom: 0; } + +.a0 { top: 0; bottom: 0; left: 0; right: 0; } + +.dispnone { display: none; } +.dispinbl { display: inline-block; } +.dispbl { display: block; } + +.valigntop { vertical-align: top; } +.valignsup { vertical-align: super; } + +.cpointer { cursor: pointer; } +.cdefault { cursor: default; } + +.center { text-align: center; } + +.floatr { float: right; } +.floatl { float: left; } +.floatn { float: none; } + +.w1fr { width: 1fr; } + +.w100m2m { width: calc(100% - var(--spacing-medium)); } + +.w100vw { width: 100vw; } +.h100vh { height: 100vh; } + +.fullwidth { + width: 100%; + box-sizing: border-box; +} + +.subtile { + color: var(--gray-600); + font-style: italic; +} + +.nosel { + user-select: none; + font-weight: 600; +} + +.gg-l { grid-gap: var(--spacing-large) !important; } +.sidebyside { + display: grid; + grid-gap: var(--spacing-medium); + grid-auto-flow: column; +} + +.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.abscenterh { + left: 50%; + transform: translateX(-50%); +} + +.abscenterv { + top: 50%; + transform: translateY(-50%); +} + +.abscenter { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + |