/** * LESS CSS * */ @site-background-color: #3a646a; @border-color: #3a646a; @column-background-color: #4399d4; @headline-color: #6edffd; @logo-background-color: #9bcd00; @full-width: 970px; @logo-color: #9bcd00; .rotate (@deg: 45deg) { -webkit-transform: rotate(@deg); -moz-transform: rotate(@deg); -ms-transform: rotate(@deg); -o-transform: rotate(@deg); transform: rotate(@deg); } .border-radius(@radius: 1em) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } /** * Logo styles * */ #the-site-logo-wrapper { float: right; display: inline-block; padding: 1em 1.3em 2em 4.6em; } #the-site-logo { position: relative; display: inline-block; font-family: 'Raleway', arial, serif; color: @logo-color; } #the-site-logo .the-logo-stripline { position: absolute; height: 5em; width: 1px; top: 0; left: -0.6em; } .no-cssgradients #the-site-logo .the-logo-stripline { background-color: @logo-color; } .cssgradients #the-site-logo .the-logo-stripline { background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.6, hsla(75, 100%, 40.1961%, 1)), color-stop(0, hsla(75, 100%, 40.1961%, 0)) ); background-image: -moz-linear-gradient( center bottom, hsla(75, 100%, 40.1961%, 0) 0%, hsla(75, 100%, 40.1961%, 1) 60%); background-image: -ms-linear-gradient(top, hsla(75, 100%, 40.1961%, 1), hsla(75, 100%, 40.1961%, 0)); background-image: -o-linear-gradient(top, hsla(75, 100%, 40.1961%, 1), hsla(75, 100%, 40.1961%, 0)); background-image: linear-gradient(top, hsla(75, 100%, 40.1961%, 1), hsla(75, 100%, 40.1961%, 0)); } #the-site-logo small { font-size: 1em; } .the-logo { font-size: 1.5em; position: absolute; width: 1em; height: 1em; left: -1.8em; top: 0.3em; .rotate(45deg); } #the-site-logo h2 { font-size: 2em; } .the-logo div { position: absolute; background: @logo-color; width: 1em; height: 0.26em; overflow: hidden; .border-radius(0.13em); } .no-transform .the-logo div { display: none; } .the-logo div:nth-child(1) { top: 0.01em; left: 0; } .the-logo div:nth-child(2) { top: 0.37em; left: 0; } .the-logo div:nth-child(3) { top: 0.74em; left: 0; } #header-line { border-top: 3px solid @logo-color; } /** * MAIN contex */ body { background-color: @site-background-color; } #container { max-width: @full-width; margin: 0 auto; } #main { background-color: @border-color; padding: 5px; color: #fff; font-family: 'ProximaNovaRegular', arial, serif; } #main h1, #main h2, #main h3, #main h4, #main h5, #main h6 { font-family: 'Amaranth', arial, serif; color: @headline-color; } #main h1 { font-size: 4em; margin: 0 0 0.3em 0; color: #6edffd; } #main h2 { font-size: 1.6em; margin: 0 0 0.5em 0; color: #f4fff2; } .item { float: left; background-color: @column-background-color; margin: 5px; overflow: hidden; color: #f4f9fc; font-size: 1.2em; } .item ol { padding: 0; margin: 0; list-style: none; } .item ol li { border-top: 1px solid #208dac; padding: 5px 10px; line-height: 1.5em; } .item ol li:hover { background-color: #6edffd; } .item ol li a { text-decoration: none; color: #000; } .item ol li small { font-style: italic; font-size: 70%; padding: 0 0 0 8px; } .item ol li small.info { float: right; margin: 0 0 0 5px; } .item ol li .the-header-info img { float: right; margin: 0 0 0 5px; opacity: 0.6; } .item .the-subheader { font-size: 80%; } .item .the-item-details { display: none; } .item .the-item-details img { text-align: center; } .item p { margin-bottom: 12px; line-height: 1.4em; padding: 0 10px; } .item h2 { padding: 10px 10px 0 10px; } .col1 { width: 230px; } .col2 { width: 470px; } .col3 { width: 710px; } .col4 { width: 960px; } .item.zend-logo { background: @logo-background-color url(../img/zend-logo.png) no-repeat center; min-height: 180px; } .item.zend-links { background-color: @logo-background-color !important; } .item.zend-links ol li { border-top-color: #86b901 !important; } .the-about-site-block { min-height: 180px; } .nobackground { background-color: transparent !important; } #container > header, #container > footer { min-height: 20px; } #disqus_thread { padding: 0 10px; } #dsq-account-dropdown a, #dsq-subscribe a, #dsq-subscribe a em { color: #FFF; text-decoration: none; } .dsq-comment-header { background-color: @logo-background-color !important; } .dsq-comment-header a { color: #fff; } @media all and (max-width: 505px) and (min-width: 1px) { .col2, .col3, .col4 { width: 230px; } h1 { font-size: 2.3em; margin: 0 0 0.3em 0; } h2 { font-size: 1.3em; margin: 0 0 0.5em 0; } } @media all and (max-width: 745px) and (min-width: 505px) { .col3, .col4 { width: 470px; } } @media all and (max-width: 984px) and (min-width: 745px) { .col4 { width: 710px; } }