From 1b993aba16bdcb0e1da22462f4f582eca1ed08d6 Mon Sep 17 00:00:00 2001 From: Tunghsiao Liu Date: Sat, 19 Dec 2015 20:25:48 +0800 Subject: [PATCH] feat(styles): break Less into files --- _app/assets/themes/curtana/_less/app.less | 824 +----------------- .../{module-schemes.less => colors.less} | 7 +- _app/assets/themes/curtana/_less/common.less | 607 +++++++++++++ .../randomized.less} | 0 _app/assets/themes/curtana/_less/mixins.less | 58 ++ .../themes/curtana/_less/module-loader.less | 13 - .../{module-plugins.less => plugins.less} | 6 +- .../_less/{module-print.less => print.less} | 5 + _app/assets/themes/curtana/_less/reset.less | 113 +++ .../themes/curtana/_less/variables.less | 32 + 10 files changed, 844 insertions(+), 821 deletions(-) rename _app/assets/themes/curtana/_less/{module-schemes.less => colors.less} (92%) create mode 100644 _app/assets/themes/curtana/_less/common.less rename _app/assets/themes/curtana/_less/{module-syntax.less => components/randomized.less} (100%) create mode 100644 _app/assets/themes/curtana/_less/mixins.less delete mode 100644 _app/assets/themes/curtana/_less/module-loader.less rename _app/assets/themes/curtana/_less/{module-plugins.less => plugins.less} (88%) rename _app/assets/themes/curtana/_less/{module-print.less => print.less} (93%) create mode 100644 _app/assets/themes/curtana/_less/reset.less create mode 100644 _app/assets/themes/curtana/_less/variables.less diff --git a/_app/assets/themes/curtana/_less/app.less b/_app/assets/themes/curtana/_less/app.less index 47eb433c6..acea11ccd 100644 --- a/_app/assets/themes/curtana/_less/app.less +++ b/_app/assets/themes/curtana/_less/app.less @@ -1,806 +1,20 @@ -// Global variables -@fontstack-sans-serif: "Helvetica Neue", Arial, sans-serif; -@fontstack-serif: Georgia, serif; -@fontstack-monospace: Menlo, monospace; -@fontstack-default: @fontstack-sans-serif; -@font-size: 1.6vw; -@line-height: (20 / 14); // ~ 1.428571429 - -@link-color: #a212d1; -@background-color: #fff; -@text-color: #000; -@code-color: #00cc80; - -@breakpoint-lg: 1600px; -@breakpoint-md: 1000px; -@breakpoint-sm: 640px; -@breakpoint-xs: 400px; -@breakpoint-default: @breakpoint-md; - -@space-lg: 22vw; -@space-md: 8vw; -@space-sm: 4vw; -@space-xs: .8em; -@space-default: @space-md; - -@border-lg: 4px; -@border-md: 2px; -@border-sm: 1px; -@border-default: @border-md; - -// Invert color switcher for images and videos -// :root { filter: invert(100%); } - -// Essential mixins -// http://nicolasgallagher.com/micro-clearfix-hack/ -.cf { - - &:before, &:after { - display: table; - content: ""; - } - - &:after { - clear: both; - } -} - -.heading() { - font-size: 330%; - -webkit-font-smoothing: antialiased; - font-weight: bold; - letter-spacing: -.06em; -} - -.sub-heading() { - font-size: 72%; - font-weight: normal; - opacity: .5; -} - -.padding-offset(@padding-left, @padding-right) { - padding-left: @padding-left; - padding-right: @padding-right; -} - -.margin-offset(@margin-left, @margin-right) { - margin-left: @margin-left; - margin-right: @margin-right; -} - -.spliter() { - @size: 4px; - @color: @text-color; - - &::before { - display: block; - content: ''; - width: @size; - height: @size; - margin: 2em auto; - border-radius: 50%; - background: @color; - box-shadow: (@size * 5) 0 0 0 @color, (@size * -5) 0 0 0 @color; - } -} - -// Basic reset -*, -*:before, -*:after { - padding: 0; - margin: 0; - box-sizing: border-box; -} - -body { - padding: 0 @space-lg; - margin: 0 auto 0; - font-family: @fontstack-default; - font-size: @font-size; - line-height: @line-height; - color: @text-color; - text-rendering: optimizelegibility; - background: @background-color; - image-rendering: optimizequality; - transition: all .2s ease; - - @media (max-width: @breakpoint-md) { - .padding-offset(@space-md, @space-md); - font-size: (@font-size * 1.4); - } - - @media (max-width: @breakpoint-sm) { - .padding-offset(@space-sm, @space-sm); - font-size: (@font-size * 2.4); - } - - @media (max-width: @breakpoint-xs) { - font-size: (@font-size * 3.2); - } - - // All iOS devices, the easiest way - @media (max-device-width: 480px), (max-device-width: 1024px) { - -webkit-text-size-adjust: none; - } - - // A semitranslucent bar at the top of the page - &:before { - position: absolute; - top: 0; - left: 0; - z-index: -9999; - width: 100%; - height: 1vmax; - pointer-events: none; - background: @link-color; - content: ""; - opacity: .2; - } -} - -// Reset fonts for relevant elements -input, -button, -select, -textarea { - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - -// Reset unusual Firefox-on-Android default style. -// See https://github.com/necolas/normalize.css/issues/214 -button, -input, -select[multiple], -textarea { - background-image: none; -} - -// Reset common elements -a, button { - color: @text-color; - text-decoration: none; - transition: color .5s ease, border-color .5s ease, background .5s ease, opacity 1.5s ease; - - &:hover, - &:focus { - transition: color .1s ease, border-color .1s ease, background .1s ease, opacity .1s ease; - text-decoration: underline; - text-decoration-skip: ink; - } - - &[disabled] { - opacity: .4; - cursor: not-allowed; - } -} - -img, hr { - border: 0; -} - -del { - text-decoration: line-through; -} - -::selection { - color: @link-color; - background: fade(@text-color, 2%); -} - -::-webkit-input-placeholder { - color: @text-color; - opacity: .1; -} - -// Site logo -.logo { - display: block; - height: 1vmax; - margin: 0 0 1.4vmax; - background: @link-color; - opacity: 0; - - &:hover, - &:focus { - border-bottom: none !important; - background: @text-color; - opacity: 1; - } - - h1 { - height: 0; - text-indent: -99999em; - } -} - -// Main navigation -.navigation { - margin: 0 0 16vmin; - margin-right: -1.1em; - margin-left: -1.1em; - font-size: 60%; - font-weight: bold; - letter-spacing: .45em; - text-transform: uppercase; - - li { - display: inline-block; - line-height: 2; - list-style: none; - - a { - padding: .5em 1.2em; - - &:hover, - &:focus { - color: @link-color; - text-decoration: none; - } - } - } -} - -// Currently activated page or category class -.current { - - a { - color: @link-color; - } -} - -// Latest work link -body:hover .latest { - color: @link-color !important; -} - -// Pserson status -.content .status { - margin: 1vmin 0 0; - font-size: 75%; - font-weight: bold; - - &:before { - @size: .8em; - display: inline-block; - width: @size; - height: @size; - margin-right: .8vw; - background: fade(@text-color, 20%); - border-radius: 50%; - content: ""; - } - - &.available { - - &:before { - background: #0cf; - } - - a { - color: #0cf; - } - } - - &.unavailable { - - &:before { - background: #ccc; - } - - a { - color: #ccc; - } - } -} - -// Main content -.content { - margin-bottom: 16vmin; - - // For some specified posts in work category - .cf; - - // Remove extra space for the last paragraph in the container - article { - - // article > p - > *:last-child { - margin-bottom: 0 !important; - - // article > ul > li, article > .footnotes > ol - > *:last-child { - margin-bottom: 0 !important; - - // article > ul > li > p, article > .footnotes > ol > li - > *:last-child { - margin-bottom: 0 !important; - - // article > .footnotes > ol > li > p - > *:last-child { - margin-bottom: 0 !important; - } - } - } - } - } - - // Post / page content first element fix - .post-content, - .page-content { - - > *:first-child { - margin-top: 0; - - > *:first-child { - margin-top: 0; - } - } - } - - a { - font-weight: bold; - } - - p { - margin-bottom: 1.6rem; - line-height: (@line-height * 1.2); - } - - header { - padding-bottom: 16vmin; - - h1 { - margin: 0 0 .1em; - .heading(); - hyphens: none; - line-height: 1.1; - - @media (max-width: @breakpoint-sm) { - // Override viewport units defined in post.html - font-size: 280%; - } - - svg { - display: block; - max-width: 100%; - } - - // Override margin from article img - svg, - img { - // avoid header stretched by global img styles - margin-left: 0; - margin-right: 0; - margin-bottom: .3em; - - @media (max-width: @breakpoint-sm) { - width: 100% !important; - height: 100% !important; - } - } - } - - // Hide actual text if post title is image or SVG, the actual text helps Safari get the real post title in Reader mode. - .image-title { - text-indent: -999999px; - line-height: 0; - } - - .latest-post { - margin-top: 16vmin; - font-size: 80%; - font-weight: normal; - line-height: 1.2; - - a { - font-weight: bold; - } - } - - small { - display: block; - margin-top: 2vmin; - } - } - - h2, h3, h4, h5, h6 { - margin: 10vmin 0 1rem; - .sub-heading(); - } - - ul, ol { - margin-bottom: 1.8rem; - margin-left: 1.2em; - - li { - line-height: (@line-height * 1.2); - - > ul, ol { - margin-bottom: 0; - } - } - } - - ol { - margin-left: 1.75em; - } - - img, video, iframe, .browser { - display: block; - width: calc(100% + (@space-xs * 2) + (@blockquote-border * 2)); - margin: 0 calc(-@space-xs - @blockquote-border) 1.8rem; - - @media (max-width: @breakpoint-md) { - .margin-offset(-@space-md, -@space-md); - width: calc(100% + (@space-md * 2)); - } - - @media (max-width: @breakpoint-sm) { - .margin-offset(-@space-sm, -@space-sm); - width: calc(100% + (@space-sm * 2)); - } - - // avoid images with `.no-enlarge` stretched by global img styles - &.no-enlarge { - margin-left: 0; - margin-right: 0; - max-width: 100%; - width: auto; - } - } - - blockquote { - position: relative; - margin-bottom: 2.8rem; - margin-left: calc(-@space-xs - @blockquote-border); - font-size: 90%; - - @media (max-width: @breakpoint-sm) { - margin-left: 0; - } - - > p { - padding-left: .8em; - border-left: @border-default solid; - // TODO: Need better solution - // We will reset the common margin-bototm to get gapless borders for blockquotes - // This could help fix https://github.com/amsf/amsf-curtana/issues/4 - padding-bottom: 1.6rem; - // Now reset default margin button from global define - margin-bottom: 0; - - // Remove extra padding for the last element, re-apply margin - &:last-of-type { - padding-bottom: 0; - margin-bottom: 1.6rem; - } - - @media (max-width: @breakpoint-sm) { - .padding-offset(calc(@space-sm - @border-default), @space-sm); - .margin-offset(-@space-sm, -@space-sm); - } - } - - footer { - .cf; - } - - cite { - float: right; - font-style: normal; - - &:before { - // http://www.fileformat.info/info/unicode/char/2500/index.htm - content: "\2500\2500\00a0" - } - } - } - - hr { - .spliter(); - } - - sup { - font-size: 75%; - } - - code, pre { - font-family: @fontstack-monospace; - color: @code-color; - } - - // Only apply word breaking rule for codes in paragraphs - p code, - li code { - word-break: break-all; - } - - pre { - padding: 1em; - margin: 0 0 1.8rem; - overflow-x: auto; - font-size: 80%; - line-height: (@line-height * 1.2); - background: fade(#08f, 4%); - // Bouncing scroll fix for iOS - -webkit-overflow-scrolling: touch; - - @media (max-width: @breakpoint-md) { - .padding-offset(@space-md, @space-md); - .margin-offset(-@space-md, -@space-md); - } - - @media (max-width: @breakpoint-sm) { - .padding-offset(@space-sm, @space-sm); - .margin-offset(-@space-sm, -@space-sm); - } - } - - // Newsletter subscription form in page "store" - form { - - input { - display: block; - width: 100%; - padding: 1vmin 0; - margin: 0 0 1.8rem; - border: none; - border-bottom: 1px solid fade(@text-color, 20%); - // Remove border-radius for iOS devices - border-radius: 0; - outline: none; - transition: padding .2s ease; - - &:focus { - padding: 1vmin; - background: fade(@text-color, 2%); - border-color: @text-color; - } - } - } - - // Rest form validation styles, borrowed from Bootstrap - input, textarea, select { - - &:focus:required:invalid { - - &:focus { - background: fade(@link-color, 5%); - border-color: @link-color; - // Override Firefox default styles - box-shadow: none; - } - } - } - - table { - border-collapse: collapse; - border-spacing: 0; - font-size: 90%; - width: 100%; - margin: 0 0 1.8rem; - - th, - td { - padding: .6em; - } - - th { - border-bottom: @border-default solid fade(@text-color, 6%); - // Override default user agent stylesheet - text-align: left; - } - - td { - border-top: @border-sm solid fade(@text-color, 4%); - } - } -} - -// Posts with Asian characters -:lang(zh), -:lang(ja) { - text-align: justify; - - header { - - &, - & * { - text-align: start; - } - } -} - -// Fix empty space when a paragraph starts with quote marks and some asian punctuation marks -.leading-indent-fix { - text-indent: -.39em; -} - -// Tweet button margin fix -.post-modified-date { - font-size: 75%; - opacity: .5; -} - -// Largetype styles (replaces button styles) -.largetype { - .heading(); - font-size: 200%; - margin-bottom: 1.8rem !important; -} - -// Broser frame for images in category "work" -.browser { - position: relative; - padding-top: 24px; - background: rgba(255, 255, 255, .1); - border-radius: 5px 5px 0 0; - box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); - - // Reset browser border-radius for small screens - @media (max-width: @breakpoint-md), (max-width: @breakpoint-sm) { - border-radius: 0; - } - - &:before { - position: absolute; - top: 8px; - left: 10px; - display: block; - width: 8px; - height: 8px; - background: lighten(#f24e59, 30%); - border-radius: 50%; - content: ""; - box-shadow: - 16px 0 0 0 fade(lighten(#fac536, 30%), 96%) - , 32px 0 0 0 fade(lighten(#26e93d, 30%), 96%) - , 0 0 0 1px fade(darken(#f24e59, 30%), 30%) - , 16px 0 0 1px fade(darken(#fac536, 30%), 30%) - , 32px 0 0 1px fade(darken(#26e93d, 30%), 30%) - ; - } - - img { - // avoid images inside .browser stretched by global img styles - margin-left: 0; - margin-right: 0; - width: auto; - max-width: 100%; - box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .05); - } -} - -// Extra offset for OS X screenshots -.screenshot-mac { - @osx-shadow-size: 56px; - .margin-offset(-@osx-shadow-size, -@osx-shadow-size); - - @media (max-width: @breakpoint-md), (max-width: @breakpoint-sm) { - .margin-offset(0, 0); - } -} - -// Special paragraph with border line -.note, -.store, -.download { - padding-left: .8em; - margin-left: calc(-@space-xs - @blockquote-border); - 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); - } -} - -// Reference notes and links in post -.footnotes { - .spliter(); - font-size: 80%; -} - -:target { - - // Redcarpet-style - [rev=footnote], - [rel=footnote], - - // Kramdown-style - .reversefootnote, - .footnote { - color: @link-color; - } -} - -// Post list in "work" and "note" -.list { - display: block; - margin: 0 0 .4rem; - - h1 { - .heading(); - font-size: 200%; - line-height: 1.1; - // Override heading defines in .content - opacity: 1; - margin: 0; - - @media (max-width: @breakpoint-sm) { - // Hide external link for post list - font-size: 180%; - } - } - - .external { - - @media (max-width: @breakpoint-sm) { - // Hide external link for post list - display: none; - } - } -} - -// A dot symbol for external links -.external { - - .dot { - display: inline-block; - width: .7rem; - height: .7rem; - margin: 0 .1em; - vertical-align: middle; - background: @text-color; - border-radius: 50%; - transition: transform .4s ease; - - // Extra margin for external symbol in singular - &--post { - margin-left: 1rem; - } - } - - &:hover, - &:focus { - - .dot { - transform: scale(1.4); - } - } -} - -.footer { - padding: 0 0 16vmin; - font-size: 75%; - text-transform: lowercase; - - ul { - - li { - display: inline; - - &:after { - padding: 0 .6vw; - content: " / "; - opacity: .3; - } - - &:last-child { - - &:after { - content: none; - } - } - } - } -} - -// Import theme modules -@import "module-loader"; - -// Import user custom styles +// +// Curtana for Almace Scaffolding +// Copyright 2005-2015 Tunghsiao Liu +// Licensed under MIT (https://github.com/amsf/amsf-curtana/blob/master/LICENSE) +// + +// Core components +@import "variables"; +@import "colors"; +@import "mixins"; +@import "reset"; +@import "common"; +@import "plugins"; +@import "print"; + +// Extra components +@import "components/randomized"; + +// User custom styles @import "../../../_less/user"; diff --git a/_app/assets/themes/curtana/_less/module-schemes.less b/_app/assets/themes/curtana/_less/colors.less similarity index 92% rename from _app/assets/themes/curtana/_less/module-schemes.less rename to _app/assets/themes/curtana/_less/colors.less index 08d718703..56a1924e0 100644 --- a/_app/assets/themes/curtana/_less/module-schemes.less +++ b/_app/assets/themes/curtana/_less/colors.less @@ -1,7 +1,10 @@ -// Custom color schemes +// +// Colors +// -------------------------------------------------- +// Custom color schemes // Change @link-color can change to whole theme color scheme -// All other vaiables in `app.less` can be overwritten here +// All other vaiables in `variables.less` can be overwritten here // tan #D2B48C rgb(210,180,140) // @link-color: darken(@background-color, 50%); diff --git a/_app/assets/themes/curtana/_less/common.less b/_app/assets/themes/curtana/_less/common.less new file mode 100644 index 000000000..4db9a36b7 --- /dev/null +++ b/_app/assets/themes/curtana/_less/common.less @@ -0,0 +1,607 @@ +// +// Common +// -------------------------------------------------- + +// Site logo +.logo { + display: block; + height: 1vmax; + margin: 0 0 1.4vmax; + background: @link-color; + opacity: 0; + + &:hover, + &:focus { + border-bottom: none !important; + background: @text-color; + opacity: 1; + } + + h1 { + height: 0; + text-indent: -99999em; + } +} + +// Main navigation +.navigation { + margin: 0 0 16vmin; + margin-right: -1.1em; + margin-left: -1.1em; + font-size: 60%; + font-weight: bold; + letter-spacing: .45em; + text-transform: uppercase; + + li { + display: inline-block; + line-height: 2; + list-style: none; + + a { + padding: .5em 1.2em; + + &:hover, + &:focus { + color: @link-color; + text-decoration: none; + } + } + } +} + +// Currently activated page or category class +.current { + + a { + color: @link-color; + } +} + +// Latest work link +body:hover .latest { + color: @link-color !important; +} + +// Pserson status +.content .status { + margin: 1vmin 0 0; + font-size: 75%; + font-weight: bold; + + &:before { + @size: .8em; + display: inline-block; + width: @size; + height: @size; + margin-right: .8vw; + background: fade(@text-color, 20%); + border-radius: 50%; + content: ""; + } + + &.available { + + &:before { + background: #0cf; + } + + a { + color: #0cf; + } + } + + &.unavailable { + + &:before { + background: #ccc; + } + + a { + color: #ccc; + } + } +} + +// Main content +.content { + margin-bottom: 16vmin; + + // For some specified posts in work category + .cf; + + // Remove extra space for the last paragraph in the container + article { + + // article > p + > *:last-child { + margin-bottom: 0 !important; + + // article > ul > li, article > .footnotes > ol + > *:last-child { + margin-bottom: 0 !important; + + // article > ul > li > p, article > .footnotes > ol > li + > *:last-child { + margin-bottom: 0 !important; + + // article > .footnotes > ol > li > p + > *:last-child { + margin-bottom: 0 !important; + } + } + } + } + } + + // Post / page content first element fix + .post-content, + .page-content { + + > *:first-child { + margin-top: 0; + + > *:first-child { + margin-top: 0; + } + } + } + + a { + font-weight: bold; + } + + p { + margin-bottom: 1.6rem; + line-height: (@line-height * 1.2); + } + + header { + padding-bottom: 16vmin; + + h1 { + margin: 0 0 .1em; + .heading(); + hyphens: none; + line-height: 1.1; + + @media (max-width: @breakpoint-sm) { + // Override viewport units defined in post.html + font-size: 280%; + } + + svg { + display: block; + max-width: 100%; + } + + // Override margin from article img + svg, + img { + // avoid header stretched by global img styles + margin-left: 0; + margin-right: 0; + margin-bottom: .3em; + + @media (max-width: @breakpoint-sm) { + width: 100% !important; + height: 100% !important; + } + } + } + + // Hide actual text if post title is image or SVG, the actual text helps Safari get the real post title in Reader mode. + .image-title { + text-indent: -999999px; + line-height: 0; + } + + .latest-post { + margin-top: 16vmin; + font-size: 80%; + font-weight: normal; + line-height: 1.2; + + a { + font-weight: bold; + } + } + + small { + display: block; + margin-top: 2vmin; + } + } + + h2, h3, h4, h5, h6 { + margin: 10vmin 0 1rem; + .sub-heading(); + } + + ul, ol { + margin-bottom: 1.8rem; + margin-left: 1.2em; + + li { + line-height: (@line-height * 1.2); + + > ul, ol { + margin-bottom: 0; + } + } + } + + ol { + margin-left: 1.75em; + } + + img, video, iframe, .browser { + display: block; + width: calc(100% + (@space-xs * 2) + (@border-default * 2)); + margin: 0 calc(-@space-xs - @border-default) 1.8rem; + + @media (max-width: @breakpoint-md) { + .margin-offset(-@space-md, -@space-md); + width: calc(100% + (@space-md * 2)); + } + + @media (max-width: @breakpoint-sm) { + .margin-offset(-@space-sm, -@space-sm); + width: calc(100% + (@space-sm * 2)); + } + + // avoid images with `.no-enlarge` stretched by global img styles + &.no-enlarge { + margin-left: 0; + margin-right: 0; + max-width: 100%; + width: auto; + } + } + + blockquote { + position: relative; + margin-bottom: 2.8rem; + margin-left: calc(-@space-xs - @border-default); + font-size: 90%; + + @media (max-width: @breakpoint-sm) { + margin-left: 0; + } + + > p { + padding-left: .8em; + border-left: @border-default solid; + // TODO: Need better solution + // We will reset the common margin-bototm to get gapless borders for blockquotes + // This could help fix https://github.com/amsf/amsf-curtana/issues/4 + padding-bottom: 1.6rem; + // Now reset default margin button from global define + margin-bottom: 0; + + // Remove extra padding for the last element, re-apply margin + &:last-of-type { + padding-bottom: 0; + margin-bottom: 1.6rem; + } + + @media (max-width: @breakpoint-sm) { + .padding-offset(calc(@space-sm - @border-default), @space-sm); + .margin-offset(-@space-sm, -@space-sm); + } + } + + footer { + .cf; + } + + cite { + float: right; + font-style: normal; + + &:before { + // http://www.fileformat.info/info/unicode/char/2500/index.htm + content: "\2500\2500\00a0" + } + } + } + + hr { + .spliter(); + } + + sup { + font-size: 75%; + } + + code, pre { + font-family: @fontstack-monospace; + color: @code-color; + } + + // Only apply word breaking rule for codes in paragraphs + p code, + li code { + word-break: break-all; + } + + pre { + padding: 1em; + margin: 0 0 1.8rem; + overflow-x: auto; + font-size: 80%; + line-height: (@line-height * 1.2); + background: fade(#08f, 4%); + // Bouncing scroll fix for iOS + -webkit-overflow-scrolling: touch; + + @media (max-width: @breakpoint-md) { + .padding-offset(@space-md, @space-md); + .margin-offset(-@space-md, -@space-md); + } + + @media (max-width: @breakpoint-sm) { + .padding-offset(@space-sm, @space-sm); + .margin-offset(-@space-sm, -@space-sm); + } + } + + // Newsletter subscription form in page "store" + form { + + input { + display: block; + width: 100%; + padding: 1vmin 0; + margin: 0 0 1.8rem; + border: none; + border-bottom: 1px solid fade(@text-color, 20%); + // Remove border-radius for iOS devices + border-radius: 0; + outline: none; + transition: padding .2s ease; + + &:focus { + padding: 1vmin; + background: fade(@text-color, 2%); + border-color: @text-color; + } + } + } + + // Rest form validation styles, borrowed from Bootstrap + input, textarea, select { + + &:focus:required:invalid { + + &:focus { + background: fade(@link-color, 5%); + border-color: @link-color; + // Override Firefox default styles + box-shadow: none; + } + } + } + + table { + border-collapse: collapse; + border-spacing: 0; + font-size: 90%; + width: 100%; + margin: 0 0 1.8rem; + + th, + td { + padding: .6em; + } + + th { + border-bottom: @border-default solid fade(@text-color, 6%); + // Override default user agent stylesheet + text-align: left; + } + + td { + border-top: @border-sm solid fade(@text-color, 4%); + } + } +} + +// Posts with Asian characters +:lang(zh), +:lang(ja) { + text-align: justify; + + header { + + &, + & * { + text-align: start; + } + } +} + +// Fix empty space when a paragraph starts with quote marks and some asian punctuation marks +.leading-indent-fix { + text-indent: -.39em; +} + +// Tweet button margin fix +.post-modified-date { + font-size: 75%; + opacity: .5; +} + +// Largetype styles (replaces button styles) +.largetype { + .heading(); + font-size: 200%; + margin-bottom: 1.8rem !important; +} + +// Broser frame for images in category "work" +.browser { + position: relative; + padding-top: 24px; + background: rgba(255, 255, 255, .1); + border-radius: 5px 5px 0 0; + box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); + + // Reset browser border-radius for small screens + @media (max-width: @breakpoint-md), (max-width: @breakpoint-sm) { + border-radius: 0; + } + + &:before { + position: absolute; + top: 8px; + left: 10px; + display: block; + width: 8px; + height: 8px; + background: lighten(#f24e59, 30%); + border-radius: 50%; + content: ""; + box-shadow: + 16px 0 0 0 fade(lighten(#fac536, 30%), 96%) + , 32px 0 0 0 fade(lighten(#26e93d, 30%), 96%) + , 0 0 0 1px fade(darken(#f24e59, 30%), 30%) + , 16px 0 0 1px fade(darken(#fac536, 30%), 30%) + , 32px 0 0 1px fade(darken(#26e93d, 30%), 30%) + ; + } + + img { + // avoid images inside .browser stretched by global img styles + margin-left: 0; + margin-right: 0; + width: auto; + max-width: 100%; + box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .05); + } +} + +// Extra offset for OS X screenshots +.screenshot-mac { + @osx-shadow-size: 56px; + .margin-offset(-@osx-shadow-size, -@osx-shadow-size); + + @media (max-width: @breakpoint-md), (max-width: @breakpoint-sm) { + .margin-offset(0, 0); + } +} + +// Special paragraph with border line +.note, +.store, +.download { + padding-left: .8em; + margin-left: calc(-@space-xs - @border-default); + 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); + } +} + +// Reference notes and links in post +.footnotes { + .spliter(); + font-size: 80%; +} + +:target { + + // Redcarpet-style + [rev=footnote], + [rel=footnote], + + // Kramdown-style + .reversefootnote, + .footnote { + color: @link-color; + } +} + +// Post list in "work" and "note" +.list { + display: block; + margin: 0 0 .4rem; + + h1 { + .heading(); + font-size: 200%; + line-height: 1.1; + // Override heading defines in .content + opacity: 1; + margin: 0; + + @media (max-width: @breakpoint-sm) { + // Hide external link for post list + font-size: 180%; + } + } + + .external { + + @media (max-width: @breakpoint-sm) { + // Hide external link for post list + display: none; + } + } +} + +// A dot symbol for external links +.external { + + .dot { + display: inline-block; + width: .7rem; + height: .7rem; + margin: 0 .1em; + vertical-align: middle; + background: @text-color; + border-radius: 50%; + transition: transform .4s ease; + + // Extra margin for external symbol in singular + &--post { + margin-left: 1rem; + } + } + + &:hover, + &:focus { + + .dot { + transform: scale(1.4); + } + } +} + +.footer { + padding: 0 0 16vmin; + font-size: 75%; + text-transform: lowercase; + + ul { + + li { + display: inline; + + &:after { + padding: 0 .6vw; + content: " / "; + opacity: .3; + } + + &:last-child { + + &:after { + content: none; + } + } + } + } +} diff --git a/_app/assets/themes/curtana/_less/module-syntax.less b/_app/assets/themes/curtana/_less/components/randomized.less similarity index 100% rename from _app/assets/themes/curtana/_less/module-syntax.less rename to _app/assets/themes/curtana/_less/components/randomized.less diff --git a/_app/assets/themes/curtana/_less/mixins.less b/_app/assets/themes/curtana/_less/mixins.less new file mode 100644 index 000000000..e99d1906d --- /dev/null +++ b/_app/assets/themes/curtana/_less/mixins.less @@ -0,0 +1,58 @@ +// +// Mixins +// -------------------------------------------------- + +// Invert color switcher for images and videos +// :root { filter: invert(100%); } + +// http://nicolasgallagher.com/micro-clearfix-hack/ +.cf { + + &:before, &:after { + display: table; + content: ""; + } + + &:after { + clear: both; + } +} + +.heading() { + font-size: 330%; + -webkit-font-smoothing: antialiased; + font-weight: bold; + letter-spacing: -.06em; +} + +.sub-heading() { + font-size: 72%; + font-weight: normal; + opacity: .5; +} + +.padding-offset(@padding-left, @padding-right) { + padding-left: @padding-left; + padding-right: @padding-right; +} + +.margin-offset(@margin-left, @margin-right) { + margin-left: @margin-left; + margin-right: @margin-right; +} + +.spliter() { + @size: 4px; + @color: @text-color; + + &::before { + display: block; + content: ''; + width: @size; + height: @size; + margin: 2em auto; + border-radius: 50%; + background: @color; + box-shadow: (@size * 5) 0 0 0 @color, (@size * -5) 0 0 0 @color; + } +} diff --git a/_app/assets/themes/curtana/_less/module-loader.less b/_app/assets/themes/curtana/_less/module-loader.less deleted file mode 100644 index a336645c0..000000000 --- a/_app/assets/themes/curtana/_less/module-loader.less +++ /dev/null @@ -1,13 +0,0 @@ -// Theme module loader - -// Import syntax highlighting theme -@import "module-syntax"; - -// Import style fixes for plug-ins -@import "module-plugins"; - -// Import print styles -@import "module-print"; - -// Import custom color schemes -@import "module-schemes"; diff --git a/_app/assets/themes/curtana/_less/module-plugins.less b/_app/assets/themes/curtana/_less/plugins.less similarity index 88% rename from _app/assets/themes/curtana/_less/module-plugins.less rename to _app/assets/themes/curtana/_less/plugins.less index 8b765a833..10c3f354f 100644 --- a/_app/assets/themes/curtana/_less/module-plugins.less +++ b/_app/assets/themes/curtana/_less/plugins.less @@ -1,4 +1,8 @@ -// Plugn-Ins +// +// Plugins +// -------------------------------------------------- + +// Style fixes for plugins // intense.js .loaded { diff --git a/_app/assets/themes/curtana/_less/module-print.less b/_app/assets/themes/curtana/_less/print.less similarity index 93% rename from _app/assets/themes/curtana/_less/module-print.less rename to _app/assets/themes/curtana/_less/print.less index 9ad3fbf2c..a695e9b91 100644 --- a/_app/assets/themes/curtana/_less/module-print.less +++ b/_app/assets/themes/curtana/_less/print.less @@ -1,4 +1,9 @@ +// // Print +// -------------------------------------------------- + +// Style fixes for priting + @media print { *, diff --git a/_app/assets/themes/curtana/_less/reset.less b/_app/assets/themes/curtana/_less/reset.less new file mode 100644 index 000000000..898f1d312 --- /dev/null +++ b/_app/assets/themes/curtana/_less/reset.less @@ -0,0 +1,113 @@ +// +// Reset +// -------------------------------------------------- + +*, +*:before, +*:after { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + padding: 0 @space-lg; + margin: 0 auto 0; + font-family: @fontstack-default; + font-size: @font-size; + line-height: @line-height; + color: @text-color; + text-rendering: optimizelegibility; + background: @background-color; + image-rendering: optimizequality; + transition: all .2s ease; + + @media (max-width: @breakpoint-md) { + .padding-offset(@space-md, @space-md); + font-size: (@font-size * 1.4); + } + + @media (max-width: @breakpoint-sm) { + .padding-offset(@space-sm, @space-sm); + font-size: (@font-size * 2.4); + } + + @media (max-width: @breakpoint-xs) { + font-size: (@font-size * 3.2); + } + + // All iOS devices, the easiest way + @media (max-device-width: 480px), (max-device-width: 1024px) { + -webkit-text-size-adjust: none; + } + + // A semitranslucent bar at the top of the page + &:before { + position: absolute; + top: 0; + left: 0; + z-index: -9999; + width: 100%; + height: 1vmax; + pointer-events: none; + background: @link-color; + content: ""; + opacity: .2; + } +} + +// Reset fonts for relevant elements +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +// Reset unusual Firefox-on-Android default style. +// See https://github.com/necolas/normalize.css/issues/214 +button, +input, +select[multiple], +textarea { + background-image: none; +} + +// Reset common elements +a, button { + color: @text-color; + text-decoration: none; + transition: color .5s ease, border-color .5s ease, background .5s ease, opacity 1.5s ease; + + &:hover, + &:focus { + transition: color .1s ease, border-color .1s ease, background .1s ease, opacity .1s ease; + text-decoration: underline; + text-decoration-skip: ink; + } + + &[disabled] { + opacity: .4; + cursor: not-allowed; + } +} + +img, hr { + border: 0; +} + +del { + text-decoration: line-through; +} + +::selection { + color: @link-color; + background: fade(@text-color, 2%); +} + +::-webkit-input-placeholder { + color: @text-color; + opacity: .1; +} diff --git a/_app/assets/themes/curtana/_less/variables.less b/_app/assets/themes/curtana/_less/variables.less new file mode 100644 index 000000000..619c2b7fd --- /dev/null +++ b/_app/assets/themes/curtana/_less/variables.less @@ -0,0 +1,32 @@ +// +// Variables +// -------------------------------------------------- + +@fontstack-sans-serif: "Helvetica Neue", Arial, sans-serif; +@fontstack-serif: Georgia, serif; +@fontstack-monospace: Menlo, monospace; +@fontstack-default: @fontstack-sans-serif; +@font-size: 1.6vw; +@line-height: (20 / 14); // ~ 1.428571429 + +@link-color: #a212d1; +@background-color: #fff; +@text-color: #000; +@code-color: #00cc80; + +@breakpoint-lg: 1600px; +@breakpoint-md: 1000px; +@breakpoint-sm: 640px; +@breakpoint-xs: 400px; +@breakpoint-default: @breakpoint-md; + +@space-lg: 22vw; +@space-md: 8vw; +@space-sm: 4vw; +@space-xs: .8em; +@space-default: @space-md; + +@border-lg: 4px; +@border-md: 2px; +@border-sm: 1px; +@border-default: @border-md;