From 6dd52770daba39cf3c5b8c9246bdbfcce54273b9 Mon Sep 17 00:00:00 2001 From: Daniel Kluge Date: Sat, 15 Oct 2022 23:08:49 +0200 Subject: [PATCH] Much styling --- components/Blog/Layout.tsx | 3 ++ styles/Blog/Blog.module.scss | 32 +++++++++++++++++-- styles/Blog/Card.module.scss | 2 +- styles/Blog/Front.module.scss | 1 + styles/Blog/Navigation.module.scss | 50 +++++++++++++++++------------- styles/globals.scss | 22 +++++++++++++ 6 files changed, 84 insertions(+), 26 deletions(-) diff --git a/components/Blog/Layout.tsx b/components/Blog/Layout.tsx index fbc1656..adbb954 100644 --- a/components/Blog/Layout.tsx +++ b/components/Blog/Layout.tsx @@ -20,6 +20,9 @@ const Layout: NextPage = ({ title, children }) => {
{ children }
+ ; }; diff --git a/styles/Blog/Blog.module.scss b/styles/Blog/Blog.module.scss index 4183c14..fdb4f09 100644 --- a/styles/Blog/Blog.module.scss +++ b/styles/Blog/Blog.module.scss @@ -1,11 +1,37 @@ #blogBody { + background: var(--blog_back-background); + color: var(--blog_color); + padding-bottom: 20px; + header { position: sticky; top: 10px; + z-index: 99; } main { - max-width: 900px; - margin: 40px auto; + max-width: 950px; + margin: 40px auto 0; + border: 1px solid var(--blog_border); + background: var(--blog_content-background); + padding: 50px; + backdrop-filter: blur(var(--blog_content-blur)); + border-top-left-radius: 1em; + border-top-right-radius: 1em; + + h1 { + margin-top: 0; + } } - } \ No newline at end of file + + footer { + max-width: 950px; + margin: 5px auto 0; + border: 1px solid var(--blog_border); + background: var(--blog_content-background); + padding: 20px; + backdrop-filter: blur(10px); + border-bottom-left-radius: 1em; + border-bottom-right-radius: 1em; + } +} diff --git a/styles/Blog/Card.module.scss b/styles/Blog/Card.module.scss index 9a5387b..029a036 100644 --- a/styles/Blog/Card.module.scss +++ b/styles/Blog/Card.module.scss @@ -9,7 +9,7 @@ margin: 5px; &:hover { - box-shadow: 0px 0px 10px blue; + box-shadow: 0px 0px 10px var(--blog_color); } } diff --git a/styles/Blog/Front.module.scss b/styles/Blog/Front.module.scss index b19bba2..b8c0edd 100644 --- a/styles/Blog/Front.module.scss +++ b/styles/Blog/Front.module.scss @@ -1,5 +1,6 @@ .contentList { display: flex; + align-items: center; flex-wrap: wrap; justify-content: space-evenly; padding: 0; diff --git a/styles/Blog/Navigation.module.scss b/styles/Blog/Navigation.module.scss index 82a4496..e338f32 100644 --- a/styles/Blog/Navigation.module.scss +++ b/styles/Blog/Navigation.module.scss @@ -2,34 +2,40 @@ display: block; max-width: 1000px; min-width: 300px; - box-shadow: 0px 2px 5px gray; + position: relative; + height: calc(1em + 40px); + margin: 0 auto; padding: 20px; + font-size: 120%; - height: calc(1em + 40px); + /* height / 2 */ border-radius: calc((1em + 40px) / 2); - position: relative; -} + border: 1px solid var(--blog_nav-border); + background: var(--blog_nav-background); + backdrop-filter: blur(var(--blog_content-blur)); + box-shadow: 0px 2px 5px gray; -.logo { - display: inline-block; - margin-top: -10px; - height: calc(1em + 40px - 20px); - position: absolute; - cursor: pointer; -} - -.navLink { - display: inline-block; - transition: text-decoration 0.2s ease-in-out; - margin: auto 5px; - cursor: pointer; - - &:nth-of-type(1) { - margin-left: calc((501 / 204) * (1em + 40px - 20px) + 15px); + .logo { + display: inline-block; + margin-top: -10px; + height: calc(1em + 40px - 20px); + position: absolute; + cursor: pointer; } - &:hover { - text-decoration: underline; + .navLink { + display: inline-block; + transition: text-decoration 0.2s ease-in-out; + margin: auto 5px; + cursor: pointer; + + &:nth-of-type(1) { + margin-left: calc((501 / 204) * (1em + 40px - 20px) + 15px); + } + + &:hover { + text-decoration: underline; + } } } \ No newline at end of file diff --git a/styles/globals.scss b/styles/globals.scss index f83af8d..cd5e9a6 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -11,6 +11,28 @@ --repl-color: rgb(24, 138, 24); --repl-color-link: rgb(31, 179, 31); --repl-color-hint: rgba(24, 138, 24, 0.3); + + + --blog_nav-background: rgba(128, 128, 128, 0.3); + --blog_nav-border: #ccc; + + --blog_back-background-main: rgba(61, 0, 0,1); + --blog_back-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='57' height='57' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='100%25' height='100%25' fill='rgba(32, 19, 19,1)'/%3E%3Ccircle cx='0' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Ccircle cx='40' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Cpath d='m 16 19.5 h8 v1 h-8z' fill='rgba(229, 62, 62,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E "); + --blog_content-background: rgba(64, 64, 64, 0.15); + --blog_content-blur: 10px; + --blog_color: #ddd; + + &[data-theme="light"]{ + --blog_nav-background: rgba(192, 192, 192, 0.3); + --blog_nav-border: #ccc; + + --blog_back-background-main: rgba(61, 0, 0,1); + --blog_back-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='57' height='57' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='100%25' height='100%25' fill='rgba(245, 179, 179,1)'/%3E%3Ccircle cx='0' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Ccircle cx='40' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Cpath d='m 16 19.5 h8 v1 h-8z' fill='rgba(229, 62, 62,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E "); + --blog_content-background: rgba(160, 160, 160, 0.15); + --blog_content-blur: 5px; + --blog_color: #222; + + } } body {