Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
585 lines (484 sloc) 9.31 KB
/*
Theme Name: Victoria Park
Author: Terry Sutton
Author URI: http://waterstreetgm.org/
Description: A reworking of the victoria_park theme from Automattic.
Version: 0.2
*/
@import "elements.less";
@import "normalize.css";
/* Colour Variables */
@blue: #5B83AD;
@light-blue: @blue + #111;
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* =Structure
-------------------------------------------------------------- */
body{
font: 16px/28px Georgia, serif;
}
#page {
display: block;
margin: 1em auto;
width: 960px;
}
#main{
overflow:hidden;
box-shadow: 0 0 5px @blue;
padding: 10px;
}
header#branding{
background: #eee;
padding: 5px;
}
#primary {
.drop-shadow(0, 1px, 2px, 0.2);
float: left;
width: 640px;
border: 1px solid #eee;
padding: 25px;
}
#content { }
article{
width: 550px;
border-bottom: 1px solid;
margin-bottom: 25px;
}
#secondary {
float: right;
overflow: hidden;
width: 220px;
border: 1px solid #ccc;
}
#colophon {
clear: both;
display: block;
width: 100%;
border: 1px solid;
}
/* =Type and basics
-------------------------------------------------------------- */
a{
color:#444;
text-decoration: none;
border-bottom: 1px solid;
.transition(.5s, ease-out);
}
em{
font-style: italic;
}
strong{
font-weight: bold;
}
p {
margin: 0 0 1em;
}
h1,h2,h3,h4,h5 {
margin: 0 0 1em;
}
h1 {
font-size: 1em;
}
h1.entry-title{
font-size: 24px;
font-weight: normal;
}
/* Alignment */
.alignleft {
display: inline;
float: left;
}
.alignright {
display: inline;
float: right;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
/* =Header
-------------------------------------------------------------- */
#site-title {
font-size: 2em;
font-weight: bold;
margin: .67em 0;
}
#site-description {
font-size: 1em;
font-weight: normal;
margin: 0 0 1em;
}
/* =Menu
-------------------------------------------------------------- */
#access {
background: #ccc;
display: block;
float: left;
margin: 20px auto 1em;
width: 100%;
}
#access ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
display: block;
line-height: 2em;
padding: 0 1em;
text-decoration: none;
}
#access ul ul {
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
position: absolute;
top: 2em;
left: 0;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #dedede;
line-height: 1em;
padding: .5em .5em .5em 1em;
width: 10em;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #dedede;
}
#access ul ul a:hover {
background: #cecece;
}
#access ul li:hover > ul {
display: block;
}
/* =Content
-------------------------------------------------------------- */
.sticky { }
.entry-meta {
clear: both;
display: block;
font-size: 80%;
font-style: italic;
}
.single-author .entry-meta .byline {
display: none;
}
#content nav {
display: block;
overflow: hidden;
}
#content nav .nav-previous {
float: left;
width: 50%;
}
#content nav .nav-next {
float: right;
text-align: right;
width: 50%;
}
#content #nav-above {
display: none;
}
.paged #content #nav-above,
.single #content #nav-above {
display: block;
}
#nav-below {
margin: 1em 0 0;
}
.page-link {
clear: both;
margin: 0 0 1em;
}
.page .edit-link {
clear: both;
display: block;
}
/* 404 page */
.error404 .widget {
float: left;
width: 33%;
}
.error404 .widget .widgettitle,
.error404 .widget ul {
margin-right: 1em;
}
.error404 .widget_tag_cloud {
clear: both;
float: none;
width: 100%;
}
/* Buttons */
button {
display: inline-block;
font-weight: bold;
line-height: 27px;
min-width: 50px;
overflow: hidden;
padding: 0 9px;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
margin: 0;
-webkit-border-radius: 3px;
-webkit-background-clip: padding-box;
-webkit-box-sizing: border-box;
color: #505c77;
text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
border: solid 1px;
background: -webkit-gradient(linear, left top, left bottom, from(#fdfefe), to(#f0f1f2));
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, .05);
box-sizing: border-box;
border-color: #ccc #c0c1c2 #bdbec0;
}
button.blue {
font-size: 13px;
line-height: 36px;
font-family: sans-serif;
font-weight: bold;
color: #fff;
padding: 0 15px;
border: solid 1px;
border-radius: 3px;
background: -webkit-gradient( linear, left top, left bottom, from(#50A9E7), to(#307CB3) );
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.08);
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
border-color: #2978B0 #266FA5 #1C557D;
}
/* Notices */
.post .notice,
.error404 #searchform {
background: #eee;
display: block;
padding: 1em;
}
/* Image Attachments */
.image-attachment div.entry-meta {
float: left;
}
.image-attachment nav {
float: right;
margin: 0 0 1em 0;
}
.image-attachment .entry-content {
clear: both;
}
.image-attachment .entry-content .entry-attachment {
background: #eee;
margin: 0 0 1em;
padding: 1em;
text-align: center;
}
.image-attachment .entry-content .attachment {
display: block;
margin: 0 auto;
text-align: center;
}
/* Aside Posts */
.format-aside .entry-header {
display: none;
}
.single .format-aside .entry-header {
display: block;
}
.format-aside .entry-content,
.format-aside .entry-summary {
padding-top: 1em;
}
.single .format-aside .entry-content,
.single .format-aside .entry-summary {
padding-top: 0;
}
/* Gallery Posts */
.format-gallery .gallery-thumb {
float: left;
margin: 0 1em 0 0;
}
/* Image Posts */
.format-image .entry-header {
display: none;
}
.single .format-image .entry-header {
display: block;
}
.format-image .entry-content,
.format-image .entry-summary {
padding-top: 1em;
}
.single .format-image .entry-content,
.single .format-image .entry-summary {
padding-top: 0;
}
/* =Images
-------------------------------------------------------------- */
a img {
border: none;
}
p img {
margin-bottom: 0.5em; /* a small bottom margin prevents content floating under images */
}
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img {
max-width: 100%; /* When images are too wide for containing element, force them to fit. */
height: auto; /* Override height to match resized width for correct aspect ratio. */
}
img.alignleft {
margin-right: 1em;
}
img.alignright {
margin-left: 1em;
}
.wp-caption {
padding: .5em;
text-align: center;
}
.wp-caption img {
margin: .25em;
}
.wp-caption .wp-caption-text {
margin: .5em;
}
.gallery-caption {
}
.wp-smiley {
margin: 0;
}
/* =Forms
-------------------------------------------------------------- */
#searchform label {
display: none;
}
#searchform input#s {
width: 60%;
}
input[type=text],
input#s {
margin: 0 1em 0 0;
width: 60%;
}
textarea {
width: 80%;
}
/* Class for labelling required form items */
.required {
color: #cc0033;
}
/* =Comments
-------------------------------------------------------------- */
article.comment {
display: block;
}
#respond input[type=text] {
display: block;
width: 60%;
}
#respond textarea {
display: block;
margin: 0 0 1em;
width: 80%;
}
#respond .form-allowed-tags {
clear: both;
width: 80%;
}
#respond .form-allowed-tags code {
display: block;
}
/* =Widgets
-------------------------------------------------------------- */
.widget {
display: block;
}
.widget-area .widget_search {
overflow: hidden;
}
.widget-area .widget_search input {
float: left;
}
/* Increase the size of the content area for templates without sidebars */
.full-width #content,
.image-attachment #content,
.error404 #content {
margin: 0;
}
/* Text meant only for screen readers */
.screen-reader-text,
.assistive-text {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
/* =Footer
-------------------------------------------------------------- */
#colophon {
padding: 1em 0 0;
}
/* =Group/Clearfix
-------------------------------------------------------------- */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
::selection {background: rgb(255,255,158);}
::-moz-selection {background: rgb(255,255,158);}
img::selection {background: transparent;}
img::-moz-selection {background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}
/* =Reponsive styles
-------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
body {
width: 712px;
background: #eee;
}
}
/* iPhone standard layout: 320px.
Gutters: 24px.
Outer margins: 34px.
Inherits styles from: Default Layout.
---------------------------------------------
cols 1 2 3
px 68 160 252 */
@media only screen and (max-width: 767px) {
body {
width: 252px;
background: #ccc;
}
}
/* iPhone wide Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
body {
width: 436px;
background: #eee;
}
}