From 1e68a60ebb77a49606a24848b164247dfbb471a9 Mon Sep 17 00:00:00 2001
From: Tunghsiao Liu <t@sparanoid.com>
Date: Tue, 25 Aug 2015 18:29:06 +0800
Subject: [PATCH] fix(style): better image, video, and iframe handling

---
 _app/assets/themes/curtana/_less/app.less | 41 +++++++++--------------
 1 file changed, 15 insertions(+), 26 deletions(-)

diff --git a/_app/assets/themes/curtana/_less/app.less b/_app/assets/themes/curtana/_less/app.less
index 504d7f8d0..5adf64da9 100644
--- a/_app/assets/themes/curtana/_less/app.less
+++ b/_app/assets/themes/curtana/_less/app.less
@@ -338,6 +338,8 @@ body:hover .latest {
       // Override margin from article img
       svg,
       img {
+        // avoid images inside .browser stretched by global img styles
+        margin: 0;
         margin-bottom: .3em;
 
         @media (max-width: @breakpoint-sm) {
@@ -397,25 +399,19 @@ body:hover .latest {
     display: block;
     max-width: 100%;
     margin: 0 0 1.8rem;
-  }
-
-  p:not(.browser) {
 
-    img, video, iframe {
-
-      @media (max-width: @breakpoint-md) {
-        margin-left: -@padding-md;
-        margin-right: -@padding-md;
-        max-width: calc(100% + (@padding-md * 2));
-        width: calc(100% + (@padding-md * 2));
-      }
+    @media (max-width: @breakpoint-md) {
+      margin-left: -@padding-md;
+      margin-right: -@padding-md;
+      max-width: calc(100% + (@padding-md * 2));
+      width: calc(100% + (@padding-md * 2));
+    }
 
-      @media (max-width: @breakpoint-sm) {
-        margin-left: -@padding-sm;
-        margin-right: -@padding-sm;
-        max-width: calc(100% + (@padding-sm * 2));
-        width: calc(100% + (@padding-sm * 2));
-      }
+    @media (max-width: @breakpoint-sm) {
+      margin-left: -@padding-sm;
+      margin-right: -@padding-sm;
+      max-width: calc(100% + (@padding-sm * 2));
+      width: calc(100% + (@padding-sm * 2));
     }
   }
 
@@ -598,7 +594,6 @@ body:hover .latest {
 .browser {
   position: relative;
   padding-top: 24px;
-  margin: 0 0 1.8rem !important;
   background: rgba(255, 255, 255, .1);
   border-radius: 5px 5px 0 0;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);
@@ -623,18 +618,12 @@ body:hover .latest {
   }
 
   img {
+    // avoid images inside .browser stretched by global img styles
     margin: 0;
     box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .05);
 
     // Reset borwser image width for small screens
-    @media (max-width: @breakpoint-md) {
-      margin: 0;
-      max-width: 100%;
-      width: 100%;
-    }
-
-    @media (max-width: @breakpoint-sm) {
-      margin: 0;
+    @media (max-width: @breakpoint-md), (max-width: @breakpoint-sm) {
       max-width: 100%;
       width: 100%;
     }