From 0ce8744897b9aa13ea568a6985da9570e4aca90b Mon Sep 17 00:00:00 2001 From: Joris Date: Sun, 2 Feb 2020 13:53:54 +0100 Subject: Use zola generator - Use CSS instead of Haskell with Clay - Use TypeScript instead of PureScript --- static/icon.png | Bin 0 -> 3110 bytes static/main.css | 136 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 136 insertions(+) create mode 100644 static/icon.png create mode 100644 static/main.css (limited to 'static') diff --git a/static/icon.png b/static/icon.png new file mode 100644 index 0000000..2bb22d2 Binary files /dev/null and b/static/icon.png differ diff --git a/static/main.css b/static/main.css new file mode 100644 index 0000000..5aa2008 --- /dev/null +++ b/static/main.css @@ -0,0 +1,136 @@ +:root { + --color-title: rgb(113, 68, 30); + --color-link: rgb(13, 13, 81); + --color-number: rgb(230, 230, 230); + --base-font-size: 18px; +} + +@media all and (max-width: 800px) { + :root { + --base-font-size: 14px; + } +} + +html { + font-size: var(--base-font-size); +} + +body { + margin: 0; +} + +.g-Page { + max-width: 800px; + margin: 0 auto; +} + +.g-Page__Header { + font-size: 2.5rem; + font-weight: bold; + color: var(--color-title); + margin: 0 auto 2rem; + padding: 1rem 0; + max-width: 800px; + border-bottom: 0.2rem solid #884433; + text-align: center; +} + +.g-Link { + text-decoration: none; + color: var(--color-link); +} + +.g-Link:hover { + text-decoration: underline; +} + +@keyframes appear { + from { + transform: translateX(20px); + opacity: 0; + } + to { + transform: translateX(0px); + } +} + +.g-Page__Content { + animation: appear 0.2s; + margin: 1rem; +} + +.g-Page__Recipes { + list-style-type: none; +} + +.g-Page__Recipe { + margin-bottom: 1rem; +} + +h1, h2, h3 { + color: var(--color-title); +} + +h1 { + font-size: 1.5rem; + margin-top: 1.5rem; +} + +h2 { + font-size: 1.1rem; + margin-top: 1rem; +} + +/* Recipe */ + +.g-Number { + font-size: inherit; + background-color: var(--color-number); + border-radius: 5px; + padding: 2px; + border-style: none; + text-align: center; + width: 5rem; +} + +.g-Recipe ul, +.g-Recipe ol { + list-style-type: none; + padding-left: 1rem; +} + +.g-Recipe li { + margin-bottom: 1rem; + line-height: 1.5rem; +} + +.g-Recipe ol, +.g-Recipe ul { + margin-top: 1.5rem; +} + +.g-Recipe ol { + counter-reset: ol; +} + +.g-Recipe ol > li { + padding-left: 3rem; + position: relative; + text-align: justify; +} + +.g-Recipe ol > li::before { + display: inline; + position: absolute; + top: 0; + left: 0; + counter-increment: ol; + content: counter(ol); + margin-right: (px 10); + background-color: var(--color-title); + color: white; + border-radius: 50%; + font-weight: bold; + width: 1.5rem; + text-align: center; +} -- cgit v1.2.3