Browse files

Fixed article view layout

  • Loading branch information...
1 parent e78dd6b commit 0c6ae0599b99df4d3f90b857c44ec304d38bd437 @kuyan committed Dec 25, 2012
Showing with 117 additions and 4 deletions.
  1. +115 −0 sass/_grid.scss
  2. +0 −2 sass/_justread.sass
  3. +1 −1 static/css/styles.css
  4. +1 −1 templates/article.html
View
115 sass/_grid.scss
@@ -0,0 +1,115 @@
+// Reasonable Breakpoint Values
+// Feel free to use these or create new ones better suited to your site's needs
+$desktop-wide: 71.25em; // 1140px
+$desktop-small: 64.00em; // 1024px
+$tablet-portrait: 48.00em; // 768px
+$phone-wide-landscape: 35.50em; // 568px
+$phone-landscape: 30.00em; // 480px
+$phone-portrait: 20.00em; // 320px
+
+$column-killer-breakpoint: $phone-landscape; // 640px
+
+// Breakpoint Mixin
+@mixin breakpoint($point) {
+ @if $point == desktop-wide {
+ @media (max-width: $desktop-wide) { @content; }
+ }
+ @if $point == desktop-small {
+ @media (max-width: $desktop-small) { @content; }
+ }
+ @if $point == tablet-portrait {
+ @media (max-width: $tablet-portrait) { @content; }
+ }
+ @if $point == phone-wide-landscape {
+ @media (max-width: $phone-wide-landscape) { @content; }
+ }
+ @if $point == phone-landscape {
+ @media (max-width: $phone-landscape) { @content; }
+ }
+ @else if $point == phone-portrait {
+ @media (max-width: $phone-portrait) { @content; }
+ }
+}
+
+// Column Killer Mixin - All columns go full-width when window hits this breakpoint
+@mixin column-killer {
+ @media (max-width: $column-killer-breakpoint) {
+ width: 100%;
+ float: none;
+ margin-left: 0;
+ margin-right: 0;
+ };
+}
+
+@mixin container {
+ padding-left: 20px;
+ padding-right: 20px;
+ @include breakpoint($column-killer-breakpoint) {
+ width: 100%;
+ min-width: 0;
+ margin-left: 0;
+ margin-right: 0;
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
+
+@mixin row {
+ width: 100%;
+ max-width: $desktop-wide;
+ margin: 0 auto;
+ overflow: hidden;
+ @include breakpoint($column-killer-breakpoint) {
+ width: 100%;
+ min-width: 0;
+ margin-left: 0;
+ margin-right: 0;
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
+
+// Last-Column Mixin
+@mixin last { margin-right: 0;}
+
+.row div:last-child {
+ @include last
+}
+
+// Column Mixin
+@mixin column($num) {
+ @if $num != 12 { margin-right: 3.8%; float: left; min-height: 1px; }
+ @if $num == 1 { width: 04.85%; }
+ @if $num == 2 { width: 13.45%; }
+ @if $num == 3 { width: 22.05%; }
+ @if $num == 4 { width: 30.75%; }
+ @if $num == 5 { width: 39.45%; }
+ @if $num == 6 { width: 48.00%; }
+ @if $num == 7 { width: 56.75%; }
+ @if $num == 8 { width: 65.40%; }
+ @if $num == 9 { width: 74.05%; }
+ @if $num == 10 { width: 82.70%; }
+ @if $num == 11 { width: 91.35%; }
+ @if $num == 12 { width: 100%; float: left; @include last;}
+ @include column-killer;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+// Push Mixin - Use push(0) in a media query to override push(n)
+@mixin push($num) {
+ @if $num == 0 { margin-left: 0; margin-right: 0; }
+ @if $num == 1 { margin-left: 08.65%; }
+ @if $num == 2 { margin-left: 17.30%; }
+ @if $num == 3 { margin-left: 25.95%; }
+ @if $num == 4 { margin-left: 34.60%; }
+ @if $num == 5 { margin-left: 43.25%; }
+ @if $num == 6 { margin-left: 51.90%; }
+ @if $num == 7 { margin-left: 60.55%; }
+ @if $num == 8 { margin-left: 69.20%; }
+ @if $num == 9 { margin-left: 77.85%; }
+ @if $num == 10 { margin-left: 86.50%; }
+ @if $num == 11 { margin-left: 95.15%; }
+ @include column-killer;
+}
View
2 sass/_justread.sass
@@ -37,8 +37,6 @@ header[role="banner"]
h1
margin: 0 0 0 25.95% // Emulate push(3)
line-height: 2.5em
-p + p
- text-indent: 1em
// Grid
View
2 static/css/styles.css
@@ -1 +1 @@
-.row div:last-child{margin-right:0}.c{color:#757575}.err{color:#fa4753}.k{color:#6bc5d9}.l{color:#514986}.n{color:#f8f8f2}.o{color:#f92672}.p{color:#f8f8f2}.cm{color:#757575}.cp{color:#757575}.c1{color:#757575}.cs{color:#757575}.kc{color:#6bc5d9}.kd{color:#6bc5d9}.kn{color:#f92672}.kp{color:#6bc5d9}.kr{color:#6bc5d9}.kt{color:#6bc5d9}.ld{color:#f4e07c}.m{color:#514986}.s{color:#f4e07c}.na{color:#9cc52c}.nb{color:#f8f8f2}.nc{color:#9cc52c}.no{color:#6bc5d9}.nd{color:#9cc52c}.ni{color:#f8f8f2}.ne{color:#9cc52c}.nf{color:#9cc52c}.nl{color:#f8f8f2}.nn{color:#f8f8f2}.nx{color:#9cc52c}.py{color:#f8f8f2}.nt{color:#f92672}.nv{color:#f8f8f2}.ow{color:#f92672}.w{color:#f8f8f2}.mf{color:#514986}.mh{color:#514986}.mi{color:#514986}.mo{color:#514986}.sb{color:#f4e07c}.sc{color:#f4e07c}.sd{color:#f4e07c}.s2{color:#f4e07c}.se{color:#514986}.sh{color:#f4e07c}.si{color:#f4e07c}.sx{color:#f4e07c}.sr{color:#f4e07c}.s1{color:#f4e07c}.ss{color:#f4e07c}.bp{color:#f8f8f2}.vc{color:#f8f8f2}.vg{color:#f8f8f2}.vi{color:#f8f8f2}.il{color:#514986}::-moz-selection{background:#fd7;color:#000;text-shadow:none}::selection{background:#fd7;color:#000;text-shadow:none}body{font-family:"Droid Sans","Open Sans",sans-serif;margin:0}code,pre{font-family:"Droid Sans Mono",monospace}header[role="banner"]{background-color:#222;text-align:left}header[role="banner"] a{text-decoration:none;color:#fff}header[role="banner"] a:hover{text-decoration:none;color:#e6e6e6}header[role="banner"] a:visited{color:#fff}header[role="banner"] a:visited:hover{color:#e6e6e6}header[role="banner"] h1{margin:0 0 0 25.95%;line-height:2.5em}p+p{text-indent:1em}.container{padding-left:20px;padding-right:20px}.container .content{width:100%;max-width:71.25em;margin:0 auto;overflow:hidden}.container .content .push3{margin-left:25.95%}@media (max-width: 30em){.container .content .push3{width:100%;float:none;margin-left:0;margin-right:0}}.container .content .col3{margin-right:3.8%;float:left;min-height:1px;width:22.05%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media (max-width: 30em){.container .content .col3{width:100%;float:none;margin-left:0;margin-right:0}}.container .content .col6{margin-right:3.8%;float:left;min-height:1px;width:48.00%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media (max-width: 30em){.container .content .col6{width:100%;float:none;margin-left:0;margin-right:0}}.container .content .last{margin-right:0}.container .content footer{margin-left:25.95%;margin-right:3.8%;float:left;min-height:1px;width:48.00%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media (max-width: 30em){.container .content footer{width:100%;float:none;margin-left:0;margin-right:0}}@media (max-width: 30em){.container .content footer{width:100%;float:none;margin-left:0;margin-right:0}}
+.row div:last-child{margin-right:0}.c{color:#757575}.err{color:#fa4753}.k{color:#6bc5d9}.l{color:#514986}.n{color:#f8f8f2}.o{color:#f92672}.p{color:#f8f8f2}.cm{color:#757575}.cp{color:#757575}.c1{color:#757575}.cs{color:#757575}.kc{color:#6bc5d9}.kd{color:#6bc5d9}.kn{color:#f92672}.kp{color:#6bc5d9}.kr{color:#6bc5d9}.kt{color:#6bc5d9}.ld{color:#f4e07c}.m{color:#514986}.s{color:#f4e07c}.na{color:#9cc52c}.nb{color:#f8f8f2}.nc{color:#9cc52c}.no{color:#6bc5d9}.nd{color:#9cc52c}.ni{color:#f8f8f2}.ne{color:#9cc52c}.nf{color:#9cc52c}.nl{color:#f8f8f2}.nn{color:#f8f8f2}.nx{color:#9cc52c}.py{color:#f8f8f2}.nt{color:#f92672}.nv{color:#f8f8f2}.ow{color:#f92672}.w{color:#f8f8f2}.mf{color:#514986}.mh{color:#514986}.mi{color:#514986}.mo{color:#514986}.sb{color:#f4e07c}.sc{color:#f4e07c}.sd{color:#f4e07c}.s2{color:#f4e07c}.se{color:#514986}.sh{color:#f4e07c}.si{color:#f4e07c}.sx{color:#f4e07c}.sr{color:#f4e07c}.s1{color:#f4e07c}.ss{color:#f4e07c}.bp{color:#f8f8f2}.vc{color:#f8f8f2}.vg{color:#f8f8f2}.vi{color:#f8f8f2}.il{color:#514986}::-moz-selection{background:#fd7;color:#000;text-shadow:none}::selection{background:#fd7;color:#000;text-shadow:none}body{font-family:"Droid Sans","Open Sans",sans-serif;margin:0}code,pre{font-family:"Droid Sans Mono",monospace}header[role="banner"]{background-color:#222;text-align:left}header[role="banner"] a{text-decoration:none;color:#fff}header[role="banner"] a:hover{text-decoration:none;color:#e6e6e6}header[role="banner"] a:visited{color:#fff}header[role="banner"] a:visited:hover{color:#e6e6e6}header[role="banner"] h1{margin:0 0 0 25.95%;line-height:2.5em}.container{padding-left:20px;padding-right:20px}.container .content{width:100%;max-width:71.25em;margin:0 auto;overflow:hidden}.container .content .push3{margin-left:25.95%}@media (max-width: 30em){.container .content .push3{width:100%;float:none;margin-left:0;margin-right:0}}.container .content .col3{margin-right:3.8%;float:left;min-height:1px;width:22.05%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media (max-width: 30em){.container .content .col3{width:100%;float:none;margin-left:0;margin-right:0}}.container .content .col6{margin-right:3.8%;float:left;min-height:1px;width:48.00%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media (max-width: 30em){.container .content .col6{width:100%;float:none;margin-left:0;margin-right:0}}.container .content .last{margin-right:0}.container .content footer{margin-left:25.95%;margin-right:3.8%;float:left;min-height:1px;width:48.00%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media (max-width: 30em){.container .content footer{width:100%;float:none;margin-left:0;margin-right:0}}@media (max-width: 30em){.container .content footer{width:100%;float:none;margin-left:0;margin-right:0}}
View
2 templates/article.html
@@ -4,7 +4,7 @@
<div role="main" class="container">
<div class="content">
<div class="meta col3"></div>
- <article>
+ <article class="col6">
<div class="post wrapper">
<h1>{{ article.title }}</h1>
{{ article.content }}

0 comments on commit 0c6ae05

Please sign in to comment.