mirror of
https://github.com/kennethreitz-archive/gitmine.com.git
synced 2026-06-05 23:50:19 +00:00
674 lines
10 KiB
CSS
674 lines
10 KiB
CSS
/* reseting elements: */
|
|
|
|
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, a, blockquote, pre, fieldset, table, th, td, textarea, input, img {
|
|
margin: 0; padding: 0; }
|
|
|
|
a img {border: none;}
|
|
|
|
/* This takes out the fuzzy line around links when you click them, it's an optional addition */
|
|
|
|
:focus {outline: none;}
|
|
|
|
/* global */
|
|
|
|
body {
|
|
background: #191712;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.container {
|
|
width: 960px;
|
|
margin: auto;
|
|
}
|
|
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
|
|
.three-column .column {
|
|
width: 300px;
|
|
float: left;
|
|
margin: 0 30px 0 0;
|
|
}
|
|
|
|
.three-column .column-3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.two-column .column-1 {
|
|
width: 630px;
|
|
float: left;
|
|
margin: 0 30px 0 0;
|
|
}
|
|
|
|
.two-column .column-2 {
|
|
width: 300px;
|
|
float: left;
|
|
margin: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 26px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
h2, h3, h4 {
|
|
color: #1a160d;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
h2 { font-size: 18px; }
|
|
h3 { font-size: 16px; }
|
|
h4 { font-size: 14px; }
|
|
|
|
.column ul {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.column ul li {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 30px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
p a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.float-left {
|
|
float: left;
|
|
}
|
|
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
|
|
/* header */
|
|
|
|
#menu {
|
|
height: 50px;
|
|
background: url('images/menu.png') repeat-x;
|
|
min-width: 980px;
|
|
}
|
|
|
|
#menu .container-wrap {
|
|
background: url('images/menu-bg.png') no-repeat top;
|
|
height: 50px;
|
|
}
|
|
|
|
#header-content {
|
|
background: url('images/header.png') repeat-x;
|
|
height: 150px;
|
|
min-width: 980px;
|
|
}
|
|
|
|
#header-content .container-wrap {
|
|
background: url('images/header-bg.png') no-repeat top;
|
|
height: 150px;
|
|
overflow: hidden;
|
|
min-width: 980px;
|
|
}
|
|
|
|
#logo-wrap {
|
|
height: 50px;
|
|
float: left;
|
|
}
|
|
|
|
#logo-wrap a {
|
|
color: #fff;
|
|
font-size: 22px;
|
|
line-height: 50px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
text-shadow: 0 2px 0 #000;
|
|
}
|
|
|
|
#navigation {
|
|
float: right;
|
|
height: 31px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#navigation li {
|
|
height: 31px;
|
|
list-style: none;
|
|
float: left;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
#navigation li a {
|
|
display: block;
|
|
height: 31px;
|
|
text-indent: -9999px;
|
|
}
|
|
|
|
#nav-home {
|
|
background: url('images/navigation/home.png');
|
|
width: 56px;
|
|
}
|
|
|
|
#nav-portfolio {
|
|
background: url('images/navigation/portfolio.png');
|
|
width: 76px;
|
|
}
|
|
|
|
#nav-blog {
|
|
background: url('images/navigation/blog.png');
|
|
width: 48px;
|
|
}
|
|
|
|
#nav-about {
|
|
background: url('images/navigation/about.png');
|
|
width: 58px;
|
|
}
|
|
|
|
#nav-contact {
|
|
background: url('images/navigation/contact.png');
|
|
width: 70px;
|
|
}
|
|
|
|
#navigation li a:hover { background-position: 0px -31px; }
|
|
#navigation li a:active { background-position: 0px -93px; }
|
|
#navigation li a.active { background-position: 0px -62px; }
|
|
|
|
|
|
.header-title {
|
|
position: relative;
|
|
color: #fff;
|
|
text-indent: -9999px;
|
|
height: 40px;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.header-title span {
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
#title-we-are-fabulous { width: 286px; }
|
|
#title-we-are-fabulous span { background-image: url('images/titles/we-are-fabulous.png'); }
|
|
|
|
#title-our-awesome-work { width: 337px; }
|
|
#title-our-awesome-work span { background-image: url('images/titles/our-awesome-work.png'); }
|
|
|
|
#title-our-inner-thoughts { width: 333px; }
|
|
#title-our-inner-thoughts span { background-image: url('images/titles/our-inner-thoughts.png'); }
|
|
|
|
#title-wait-who-are-yall { width: 332px; }
|
|
#title-wait-who-are-yall span { background-image: url('images/titles/wait-who-are-yall.png'); }
|
|
|
|
#title-lets-get-in-touch { width: 304px; }
|
|
#title-lets-get-in-touch span { background-image: url('images/titles/lets-get-in-touch.png'); }
|
|
|
|
/* body */
|
|
|
|
.body {
|
|
background: #faf9f5 url('images/body.png') repeat-x;
|
|
min-width: 980px;
|
|
text-shadow: 0px 1px 0px #fff;
|
|
padding: 50px 0 20px;
|
|
}
|
|
|
|
.body .container {
|
|
position: relative;
|
|
}
|
|
|
|
#home-body {
|
|
min-height: 390px;
|
|
}
|
|
|
|
.body h1 {
|
|
color: #1a160d;
|
|
}
|
|
|
|
.body p {
|
|
color: #4c4326;
|
|
}
|
|
|
|
.body .column ul {
|
|
color: #4c4326;
|
|
}
|
|
|
|
.body p a, .body p strong , .body h1 a{
|
|
color: #1a160d;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.body p a:hover {
|
|
border-bottom: 2px solid #1a170f;
|
|
}
|
|
|
|
/* window */
|
|
|
|
#window {
|
|
width: 630px;
|
|
height: 500px;
|
|
background: url('images/window/main.png') no-repeat;
|
|
position: absolute;
|
|
right: -10px;
|
|
top: -180px;
|
|
padding: 40px 10px 10px 10px;
|
|
}
|
|
|
|
/* window slider */
|
|
|
|
#window-prev, #window-next {
|
|
position: absolute;
|
|
z-index: 9999;
|
|
top: 235px;
|
|
display: block;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
#window-prev {
|
|
background: url('images/window/prev.png') no-repeat;
|
|
left: 20px;
|
|
}
|
|
|
|
#window-next {
|
|
background: url('images/window/next.png') no-repeat;
|
|
right: 20px;
|
|
}
|
|
|
|
#window-prev:hover, #window-next:hover {
|
|
background-position: 0 -30px;
|
|
}
|
|
|
|
#window a:hover {
|
|
border: none;
|
|
}
|
|
|
|
/* portfolio */
|
|
|
|
.portfolio-description {
|
|
float: left;
|
|
width: 300px;
|
|
}
|
|
|
|
.portfolio-description p {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.portfolio-image {
|
|
width: 630px;
|
|
float: right;
|
|
height: 301px;
|
|
margin-bottom: 49px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.portfolio-image ul {
|
|
height: 300px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.portfolio-hover {
|
|
height: 301px;
|
|
width: 630px;
|
|
background: url('images/portfolio/design/hover.png') no-repeat;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.container .portfolio-item:first-child .portfolio-image .portfolio-hover {
|
|
background: url('images/portfolio/design/hover-first.png') no-repeat;
|
|
}
|
|
|
|
.container .portfolio-item:last-child .portfolio-description p {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.container .portfolio-item:last-child .portfolio-image {
|
|
margin-bottom: 29px;
|
|
}
|
|
|
|
.portfolio-control {
|
|
position: absolute;
|
|
bottom: 1px;
|
|
left: 0px;
|
|
background: url('images/portfolio/design/control.png') no-repeat;
|
|
width: 630px;
|
|
height: 30px;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.portfolio-control a {
|
|
display: block;
|
|
width: 45px;
|
|
height: 30px;
|
|
position: absolute;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.portfolio-control a.prev {
|
|
background-image: url('images/portfolio/design/prev.png');
|
|
left: 0px;
|
|
}
|
|
|
|
.portfolio-control a.next {
|
|
background-image: url('images/portfolio/design/next.png');
|
|
right: 0px;
|
|
}
|
|
|
|
.portfolio-control a:hover {
|
|
border: none;
|
|
}
|
|
|
|
/* blog */
|
|
|
|
.indent {
|
|
height: 3px;
|
|
background: url('images/blog/indent.png');
|
|
margin: 20px 0 50px;
|
|
}
|
|
|
|
#blog-nav {
|
|
margin-top: -20px;
|
|
}
|
|
|
|
#blog-subscribe {
|
|
width: 300px;
|
|
height: 40px;
|
|
background: url('images/blog/subscribe.png');
|
|
display: block;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
#blog-search-field {
|
|
width: 200px;
|
|
height: 16px;
|
|
background: url('images/blog/search.png') #e6e3da left no-repeat;
|
|
border: none;
|
|
padding: 12px 30px;
|
|
font-family: helvetica, arial, sans-serif;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #807c73;
|
|
float: left;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
#blog-submit {
|
|
background: url('images/blog/icon.png');
|
|
height: 40px;
|
|
width: 40px;
|
|
border: none;
|
|
float: left;
|
|
}
|
|
|
|
#blog-submit:hover {
|
|
background-position: 0 -40px;
|
|
}
|
|
|
|
#blog-categories li {
|
|
list-style: none;
|
|
line-height: 20px;
|
|
margin: 0;
|
|
}
|
|
|
|
#blog-categories li a {
|
|
color: #4c4326;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* post */
|
|
|
|
#comment-list {
|
|
margin-top: 50px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#comment-list li {
|
|
list-style: none;
|
|
}
|
|
|
|
.avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.comment-content {
|
|
width: 540px;
|
|
float: right;
|
|
}
|
|
|
|
#comment-form {
|
|
width: 630px;
|
|
float: left;
|
|
}
|
|
|
|
#comment-form input, #comment-form textarea {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.comment-input, #comment-message {
|
|
background: #e6e3da;
|
|
font-family: helvetica, arial, sans-serif;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #807c73;
|
|
border: none;
|
|
}
|
|
|
|
#comment-name, #comment-email, #comment-website {
|
|
padding: 12px 30px;
|
|
}
|
|
|
|
#comment-name, #comment-email {
|
|
width: 240px;
|
|
float: left;
|
|
}
|
|
|
|
#comment-name {
|
|
margin-right: 30px;
|
|
}
|
|
|
|
#comment-website {
|
|
width: 570px;
|
|
}
|
|
|
|
#comment-message {
|
|
padding: 12px 30px;
|
|
height: 126px;
|
|
width: 570px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
#comment-submit {
|
|
display: block;
|
|
background: url('images/blog/submit.png');
|
|
border: none;
|
|
height: 40px;
|
|
width: 113px;
|
|
float: right;
|
|
}
|
|
|
|
#comment-submit:hover {
|
|
display: block;
|
|
background-position: 0 -40px;
|
|
border: none;
|
|
height: 40px;
|
|
width: 113px;
|
|
}
|
|
|
|
/* about */
|
|
|
|
.profile-image {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* contact */
|
|
|
|
#contact-form {
|
|
width: 630px;
|
|
float: left;
|
|
}
|
|
|
|
#contact-form input, #contact-form textarea {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.contact-input, #contact-message {
|
|
background: #e6e3da;
|
|
font-family: helvetica, arial, sans-serif;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #807c73;
|
|
border: none;
|
|
}
|
|
|
|
#contact-name, #contact-email, #contact-website {
|
|
padding: 12px 30px;
|
|
}
|
|
|
|
#contact-name, #contact-email {
|
|
width: 240px;
|
|
float: left;
|
|
}
|
|
|
|
#contact-name {
|
|
margin-right: 30px;
|
|
}
|
|
|
|
#contact-website {
|
|
width: 570px;
|
|
}
|
|
|
|
#contact-message {
|
|
padding: 12px 30px;
|
|
height: 276px;
|
|
width: 570px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
#contact-submit {
|
|
display: block;
|
|
background: url('images/contact/submit.png');
|
|
border: none;
|
|
height: 40px;
|
|
width: 113px;
|
|
}
|
|
|
|
#contact-submit:hover {
|
|
display: block;
|
|
background-position: 0 -40px;
|
|
border: none;
|
|
height: 40px;
|
|
width: 113px;
|
|
}
|
|
|
|
#contact-map {
|
|
background: url('images/contact/map.png');
|
|
width: 240px;
|
|
height: 140px;
|
|
margin-bottom: 30px;
|
|
padding: 30px;
|
|
}
|
|
|
|
#contact-map-pop-up {
|
|
background: url('images/contact/pop-up.png') no-repeat;
|
|
width: 200px;
|
|
height: 85px;
|
|
padding: 15px 20px 0 20px;
|
|
}
|
|
|
|
#contact-map-pop-up p {
|
|
margin: 0;
|
|
text-shadow: 0 -1px 0 #000;
|
|
color: #fff;
|
|
}
|
|
|
|
#contact-map-pop-up p a {
|
|
color: #fff;
|
|
}
|
|
|
|
#contact-map-pop-up p a:hover {
|
|
border: none;
|
|
}
|
|
|
|
/* footer */
|
|
|
|
#footer-main {
|
|
background: #332f24 url('images/footer/main.png') repeat-x;
|
|
padding: 50px 0 20px 0;
|
|
color: #fff;
|
|
min-width: 980px;
|
|
}
|
|
|
|
#footer-main a {
|
|
color: #fff;
|
|
}
|
|
|
|
#footer-main a:hover {
|
|
border-bottom: 2px solid #fff;
|
|
}
|
|
|
|
#footer-legal {
|
|
background: url('images/footer/legal.png') repeat-x;
|
|
color: #807966;
|
|
padding: 30px 0 0;
|
|
}
|
|
|
|
#footer h1 {
|
|
text-shadow: 0px -1px 0px #000;
|
|
}
|
|
|
|
#footer-legal a {
|
|
color: #807966;
|
|
}
|
|
|
|
#footer-legal a:hover {
|
|
border-bottom: 2px solid #807966;
|
|
}
|
|
|
|
.footer-map {
|
|
width: 180px;
|
|
float: left;
|
|
}
|
|
|
|
.footer-contact {
|
|
width: 120px;
|
|
float: right;
|
|
}
|
|
|
|
#twitter-msg-wrap {
|
|
background: #665e47 url('images/footer/twitter-top.png') top no-repeat;
|
|
min-height: 10px;
|
|
margin-bottom: 30px;
|
|
position: relative;
|
|
}
|
|
|
|
#twitter-msg {
|
|
background: url('images/footer/twitter-bottom.png') bottom no-repeat;
|
|
padding: 20px 20px 40px;
|
|
}
|
|
|
|
#twitter-msg p {
|
|
margin: 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#twitter-time {
|
|
position: absolute;
|
|
bottom: -40px;
|
|
right: 80px;
|
|
}
|
|
|
|
#twitter-follow {
|
|
margin-top: 10px;
|
|
} |