From af61f630bdeaefb809579f27013e96247433273b Mon Sep 17 00:00:00 2001 From: Lynne Date: Sun, 1 Mar 2020 17:36:48 +1000 Subject: [PATCH] some more css --- _includes/ingredients.html | 2 +- _layouts/default.html | 2 +- style.css | 51 +++++++++++++++++++++++++++++++++++--- 3 files changed, 50 insertions(+), 5 deletions(-) diff --git a/_includes/ingredients.html b/_includes/ingredients.html index 615f5f2..7eb25a0 100644 --- a/_includes/ingredients.html +++ b/_includes/ingredients.html @@ -5,6 +5,6 @@ <{{tag}}>Ingredients diff --git a/_layouts/default.html b/_layouts/default.html index c3dd48f..3409c94 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -9,7 +9,7 @@ -
+
{{ content }}
diff --git a/style.css b/style.css index 8ceda69..c241b5e 100644 --- a/style.css +++ b/style.css @@ -1,17 +1,48 @@ +html { + overflow-y: scroll; /* force scrollbar to appear to stop elements jumping around when the scrollbar appears naturally */ +} + body { font-family: "DejaVu Sans", "Bitstream Vera Sans", "Helvetica", "Roboto", sans-serif; display: flex; flex-direction: column; min-height: 100vh; background: #fafafa; + margin: 0; } -body div { +#main { flex-grow: 1; } +h1 { + margin: 0; + padding: 20px 0; + text-align: center; + background: linear-gradient(to right, turquoise, transparent 80%); +} +h2 { + padding-left: 10px; + background: linear-gradient(to right, turquoise 5px, transparent 5px 100%); +} +h1, h2, h3, h4, h5, h6 { + font-weight: 400; +} +h3 { + font-size: 1.3em; +} +h4 { + font-size: 1.2em; + margin: 0.75em 0; +} + .subrecipe { background: #eee; - padding: 5px; + padding: 10px; + border-radius: 10px; +} +.subrecipe, p { + margin-left: 10px; + margin-right: 10px; } .subrecipe h3 { margin: 0; @@ -33,6 +64,8 @@ body div { } .subrecipe-toggle::after { font-style: italic; + font-size: 0.75em; + vertical-align: text-top; } .subrecipe .subrecipe-toggle::after { content: "Show"; @@ -41,6 +74,14 @@ body div { content: "Hide"; } +a { + color: turquoise; + text-decoration: none; +} +a:hover { + text-decoration: underline; +} + ul { list-style-type: "- "; } @@ -51,7 +92,11 @@ ul, ol { footer { text-align: center; - margin: 20px auto; + background: #333; + display: block; + width: 100%; + padding: 20px 0; + margin: 0; } footer, .subtle { color: grey;