Skip to content

Instantly share code, notes, and snippets.

@jrcryer
Created February 18, 2013 21:09
Show Gist options
  • Save jrcryer/4980770 to your computer and use it in GitHub Desktop.
Save jrcryer/4980770 to your computer and use it in GitHub Desktop.
WPUW - Base
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Wordpress Users Wales</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body class="home blog vigilance-light highlander-enabled highlander-light infinite-scroll neverending">
<div id="wrapper">
<div id="header" class="clear">
<h1 id="title"><a href="http://cardiffusers.wordpress.com"><span>Wordpress Users Wales</span></a></h1>
<div id="description">
<h2>Just another WordPress user group.</h2>
</div>
<!--end description-->
<div id="nav">
<ul class="menu">
<li class="page_item current_page_item"><a href="http://cardiffusers.wordpress.com">Home</a></li>
</ul>
</div>
<!--end nav-->
</div>
<!--end header-->
<div id="content" class="pad">
<div id="post-310" class="post-310 post type-post status-publish format-standard hentry category-housekeeping">
<div class="post-header">
<h2><a href="http://cardiffusers.wordpress.com/2013/01/24/getting-responsive-with-wordpress/" rel="bookmark" title="Permanent Link to Getting Responsive With WordPress">Getting Responsive With&nbsp;WordPress</a></h2>
<div class="date">January 24, 2013</div>
</div>
<!--end post header-->
<div class="meta clear">
<div class="tags"></div>
<div class="author">
<span class="by-author"><span class="sep">by</span> <span class="author vcard"><a class="url fn n" href="http://cardiffusers.wordpress.com/author/mrsmoti/" title="View all posts by philippa" rel="author">philippa</a></span> </span>
</div>
</div>
<!--end meta-->
<div class="entry clear">
<p><a href="http://cardiffusers.files.wordpress.com/2013/01/wpress_responsive.png"><img src="http://cardiffusers.files.wordpress.com/2013/01/wpress_responsive.png?w=300&amp;h=152" alt="wordpress responsive" width="300" height="152" class="alignleft size-medium wp-image-318" /></a>Hello there and we&#8217;ve just planned our first meet-up for 2013. </p>
<p>WordPress.com itself has had a responsive overhaul, as you are possibly aware. </p>
<p>And if a wordpress developer, designer or content-maker, <em>whether</em> we need to use responsive design &#8211; and <em>how</em> we use it &#8211; may be vexing&#8230;</p>
<p>We&#8217;re lucky to have <a href="http://jrcryer.github.com/">James Cryer</a> steering this session, who some of you may remember from our very first meeting. </p>
<p>It will be held at <a href="http://indycube.com/page-1/indycube-central/">Indycube Castle Arcade,</a> Cardiff on Tuesday, February 19th, from 5.30 -7.30.</p>
<p>Everyone is welcome and please register<a href="http://www.eventbrite.com/event/5323986186/eorg?ebtv=C"> here </a>.</p>
<p>The event is free but we will be crowdsourcing with a bucket some financial appreciation to Indycube, who have been once more kind enough to host us. </p>
<p>So if can hoist your wallets along with your lovely selves, that would be brilliant&#8230;. thanks! </p>
<div id="jp-post-flair" class="sharedaddy sd-like-enabled sd-sharing-enabled"></div>
</div>
<!--end entry-->
<div class="post-footer">
<div class="comments"><a href="http://cardiffusers.wordpress.com/2013/01/24/getting-responsive-with-wordpress/#comments" title="Comment on Getting Responsive With WordPress">1 Comment</a></div>
<div class="categories">from &rarr; <a href="http://cardiffusers.wordpress.com/category/housekeeping/" title="View all posts in Housekeeping" rel="category tag">Housekeeping</a></div>
</div>
<!--end post footer-->
</div>
<!--end post-->
<div class="navigation index">
<div class="alignleft"><a href="http://cardiffusers.wordpress.com/page/2/">&laquo; Older Entries</a></div>
<div class="alignright"></div>
</div>
<!--end navigation-->
</div>
<!--end content-->
<div id="sidebar">
<ul>
<li id="linkcat-179413" class="widget widget_links">
<h2 class="widgettitle">Wordpress Resources</h2>
<ul class="xoxo blogroll">
<li><a href="http://www.bobwp.com/">Bob on Wordpress</a></li>
<li><a href="http://www.expand2web.com/blog/">Expand 2 Web</a></li>
<li><a href="http://www.youtube.com/watch?v=NyXQ7DNr_CI&amp;feature=channel_video_title">How to Install Wordpress.Org Themes</a></li>
<li><a href="http://www.youtube.com/watch?v=MWYi4_COZMU" title="video to take you through basic steps">How To Set Up Wordpress Com Blog</a></li>
<li><a href="http://ineedhelpwithwordpress.com/">I Need Help With Wordpress</a></li>
<li><a href="http://themeshaper.com" title="automatic&rsquo;s theme blog">themeshaper</a></li>
<li><a href="http://www.wpbeginner.com">WP Beginner</a></li>
<li><a href="http://wpebooks.com/">WP E-Books</a></li>
</ul>
</li>
</ul>
</div>
<!--end sidebar-->
<div id="footer">
<div class="footer-liner">
<p class="right"><a href="http://wordpress.com/?ref=footer" rel="generator">Blog at WordPress.com</a>.</p>
<p>Theme: <a href="http://theme.wordpress.com/themes/vigilance/" title="Learn more about this theme">Vigilance</a> by <a href="http://thethemefoundry.com/" rel="designer">The Theme Foundry</a>.</p>
</div>
<!-- .footer-liner -->
</div>
<!--end footer-->
</div>
<!--end wrapper-->
</body>
</html>
ul,ol {
list-style:none;
}
h1,h2,h3,h4,h5,h6,pre,code,p,caption,th,td {
font-size:1em;
}
address {
font-style:normal;
}
body {
font-size:62.5%;
font-family:Georgia, "Times New Roman", Times, Serif;
line-height:2.2em;
color:#333;
background-color:#fff;
}
a:hover {
text-decoration:underline;
color:#58181b;
}
#wrapper:before,#wrapper:after {
content:'';
display:table;
}
#wrapper:after {
clear:both;
}
#wrapper {
width:920px;
text-align:left;
zoom:1;
margin:0 auto;
}
#content {
float:left;
width:600px;
padding:20px 20px 20px 0;
}
body.attachment #content {
width:920px;
padding:20px 0;
}
#sidebar {
float:right;
width:300px;
padding-bottom:20px;
}
.thin-sidebar {
float:left;
width:140px;
}
.spad {
padding-right:20px;
}
#footer {
clear:both;
padding-top:5px;
border-top:1px solid #eee;
color:#666;
font-size:1.1em;
}
.clear:after,li.comment:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#header {
border-bottom:5px solid #333;
position:relative;
padding:20px 0 0;
}
#title {
width:920px;
overflow:hidden;
font-size:4.6em;
font-weight:700;
line-height:1.3em;
text-align:center;
vertical-align:middle;
background:url(../img/wuw2.jpg) no-repeat;
height:180px;
text-indent:-999em!important;
margin:0;
}
#title a:link,#title a:visited {
display:block;
height:100%;
overflow:auto;
font-size:48px;
text-align:center;
vertical-align:middle;
}
#title a:hover {
color:#772124;
text-decoration:none;
}
#title span {
position:relative;
top:25%;
}
#description {
float:left;
margin-top:15px;
}
#description h2 {
font-size:1.2em;
font-weight:400;
color:#666;
}
#nav {
float:right;
font-size:1.5em;
font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
margin:15px 0 10px;
}
#nav ul {
position:relative;
padding:0 0 0 20px;
}
#nav ul li {
position:relative;
float:left;
margin:0 0 0 15px;
}
#nav li a {
padding-top:.1em;
color:#333;
text-decoration:none;
}
#nav ul li a:hover,#nav ul li:hover > a,#nav ul li.current_page_item > a,#nav ul li.current_page_parent > a,#nav ul li.current_page_ancestor > a,#nav ul li.current-cat > a,#nav ul li.current-menu-ancestor > a,#nav ul li.current-menu-item > a,#nav ul li.current-menu-parent a {
color:#772124;
text-decoration:none;
border-top:4px solid #772124;
}
#nav ul ul:hover > a {
border-top:0!important;
padding-top:4px;
}
#nav .children li,#nav .sub-menu li {
background:#fff;
padding-left:4px;
margin:0 0 0 11px;
}
#nav ul ul {
display:none;
position:absolute;
top:22px;
left:0;
float:left;
z-index:99999;
padding:0;
}
#nav ul ul li {
min-width:85px;
}
#nav ul ul a {
width:81px;
padding-right:4px;
}
#nav ul li:hover > ul {
display:block;
}
#menu {
padding-bottom:10px;
}
#menu img {
border:2px solid #eee;
}
.alert-box {
background:#e9ebd9;
border:1px solid #e3e1db;
margin:0 0 20px;
padding:20px;
}
.post-header {
border-bottom:4px double #eee;
padding-bottom:7px;
}
.post-header h1,.post-header h2 {
font-size:2.6em;
line-height:1.1em;
}
.post-header h1 a:link,.post-header h1 a:visited,.post-header h2 a:link,.post-header h2 a:visited {
color:#444;
}
.post .date {
padding-top:10px;
color:#757575;
font-size:1.6em;
font-weight:400;
font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
text-transform:uppercase;
}
.post .date span {
color:#ddd;
font-weight:700;
}
.meta {
font-size:1.2em;
color:#666;
margin:10px 0 20px;
}
.meta a:link,.meta a:visited {
color:#666;
font-style:normal;
}
.tags {
float:right;
width:400px;
text-align:right;
font-style:italic;
}
.sticky .entry {
background-color:#eee;
padding:10px;
}
.entry p.notice {
background-color:#fffbcc;
border:1px solid #f8f4c7;
padding:15px;
}
.entry h2,.entry h3,.entry h4 {
font-size:1.3em;
padding:15px 0 5px;
}
.entry h3 {
padding-top:10px;
font-size:1em;
}
.entry h4 {
padding-top:10px;
font-size:.9em;
}
pre {
overflow:auto;
background-color:#f3f3f3;
color:#000;
margin:10px 0;
padding:1em 10px;
}
code {
font:1.1em Consolas, Courier New, sans-serif;
background-color:#f3f3f3;
color:#000;
padding:2px 3px;
}
blockquote {
display:block;
font-style:italic;
font-size:14px;
color:#141310;
background:#e7e6e2 url(images/blockquote.gif) no-repeat top left;
margin:20px 0;
padding:20px 20px 10px 45px;
}
.entry ul,.c-body ul {
margin:0 0 10px 10px;
}
.entry ul li,.c-body ul li {
display:block;
background:url(images/list-star.gif) no-repeat 0 .3em;
margin:5px 0 0;
padding:0 0 0 17px;
}
.entry ol,.c-body ol {
margin:0 0 15px 30px;
}
.entry ol li ol li,.c-body ol li ol li {
font-size:.9em;
list-style-type:lower-roman;
}
.entry ol li,.c-body ol li {
list-style-type:decimal;
list-style-position:outside;
margin:10px 0 0;
}
.entry img {
max-width:100%;
height:auto;
}
.navigation {
font-size:1.3em;
padding:10px 0;
}
.navigation.index {
padding:0;
}
.float-quote {
float:left;
width:300px;
background:#eaeaea;
border-top:4px solid #333;
border-bottom:4px solid #333;
margin:10px 10px 0 0;
padding:15px;
}
.entry .float-quote p {
font-size:1.2em;
font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
line-height:1.3em;
background:url(images/float-quote.gif) no-repeat top left;
margin:0;
padding:0 0 0 40px;
}
.highlight-box {
float:right;
width:200px;
font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
border-top:8px solid #000;
background:#772124;
color:#fff;
margin:0 0 10px 10px;
padding:10px;
}
.highlight-box a:link,.highlight-box a:visited {
color:#fff;
text-decoration:underline;
}
.entry .highlight-box p {
line-height:1.4em;
font-size:1.1em;
margin:10px 0;
}
.entry .highlight-box ul li {
font-size:1.1em;
background:url(images/list-square.gif) no-repeat 0 .4em;
}
.entry .highlight-box h2,.entry .highlight-box h3,.entry .highlight-box h4 {
color:#fff;
margin:0;
padding:0;
}
.highlight-box h2 {
text-transform:uppercase;
}
.post-footer {
width:100%;
overflow:hidden;
padding-bottom:2px;
border-bottom:1px solid #eee;
margin:10px 0 30px;
}
.comments {
float:left;
width:200px;
font-size:1.3em;
color:#757575;
text-transform:uppercase;
}
.comments a {
background:url(images/comments-bubble.gif) no-repeat 0 4px;
display:block;
color:#757575;
padding:0 0 0 25px;
}
.comments a:hover {
background-position:0 -24px;
color:#772124;
}
.categories {
float:right;
width:400px;
text-align:right;
font-size:1.1em;
font-style:italic;
color:#666;
}
.categories a:link,.categories a:visited {
color:#333;
font-style:normal;
}
h1.pagetitle,h2.pagetitle {
margin-bottom:20px;
padding-bottom:7px;
font-size:2.6em;
line-height:1.1em;
border-bottom:4px double #eee;
}
img.archive-comment {
float:right;
margin:0 .5em .5em 0;
}
.entries {
font-size:1.3em;
clear:both;
}
.entries ul {
background:transparent url(images/archives-dotted-line.gif) repeat-x bottom left;
margin:0;
padding:0 0 1px;
}
.entries ul li {
padding-top:1px;
background:transparent url(images/archives-dotted-line.gif) repeat-x top left;
}
.entries ul li a {
display:block;
margin:0;
padding:7px 0;
}
.entries ul li a:hover {
background-color:#F8F8F7;
text-decoration:none;
}
.entries span {
display:block;
text-align:right;
}
.entries span.archdate,.entries a:hover span.archdate {
float:left;
margin-right:3em;
padding-left:.5em;
width:130px;
height:28px;
color:#666;
text-align:left;
}
.entries span.comments_number {
float:right;
margin-right:.5em;
width:130px;
color:#666;
}
#sidebar-image {
padding-top:20px;
font-size:1.3em;
}
#sidebar-image p {
margin-bottom:15px;
line-height:1.6em;
}
h2.widgettitle {
font-size:1.4em;
font-weight:400;
text-transform:uppercase;
letter-spacing:1.05pt;
font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
border-bottom:1px solid #eee;
padding:25px 0 3px;
}
ul li.widget ul {
font-size:1.4em;
margin:0;
}
ul li.widget ul li ul {
margin-left:5px;
font-size:1em;
}
ul li.widget ul li {
border-bottom:1px solid #eee;
padding:6px 0;
}
ul li.widget ul li ul li {
border-bottom:none;
}
ul li.widget ul li a {
display:block;
background:url(images/list-item.gif) no-repeat 0 6px;
padding:0 0 0 15px;
}
ul li.widget ul li a:hover {
background-position:0 -136px;
}
ul li.widget ul#recentcomments li a {
background:none;
padding:0;
}
li.widget select {
margin-top:10px;
}
#rss-feed {
padding-top:10px;
}
#rss-feed p {
font-size:1.3em;
line-height:1.6em;
}
#rss-feed a.rss,#rss-feed a.email,#rss-feed a.twitter {
float:left;
font-size:1.3em;
display:block;
background:url(images/feed-icon.png) no-repeat 0 .25em;
margin:10px 10px 0 0;
padding:0 0 0 19px;
}
#rss-feed a.email {
background:url(images/mail-icon.png) no-repeat 0 .4em;
padding:0 0 0 25px;
}
#rss-feed a.twitter {
margin-right:0;
padding-left:19px;
background:url(images/twitter-icon.png) no-repeat 0 .15em;
}
#search_form input {
width:132px;
border:2px solid #acacac;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
background:#f4f4f4;
color:#888;
margin:10px 0 0;
padding:4px 2px;
}
#search_form input#searchsubmit {
padding:2px 10px;
}
.comment-number {
display:block;
font-size:1.3em;
background:url(images/comments-bubble-big.gif) no-repeat 0 .1em;
padding:0 0 10px 30px;
}
.comment-number span {
font-size:1.3em;
color:#777;
}
a#leavecomment {
padding-left:10px;
}
li.comment {
padding:20px 0 0;
}
#comments ul.children {
clear:both;
margin:10px 0 0 96px;
}
div.c-grav {
float:left;
width:60px;
text-align:right;
margin:0 15px 0 0;
}
div.c-grav img {
border:4px solid #e3e3e3;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
div.c-body {
margin-left:95px;
font-size:1.3em;
background:#f3f3f3;
-moz-border-radius:12px;
-webkit-border-radius:12px;
padding:20px 20px 10px;
}
span.asterisk {
float:right;
color:#772124;
font-size:2.2em;
}
div.c-date {
color:#bbb;
font-size:.9em;
line-height:0;
font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
font-weight:700;
padding:10px 0 5px;
}
.c-permalink a:link,.c-permalink a:visited {
margin-left:5px;
color:#ccc;
font-size:.7em;
font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
text-transform:uppercase;
}
div.reply {
padding:10px 0;
}
div.reply a:link,div.reply a:visited {
color:#aaa;
font-size:.9em;
font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
text-transform:uppercase;
border-bottom:1px dotted;
}
div.reply a:hover {
border-bottom:1px solid;
text-decoration:none;
}
form#commentform {
margin-bottom:20px;
}
#respond {
font-size:1.5em;
}
h4#postcomment,#reply-title {
font-size:1.2em;
color:#555;
border-bottom:1px solid #eee;
margin:20px 0;
padding:0 0 5px;
}
form#commentform label.comment-field {
display:block;
margin:10px 0 5px;
}
#respond input[type="text"] {
display:block;
margin-bottom:10px;
}
input.text-input,form#commentform textarea,#respond input[type="text"] {
background:#f8f8f8;
font-family:inherit;
font-size:.8667em;
border:1px solid #E6E6E6;
width:584px;
padding:7px;
}
.children input.text-input,.children form#commentform textarea,.children input[type="text"] {
width:99%;
}
input#author,input#email,input#url {
width:350px;
}
form#commentform input#submit {
width:150px;
padding:5px;
}
form#commentform p.guidelines {
font-size:.8em;
color:#777;
margin:10px 0;
}
p.subscribe-to-comments,p.comments-rss {
font-size:.9em;
margin:0 0 10px;
}
p.comments-rss a {
background:url(images/feed-icon.png) no-repeat 0 .15em;
padding:0 0 0 19px;
}
#comments object,#comments embed {
width:100%!important;
}
p.note {
font-style:italic;
font-size:1.3em;
}
h3.pinghead {
font-size:1.3em;
color:#444;
}
ol.pinglist {
list-style-type:decimal;
list-style-position:inside;
font-size:1.3em;
margin:0 0 10px 10px;
}
.entry .alignleft img,.entry .alignright img,.entry .aligncenter img {
border:1px solid #eee;
}
.entry .alignright,.entry .alignright .float-quote {
margin:0 0 10px 15px;
}
.entry .alignleft,.entry .alignleft .highlight-box {
margin:0 15px 10px 0;
}
.wp-caption p,.wp-caption dd {
font-style:italic;
color:#888;
}
#footer a:link,#footer a:visited {
color:#666;
text-decoration:underline;
}
.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}
.alignleft {
float:left;
}
body .vp_wsbutton {
margin:auto!important;
}
ul li.widget_twitter ul li a {
display:inline;
background:none;
padding:0;
}
ul li.widget_twitter ul li a:hover {
background:none;
}
ul li.widget_box {
padding-top:25px;
}
.entry,.widget {
word-wrap:break-word;
}
.gallery {
padding-bottom:20px;
}
.widget_image {
padding:15px 0 0;
}
.widget_calendar table {
border:0;
font-size:1.4em;
margin:.5em 0;
}
.widget_calendar table tr {
border:0;
}
.widget_calendar table th {
color:#737373;
text-transform:uppercase;
}
.widget_calendartable td,.widget_calendar table th {
border:0;
padding:5px 8px;
}
.thin-sidebar .widget_calendar table td,.thin-sidebar .widget_calendar table th {
font-size:1em;
padding:0;
}
#wpstats {
position:absolute;
left:5px;
margin:-10px 0 0;
}
#title a {
height:180px;
}
:link,:visited,.highlight-box a:hover {
text-decoration:none;
}
ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,.alert-box h2,.alert-box h3,.alert-box h4 {
margin:0;
padding:0;
}
a img,:link img,:visited img,.noborder {
border:none;
}
a:link,a:visited,.post-header h1 a:hover,.post-header h2 a:hover,.meta a:hover,.categories a:hover,#footer a:hover {
color:#772124;
}
div.skip-content,.form-allowed-tags {
display:none;
}
.entry a:link,.entry a:visited,.alert-box a:link,.alert-box a:visited,div.c-head {
font-weight:700;
}
.entry,pre code {
font-size:1.3em;
}
.entry p,.navigation.single {
margin-bottom:10px;
}
.alert-box p,div.textwidget p,div.c-body p {
margin:10px 0 0;
}
#search_form input:focus,form#commentform input:focus,form#commentform textarea:focus {
background:#fff;
}
div.reply,div.cancel-comment-reply,#footer p.right,.alignright {
float:right;
}
.comment-notes,#respond textarea,#respond input[type="submit"] {
margin-bottom:12px;
}
.comment-notes,#respond .required,#respond label {
font-size:12px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment