init commit

src/routes/layout.css

@@ -0,0 +1,132 @@
+:root {
+	/* Gruvbox Light Hard */
+	--bg:              #f9f5d7;
+	--bg-panel:        #fbf1c7;
+	--bg-raised:       #ebdbb2;
+	--bg-raised-hover: #d5c4a1;
+	--fg:              #3c3836;
+	--fg-dim:          #665c54;
+	--fg-faint:        #928374;
+	--border:          #a89984;
+	--border-faint:    #bdae93;
+	--active-bg:       #3c3836;
+	--active-fg:       #f9f5d7;
+	--link:            #458588;
+	--link-vis:        #b16286;
+	--link-hover:      #9d0006;
+	--err:             #9d0006;
+	--err-bg:          #f9e5e5;
+	--err-border:      #cc241d;
+	--green:           #98971a;
+	--blue:            #458588;
+	--red:             #cc241d;
+	--bar-bg:          #3c3836;
+	--bar-fg:          #f9f5d7;
+	--bar-dim:         #928374;
+}
+
+[data-theme="dark"] {
+	/* Gruvbox Dark Hard */
+	--bg:              #1d2021;
+	--bg-panel:        #282828;
+	--bg-raised:       #3c3836;
+	--bg-raised-hover: #504945;
+	--fg:              #ebdbb2;
+	--fg-dim:          #bdae93;
+	--fg-faint:        #928374;
+	--border:          #665c54;
+	--border-faint:    #504945;
+	--active-bg:       #d5c4a1;
+	--active-fg:       #1d2021;
+	--link:            #83a598;
+	--link-vis:        #d3869b;
+	--link-hover:      #fb4934;
+	--err:             #fb4934;
+	--err-bg:          #3b2020;
+	--err-border:      #cc241d;
+	--green:           #b8bb26;
+	--blue:            #83a598;
+	--red:             #fb4934;
+	--bar-bg:          #282828;
+	--bar-fg:          #ebdbb2;
+	--bar-dim:         #928374;
+}
+
+body {
+	margin: 0;
+	background: var(--bg);
+	color: var(--fg);
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+a {
+	color: var(--link);
+	text-decoration: underline;
+}
+
+a:visited {
+	color: var(--link-vis);
+}
+
+a:hover {
+	color: var(--link-hover);
+}
+
+h1 {
+	margin: 0 0 0.5em 0;
+	border-bottom: 1px solid var(--border);
+	padding-bottom: 2px;
+}
+
+h2 {
+	margin: 0.8em 0 0.3em 0;
+}
+
+input, button, textarea, select {
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+button {
+	background: var(--bg-raised);
+	border: 1px solid var(--border);
+	padding: 2px 8px;
+	cursor: pointer;
+	color: var(--fg);
+}
+
+button:hover {
+	background: var(--bg-raised-hover);
+}
+
+input[type="text"],
+input[type="number"] {
+	border: 1px solid var(--border);
+	padding: 2px 4px;
+	background: var(--bg);
+	color: var(--fg);
+}
+
+select {
+	border: 1px solid var(--border);
+	background: var(--bg);
+	color: var(--fg);
+}
+
+code {
+	font-family: monospace;
+}
+
+table {
+	border-collapse: collapse;
+}
+
+td, th {
+	border: 1px solid var(--border);
+	padding: 3px 6px;
+}
+
+hr {
+	border: none;
+	border-top: 1px solid var(--border);
+	margin: 1em 0;
+}