Permalink
Browse files

mobilized blog style

  • Loading branch information...
1 parent 0c41227 commit 4eb40ca7c7fd4947efccd46cce4c8b50438618d0 @angelo angelo committed May 30, 2012
Showing with 217 additions and 1 deletion.
  1. +3 −0 _layouts/default.html
  2. +206 −0 css/reefpoints.css
  3. BIN images/.DS_Store
  4. +8 −1 javascripts/reefpoints.js
View
@@ -34,6 +34,9 @@
<body>
<header>
<section>
+<a class='mobile-nav' href='#'>
+&middot;&middot;&middot;&middot;&middot;
+</a>
<header>
<h1><a href="http://dockyard.com">DockYard</a></h1>
<h2><a href="http://reefpoints.dockyard.com">ReefPoints</a></h2>
View
@@ -94,6 +94,16 @@ section article:last-child {
border: none;
}
+section#posts article {
+ padding: 0;
+ margin: 0 0 20px 0;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+section#posts article p {
+ max-width: 480px;
+}
+
section#posts li a {
margin-left: 20px;
font-size: 1.25em;
@@ -141,6 +151,7 @@ section#posts article header h4 {
text-transform: lowercase;
font-family: league-gothic, sans-serif;
margin: 0px;
+ opacity: .6;
}
section#posts article header h4 a {
@@ -339,3 +350,198 @@ iframe {
height: 460px
width: 420px;
}
+
+header .mobile-nav {
+ display: none;
+}
+
+/* Smartphones (portrait and landscape) ----------- */
+
+@media only screen
+and (min-width : 320px)
+and (max-width : 480px) {
+
+ section article header time,
+ section#posts article header h4 {
+ margin: 0;
+ padding: 0;
+ opacity: .8;
+ float: none;
+ font-size: 20px;
+ }
+
+ h2 {
+ margin: 10px 0;
+ }
+
+ section,
+ header section {
+ width: auto !important;
+ }
+
+ header section header {
+ width: auto;
+ }
+
+ header section header h1 {
+ font-size: 48px;
+ text-align: left;
+ }
+
+ header section header h1:after {
+ float: right;
+ color: #6A95A8;
+ font-size: .6em;
+ line-height: 48px;
+ margin: 0 0 0 20px;
+ letter-spacing: 5px;
+ content: "REEFPOINTS";
+ }
+
+ header section header h2 {
+ display: none;
+ }
+
+ header h1, header ul, header ul li, header ul li.last, header ul li a {
+ margin: 0;
+ padding: 0;
+ float: none;
+ line-height: 1;
+ background: none;
+ }
+
+ header section {
+ padding: 20px;
+ }
+
+ header .mobile-nav {
+ float: right;
+ display: block;
+ margin: 10px 0;
+ padding: 0 10px;
+ line-height: 28px;
+ border-radius: 5px;
+ background: rgba(0,0,0,.1);
+ }
+
+ header ul {
+ clear: both;
+ padding: 0 10px;
+ margin: 0 -20px;
+ background: #EEE;
+ position: relative;
+ top: 20px;
+ overflow: auto;
+ display: none;
+ }
+
+ header ul li {
+ margin: 10px 0;
+ display: block;
+ font-size: 16px;
+ line-height: 20px;
+ }
+
+ header ul li.last {
+ display: none;
+ }
+
+ header ul li a {
+ padding: 10px;
+ display: block;
+ background: #DDD;
+ border-radius: 5px;
+ box-shadow: 0 0 10px rgba(0,0,0,.1) inset;
+ }
+
+ section#comments,
+ section#content > section#posts {
+ padding: 20px;
+ }
+
+ section#post article {
+ width: 100%;
+ }
+
+ section#post aside {
+ display: none;
+ }
+
+ section#content > section section.wrapper {
+ padding: 20px;
+ }
+
+ section#content #who-we-are section {
+ padding: 20px 20px 0 20px;
+ }
+
+ section#content #what-we-do,
+ section#content #how-we-work,
+ section#content #projects article {
+ padding: 0;
+ width: auto;
+ float: none;
+ margin: 0 0 20px 0;
+ }
+
+ section#content #projects img {
+ width: 100%;
+ float: none;
+ }
+ section#content #who-we-are .about-dockyard ul a {
+ margin: 0 0 10px 0;
+ }
+
+ section#content #who-we-are .about-dockyard,
+ section#content #who-we-are .team {
+ margin: 0;
+ padding: 0;
+ float: none;
+ width: auto;
+ }
+
+ section#content #who-we-are .team .info {
+ width: auto;
+ }
+
+ section#contact h2 {
+ font-size: 28px;
+ }
+
+ section#content #contact div.string label {
+ width: auto;
+ display: block;
+ padding: 0 0 5px 0;
+ }
+
+ section#content #contact div.string input,
+ section#content #contact textarea {
+ width: 96%;
+ padding: 2%;
+ }
+
+ section#content #contact textarea {
+ height: 160px;
+ }
+
+ section#content #contact input[type="submit"] {
+ margin: 20px 0;
+ display: block;
+ width: 100%;
+ padding: 10px;
+ text-align: center;
+ }
+
+ footer {
+ padding: 20px;
+ }
+
+ footer ul li {
+ display: none;
+ }
+
+ footer ul li.last {
+ display: block;
+ }
+
+}
View
Binary file not shown.
@@ -5,4 +5,11 @@ $(function(){
$('section#form-container').slideToggle(1000);
return false;
});
-});
+ $('.mobile-nav').toggle(function(){
+ $('header ul').slideDown();
+ return false;
+ }, function(){
+ $('header ul').slideUp();
+ return false;
+ });
+});

0 comments on commit 4eb40ca

Please sign in to comment.