tighten up top table for mobile

[nano-editor.git] / style.css

@charset "utf-8";

/* Variables for light & dark modes. */

:root {
	--nano-content-bg-color: #fff;
	--nano-content-fg-color: #440077;
	--nano-inverted-bg-color: #407;
	--nano-inverted-fg-color: #fff;
	--nano-a-color: #407;
	--nano-a-visited-color: #51188E;
	--nano-a-active-color: #F00;
	--nano-a-inverted-color: #fff;
}

@media (prefers-color-scheme: dark) {
:root {
	--nano-content-bg-color: #111;
	--nano-content-fg-color: #cc88ff;
	--nano-inverted-bg-color: #9200ff;
	--nano-inverted-fg-color: #fff;
	--nano-a-color: #c8f;
	--nano-a-visited-color: #b7f;
	--nano-a-active-color: #F00;
	--nano-a-inverted-color: #fff;
}
}

body {
	color: var(--nano-content-fg-color);
	background-color: var(--nano-content-bg-color);
}
.inverted {
	color: var(--nano-inverted-fg-color);
	background-color: var(--nano-inverted-bg-color);
}

a {
	color: var(--nano-a-color);
}
a:visited {
	color: var(--nano-a-visited-color);
}
a:active {
	color: var(--nano-a-active-color);
}

.inverted a {
	color: var(--nano-a-inverted-color);
}

* {
	box-sizing: border-box;
}

.onecolumn {
	float: left;
	width: 45%;
	padding: 5%;
}

table {
	border-spacing: 0px;
	border-collapse: separate;
}

table#homepage {
	padding-top: 3em;
	padding-bottom: 3em;
}

table#top td,
table#bottom td.indented {
	padding-left: 1ch;
	padding-right: 1ch;
}

/* Mobile (i.e. phones) */
@media only screen and (max-width: 768px) {
body {
	margin: 0px;
}

table#homepage {
	font-size: x-small;
}

table#top td,
table#bottom td.indented {
	padding-left: 0.5ch;
	padding-right: 0.5ch;
}
}