Fabian/kbm-html
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ja sachen halt gemacht

Browse Source
This commit is contained in:
Fabian Märker
2021-11-24 20:23:31 +01:00
parent 4f5bfc313f
commit 261622ac1a
9 changed files with 349 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
assets/design.css
View File

@@ -1,14 +1,9 @@
:root {
--clr-neon: rgb(138,43,226);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
*{
margin: 0;
padding: 0;
@@ -29,14 +24,14 @@ body{
position: fixed;
top: 0;
width: 100%;
height: 7rem;
height: 10rem;
background: transparent;
padding-right: 10rem;
}
.menu a{
float: left;
height: 70%;
height: 50%;
display: block;
color: #f2f2f2;
text-align: center;
@@ -44,11 +39,32 @@ body{
text-decoration: none;
transition: ease 0.3s;
}
.menu p{
position: fixed;
top: 25px;
right: 100px;
color: #f2f2f2;
}
.logo {
position: center;
margin-left: 30%;
#top {
position: fixed;
bottom: 1.2rem;
float: right;
right: 18.5%;
left: 95%;
max-width: 75px;
width: 100%;
font-size: 1.3rem;
border: rgb(138,43,226);
background-color: #808080;
padding: .5px;
border-radius: 4px;
}
#top:hover {
background-color: #f2f200;
cursor: pointer;
}
.neon-button {
@@ -56,13 +72,13 @@ body{
display: inline-block;
cursor: pointer;
text-decoration: none;
color: var(--clr-neon);
border: var(--clr-neon) 0.125em solid;
color: rgb(138,43,226);
border: rgb(138,43,226) 0.125em solid;
padding: 0.125em 0.5em;
margin-left: 0.85em;
border-radius: 0.25em;
text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
box-shadow: inset 0 0 0.5em 0 rgb(138,43,226), 0 0 0.5em 0 rgb(138,43,226);
position: relative;
}
@@ -70,16 +86,11 @@ body{
pointer-events: none;
content: "";
position: absolute;
background: var(--clr-neon);
top: 120%;
left: 0;
width: 100%;
height: 100%;
transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
filter: blur(1em);
opacity: 0.7;
}
.neon-button::after {
@@ -89,17 +100,17 @@ body{
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 0 2em 0.5em var(--clr-neon);
box-shadow: 0 0 2em 0.5em rgb(138,43,226);
opacity: 0;
background-color: var(--clr-neon);
background-color: rgb(138,43,226);
z-index: -1;
transition: opacity 100ms linear;
}
.neon-button:hover,
.neon-button:focus {
color: var(--clr-bg);
text-shadow: none;
color: rgb(138,43,226);
text-shadow: none;
}
.neon-button:hover::before,
@@ -111,13 +122,6 @@ body{
opacity: 1;
}
.menu p{
position: fixed;
top: 25px;
right: 100px;
color: #f2f2f2;
}
#logo {
float: none;
position: absolute;
@@ -291,13 +295,13 @@ body{
display: inline-block;
cursor: pointer;
text-decoration: none;
color: var(--clr-neon);
border: var(--clr-neon) 0.125em solid;
color: rgb(138,43,226);
border: rgb(138,43,226) 0.125em solid;
padding: 0.125em 0.3em;
margin-left: 0.85em;
position: absolute;
right: 10px;
border-radius: 0.25em;
text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
box-shadow: inset 0 0 0.5em 0 rgb(138,43,226), 0 0 0.5em 0 rgb(138,43,226);
}