Merge branch 'release'HEADmaster

1 files changed, 272 insertions, 0 deletions

diff --git a/templates/styles.css b/templates/styles.css
new file mode 100644
index 0000000..68eae3b
--- /dev/null
+++ b/templates/styles.css
@@ -0,0 +1,272 @@
+/* Colors */
+:root {
+	--darkteal: rgb(0, 100, 108);
+	--green: rgb(88, 169, 143);
+	--darkerteal: rgb(29, 133, 137);
+	--gray: rgb(157, 210, 211);
+	--teal: rgb(58, 165, 166);
+	--cyan: rgb(156, 210, 210);
+	--darkgray: rgb(127, 177, 181);
+	--darkgreen: rgb(59, 136, 114);
+	--yellow: rgb(186, 214, 187);
+}
+
+/* Elements */
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+	font-family: "PT Sans", sans-serif;
+	color: dimgray;
+}
+
+body {
+	background-image: url("/assets/bg.png");
+}
+
+.banner {
+	font-size: 1em;
+	text-align: center;
+	padding: 3em;
+	background-color: white;
+}
+
+nav {
+	display: flex;
+	background-color: white;
+	flex-direction: column-reverse;
+}
+
+nav img {
+	height: 1.4em;
+}
+
+nav a {
+	font-family: "PT Sans", sans-serif;
+	color: dimgray;
+	text-align: center;
+	text-decoration: none;
+	padding: 1em 1em;
+	transition: 0.15s;
+}
+
+nav a:hover {
+	color: var(--darkteal);
+	background-color: lightgray;
+}
+
+div.buttons {
+	display: flex;
+	flex-direction: column;
+}
+
+h1 {
+	font-size: 3em;
+	color: var(--darkteal);
+	font-family: "Architects Daughter", cursive;
+}
+
+h2 {
+	font-size: 2em;
+	color: var(--darkteal);
+	font-family: "Indie Flower", cursive;
+}
+
+em {
+
+	color: var(--darkteal);
+}
+
+section {
+	font-size: 1.5em;
+	margin: 0;
+	padding: 1em;
+}
+
+section.quiet {
+	background-color: white;
+}
+
+section.squarshed {
+	padding-bottom: 1em;
+	padding-top: 1em;
+}
+
+.button img {
+	margin-right: 1em;
+}
+
+button.button,
+a.button {
+	display: flex;
+	align-items: center;
+	background-color: var(--teal);
+	padding-left: 1em;
+	padding-right: 1em;
+	padding-top: 0.5em;
+	padding-bottom: 0.5em;
+	margin-right: 0.5em;
+	margin-bottom: 0.5em;
+	text-decoration: none;
+	color: white;
+	border-radius: 3em;
+	transition: 0.15s;
+}
+
+button.button:hover,
+a.button:hover {
+	box-shadow: 0 4px 8px 0 lightgray, 0 6px 20px 0 lightgray;
+}
+
+button {
+	font-family: "PT Sans", sans-serif;
+	border: none;
+	font-size: 0.75em;
+}
+
+a.primary {
+	background-color: var(--darkteal);
+}
+
+footer {
+	background-color: white;
+	text-align: center;
+	padding: 3em;
+	font-size: 1.5em;
+}
+
+footer a,
+section a {
+	color: var(--darkteal);
+	text-decoration: underline;
+}
+
+.card {
+	font-size: 0.9em;
+	background-color: white;
+	padding: 1em;
+	border-radius: 1em;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+form input,
+form textarea {
+	font-family: "PT Sans", sans-serif;
+	margin-bottom: 1.5em;
+	box-sizing: border-box;
+	width: 100%;
+	border: 1px solid lightgray;
+	padding: 1em;
+}
+
+form input {
+	border-radius: 3em;
+}
+
+textarea {
+	border-radius: 1em;
+	resize: none;
+}
+
+/* honeypot */
+textarea#beehive {
+	display: none;
+}
+
+table {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+table caption {
+	text-align: left;
+}
+
+table th {
+	text-align: right;
+	color: var(--darkteal);
+}
+
+table td,
+table th {
+	vertical-align: bottom;
+}
+
+tr:nth-child(even) {
+	background-color: lightgray;
+}
+
+picture img {
+	width: 100%;
+}
+
+.shadowy img {
+	box-shadow: 0 4px 8px 0 dimgray, 0 6px 20px 0 dimgray;
+}
+
+figcaption {
+	text-align: right;
+	color: var(--darkteal);
+	font-family: "Architects Daughter", cursive;
+}
+
+section.flexible {
+	display: flex;
+	flex-direction: column;
+}
+
+#reviews .card,
+#offerings .card {
+	margin: 1em;
+	text-align: center;
+}
+
+#reviews,
+#offerings {
+	padding-left: 0;
+	padding-right: 0;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+.modal {
+	position: fixed;
+	z-index: 1;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: white;
+	background-color: rgba(1, 1, 1, 0.4);
+	overflow: auto;
+	display: none;
+	font-size: 1.5em;
+}
+
+.modal .card {
+	max-height: 90%;
+	max-width: 60%;
+}
+
+.modal a,
+.card a.button {
+	float: right;
+}
+
+:target.modal {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+:target.modal .card {
+	overflow: auto;
+}
+
+.centered {
+	text-align: center;
+	justify-content: center;
+}