diff options
Diffstat (limited to 'static/css/default.css')
| -rw-r--r-- | static/css/default.css | 455 |
1 files changed, 455 insertions, 0 deletions
diff --git a/static/css/default.css b/static/css/default.css new file mode 100644 index 0000000..77a4bad --- /dev/null +++ b/static/css/default.css @@ -0,0 +1,455 @@ +@import url('https://fonts.googleapis.com/css?family=Alegreya|Alegreya+Sans&display=swap'); + +html { + font-family: 'Alegreya', serif; +} + +body { + font-size: 1.2rem; + line-height: 1.3; + width: 90%; + margin: 0; + padding: 0 5%; +} + +.center > .content { + margin-top: 0; + margin-bottom: 0; +} + +p { + margin-top: 0.5em; + text-align: justify; + hyphens: auto; +} + +header { + border-bottom: 0.3rem solid #00c266; +} + +nav { + text-align: right; +} + +img { + display: block; + margin-left: auto; + margin-right: auto; +} + +footer { + margin-top: 3rem; + padding: 1.2rem 0; + border-top: 0.3rem solid #00c266; +} + +dt, .news-date { + font-family: 'Iosevka Web', sans-serif; + font-size: 1rem; + font-weight: bold; +} + +dt { + font-size: 1.2rem; +} + +a { + font-family: 'Iosevka Web', sans-serif; + font-size: 1rem; + text-decoration: none; +} + +.generated-by a { + font-size: 0.8rem; +} + +h1, h2, h3, h4, h5, h6 { + font-family: 'Iosevka Web', sans-serif; + margin: 0px; +} + +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + font-size : 100%; +} + +h1 { + font-size: 2.4rem; +} + +h2 { + font-size: 1.7rem; + margin-top: 2rem; + border-bottom: 0.2rem solid #00c266; +} + +h3 { + margin-top: 1.5rem; +} + +code { + padding: 0.1em 0.2em; + font-family: 'Iosevka Web', monospace; + font-size: 1rem; +} + +pre { + white-space: pre; + overflow: auto; +} + +figcaption { + font-size: 0.9rem; + display: block; + margin-left: auto; + margin-right: auto; +} + +figcaption * { + font-size: 0.9rem; +} + +table { + border-spacing: 0; + width: 100%; + border-bottom: 0.15rem solid #171d30; + border-top: 0.15rem solid #171d30; +} + +th, td { + padding: 5px 15px 5px 15px; + text-align: left; +} + +nav a, .logo a { + font-family: 'Iosevka Web', monospace; + font-size: 1.3rem; + font-weight: 800; + text-decoration: none; +} + +nav span { + padding-left: 2em; +} + +.generated-by { + font-family: "Iosevka Web", monospace; + font-size: 0.8rem; + text-align: right; +} + +.social { + font-size: 1.2rem; + text-align: center; +} + +.first-letter { + float: left; + line-height: 0.8; + margin-right: 10px; + font-weight: bold; + font-size: 6rem; +} + +.codeblock { + border-radius: 10px; + margin: 0; + padding: 0.1rem 1rem; +} + +.news { + border: 0px; +} + +.bib { + border-bottom: none; + border-top: none; + font-size: 0.9rem; +} + +.bib tr { + vertical-align: text-top; +} + +.bib td { + padding: 5px 10px 5px 10px; +} + +.bibnum { + font-weight: bold; +} + +.post-meta { + font-size: 0.9rem; + font-style: italic; +} + +.post-title > a { + font-weight: bold; + font-family: 'Iosevka Web', monospace; + font-size: 1.3rem; + text-decoration: none; +} + +.post-display { + margin: 30px 0px; +} + +.profile-picture { + border-radius: 50%; + float: left; + max-width: 200px; + margin: 0px 30px 30px 0px; +} + +.personal-info { + float: left; +} + +.gallery-row { + display: flex; + flex-wrap: wrap; +} + +/* Create four equal columns that sits next to each other */ +.gallery-column { + flex: 25%; + max-width: 24%; + padding: 0 4px; +} + +.gallery-1 { display: none; } +.gallery-2 { display: none; } +.gallery-4 { display: block; } + +.gallery-column img { + margin-top: 8px; + vertical-align: middle; + width: 100%; +} + +@media (max-width: 600px) { + + header { + margin: 4.2rem 0; + } + + nav { + margin: 0 auto 3rem; + text-align: center; + } + + h1 { + font-size: 1.8rem; + } + + h2 { + font-size: 1.5rem; + } + + img { + width: 100%; + } + + figcaption { + width: 100%; + } + + .generated-by { + text-align: center; + } + + .logo { + text-align: center; + margin: 1rem auto 3rem; + } + + .logo a { + font-size: 2.0rem; + } + + nav a { + display: inline; + margin: 0 0.6rem; + } + + .profile-picture { + float: none; + display: block; + margin: 0px auto 20px auto; + width: 70%; + } + + .gallery-column { + flex: 100%; + max-width: 100%; + } + + .gallery-1 { display: block; } + .gallery-2 { display: none; } + .gallery-4 { display: none; } + + nav span { + padding-left: 0; + } + + h1, .post-meta { + text-align: center; + } + + .post-display .post-meta { + text-align: left; + } +} + +@media (min-width: 601px) and (max-width: 992px) { + + body { + max-width: 70rem; + margin: 0 auto; + } + + .center > article { + max-width: 45rem; + margin: 3rem auto; + padding: 0; + } + + header { + margin: 0 0 3rem; + padding: 1.2rem 0; + } + + nav { + margin: 0; + text-align: right; + } + + nav a { + margin: 0 0 0 1.2rem; + display: inline; + } + + img { + width: 100%; + } + + figcaption { + width: 100%; + } + + .generated-by { + text-align: right; + } + + .logo { + margin: 0; + text-align: left; + } + + .logo a { + float: left; + font-size: 1.3rem; + } + + .profile-picture { + border-radius: 50%; + float: left; + max-width: 200px; + margin: 0px 30px 30px 0px; + } + + .leftcolumn, .rightcolumn { + max-width: 45rem; + margin: 0 auto; + padding: 0; + } + + .gallery-column { + flex: 50%; + max-width: 48%; + } + + .gallery-1 { display: none; } + .gallery-2 { display: block; } + .gallery-4 { display: none; } +} + +@media (min-width: 993px) { + + body { + max-width: 70rem; + margin: 0 auto; + } + + .center > article { + width: 45rem; + margin: 3em auto; + padding: 0; + } + + header { + margin: 0 0 3rem; + padding: 1.2rem 0; + } + + nav { + margin: 0; + text-align: right; + } + + nav a { + margin: 0 0 0 1.2rem; + display: inline; + } + + img { + width: 100%; + } + + figcaption { + width: 100%; + } + + .generated-by { + text-align: right; + } + + .logo { + margin: 0; + text-align: left; + } + + .logo a { + float: left; + font-size: 1.3rem; + } + + .profile-picture { + border-radius: 50%; + float: left; + max-width: 200px; + margin: 0px 30px 30px 0px; + } + + .container { + display: flex; + } + + .flex { + flex: 1; + } + + .left div { + margin-left: auto; + margin-right: 50px + } + + .right div { + margin-right: auto; + margin-left: 50px; + } + + .leftcolumn, .rightcolumn { + width: 10rem; + } +} |