present screen working-ish

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%);
+}
+