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

Much styling

Browse Source
This commit is contained in:
Daniel Kluge 2022-10-15 23:08:49 +02:00
parent 3cee6c9006
commit 6dd52770da
6 changed files with 84 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/Blog/Layout.tsx
View File

@ -20,6 +20,9 @@ const Layout: NextPage<ILayoutProps> = ({ title, children }) => {
<main>
{ children }
</main>
<footer>
Copyright und so nen Stuff
</footer>
</div>
</>;
};

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

@ -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;
}
}
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;
}
}

2
styles/Blog/Card.module.scss
View File

@ -9,7 +9,7 @@
margin: 5px;
&:hover {
box-shadow: 0px 0px 10px blue;
box-shadow: 0px 0px 10px var(--blog_color);
}
}

1
styles/Blog/Front.module.scss
View File

@ -1,5 +1,6 @@
.contentList {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-evenly;
padding: 0;

14
styles/Blog/Navigation.module.scss
View File

@ -2,14 +2,19 @@
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;
@ -33,3 +38,4 @@
text-decoration: underline;
}
}
}

22
styles/globals.scss
View File

@ -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 {