Skip to content

Instantly share code, notes, and snippets.

@FranciscoG
Last active August 29, 2015 14:06
Show Gist options
  • Save FranciscoG/b21e0b3d513c56ce4fae to your computer and use it in GitHub Desktop.
Save FranciscoG/b21e0b3d513c56ce4fae to your computer and use it in GitHub Desktop.
styles for the header in the subreddit r/hhehehe
body{background-color:#96806B;color:black}
#siteTable > div{background-color:white;}
#siteTable{background-color:white;padding:10px;border-radius:10px;border:2px solid rgba(0,0,0,0.5);margin-top:10px;}
#header{background-color:#96806B;margin:10px;}
.side{background-color:white;border: 2px solid rgba(0,0,0,0.5);border-radius:10px;padding:10px;}
#sr-header-area{background-color:#96806B;}
#header-bottom-right{background-color:#96806B;color:black;margin-top:4px;}
#header{border:2px solid rgba(0,0,0,0.5);border-radius:10px;}
#RESShortcutsEditContainer{display:none}
.content{margin:10px;}
.tabmenu{color:black;}
.tabmenu li.selected a{border:2px solid rgba(0,0,0,0.5);background-color:white;color:black;padding:3px;border-radius:5px;font-size:130%;}
.tabmenu li a{border:2px solid rgba(0,0,0,0.5);background-color:#96806B;color:black;padding:3px;border-radius:5px;}
.pagename a{font-size:130%;margin-left:10px;}
.commentarea{background-color:white;border:2px solid rgba(0,0,0,0.5);border-radius:10px;margin-top:10px;}
#header-img{display:block;max-width:100%;border-bottom:1px solid rgba(0,0,0,0.5);border-top:1px solid rgba(0,0,0,0.5);height:auto;}
#header-bottom-left {
/* this is the main image bg without text */
position: relative;
width: 100%;
background-size: contain;
background-image: url(%%bg-crushed%%);
background-repeat: no-repeat;
display: block;
/* for IE8 and below */
background-image: url(%%old-header-crushed%%);
}
body:last-child #header-bottom-left {
/* for all including IE 9+*/
background-image: url(%%bg-crushed%%);
}
#header-img-a {
/* this is the hehehe text */
display: block;
position: relative;
background-position: 0 51%;
width: 100%;
background-size: contain;
background-repeat: no-repeat;
-webkit-animation: slide 5s linear infinite;
}
body:last-child #header-img-a {
/* for all including IE 9+*/
background-image: url(%%text%%);
}
#header-img {
/* this is the foreground that hides some of the text */
visibility: hidden; /* for IE8 and below */
position: relative;
max-width: 100%;
height: auto;
}
body:last-child #header-img {
/* for all including IE 9+*/
visibility: visible;
}
#header-bottom-left span,
#header-bottom-left .tabmenu {
z-index: 4;
}
@-webkit-keyframes slide {
from{
background-position:-324px;
}
to{
background-position:0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment