source ⟩ hypertext ⟩ public ⟩ write ⟩ en.pug

extends ../../views/layout.pug

append presets
	- title = "DOTPAD 9000"
	- og.description = "Just write."

append head
	style.
		:root {
			--background: #0A0502; 
			--text: #F1EEEB;
			--accent: currentColor;
			
			--active: #F1EEEB;
			--seethrough: #9B8877;
			
			font-size: 1rem;
		}
		
		* {
			box-sizing: border-box;
		}
		
		body {
			width: 100vw;
			height: 100vh;
			display: grid;
			grid-template-columns: clamp(25ch, 25vw, 40ch) 1fr auto;
			grid-template-rows: 1fr auto;
			grid-template-areas: "top writebox ." "bottom writebox .";
			padding-inline: 10vw;
			padding-block: 10vh;
			font-family: var(--typewriter);
		}
		
		#top {
			grid-area: top
		}
		
		#bottom {
			grid-area: bottom
		}

		textarea {
			font-family: var(--typewriter);
			font-size: 1rem;
			max-inline-size: 80ch;
			overflow-x: auto;
			overflow-y: auto;
			border: none;
			outline: none;
			padding: 0;
			margin: 0;
			
			grid-area: writebox;
			
			background: transparent;
			color: inherit;
			resize: none;
			line-height: inherit;
			
			scrollbar-color: var(--seethrough) var(--background);
			scrollbar-width: thin;
		}
		
		textarea:is(:focus, :hover, :target) {
			border: none;
			box-shadow: none;
			outline: none;
		}
		
		textarea::placeholder {
			font-style: italic;
			color: var(--seethrough);
			opacity: 1;
		}

		pre {
			overflow-x: auto;
			white-space: normal;
		}
		
		.sidebar {
			color: var(--seethrough);
			
			display: flex;
			flex-direction: column;
			justify-items: start;
			gap: 1.6em;
		}
		
		
		a, button, label, summary {
			display: inline;
			text-decoration: none;
			background: none;
			color: inherit;
			margin: 0;
			padding: 0;
			border: none;
			font-weight: normal;
			text-align: start;
			font-size: 1em;
		}
		
		:is(a, button, label, summary):is(:hover, :focus) {
			color: var(--background);
			background-color: var(--active);
		}
		
		.sidebar > * {
			padding: 0;
			margin: 0;
			border: none;
			font-weight: normal;
			text-align: start;
			font-size: 1em;
			inline-size: fit-content;
		}
		
		.sidebar > h1 {
			color: var(--text);
		}
		
		details {
			border: none;
			font-weight: normal;
			padding: 0;
			margin: 0;
		}
		
		details > :not(summary) {
			padding: 0;
			margin: 0;
		}
		
		details[open] summary:not(:hover, :focus) {
			color: var(--background);
			background-color: var(--seethrough);
		}
		
		@media only screen and (max-width: 600px) {
			body {
				padding-inline: 1ch;
				padding-block: 1ch;
				
				grid-template-columns: 1fr;
				grid-template-rows: 1fr auto auto;
				
				grid-template-areas: "writebox" "bottom" "top";
			}
			
			#top, #bottom {
				text-align: center;
				flex-direction: row;
				gap: 0;
				justify-content: space-between;
				align-items: center;
				padding-inline: 1ch;
				padding-block: 0.5ch;
			}
			
			#bottom {
				justify-content: center;
			}
			
			.sidebar > h1 {
				color: var(--seethrough);
			}
		}

block body
	#top.sidebar
		h1 DOTPAD 9000
		a(href="/") « Home
	textarea#writebox(spellcheck="false", placeholder=`Just start writing.\nSchrijf gewoon.`)
	#bottom.sidebar
		#stats 0 W · 0 C
	script.
		const ein = document.querySelector("textarea");
		const statbar = document.querySelector("#stats");
		
		function update() {
		statbar.innerText = `${ein.value.split(/\s+/g).filter(n => n).length} W · ${ein.value.length} C`;
		}
		
		ein.addEventListener("input", update);
		update();