Browse code

improved consistency of video and image block styling

Brandon Mathis authored on 24/07/2011 at 21:32:38
Showing 1 changed files
... ...
@@ -43,37 +43,23 @@ article {
43 43
     font-size: 2.0em; font-style: italic;
44 44
     line-height: 1.3em;
45 45
   }
46
-  img {
46
+  img, video, .flash-video {
47 47
     max-width: 100%;
48
+    height: auto;
48 49
     border: .5em solid #fff;
49 50
     @include border-radius(.3em);
50 51
     @include box-shadow(rgba(#000, .15) 0 1px 4px);
51 52
     @include box-sizing(border-box);
52 53
     display: block;
53 54
     margin: 0 auto 1.5em;
54
-    &.left {
55
-      float: left;
56
-      margin-right: 1.5em;
57
-    }
58
-    &.right {
59
-      float: right;
60
-      margin-left: 1.5em;
61
-    }
62
-    &.left, &.right {
63
-      margin-bottom: .8em;
64
-    }
65 55
   }
66
-  img, video { max-width: 100%; height: auto; }
67
-  video {
68
-    width: 100%; display: block; margin-bottom: 1.5em;
69
-    padding: .8em; background: #fff; border: 1px solid #eee;
70
-    @include box-sizing(border-box);
56
+  img {
57
+    &.left { float: left; margin-right: 1.5em; }
58
+    &.right { float: right; margin-left: 1.5em; }
59
+    &.left, &.right { margin-bottom: .8em; }
71 60
   }
61
+  video { display: block; margin-bottom: 1.5em; width: 100%; }
72 62
   .flash-video {
73
-    max-width: 100%;
74
-    margin-bottom: 1.5em;
75
-    @include box-sizing(border-box);
76
-    padding: .8em; background: #fff; border: 1px solid #eee;
77 63
     > div {
78 64
       position: relative;
79 65
       display: block;