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{{tag}}>
+
{{ 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;