You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
meliurwen.github.io/css/theme.css

124 lines
2.2 KiB

@font-face {
font-family: 'Brotherhood-Script';
src: url('../fonts/Brotherhood_Script.ttf');
}
@font-face {
font-family: 'Wishing-Well';
src: url('../fonts/Wishing_Well.otf');
}
body {
margin: 0;
padding: 0;
/* Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections */
background: #333;
background-attachment: fixed;
background-size: cover;
}
/* The only rule that matters */
#video-background {
/* making the video fullscreen */
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
overflow: hidden;
/*Blur Effect on the background video*/
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
/* These just style the content */
article {
/* just a fancy border */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* border: 10px solid rgba(255, 255, 255, 0.5);
margin: 10px;
*/
}
h1 {
position: absolute;
top: 15%;
width: 100%;
letter-spacing: 3px;
color: #fff;
text-align: center;
font-family: 'Brotherhood-Script', 'Jenna Sue', 'Latin Modern Mono';
font-weight: normal;
font-size: 150px;
}
h1 span {
/* font-family: sans-serif;
letter-spacing: 0;
font-weight: 300;
font-size: 16px;
line-height: 24px;
*/
font-family: 'Wishing-Well', 'Daniel', 'Purisa';
letter-spacing: 0;
font-weight: 300;
font-size: 32px;
line-height: 24px;
}
h1 span a {
color: #fff;
}
#tape {
font-family: 'Purisa', 'Latin Modern Mono', 'Arial';
font-size: 11px;
line-height: 100%;
color: #fff;
opacity: 0;
transition: 1s;
}
#tapeImage {
opacity: 0.03;
transition: 1s;
}
#dummyTape:hover #tape, #dummyTape:hover #tapeImage {
opacity: 1;
}
#songName {
font-family: 'Purisa', 'Latin Modern Mono', 'Arial';
font-size: 11px;
line-height: 100%;
color: #fff;
opacity: 0;
transition: 1s;
}
#songName,
#tape a {
text-decoration: none;
color: white;
opacity: 0;
}
#dummy:hover #songName {
opacity: 1;
}