From 485cf8b4bc5190b71f2121dbda6e9692d7f21a26 Mon Sep 17 00:00:00 2001 From: Urja Acharya Date: Fri, 5 Mar 2021 19:12:13 -0800 Subject: Style changes --- static/css/main.css | 114 ++++++++++++++++++++++++++++++++++------------ static/css/pagination.css | 33 -------------- 2 files changed, 86 insertions(+), 61 deletions(-) delete mode 100644 static/css/pagination.css (limited to 'static') diff --git a/static/css/main.css b/static/css/main.css index a19b466..3320f1b 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -6,7 +6,7 @@ --primary: #a3001b; --highlight: #b6ffb6; --shadow: black; - --inactive: grey; + --inactive: #949494; } html { font-size: 18px; @@ -101,13 +101,12 @@ header { overflow: hidden; display: flex; justify-content: center; - box-shadow: 3px 3px 5px 3px black; } -footer { +.footer { margin-top: 3em; margin-bottom: 5px; } -.footer { +footer { text-align: center; background-color: var(--primary); color: var(--bg); @@ -115,15 +114,14 @@ footer { display: flex; flex-direction: column; justify-content: center; - align-items: center; min-height: 80px; font-size: 0.9em; font-weight: 300; } -footer p { +.footer p { margin: 0; } -.footer a, +footer a, .about-narrative a { color: var(--bg); text-decoration: underline; @@ -178,7 +176,7 @@ h6 { font-size: 2.5em; } .page-title { - font-size: 1.75em; + font-size: 2.5em; } .front-matter { border-bottom: solid 3px var(--primary); @@ -192,10 +190,9 @@ pre { } blockquote { border-left: solid 5px var(--secondaryText); - padding: 0.5em; - background-color: var(--bgLight); - border-radius: 2px; - box-shadow: 1px 1px 4px 1px var(--shadow); + padding: 0.25em; + display: block; + margin: 0 0 0 1em; } blockquote p { margin: 0; @@ -214,16 +211,23 @@ td { border: solid 1px var(--primary); padding: 5px; } -svg { - height: 1em; - width: 1em; -} -.header-icon { +hr { + border: 0; + height: 1px; + background-image: linear-gradient( + to right, + rgba(0, 0, 0, 0), + var(--primary), + rgba(0, 0, 0, 0) + ); + margin: 1.5em 0; +} +.primary-icon { font-size: 1.5em; color: var(--bg); border-radius: 5px; } -.header-icon:hover { +.primary-icon:hover { text-shadow: 0px 0px 5px var(--highlight); } .social-info { @@ -237,26 +241,31 @@ svg { .archive-table { margin-top: 1em; } -.home-page-card { +.card { background-color: var(--bgLight) !important; padding: 15px; - border-radius: 5px; + margin: 2em 0; +} +.shadow { box-shadow: 1px 1px 2px 1px var(--shadow); } -.home-page-card > p:last-child { +.round-corner { + border-radius: 5px; +} +.card > p:last-child { margin-bottom: 0; } -.home-page-card > p:first-child { +.card > p:first-child { margin-top: 0; } -.home-page-card-links { +.card-links { margin-top: 1em; display: flex; flex-direction: row; flex-wrap: wrap; display: inline-block; } -.home-page-card-links a { +.card-links a { background-color: var(--primary); color: var(--bg); margin-right: 10px; @@ -265,17 +274,17 @@ svg { box-shadow: 3px 3px 5px 1px var(--shadow); transition: box-shadow 0.2s; } -.home-page-card-links > a:hover { +.card-links > a:hover { box-shadow: 1px 1px 5px 1px var(--shadow); text-decoration: none; } -.home-page-card-links > a:active { +.card-links > a:active { box-shadow: 0px 0px 1px 1px var(--shadow); } .taxa-container { display: flex; flex-wrap: wrap; - padding: 5px 11px; + padding: 1em 0; } .taxa::before { content: "#"; @@ -288,7 +297,7 @@ svg { display: flex; flex-direction: row; justify-content: space-between; - margin-bottom: 3em; + margin-bottom: 1.5em; font-size: 1.5em; } .prev-next > div, @@ -341,3 +350,52 @@ main img { margin: 0; } } +/* Pagination */ +ul.pagination { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + list-style-type: none; +} +li.page-item { + width: 2.5em; + height: 2em; + display: flex; + justify-content: center; + align-items: center; +} +li.page-item { + border-top: 1px solid var(--bgLight); + border-bottom: 1px solid var(--bgLight); + border-left: 1px solid var(--bgLight); + background-color: var(--primary); +} +li.page-item a { + text-decoration: none; + font-weight: 400; + width: 100% !important; +} +li.page-item.disabled a { + color: var(--inactiveColor); +} +li.page-item.active { + background-color: var(--bgLight); + text-shadow: 0px 0px 2px var(--bgLight); +} +li.page-item.active a { + color: var(--primary); +} +li.page-item:first-child { + border-radius: 5px 0 0 5px; +} +li.page-item:last-child { + border-radius: 0 5px 5px 0; + border-right: 1px solid var(--bgLight); +} +/* Grid */ +.grid-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(341px, 1fr)); + grid-gap: 1em; +} diff --git a/static/css/pagination.css b/static/css/pagination.css deleted file mode 100644 index 85311bb..0000000 --- a/static/css/pagination.css +++ /dev/null @@ -1,33 +0,0 @@ -ul.pagination { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - list-style-type: none; -} -li.page-item { - padding: 10px; -} -li.page-item { - border-top: 1px solid var(--primary); - border-bottom: 1px solid var(--primary); - border-left: 1px solid var(--primary); - background-color: var(--bg); -} -li.page-item.disabled a { - color: var(--inactiveColor); -} -li.page-item.active { - background-color: var(--primary); -} -li.page-item.active a { - color: var(--bg); - font-weight: 600; -} -li.page-item:first-child { - border-radius: 10px 0 0 10px; -} -li.page-item:last-child { - border-radius: 0 10px 10px 0; - border-right: 1px solid var(--primary); -} -- cgit v1.2.3