From 020c34eb1981b318769fa1fc56b940818b02cf4e Mon Sep 17 00:00:00 2001 From: Tunghsiao Liu Date: Thu, 19 Jan 2017 14:57:26 +0800 Subject: [PATCH] feat(curtana): simply offset calculation --- _app/assets/themes/curtana/_less/common.less | 48 ++++++++++---------- _app/assets/themes/curtana/_less/reset.less | 4 +- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/_app/assets/themes/curtana/_less/common.less b/_app/assets/themes/curtana/_less/common.less index 3adafeaa6..f4c36913b 100644 --- a/_app/assets/themes/curtana/_less/common.less +++ b/_app/assets/themes/curtana/_less/common.less @@ -116,20 +116,20 @@ body:hover .latest { flex-direction: column; justify-content: center; background: fade(@text-color, 2%); - .padding-offset(@space-lg, @space-lg); - .margin-offset(-@space-lg, -@space-lg); + .padding-offset(@space-lg); + .margin-offset(-@space-lg); @media (max-width: @breakpoint-md) { min-height: calc(50vh - @nav-padding * 2 - 3ex); padding-top: 16vmin; padding-bottom: 16vmin; - .padding-offset(@space-md, @space-md); - .margin-offset(-@space-md, -@space-md); + .padding-offset(@space-md); + .margin-offset(-@space-md); } @media (max-width: @breakpoint-sm) { - .padding-offset(@space-sm, @space-sm); - .margin-offset(-@space-sm, -@space-sm); + .padding-offset(@space-sm); + .margin-offset(-@space-sm); } h1 { @@ -265,8 +265,8 @@ body:hover .latest { iframe, .browser { display: block; - width: calc(100% + (@space-md * 2) + (@border-default * 2)); - margin: 0 calc(-@space-md - @border-default) 1.8rem; + width: calc(100% + (@space-md * 2)); + margin: 0 -@space-md 1.8rem; @media (max-width: @breakpoint-md) { width: calc(100% + (@space-md * 2)); @@ -304,8 +304,8 @@ body:hover .latest { } &.size-small { - width: calc(100% + (@space-xs * 2) + (@border-default * 2)); - .margin-offset(calc(-@space-xs - @border-default)); + width: calc(100% + (@space-xs * 2)); + .margin-offset(-@space-xs); @media (max-width: @breakpoint-md) { width: calc(100% + (@space-md * 2)); @@ -354,7 +354,7 @@ body:hover .latest { blockquote { position: relative; margin-bottom: 2.8rem; - margin-left: calc(-@space-xs - @border-default); + margin-left: -@space-xs; font-size: 90%; @media (max-width: @breakpoint-sm) { @@ -381,7 +381,7 @@ body:hover .latest { @media (max-width: @breakpoint-sm) { .padding-offset(calc(@space-sm - @border-default), @space-sm); - .margin-offset(-@space-sm, -@space-sm); + .margin-offset(-@space-sm); } } @@ -475,7 +475,7 @@ body:hover .latest { .highlight > pre, .highlighter-rouge .highlight { padding: @space-xs; - .margin-offset(-@space-xs, -@space-xs); + .margin-offset(-@space-xs); margin-bottom: 1.8rem; overflow-x: auto; font-size: 80%; @@ -484,13 +484,13 @@ body:hover .latest { -webkit-overflow-scrolling: touch; @media (max-width: @breakpoint-md) { - .padding-offset(@space-md, @space-md); - .margin-offset(-@space-md, -@space-md); + .padding-offset(@space-md); + .margin-offset(-@space-md); } @media (max-width: @breakpoint-sm) { - .padding-offset(@space-sm, @space-sm); - .margin-offset(-@space-sm, -@space-sm); + .padding-offset(@space-sm); + .margin-offset(-@space-sm); } } @@ -538,7 +538,7 @@ body:hover .latest { border-spacing: 0; font-size: 90%; width: 100%; - .margin-offset(-@space-xs, -@space-xs); + .margin-offset(-@space-xs); margin-bottom: 1.8rem; // TODO: responsive table support @@ -557,12 +557,12 @@ body:hover .latest { // TODO: responsive table support @media (max-width: @breakpoint-md) { width: calc(100% + (@space-md * 2)); - .margin-offset(-@space-md, -@space-md); + .margin-offset(-@space-md); } @media (max-width: @breakpoint-sm) { width: calc(100% + (@space-sm * 2)); - .margin-offset(-@space-sm, -@space-sm); + .margin-offset(-@space-sm); // TODO: table shadow support // Darker shadow for mobile devices @@ -722,10 +722,10 @@ body:hover .latest { // Extra offset for OS X screenshots .screenshot-mac { @osx-shadow-size: 56px; - .margin-offset(-@osx-shadow-size, -@osx-shadow-size); + .margin-offset(-@osx-shadow-size); @media (max-width: @breakpoint-md), (max-width: @breakpoint-sm) { - .margin-offset(0, 0); + .margin-offset(0); } } @@ -734,12 +734,12 @@ body:hover .latest { .store, .download { padding-left: @space-xs; - margin-left: calc(-@space-xs - @border-default); + margin-left: -@space-xs; border-left: @border-default solid @link-color; @media (max-width: @breakpoint-sm) { .padding-offset(calc(@space-sm - @border-default), @space-sm); - .margin-offset(-@space-sm, -@space-sm); + .margin-offset(-@space-sm); } } diff --git a/_app/assets/themes/curtana/_less/reset.less b/_app/assets/themes/curtana/_less/reset.less index 8d58c68a4..d13ff727f 100644 --- a/_app/assets/themes/curtana/_less/reset.less +++ b/_app/assets/themes/curtana/_less/reset.less @@ -34,12 +34,12 @@ body { font-feature-settings: @font-features; @media (max-width: @breakpoint-md) { - .padding-offset(@space-md, @space-md); + .padding-offset(@space-md); font-size: (@font-size * 1.4); } @media (max-width: @breakpoint-sm) { - .padding-offset(@space-sm, @space-sm); + .padding-offset(@space-sm); font-size: (@font-size * 2.4); }