aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--components/loop.tsx2
-rw-r--r--pages/_app.tsx2
-rw-r--r--pages/present.tsx7
-rw-r--r--styles/keyframes.css1
-rw-r--r--styles/presentation.css13
-rw-r--r--styles/util.css105
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%);
+}
+