From 18cc5f69129615850e48a995f7c3406b74d8d2f4 Mon Sep 17 00:00:00 2001 From: Leonardo Bishop Date: Sat, 5 Aug 2023 21:11:48 +0100 Subject: Redesign website --- static/css/blog.css | 63 +++++++++++++++++++++++ static/css/contact.css | 24 +++++++++ static/css/globalstyles.css | 120 ++++++++++++++++---------------------------- static/css/home.css | 27 ++++++++++ static/css/variables.css | 21 ++++++++ 5 files changed, 179 insertions(+), 76 deletions(-) create mode 100644 static/css/blog.css create mode 100644 static/css/contact.css create mode 100644 static/css/home.css create mode 100644 static/css/variables.css (limited to 'static/css') diff --git a/static/css/blog.css b/static/css/blog.css new file mode 100644 index 0000000..2b52dff --- /dev/null +++ b/static/css/blog.css @@ -0,0 +1,63 @@ +#title { + margin: 0 0 3rem 0; +} + +#title > h1 { + margin-bottom: 0.4rem; +} + +figure { + text-align: center; + font-style: italic; + font-size: 0.8rem; +} + +figure img { + max-width: 100%; + border-radius: 10px; +} + +.blog-post, .blog-post-header { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.blog-post-title { + flex-grow: 1; +} + +.blog-post { + padding: 0.2rem 0; +} + +.blog-post-header { + padding: 0.5rem 0; + color: var(--color-text-muted); +} + +.blog-post-header, .blog-post:last-of-type { + border-bottom: 1px dotted var(--color-text-muted); +} + +#content { + position: relative; +} + +#back-header { + position: relative; + font-size: 1rem; + top: -2rem; + font-family: var(--font-monospace); + width: 700px; +} + +#back-container { + position: absolute; + height: 0; + width: 0; +} + +#back-footer { + margin-top: 4rem; +} diff --git a/static/css/contact.css b/static/css/contact.css new file mode 100644 index 0000000..42bd8d9 --- /dev/null +++ b/static/css/contact.css @@ -0,0 +1,24 @@ +.grid-outer { + width: 100%; + display: flex; + flex-direction: column; + gap: 0; +} + +.grid-inner { + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; +} + +.grid-title { + flex-basis: 250px; + font-family: var(--font-monospace); + color: var(--color-text-muted); + text-align: right; +} + +.grid-content { + width: 100% +} diff --git a/static/css/globalstyles.css b/static/css/globalstyles.css index 1f22f5e..9fbb974 100644 --- a/static/css/globalstyles.css +++ b/static/css/globalstyles.css @@ -1,113 +1,81 @@ -@import url('https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&display=swap'); - -.website-name { - font-size: 10px; - font-weight: 700; - line-height: 1.2; - color: #ddd; - text-shadow: 0px 1px 10px #9876aa; -} +@import 'variables.css'; html, body { border: 0; margin: 0; background-color: #111; color: #ddd; - font-family: 'Cousine', monospace, sans-serif; - line-height: 1.3; + line-height: 1.6; + font-size: 18px; + font-family: var(--font-sans-serif); } -h1, h2, h3, h4, h5, h6 { - color: #cc7832 -} - -.code-block { - background-color: #222; - border: solid 1px #333; - padding: 10px; -} - -#navbar { - background-color: #222; - width: 100%; +#main-container { display: flex; flex-direction: row; - justify-content: flex-start; - align-items: stretch; - gap: 10px; + width: 100%; + max-height: calc(100vh - 1rem); } -.navbar-element { - background-color: #222; +#navbar { + padding: 2rem 1rem 1rem 6rem; display: flex; - height: 30px; - text-align: center; - line-height: 30px; - padding: 10px; -} - -.navbar-element:hover { - background-color: #888; - transition: 0.2s; - cursor: pointer; + flex-direction: column; + align-items: end; + gap: 0.4rem; + font-size: 0.9em; + font-family: var(--font-monospace); } -.navbar-element > a { - color: #fff; - text-decoration: none; +@media only screen and (max-width: 1000px) { + #navbar { + padding-left: 1rem; + } } -.navbar-element > .highlight { - color: #ffc66d; +a { + color: var(--color-text-link); + text-decoration: underline dotted var(--color-text-link); } -#main-container { - max-width: 1200px; - margin: 0 auto; +a:hover { + background-color: var(--color-text-link-bg); } #content-container { - box-shadow: 0px 0px 15px 10px rgba(152,118,170,0.05); + overflow: scroll; + max-height: 100%; + flex-grow: 1; + scrollbar-color: var(--color-scrollbar) var(--color-background); } -#content { - padding: 20px; - max-width: 1200px; - background-color: #2b2b2b; - margin: 0 auto; +::-webkit-scrollbar { + width: 4px; + background: var(--color-background); } -a { - color: #9876aa; - text-decoration: underline; +::-webkit-scrollbar-thumb { + background: var(--color-scrollbar); + border-radius: 2px; } -.highlight { - color: #ffc66d; +::-webkit-scrollbar-corner { + background: none; } -.footer { - font-size: 10px; -} - -.redlink { - color: #ff4136; +#content { + margin: 8rem auto 6rem auto; + width: 700px; } -.box { - border: solid 1px #fff; - padding: 10px; - background-color: rgba(0, 0, 0, 0.1); +h1, h2, h3, h4 { + font-family: var(--font-monospace); } -.box-red { - border: solid 1px rgba(255, 0, 0, 0.5); - padding: 10px; - background-color: rgba(255, 0, 0, 0.2); +.monospace { + font-family: var(--font-monospace); } -table, th, td { - border: 1px solid rgb(200, 200, 200); - border-collapse: collapse; - padding: 10px; +code { + font-family: var(--font-monospace); } diff --git a/static/css/home.css b/static/css/home.css new file mode 100644 index 0000000..4920ee3 --- /dev/null +++ b/static/css/home.css @@ -0,0 +1,27 @@ +.grid-outer { + width: 100%; + display: flex; + flex-direction: column; + gap: 4rem; +} + +.grid-inner { + display: flex; + flex-direction: row; + gap: 1rem; +} + +.grid-title { + flex-basis: 50px; + font-family: var(--font-monospace); + color: var(--color-text-muted); + text-align: right; +} + +.grid-content { + width: 100% +} + +.spacer { + height: 3rem; +} diff --git a/static/css/variables.css b/static/css/variables.css new file mode 100644 index 0000000..123ee30 --- /dev/null +++ b/static/css/variables.css @@ -0,0 +1,21 @@ +@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@200&family=Hind&family=Noto+Sans&display=swap'); + +@font-face { + font-family: 'Iosevka Web'; + src: url(/fonts/iosevka-medium.woff2) format('woff2'); + font-stretch: condensed; + font-display: swap; +} + +:root { + --font-sans-serif: 'Hind', 'Noto Sans', 'Segoe UI', 'Chivo', sans-serif; + --font-monospace: 'Iosevka Web', monospace; + + --color-background: #111; + --color-text: #ddd; + --color-text-muted: #aaa; + --color-text-link: #ff851b; + --color-text-link-bg: rgba(255, 133, 27, 0.2); + + --color-scrollbar: rgba(255, 255, 255, 0.4); +} -- cgit v1.2.3-70-g09d2