From f2ea3f7b4ddf9e47c9014c04160e5cd5ff27a4a9 Mon Sep 17 00:00:00 2001 From: Patryk Niedźwiedziński Date: Mon, 21 Aug 2023 11:49:19 +0200 Subject: update: new look, new folder structure --- static/style.css | 89 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 static/style.css (limited to 'static/style.css') diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..a44310f --- /dev/null +++ b/static/style.css @@ -0,0 +1,89 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap'); + +:root { + --bg: #F3FFF0; + --fg: #1E221B; +} + +html { + background: var(--bg); + color: var(--fg); + font-family: 'Roboto Slab', serif; +} + +body { + max-width: 700px; + padding: 1ex; + margin: auto; +} + +header { + display: flex; + align-items: center; + text-align: center; +} + +footer { + margin-bottom: 2em; +} + +.list { + padding: 1ex; + border: 1px solid gray; +} + +@media (max-width: 720px) { + header { + flex-direction: column; + } +} + +main img { + width: 100%; + margin-bottom: 2em; +} + +main { + padding-bottom: 2em; +} + +.container { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: 0 auto; +} + +.item { + box-sizing: border-box; + border: 5px solid var(--fg); + border-radius: 15px; + padding: 5px; + margin: 7px; + width: 100%; + max-width: 300px; + max-height: 400px; +} + +.item a { + display: grid; + grid-template-rows: 2fr 75px; +} + +.item img, +.name img { + margin: 0; + border-radius: 10px; + object-fit: cover; + max-height: 300px; +} + +.item img { +} + +.item .name { + display: grid; + grid-template-columns: 50px auto; + grid-template-rows: 1fr; + align-items: center; +} -- cgit 1.4.1