roymanigley/styles.css

## styles.css
/*
{% load static %}
<html>
	<head>
		<link rel="stylesheet" href="{% static 'styles.css' %}">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
		<nav>
			<h1>My App</h1>
			<ul>
				<li><a href="/person">person</a></li>
				<li><a href="/address">address</a></li>
			</ul>
		</nav>
		<main>
		{% block content %}{% endblock content %}
		</main>
	</body>
</html>
*/
:root {
	--primary-color: teal;
	--danger-color: red;
	--background-color: white;
	--font-family: monospace;
	--table-row-even-color: #f6f6f6;
	--table-row-hover-color: #e7e6e6;
}

body {
	background: var(--background-color);
	font-family: var(--font-family);
	margin: 0;
}

label {
	padding-left: 0.5em;
}

input, select, textarea {
	border-radius: 10px;
	border: solid 1px;
	padding: 0.5em;
	font-family: var(--font-family);
}

input:hover, select:hover, textarea:hover, input:focus, select:focus, textarea:focus {
	border-color: var(--primary-color);
	outline: none;
}

form > p {
	display: grid;
}

.btn, button {
	border-radius: 10px;
	border: none;
	font-family: var(--font-family);
	padding: 0.5em;
	text-decoration: none;
	cursor: grab;
	border: solid 1px;
}

.primary, button[type="submit"] {
	background: var(--primary-color);
	color: var(--background-color);
	border: none;
}

.danger {
	background: var(--danger-color);
	color: var(--background-color);
	border: none;
}

table {
	width: 100%;
	border-collapse: collapse;
}

td, th {
	border-bottom: solid 1px;
	padding: 1em;
	text-align: start;
}

tr:nth-child(even) {
	background: var(--table-row-even-color);
}

tr:hover {
	background: var(--table-row-hover-color);
}

th:hover {
	background: none;
}

th {
	font-weight: bold;
}

nav {
        display: inline-flex;
        width: calc(100vw - 2em);
	padding: 0 1em 0 1em;
        align-items: baseline;
        justify-content: space-between;
	background: var(--primary-color);
	color: white;
	position: sticky;
	top: 0;
}

nav > ul {
	text-align: end;
}

nav > * > li > a {
	color: white;
}

nav > * > li {
	list-style: none;
	display: inline-block;
	margin-right: 1em;
}

main {
	padding: 2em;
}
	/*
	{% load static %}
	<html>
	<head>
	<link rel="stylesheet" href="{% static 'styles.css' %}">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
	<nav>
	<h1>My App</h1>
	<ul>
	<li><a href="/person">person</a></li>
	<li><a href="/address">address</a></li>
	</ul>
	</nav>
	<main>
	{% block content %}{% endblock content %}
	</main>
	</body>
	</html>
	*/
	:root {
	--primary-color: teal;
	--danger-color: red;
	--background-color: white;
	--font-family: monospace;
	--table-row-even-color: #f6f6f6;
	--table-row-hover-color: #e7e6e6;
	}

	body {
	background: var(--background-color);
	font-family: var(--font-family);
	margin: 0;
	}

	label {
	padding-left: 0.5em;
	}

	input, select, textarea {
	border-radius: 10px;
	border: solid 1px;
	padding: 0.5em;
	font-family: var(--font-family);
	}

	input:hover, select:hover, textarea:hover, input:focus, select:focus, textarea:focus {
	border-color: var(--primary-color);
	outline: none;
	}

	form > p {
	display: grid;
	}

	.btn, button {
	border-radius: 10px;
	border: none;
	font-family: var(--font-family);
	padding: 0.5em;
	text-decoration: none;
	cursor: grab;
	border: solid 1px;
	}

	.primary, button[type="submit"] {
	background: var(--primary-color);
	color: var(--background-color);
	border: none;
	}

	.danger {
	background: var(--danger-color);
	color: var(--background-color);
	border: none;
	}

	table {
	width: 100%;
	border-collapse: collapse;
	}

	td, th {
	border-bottom: solid 1px;
	padding: 1em;
	text-align: start;
	}

	tr:nth-child(even) {
	background: var(--table-row-even-color);
	}

	tr:hover {
	background: var(--table-row-hover-color);
	}

	th:hover {
	background: none;
	}

	th {
	font-weight: bold;
	}

	nav {
	display: inline-flex;
	width: calc(100vw - 2em);
	padding: 0 1em 0 1em;
	align-items: baseline;
	justify-content: space-between;
	background: var(--primary-color);
	color: white;
	position: sticky;
	top: 0;
	}

	nav > ul {
	text-align: end;
	}

	nav > * > li > a {
	color: white;
	}

	nav > * > li {
	list-style: none;
	display: inline-block;
	margin-right: 1em;
	}

	main {
	padding: 2em;
	}