diff --git a/_app/_posts/note/2014-06-01-custom-html-markups.md b/_app/_posts/note/2014-06-01-custom-html-markups.md index 8fd49f2ed..27b7dc06f 100644 --- a/_app/_posts/note/2014-06-01-custom-html-markups.md +++ b/_app/_posts/note/2014-06-01-custom-html-markups.md @@ -130,6 +130,4 @@ Medium size is the default size of images, so you don't need additional CSS clas ![Moonstruck Princess Extended - Blue]({{ site.file }}/moonstruck-princess-ext-blue.jpg){: .size-left} -Aligned images are smaller images beside text, you can just apply `.size-left` or `.size-right` to your images and nothing special markup required. - -Please note that aligned images will be responded to normal large size for small desktops or mobile devices. +Aligned images are smaller images beside text, you can just apply `.size-left` or `.size-right` to your images and nothing special markup required. However that aligned images will be responded to normal large size for small desktops or mobile devices. diff --git a/_app/assets/themes/curtana/_less/common.less b/_app/assets/themes/curtana/_less/common.less index f4c36913b..64c74d738 100644 --- a/_app/assets/themes/curtana/_less/common.less +++ b/_app/assets/themes/curtana/_less/common.less @@ -320,7 +320,7 @@ body:hover .latest { &.size-left { float: left; - max-width: 40vw; + max-width: 36vw; margin-top: (@space-xs / 2); margin-right: @space-xs; margin-bottom: (@space-xs / 2); @@ -336,7 +336,7 @@ body:hover .latest { &.size-right { float: right; - max-width: 40vw; + max-width: 36vw; margin-top: (@space-xs / 2); margin-left: @space-xs; margin-bottom: (@space-xs / 2); diff --git a/_app/assets/themes/curtana/_less/variables.less b/_app/assets/themes/curtana/_less/variables.less index 625ef7e15..c1c650d92 100644 --- a/_app/assets/themes/curtana/_less/variables.less +++ b/_app/assets/themes/curtana/_less/variables.less @@ -20,7 +20,7 @@ @breakpoint-xs: 400px; @breakpoint-default: @breakpoint-md; -@space-lg: 22vw; +@space-lg: 24vw; @space-md: 8vw; @space-sm: 4vw; @space-xs: 1.2vw;