fix: brochure

Load css instead of including it.

1 files changed, 306 insertions, 0 deletions

diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..6dde6d4
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,306 @@
+/* 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.webp");
+	background-size: 50%;
+}
+
+nav {
+	display: flex;
+	flex-wrap: wrap;
+	background-color: white;
+	position: fixed;
+	width: 100%;
+	z-index: 1;
+}
+
+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;
+	cursor: pointer;
+}
+
+nav a:hover {
+	color: var(--darkteal);
+	background-color: lightgray;
+}
+
+div.buttons {
+	display: flex;
+	flex-direction: column;
+}
+
+h1 {
+	font-size: 2.75em;
+	color: var(--darkteal);
+	font-family: "Architects Daughter", cursive;
+}
+
+h2 {
+	font-size: 2em;
+	color: var(--darkteal);
+	font-family: "Indie Flower", cursive;
+}
+
+h6 {
+	/* blog block paragraphs */
+	color: var(--darkteal);
+	font-size: 1.2em;
+	font-weight: normal;
+	margin-top: 1em;
+	margin-bottom: 1em;
+}
+
+em {
+	color: var(--darkteal);
+}
+
+section {
+	font-size: 1em;
+	margin-top: 0;
+	margin-right: 0;
+	margin-left: 0;
+	margin-bottom: 2em;
+	padding: 1em;
+	background-color: white;
+}
+
+section.banner {
+	text-align: center;
+	padding-left: 0em;
+	padding-right: 0em;
+	margin-bottom: 0;
+	background: linear-gradient(to right,
+			rgba(255, 255, 255, 0) 0%,
+			rgba(255, 255, 255, 1) 75%);
+}
+
+section.banner h1 {
+	background: white;
+	margin-top: 0;
+	padding-top: 1em;
+}
+
+section.cards {
+	background-color: transparent;
+}
+
+.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;
+}
+
+footer p {
+	font-size: 1em;
+}
+
+footer a,
+section a {
+	color: var(--darkteal);
+	text-decoration: underline;
+}
+
+.card {
+	background-color: white;
+	padding: 1em;
+	border-radius: 1em;
+	margin-left: 0;
+	margin-right: 0;
+	align-content: center;
+}
+
+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-left: 1em;
+	margin-right: 1em;
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
+	padding: 0.3em;
+	flex: 1 0 21%;
+	align-items: center;
+	text-align: center;
+}
+
+#reviews,
+#offerings {
+	padding-left: 0;
+	padding-right: 0;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+#offerings .full {
+	flex: 1 1 100%;
+}
+
+.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;
+}
\ No newline at end of file