docs/_static/site.css in utopia-2.13.4 vs docs/_static/site.css in utopia-2.14.0

@@ -26,180 +26,166 @@
 	pre {
 		tab-size: 4;
 	}
 }
 
-body {
-	padding: 0;
-	margin: 0;
+html {
+	--main-color: #111;
+	--main-background-color: #fff;
 	
-	background-color: #fafafa;
+	--header-color: #bed1f0;
+	--underlay-color: #ddd;
+	
+	--accent-color: #1a73e8;
+	--accent-hover-color: #33a3ff;
+	
+	--overlay-color: rgba(255, 255, 255, 0.9);
+	--underlay-color: rgba(0, 0, 0, 0.2);
 }
 
-body > header {
-	margin: 1rem 0 1rem 0;
+@media (prefers-color-scheme: dark) {
+	html {
+		--main-color: #e1e1e1;
+		--main-background-color: #111;
+		
+		--header-color: #222;
+		--overlay-color: #333;
+		
+		--accent-color: #01b9ff;
+		--accent-hover-color: #80dcff;
+		
+		--overlay-color: rgba(0, 0, 0, 0.8);
+		--underlay-color: rgba(255, 255, 255, 0.9);
+		
+		background-color: black;
+	}
+}
+
+body {
+	margin: 0 0;
+	padding: 0;
 	
-	background-color: white;
+	/* Force the element to contain margins */
+	display: flow-root;
+	min-height: 100vh;
 	
-	background-image: url(utopia-background.svg);
-	
-	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+	color: var(--main-color);
+	background-color: var(--main-background-color);
 }
 
-body > header img {
-	display: block;
-	margin: auto;
-	height: 4rem;
+body.show {
+	max-width: 48rem;
+	margin: 0 auto;
 }
 
-p, ul, ol {
-	color: #555;
+h1, h2, h3, h4, h5, h6, p, ul, dl, ol {
+	margin: 1rem;
 }
 
-p strong {
-	color: #222;
+nav {
+	margin: 1rem;
+	font-size: 0.8rem;
+	color: #aaa;
 }
 
-h1, h2, h3, h4, h5, h6 {
-	margin: 2rem 1rem 1rem 1rem;
-	color: #4E8DD9;
+li {
+	margin: 0.2rem;
 }
 
+ul {
+	margin-bottom: 1rem;
+}
+
+li > ul, li > ol {
+	margin: 0;
+}
+
 h1 {
 	margin-bottom: 4rem;
+	color: #4E8DD9;
 }
 
 h2 {
 	margin-top: 6rem;
 }
 
+h3 {
+	margin-top: 4rem;
+}
+
+h4, h5, h6 {
+	margin-top: 2rem;
+}
+
 img {
 	border: none;
 }
 
 a {
-	color: #33a;
+	color: var(--accent-color);
+	text-decoration: none;
 }
 
 a:hover {
-	color: #55c;
+	color: var(--accent-hover-color);
 }
 
-p, ul, ol, dl, h3 {
-	margin: 2rem;
-}
-
-li {
-	margin: 0.2rem;
-}
-
-li > ul, li > ol {
-	margin: 0;
-}
-
 pre {
 	overflow: auto;
-	
 	padding: 1rem 2rem;
-	font-size: 0.8rem;
-	
-	border-top: 1px solid #ccc;
-	border-bottom: 1px solid #ccc;
-	
-	background-color: #eee;
 }
 
-h3 {
-	border-bottom: 1px solid #ccf;
-}
-
-ul {
-	margin-bottom: 1rem;
-}
-
-h2, h3, h4, h5, h6 {
-	font-weight: normal;
-}
-
-body.front h1 {
-	font-weight: normal;
-	font-size: 300%;
-	color: #F89432;
-
-	text-align: center;
-}
-
 footer {
 	text-align: right;
-	margin: 2rem;
 	font-size: 0.65rem;
-	color: #aaa;
+	
+	margin: 1rem;
 }
 
-nav {
-	position: absolute;
-	margin: 2.5rem;
-	font-size: 0.8rem;
-	color: #aaa;
-}
+/* Editor */
 
-section.features {
+.editor form {
+	position: absolute;
+	
 	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-around;
+	flex-direction: column;
+	align-items: center;
 	
-	margin: 1rem;
+	width: 100%;
+	height: 100%;
 }
 
-section.features > div {
-	box-sizing: border-box;
+.editor .header {
+	flex-grow: 0;
+	width: 100%;
 	
-	flex-basis: 20rem;
-	flex-grow: 1;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 	
-	color: #171e42;
-	margin: 1rem;
-	padding: 1rem;
+	z-index: 10;
 	
-	padding-left: 3rem;
-	
-	position: relative;
+	border-bottom: 0.2rem solid var(--accent-color);
+	background-color: var(--header-color);
 }
 
-section.features > div i {
-	position: absolute;
-	left: 0rem;
-	
-	font-size: 1.5rem;
-	text-align: center;
-	
-	width: 3rem;
-	color: #fafafa;
-	text-shadow: 0px 0px 1px #000;
+.editor .header * {
+	margin: 0.5rem;
 }
 
-section.features p {
-	margin: 0;
-	maring-bottom: 1rem;
-	font-size: 80%;
-}
+.editor textarea {
+	flex-grow: 1;
+	width: 100%;
 
-section.features h2 {
-	margin: 0;
-	font-size: 1.1rem;
-	padding: 0;
-}
-
-form fieldset {
-	border: 0;
-}
-
-form fieldset textarea {
+	resize: none;
+	outline: none;
+	
 	box-sizing: border-box;
+	margin: 0; padding: 0.5rem;
 	
-	width: 100%;
-	height: 10rem;
+	border: none;
+	background: none;
 }
 
-form fieldset.footer {
-	text-align: right;
+textarea {
+	color: var(--main-color);
 }