A Pen by A Non Ymous on CodePen.
Created
July 17, 2014 14:22
-
-
Save anonymous/f4816b36fa93e128e26a to your computer and use it in GitHub Desktop.
A Pen by Captain Anonymous.
This file contains 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
#content_container { | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
background: url(http://payload297.cargocollective.com/1/16/517046/8254114/Website-template-G-L-round-for-real-5_o.jpg) no-repeat center center fixed; | |
background-size: 100% 700px; | |
-webkit-background-size: contain; | |
-moz-background-size: contain; | |
-o-background-size: contain; | |
background-size: contain; | |
background-color:#fefbd0 ; | |
background-repeat: no-repeat; | |
} | |
body, html { | |
margin: 0px; | |
padding: 0px; | |
} | |
body { | |
color: #000000; | |
font-family: Georgia, Times, serif; | |
font-size: 16px; | |
line-height: 1.5; | |
} | |
body.open_project { | |
overflow: hidden; | |
} | |
/* | |
* Header / Navigation | |
*/ | |
.header_img { | |
padding: 0 0 30px 30px; | |
position: relative; | |
z-index: 11; | |
} | |
.nav_container { | |
position: absolute; | |
top: 30px; left: 30px; | |
z-index: 888; | |
} | |
.nav_container div { | |
float: left; | |
padding-right: 35px; | |
} | |
.nav_container br { | |
display: none !important; | |
} | |
#nav_loadspin { | |
display: none; | |
position: fixed; | |
top: 6px; left: 6px; | |
z-index: 11; | |
} | |
#nav_loadspin.save_pos { | |
position: fixed; | |
top: 36px; right: 40px; left: auto; | |
opacity: 0.5; | |
filter: alpha(opacity=50); | |
-moz-opacity: 0.5; | |
-khtml-opacity: 0.5; | |
} | |
.nav_container a { | |
font-family: Georgia, times, serif; | |
font-size: 16px; | |
padding: 2px 3px 2px 3px; | |
text-decoration: none; | |
} | |
.project_link a { | |
color: #666666; | |
} | |
.project_link a:hover { | |
color: #000000; | |
text-decoration: underline; | |
} | |
.project_link a:active { | |
color: #999999; | |
} | |
.page_link a { | |
color: #666666; | |
} | |
.page_link a:hover { | |
color: #000000; | |
text-decoration: underline; | |
} | |
.page_link a:active { | |
color: #999999; | |
} | |
.link_link a { | |
color: #999999; | |
text-decoration: underline; | |
} | |
.link_link a:hover { | |
color: #666666; | |
} | |
.link_link a:active { | |
color: #cccccc; | |
} | |
.nav_active a { | |
color: #000000; | |
} | |
.nav_active a:active { | |
color: #000000; | |
} | |
.pagination { | |
color: #666666; | |
z-index:11; | |
} | |
.pagination a { | |
color: #00AF8A; | |
} | |
.pagination a:hover { | |
background: #ffff66; | |
color: #222222; | |
} | |
.pagination a:active { | |
background: #000000; | |
color: #ffffff; | |
} | |
.nav_follow { | |
color: #999999; | |
z-index: 11; | |
} | |
.nav_follow a { | |
color: #999999; | |
text-decoration: none; | |
} | |
.nav_follow a:hover { | |
color: #666666; | |
text-decoration: underline; | |
} | |
.nav_follow a:active { | |
color: #cccccc; | |
text-decoration: underline; | |
} | |
.view_tag_info { | |
color: #666666; | |
} | |
.view_tag_info a { | |
color: #999999; | |
text-decoration: none; | |
} | |
.view_tag_info a:hover { | |
color: #666666; | |
text-decoration: underline; | |
} | |
.view_tag_info a:active { | |
color: #cccccc; | |
text-decoration: underline; | |
} | |
/* | |
* Content | |
*/ | |
#mainwrapper { | |
background: rgba(0, 0, 0, 0.5); | |
display: none; | |
position: fixed; | |
top: 0; left: 0; right: 0; bottom: 0; | |
overflow-y: scroll; | |
overflow-x: auto; | |
z-index: 999999; | |
-webkit-overflow-scrolling: touch; | |
} | |
#maincontainer, | |
#content_container.permalink_page { | |
background: #ffffff; | |
padding: 60px; | |
z-index: 3; | |
width: 670px; | |
} | |
#maincontainer { | |
display: none; | |
margin: 80px 0 80px 0; | |
position: absolute; | |
left: 80px; | |
top: 0; | |
} | |
#content_container.permalink_page { | |
left: 30px; | |
margin: 80px 0 -100px 30px; | |
} | |
.bodycopy a { | |
color: #000000; | |
text-decoration: underline; | |
} | |
.bodycopy a:hover { | |
background: #ffff66; | |
color: #000000; | |
text-decoration: none; | |
} | |
.bodycopy a:active { | |
background: #000000; | |
color: #ffffff; | |
} | |
.project_title { | |
color: #000000; | |
font-family: arial, san-serif; | |
font-size: 22px; | |
font-weight: bold; | |
line-height: 1.5; | |
padding: 0 0 21px 0; | |
} | |
.project_content { | |
color: #000; | |
font-size: 16px; | |
width: 670px; | |
} | |
.project_content br { | |
clear: none !important; | |
} | |
.custom_text { | |
color: #000; | |
cursor: move; | |
font-size: 16px; | |
padding: 0 0 30px 30px; | |
position: absolute; | |
width: 300px; | |
} | |
/* | |
* Project header | |
*/ | |
.project_header { | |
font-family: Arial, sans-serif; | |
font-size: 12px; | |
line-height: 12px; | |
position: absolute; | |
top: 0; right: 0; | |
text-transform: capitalize; | |
z-index: 9999; | |
} | |
.project_header div { | |
float: right; | |
} | |
.project_header a { | |
background: #e7e7e7; | |
border-left: 1px solid #ccc; | |
color: #666666; | |
display: block; | |
float: right; | |
padding: 10px 15px; | |
text-decoration: none; | |
} | |
.project_header a:hover { | |
color: #000000; | |
background: #ddd; | |
text-decoration: none; | |
} | |
.project_header a:active { | |
background: #ccc; | |
color: #000; | |
} | |
.project_divider { | |
display: none; | |
} | |
/* | |
* Styling of default typographic headers and elements | |
*/ | |
h1 { | |
font-size: 22px; | |
line-height: 165%; | |
} | |
h2 { | |
font-size: 16px; | |
line-height: 165%; | |
} | |
h3 { | |
font-size: 14px; | |
line-height: 150%; | |
} | |
blockquote { | |
color: #666666; | |
margin: 0; | |
} | |
.project_content img { | |
margin: 0 30px 30px 0px; | |
} | |
/* | |
* Slideshows | |
*/ | |
.slideshow_component { | |
float: left; | |
margin: 0 30px 0 0; | |
} | |
.slideshow_nav { | |
clear: both; | |
color: #999999; | |
font-family: Arial, sans-serif; | |
font-size: 12px; | |
padding: 4px 0 7px 0; | |
} | |
.slideshow_nav a { | |
color: #000000; | |
text-decoration: none; | |
} | |
.slideshow_nav a:hover { | |
background: none !important; | |
color: #666666; | |
text-decoration: none; | |
} | |
.slideshow_nav a:active { | |
color: #ff3300; | |
} | |
.slideshow_count { | |
color: #999999; | |
font-size: 11px; | |
} | |
.slideshow_wrapper { | |
clear: both; | |
padding: 0 10px 10px 0px; | |
} | |
#slideshow_container img { | |
margin: 0px; | |
} | |
.slideshow_wrapper a, | |
.slideshow_wrapper a:hover, | |
.slideshow_wrapper a:active { | |
background: none !important; | |
} | |
.slideshow_thumbs { | |
margin: 0 0 0 0; | |
} | |
ul.slideshow_thumbs { | |
margin: 0; | |
padding: 0; | |
} | |
.slideshow_thumb { | |
float: left; | |
list-style: none; | |
margin: -3px 0px 0px -3px; | |
padding: 0 7px 7px 0; | |
} | |
.slideshow_thumb a { | |
background: none !important; | |
border: 1px solid transparent; | |
display: block; | |
padding: 2px; | |
} | |
.slideshow_thumb a:hover { | |
background: none !important; | |
border: 1px solid #ccc; | |
} | |
a.activeSlide { | |
background: none; | |
border: 1px solid #ccc; | |
} | |
.slideshow_thumb a:active, | |
a.activeSlide:active { | |
background: none !important; | |
border: 1px solid #666; | |
} | |
.slideshow_thumb img { | |
border: 0; | |
display: block; | |
margin: 0; | |
height: 60px; | |
} | |
.slideshow_caption { | |
clear: both; | |
display: block; | |
font-size: 11px; | |
padding: 5px 0 5px 0; | |
} | |
/** | |
* Fullscreen button | |
*/ | |
a#fullscreen { | |
background-color: #1a1a1a; | |
background-image: url(/_gfx/fullscreen_open.png); | |
background-repeat: no-repeat; | |
background-position: 67px 3px; | |
border: 1px solid #1a1a1a; | |
color: #bbbbbb; | |
display: block; | |
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; | |
font-size: 11px; | |
line-height: 18px; | |
height: 19px; | |
padding: 0 4px 0 5px; | |
text-align: left; | |
text-decoration: none; | |
width: 74px; | |
} | |
a#fullscreen:hover { | |
background-color: #fff; | |
color: #000; | |
} | |
a#fullscreen:active { | |
background-color: #fff; | |
border: 1px solid #999; | |
color: #666; | |
} | |
/* | |
* Project footer | |
*/ | |
.project_footer { | |
color: #999999; | |
clear: both; | |
font-size: 12px; | |
padding: 60px 0px 60px 0; | |
} | |
.footer_title_type { | |
color: #000000; | |
font-weight: bold; | |
} | |
.project_views { | |
color: #999999; | |
font-style: italic; | |
} | |
/* | |
* Project Footer Links | |
*/ | |
.project_footer .permalink { | |
display: none; | |
} | |
.project_footer .permalink a { | |
color: #999999; | |
font-style: italic; | |
} | |
.project_footer .permalink a:hover { | |
background: #ffff66; | |
color: #000000; | |
} | |
.project_footer .permalink a:active { | |
background: #000000; | |
color: #ffffff; | |
} | |
.tags { | |
color: #999999; | |
} | |
.tags a { | |
color: #000000; | |
text-decoration: none; | |
} | |
.tags a:hover { | |
background: #ffff66; | |
text-decoration: none; | |
} | |
.tags a:active { | |
color: #ffffff; | |
background: #000000; | |
} | |
.project_footer .editlink a { | |
color: #0066ff; | |
font-style: italic; | |
} | |
.project_footer .editlink a:hover { | |
background: #ffff66; | |
color: #000000; | |
} | |
.project_footer .editlink a:active { | |
background: #000000; | |
color: #ffffff; | |
} | |
.project_bottom { | |
clear: both; | |
height: 60px; | |
margin: 0 0 -120px 0; | |
} | |
/* | |
* Thumbnails | |
*/ | |
.project_thumb { | |
top: 100px; left: 100px; | |
position: fixed; | |
padding: 0 0 30px 30px; | |
z-index: 9998; | |
} | |
.project_thumb.hover { | |
cursor: pointer; | |
text-decoration: none; | |
} | |
.project_thumb .hover .thumb_title .text { | |
color: #000000; | |
text-decoration: underline; | |
} | |
.project_thumb .nohover { | |
text-decoration: none; | |
} | |
.project_thumb a { | |
text-decoration: none; | |
} | |
.project_thumb.active .cardimgcrop { | |
} | |
.project_thumb.active .thumb_title span { | |
color: #000000; | |
text-decoration: underline; | |
} | |
.cardimgcrop { | |
position: relative; | |
} | |
.cardimgcrop.notitle_notag { | |
} | |
.loader_holder { | |
display: none; | |
position: absolute; | |
text-align: center; | |
top: 8px; left: 38px; | |
z-index: 3; | |
} | |
.thumb_title, .thumb_title .text { | |
color: #666666; | |
font-size: 16px; | |
padding-top: 15px; | |
text-decoration: none; | |
z-index: 9999; | |
} | |
.thumb_tag { | |
color: #999999; | |
font-size: 10px; | |
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif; | |
margin: 0 0 2px 0; | |
overflow: hidden; | |
width: 200px; | |
} | |
.thumb_tag.notitle { | |
margin-top: 5px; | |
} | |
.thumb_tag a { | |
color: #999999; | |
text-decoration: none; | |
} | |
.thumb_tag a:hover { | |
color: #666666; | |
text-decoration: underline; | |
} | |
.thumb_tag a:active { | |
color: #999999; | |
} | |
/* | |
* Search results | |
*/ | |
#search_form { | |
position: fixed; | |
bottom: 30px; left: 30px; | |
z-index: 99; | |
} | |
#search_form #search_term { | |
font-size: 11px; | |
width: 188px; | |
} | |
#search_form_results { | |
padding: 100px 0 30px 30px; | |
} | |
.search_header { | |
color: #000000; | |
float: left; | |
font-size: 14px; | |
font-style: normal; | |
font-weight: normal; | |
margin: 0; | |
padding: 4px 0; | |
width: 145px; | |
} | |
#search_term { | |
background: #ffffff; | |
border: 1px solid #cccccc; | |
color: #000000; | |
float: left; | |
font-family: Arial, Helvetica, sans-serif; | |
font-size: 14px; | |
margin: 0; | |
padding: 5px; | |
width: 220px; | |
} | |
#search_results { | |
float: left; | |
} | |
.result { | |
clear: both; | |
font-size: 14px; | |
line-height: 22px; | |
margin-bottom: 60px; | |
} | |
.search_thumb { | |
float: left; | |
margin: 4px 25px 35px 0px; | |
} | |
.search_thumb img { | |
width: 120px; height: auto; | |
} | |
.search_text { | |
width: 500px; | |
margin-left: 145px; | |
} | |
.search_title a { | |
color: #000000; | |
font-weight: bold; | |
text-decoration: underline; | |
} | |
.search_title a:hover { | |
background: #ffff00; | |
color: #000000; | |
text-decoration: none; | |
} | |
.search_title a:active { | |
background: #000000; | |
color: #ffffff; | |
text-decoration: none; | |
} | |
.search_tags { | |
color: #999999; | |
font-size: 11px; | |
} | |
.search_tags a { | |
color: #999999; | |
text-decoration: none; | |
} | |
.search_tags a:hover { | |
background: none; | |
color: #000000; | |
text-decoration: underline; | |
} | |
.search_tags a:active { | |
color: #666666; | |
} | |
/* | |
* Footer | |
*/ | |
.bottompad { | |
clear: both; | |
position: relative; | |
height: 35px; | |
margin: 35px 0 0 0; | |
width: 705px; | |
} | |
/* | |
* Video component | |
*/ | |
.video_component { | |
float: left; | |
margin: 0 15px 15px 0; | |
} | |
/* | |
* Audio component | |
*/ | |
.audio_component { | |
color: #777777; | |
font-family: 'Droid Sans Mono', Monaco, Monospace, Arial, san-serif; | |
font-size: 10px; | |
height: 30px; | |
line-height: 26px; | |
width: 300px; | |
} | |
.audio_component div { | |
height: 26px; | |
} | |
.audio_component .border { | |
border: 2px solid #aaaaaa; | |
opacity: 0.5; | |
-moz-border-radius: 5px; | |
-webkit-border-radius: 5px; | |
border-radius: 5px; | |
filter: alpha(opacity=50); | |
-moz-opacity: 0.5; | |
-khtml-opacity: 0.5; | |
} | |
.audio_component .vertical_border { | |
background: #aaaaaa; | |
opacity: 0.50; | |
filter: alpha(opacity=50); | |
-moz-opacity: 0.5; | |
-khtml-opacity: 0.5; | |
} | |
.audio_component .controls { | |
top: 2px; left: 2px; | |
} | |
.audio_component .play_pause { | |
background: url("/_gfx/playpause.png"); | |
} | |
.audio_component .spectrum .spectrum_bar { | |
background: #666666; | |
} | |
.audio_component .loading { | |
background: #bbbbbb; | |
opacity: 0.25; | |
filter: alpha(opacity=25); | |
-moz-opacity: 0.25; | |
-khtml-opacity: 0.25; | |
} | |
.audio_component .progress { | |
background: #bbbbbb; | |
border-right: 1px dotted #333333; | |
opacity: 0.25; | |
filter: alpha(opacity=25); | |
-moz-opacity: 0.25; | |
-khtml-opacity: 0.25; | |
} | |
.audio_component .volume_slide.hover { | |
background: #bbbbbb; | |
opacity: 0.3; | |
filter: alpha(opacity=30); | |
-moz-opacity: 0.3; | |
-khtml-opacity: 0.3; | |
} | |
/* | |
* Other | |
*/ | |
#project_draghandle { | |
display: none; | |
} | |
#close_block { | |
background: rgba(0, 0, 0, 0.5); | |
display: none; | |
position: fixed; | |
top: 0; left: 0; right: 0; bottom: 0; | |
z-index: 999; | |
} | |
/* Admin and following icons - only seen by members */ | |
.toolset { | |
position: fixed; | |
top: 10px; right: 10px; | |
z-index: 9999999; | |
} | |
/* "Running on Cargo" */ | |
.cargo_link { | |
color: #cccccc; | |
font-family: Monaco, monospace; | |
font-size: 10px; | |
position: fixed; | |
right: 35px; bottom: 15px; | |
z-index:99; | |
} | |
.cargo_link a { | |
color: #cccccc; | |
text-decoration: underline; | |
} | |
.cargo_link a:hover { | |
color: #666666; | |
text-decoration: underline; | |
} | |
.cargo_link a:active { | |
color: #999999; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment