Last active
September 6, 2019 19:46
-
-
Save R3V1Z3/dbb6369d5cef9801d11e0c342b47b2e0 to your computer and use it in GitHub Desktop.
Weird, shape-filled theme for BreakDown framework: https://ugotsta.github.io/downslide/?css=dbb6369d5cef9801d11e0c342b47b2e0
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Theme name: Shapes | |
URL: https://gist.github.com/Ugotsta/dbb6369d5cef9801d11e0c342b47b2e0 | |
*/ | |
@import url('https://fonts.googleapis.com/css?family=Baloo'); | |
* { | |
line-height: 120%; | |
font-family: 'Baloo', cursive; | |
} | |
.inner { | |
background: none; | |
} | |
.inner::before { | |
position: fixed; | |
content: ""; | |
top: 0; | |
bottom: 0; | |
right: 0; | |
left: 0; | |
background: #CCC; | |
box-shadow: inset 0 0 100px black; | |
pointer-events: none; | |
z-index:-1 | |
} | |
.inner::after { | |
position: fixed; | |
content: ""; | |
top: 300px; | |
left: -1200px; | |
width: 1500px; | |
height: 500px; | |
background: #7788AA; | |
transform: rotate(45deg); | |
box-shadow: 0 0 30px rgba(0,0,0,0.5), 0 0 0 40px #7788AA, 0 0 30px 40px rgba(0,0,0,0.5), 0 0 60px rgba(0,0,0,0.5), 0 0 0 90px #DDDDEE, 0 0 30px 90px rgba(0,0,0,0.5); | |
mix-blend-mode: normal; | |
pointer-events: none; | |
} | |
.section { | |
padding: 130px; | |
background: #DDDDEE; | |
border: 10px solid #CCC; | |
box-shadow: 0 0 30px rgba(0,0,0,0.5), 0 0 0 40px #7788AA, 0 0 30px 40px rgba(0,0,0,0.5); | |
border-radius: 100%; | |
mix-blend-mode: normal; | |
overflow: hidden; | |
} | |
#bd-entwined .section:hover, | |
.bd-modular .section:hover { | |
box-shadow: 0 0 30px rgba(0,0,0,0.5), 0 0 0 40px #CCC, 0 0 30px 40px rgba(0,0,0,0.5); | |
} | |
.section::after { | |
position: absolute; | |
content: ""; | |
top: 0px; | |
bottom: 70%; | |
right: 50px; | |
left: 100px; | |
background: #CCC; | |
border-radius: 100%; | |
z-index: -1; | |
pointer-events: none; | |
} | |
.section a { | |
color: #7788AA; | |
text-decoration: none; | |
text-shadow: none; | |
} | |
.section a:hover { | |
background: #CCC; | |
} | |
.section a.handle { | |
color: #7788AA; | |
font-family: 'Baloo', cursive; | |
text-shadow: 0px 1px 1px #DDDDEE, 0px 2px 2px #7788AA; | |
} | |
/* Cheatsheet backgrounds */ | |
#custom tr, #custom th { | |
background: none; | |
} | |
#custom li, | |
#custom li:nth-child(odd) { | |
background: none; | |
} | |
#custom .content, | |
#custom .section .content .alternate { | |
background: none; | |
} | |
kbd { | |
padding: 3px 5px; | |
color: #CCC; | |
font-size: 1em; | |
font-weight: bold; | |
background: #7788AA; | |
border: 3px double rgba(0,0,0,0.35); | |
padding: 6px 10px; | |
box-shadow: none; | |
} | |
.eq .band::after { | |
content: ""; | |
position: absolute; | |
top: -45px; | |
left: 0; | |
background: #7788AA; | |
height: 100px; | |
width: 100%; | |
border-radius: 50%; | |
box-shadow: 0 0 30px black; | |
z-index: 1; | |
} | |
.eq .band { | |
background: #CCC; | |
box-shadow: 0 0 30px black; | |
} | |
.eq { | |
mix-blend-mode: normal; | |
} | |
#bd-code-glory .hljs { | |
background: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment