diff options
Diffstat (limited to 'templates/styles.css')
| -rw-r--r-- | templates/styles.css | 272 |
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; +} |