diff options
Diffstat (limited to 'static/css/main.css')
| -rw-r--r-- | static/css/main.css | 310 |
1 files changed, 310 insertions, 0 deletions
diff --git a/static/css/main.css b/static/css/main.css new file mode 100644 index 0000000..8fd8b7f --- /dev/null +++ b/static/css/main.css @@ -0,0 +1,310 @@ +:root { + --bg: whitesmoke; + --bgDark: #b3b3b3; + --bgLight: white; + --mainText: rgb(0, 0, 0); + --secondaryText: rgb(105, 105, 105); + --primary: #a3001b; + --highlight: #b6ffb6; + --shadow: black; +} +html { + font-size: 18px; + overflow-y: scroll; + background-color: var(--bg); + box-sizing: border-box; +} +body { + font-family: "Quicksand", sans-serif; + font-weight: 400; + max-width: 960px; + margin: auto; + font-size: 1.2em; + color: var(--mainText); + border-radius: 5px; + min-height: 100vh; + display: flex; + flex-direction: column; + padding: 0 10px; +} +main { + flex: 1; +} +p { + margin: 1em 0 0.25em 0; + line-height: 1.5em; +} +a { + color: var(--primary); + text-decoration: none; +} +a:hover { + text-decoration: underline; +} +header { + background-color: var(--primary); + margin-top: 5px; + min-height: 275px; + display: flex; + flex-direction: row; + justify-content: start; + flex-wrap: wrap; +} +header img { + height: 100%; +} +.header-info { + padding: 10px; + width: calc(100% - 300px); + display: flex; + flex-direction: column; + justify-content: space-between; +} +.header-info p { + color: var(--bg); + margin: 0.25em 0 1em 0; + line-height: 1.5em; + font-size: 0.9em; + font-weight: 300; +} +.header-image-container { + height: 275px; + width: 275px; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; +} +.header-image { + height: 230px; + width: 230px; + border-radius: 50%; + overflow: hidden; + display: flex; + justify-content: center; + box-shadow: 3px 3px 5px 3px black; +} +@media only screen and (max-width: 600px) { + header { + justify-content: center; + } + .header-info { + width: 100%; + } +} +footer { + margin-top: 3em; + margin-bottom: 5px; +} +.footer { + text-align: center; + background-color: var(--primary); + color: var(--bg); + padding: 1em 5px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 80px; + font-size: 0.9em; + font-weight: 300; +} +footer p { + margin: 0; +} +.footer a { + color: var(--bg); + text-decoration: underline; + font-weight: 600; +} +pre, +code { + font-family: "Inconsolata", monospace; + font-size: 1em; +} +kbd { + background-color: var(--bgLight); + border-radius: 5px; + padding: 4px; + margin: 0 3px; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 600; + margin: 1em 0 0.5em 0; +} +h1 { + font-size: 2.1em; +} +h2 { + font-size: 1.9em; +} +h3 { + font-size: 1.7em; +} +h4 { + font-size: 1.5em; +} +h5 { + font-size: 1.3em; +} +h6 { + font-size: 1.1em; +} +.site-title { + font-size: 2.5em; + color: var(--bg); + margin: 0; + text-shadow: 3px 3px var(--shadow); +} +.site-title.home-false { + display: block; + font-size: 1.5em; + font-weight: 600; + margin-bottom: 0.5em; + text-decoration: underline; + text-shadow: 2px 2px var(--shadow); +} +.front-matter { + border-bottom: solid 3px var(--primary); +} +pre { + padding: 15px; + border-radius: 5px; + border: solid 1px; + background-color: #272822; + color: white; +} +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); +} +blockquote p { + margin: 0; +} +mark { + background-color: var(--highlight); +} +table { + border-collapse: collapse; + text-align: left; +} +th, +td { + border: solid 1px var(--primary); + padding: 5px; +} +svg { + height: 1em; + width: 1em; +} +.home-icon { + font-size: 1.5em; + color: var(--bg); + border-radius: 5px; +} +.home-icon svg { + padding: 0.25em; + border-radius: 5px; +} +.home-icon svg { + box-shadow: inset 0 0 2px var(--shadow); + transition: box-shadow 0.1s; +} +.home-icon svg:hover { + box-shadow: inset 0 0 6px var(--shadow); +} +.home-icon svg:active { + box-shadow: inset 0 0 10px var(--shadow); +} +.social-link { + color: var(--bg); + margin-right: 0.25em; + font-weight: 600; +} +.social-link::before { + content: "@"; + font-family: "Inconsolata", monospace; +} +.archive-table { + width: 100%; +} +.home-page-card { + background-color: var(--bgLight) !important; + padding: 15px; + border-radius: 5px; + box-shadow: 1px 1px 2px 1px var(--shadow); +} +.home-page-card > p:last-child { + margin-bottom: 0; +} +.home-page-card > p:first-child { + margin-top: 0; +} +.home-page-card-links { + margin-top: 1em; + display: flex; + flex-direction: row; + flex-wrap: wrap; + display: inline-block; +} +.home-page-card-links a { + background-color: var(--primary); + color: var(--bg); + margin-right: 10px; + padding: 5px 5px; + border-radius: 5px; + box-shadow: 3px 3px 5px 1px var(--shadow); + transition: box-shadow 0.2s; +} +.home-page-card-links > a:hover { + box-shadow: 1px 1px 5px 1px var(--shadow); + text-decoration: none; +} +.home-page-card-links > a:active { + box-shadow: 0px 0px 1px 1px var(--shadow); +} +.taxa-container { + display: flex; + flex-wrap: wrap; + padding: 5px 11px; +} +.taxa::before { + content: "#"; +} +.taxa { + margin: 0.4em 0.4em 0.4em 0; + padding: 4px; +} +.prev-next { + display: flex; + flex-direction: row; + justify-content: space-around; + margin-bottom: 3em; +} +.prev-next > div, +.prev-next > a { + font-size: 1.2em; + padding: 0 0.5em; + border-radius: 5px; +} +.list-page-data { + display: flex; + margin-bottom: 0.5em; +} +.list-page-date { + text-align: right; + padding-right: 1em; + min-width: 5em; +} +main img { + max-width: 100%; + margin: 1em auto; +} |