c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Border for content

Browse Source
This commit is contained in:
Daniel Kluge 2022-10-18 12:04:11 +02:00
parent 305cae119d
commit 92cbf9c9a5
2 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
styles/Blog/Blog.module.scss
View File

@ -9,14 +9,18 @@
top: 10px; top: 10px;
z-index: 99; z-index: 99;
} }
main, footer {
max-width: 950px;
border: 1px solid var(--blog_content-border);
background: var(--blog_content-background);
backdrop-filter: blur(var(--blog_content-blur));
}
main { main {
max-width: 950px;
margin: 40px auto 0; margin: 40px auto 0;
border: 1px solid var(--blog_border);
background: var(--blog_content-background);
padding: 50px; padding: 50px;
backdrop-filter: blur(var(--blog_content-blur));
border-top-left-radius: 1em; border-top-left-radius: 1em;
border-top-right-radius: 1em; border-top-right-radius: 1em;
@ -26,12 +30,9 @@
} }
footer { footer {
max-width: 950px;
margin: 5px auto 0; margin: 5px auto 0;
border: 1px solid var(--blog_border);
background: var(--blog_content-background);
padding: 20px; padding: 20px;
backdrop-filter: blur(10px);
border-bottom-left-radius: 1em; border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em; border-bottom-right-radius: 1em;
} }

4
styles/globals.scss
View File

@ -8,7 +8,7 @@
} }
:root { :root {
--repl_color: rgb(24, 138, 24); --repl_color: #188a18;
--repl_color-link: rgb(31, 179, 31); --repl_color-link: rgb(31, 179, 31);
--repl_color-hint: rgba(24, 138, 24, 0.3); --repl_color-hint: rgba(24, 138, 24, 0.3);
@ -19,6 +19,7 @@
--blog_back-background-main: rgba(61, 0, 0,1); --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_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(40, 40, 40, 0.2); --blog_content-background: rgba(40, 40, 40, 0.2);
--blog_content-border: rgba(221, 221, 221, 0.25); /* #ddd but less opacity */
--blog_content-blur: 10px; --blog_content-blur: 10px;
--blog_color: #ddd; --blog_color: #ddd;
@ -32,6 +33,7 @@
--blog_back-background-main: rgba(61, 0, 0,1); --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_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-background: rgba(160, 160, 160, 0.15);
--blog_content-border: rgb(34, 34, 34, 0.17); /* #222 but less opacity */
--blog_content-blur: 5px; --blog_content-blur: 5px;
--blog_color: #222; --blog_color: #222;