lynnesbian/recipe-site
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

some more css

Browse source
This commit is contained in:
Lynne Megido 2020-03-01 17:36:48 +10:00
parent cb10d8a7a7
commit af61f630bd
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
3 changed files with 50 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_includes/ingredients.html
View file

@ -5,6 +5,6 @@
<{{tag}}>Ingredients</{{tag}}> <{{tag}}>Ingredients</{{tag}}>
<ul> <ul>
{% for item in page.ingredients -%} {% for item in page.ingredients -%}
<li>{{ item[0] }} {%- if item[2] %} {{ item[2] }} of {% endif -%} {{ item[1] }}</li> <li>{{ item[0] }} {%- if item[2] %} {{ item[2] }} of {%- endif %} {{ item[1] }}</li>
{% endfor -%} {% endfor -%}
</ul> </ul>

2
_layouts/default.html
View file

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<div> <div id='main'>
{{ content }} {{ content }}
</div> </div>

51
style.css
View file

@ -1,17 +1,48 @@
html {
overflow-y: scroll; /* force scrollbar to appear to stop elements jumping around when the scrollbar appears naturally */
}
body { body {
font-family: "DejaVu Sans", "Bitstream Vera Sans", "Helvetica", "Roboto", sans-serif; font-family: "DejaVu Sans", "Bitstream Vera Sans", "Helvetica", "Roboto", sans-serif;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
background: #fafafa; background: #fafafa;
margin: 0;
} }
body div { #main {
flex-grow: 1; 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 { .subrecipe {
background: #eee; background: #eee;
padding: 5px; padding: 10px;
border-radius: 10px;
}
.subrecipe, p {
margin-left: 10px;
margin-right: 10px;
} }
.subrecipe h3 { .subrecipe h3 {
margin: 0; margin: 0;
@ -33,6 +64,8 @@ body div {
} }
.subrecipe-toggle::after { .subrecipe-toggle::after {
font-style: italic; font-style: italic;
font-size: 0.75em;
vertical-align: text-top;
} }
.subrecipe .subrecipe-toggle::after { .subrecipe .subrecipe-toggle::after {
content: "Show"; content: "Show";
@ -41,6 +74,14 @@ body div {
content: "Hide"; content: "Hide";
} }
a {
color: turquoise;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul { ul {
list-style-type: "- "; list-style-type: "- ";
} }
@ -51,7 +92,11 @@ ul, ol {
footer { footer {
text-align: center; text-align: center;
margin: 20px auto; background: #333;
display: block;
width: 100%;
padding: 20px 0;
margin: 0;
} }
footer, .subtle { footer, .subtle {
color: grey; color: grey;