diff --git a/dev/less/flexbox-prefixes.less b/dev/less/flexbox-prefixes.less deleted file mode 100644 index 897fe1c..0000000 --- a/dev/less/flexbox-prefixes.less +++ /dev/null @@ -1,130 +0,0 @@ -// Flexbox display -// flex or inline-flex -.flex-display(@display: flex) { - display: ~"-webkit-@{display}"; - display: ~"-moz-@{display}"; - display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox - display: ~"-ms-@{display}"; // IE11 - display: @display; -} - -// The 'flex' shorthand -// - applies to: flex items -// , initial, auto, or none -.flex(@columns: initial) { - -webkit-flex: @columns; - -moz-flex: @columns; - -ms-flex: @columns; - flex: @columns; -} - -// Flex Flow Direction -// - applies to: flex containers -// row | row-reverse | column | column-reverse -.flex-direction(@direction: row) { - -webkit-flex-direction: @direction; - -moz-flex-direction: @direction; - -ms-flex-direction: @direction; - flex-direction: @direction; -} - -// Flex Line Wrapping -// - applies to: flex containers -// nowrap | wrap | wrap-reverse -.flex-wrap(@wrap: nowrap) { - -webkit-flex-wrap: @wrap; - -moz-flex-wrap: @wrap; - -ms-flex-wrap: @wrap; - flex-wrap: @wrap; -} - -// Flex Direction and Wrap -// - applies to: flex containers -// || -.flex-flow(@flow) { - -webkit-flex-flow: @flow; - -moz-flex-flow: @flow; - -ms-flex-flow: @flow; - flex-flow: @flow; -} - -// Display Order -// - applies to: flex items -// -.flex-order(@order: 0) { - -webkit-order: @order; - -moz-order: @order; - -ms-order: @order; - order: @order; -} - -// Flex grow factor -// - applies to: flex items -// -.flex-grow(@grow: 0) { - -webkit-flex-grow: @grow; - -moz-flex-grow: @grow; - -ms-flex-grow: @grow; - flex-grow: @grow; -} - -// Flex shrink -// - applies to: flex item shrink factor -// -.flex-shrink(@shrink: 1) { - -webkit-flex-shrink: @shrink; - -moz-flex-shrink: @shrink; - -ms-flex-shrink: @shrink; - flex-shrink: @shrink; -} - -// Flex basis -// - the initial main size of the flex item -// - applies to: flex itemsnitial main size of the flex item -// -.flex-basis(@width: auto) { - -webkit-flex-basis: @width; - -moz-flex-basis: @width; - -ms-flex-basis: @width; - flex-basis: @width; -} - -// Axis Alignment -// - applies to: flex containers -// flex-start | flex-end | center | space-between | space-around -.justify-content(@justify: flex-start) { - -webkit-justify-content: @justify; - -moz-justify-content: @justify; - -ms-justify-content: @justify; - justify-content: @justify; -} - -// Packing Flex Lines -// - applies to: multi-line flex containers -// flex-start | flex-end | center | space-between | space-around | stretch -.align-content(@align: stretch) { - -webkit-align-content: @align; - -moz-align-content: @align; - -ms-align-content: @align; - align-content: @align; -} - -// Cross-axis Alignment -// - applies to: flex containers -// flex-start | flex-end | center | baseline | stretch -.align-items(@align: stretch) { - -webkit-align-items: @align; - -moz-align-items: @align; - -ms-align-items: @align; - align-items: @align; -} - -// Cross-axis Alignment -// - applies to: flex items -// auto | flex-start | flex-end | center | baseline | stretch -.align-self(@align: auto) { - -webkit-align-self: @align; - -moz-align-self: @align; - -ms-align-self: @align; - align-self: @align; -} diff --git a/dev/less/main.less b/dev/less/main.less deleted file mode 100644 index 586c886..0000000 --- a/dev/less/main.less +++ /dev/null @@ -1,595 +0,0 @@ -// Font imports - -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); -@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400italic,700,700italic); -@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); -@import url(https://fonts.googleapis.com/css?family=Raleway:500); - -// Less variables - -@base-font-size: 16px; -@vspacing: @base-font-size*2; - -@wide-1-breakpoint: 600px; - -@monospace-font-stack: ~"'Ubuntu Mono', 'Menlo', monospace"; -@body-font-stack: ~"'Open Sans', 'Helvetica Neue', 'Arial', sans-serif"; -@heading-font-stack: ~"'Raleway', 'Helvetica Neue', 'Arial', sans-serif"; -@special-font-stack-1: ~"'Raleway', 'Helvetica Neue', 'Arial', sans-serif"; - -@black: #333; -@black-content: #111; -@gray: #666; -// accent colors from hermanradtke.com -@accent: #428bca; // alt: rgba(244,109,44,1); -@link-hover: #2a6496; // alt: rgba(222,90,29,1); -@complementary-accent: #1DA1DE; -@background: #f7f7f7; -@compensated-black: #555; -@compensated-gray: #999; -@compensated-black-hover: #111; -@compensated-gray-hover: #b7b7b7; -@white: #fefefe; -@milk: #fefefe; - -@transition-speed-1: .1s; -@transition-speed-2: .25s; -@in-sine: cubic-bezier(0.47, 0, 0.75, 0.72); - -// Utils and prefixing - -@import 'flexbox-prefixes'; - -.heading(@font-size: 18px) { - font-size: @font-size; - font-family: @heading-font-stack; - letter-spacing: -0.005rem; - text-transform: uppercase; - font-weight: 700; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-smoothing: antialiased; - color: @black; -} - -.transition (@transition) { - -webkit-transition: @transition; - -moz-transition: @transition; - -ms-transition: @transition; - -o-transition: @transition; -} - -.user-select(@user-select) { - -webkit-user-select: @user-select; - -moz-user-select: @user-select; - -ms-user-select: @user-select; - user-select: @user-select; -} - -.meta() { - font-size: 14px; - color: @gray; -} - - -// Slap-on utils - -@import 'util'; - -// General styles - -*, *:before, *:after { - box-sizing: border-box; -} - -a, a:visited, a:focus, a:active { - text-decoration: none; -} - -html { - height: 100%; - font-size: @base-font-size; -} - -body { - .flex-display(); - .flex-direction(column); // vertically stack sections - .align-items(center); // horizontally center all sections - .justify-content(flex-start); // start sections at the top - width: 100%; - min-height: 100%; - font-weight: 400; - font-family: @body-font-stack; - color: @black-content; - line-height: 1.6; - text-rendering: optimizeLegibility !important; -} - -@media (min-width: @wide-1-breakpoint) { - body { - .justify-content(center); // vertically center all sections - } - - .non-narrow { - &.zero-top-spacing { - padding-top: 0 !important; - } - } -} - -// Ionicon classes - -.icon { - // INFO: Comment out if you see performance issues, especially on mobile - text-rendering: geometricPrecision !important; -} - -// * Sections – the cornerstone of page elements -// * Container – contains section contents -// -// Both classes are flex elements - -section { - .flex-display(); - // Sections position their containers centrally, with spacing to the sides - // The containers can then move their children around as needed. - .justify-content(center); - .align-items(center); - width: 100%; -} - -.container { - .flex-display(); - width: 100%; -} - -// Introduced for https://github.com/nishanths/cocoa-hugo-theme/issues/7. -.container .content { - width: 100%; -} - -@media (min-width: @wide-1-breakpoint) { - section { - padding: 0 @vspacing/2; - margin-left: 100px; - margin-right: 100px; - max-width: 750px; - } -} - -// Sections order - -section.header { - .flex-order(0); -} -section.icons { - .flex-order(1); -} -section.main { - .flex-order(2); -} - -@media (min-width: @wide-1-breakpoint) { - section.header { - .flex-order(0); - } - section.icons { - .flex-order(2); - } - section.main { - .flex-order(1); - } -} - -// Styles for sections and contents -// Header section - -section.header { - background-color: @background; - - .container { - .align-items(center); - .justify-content(center); - } - - .content { - .flex-display(); - .flex-direction(column); - .align-items(center); - } - - .name { - .heading(); - color: @compensated-black; - } - - nav { - font-size: 14px; - margin-bottom: floor(@vspacing/2); - text-transform: uppercase; - font-family: @heading-font-stack; - - ul { - list-style: none; - text-align: center; - .flex-display(inline-flex); - } - - ul a { - margin-left: 6px; - margin-right: 6px; - - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } - } - - ul li { - color: @compensated-black; - font-weight: 500; - .transition(~'color @{transition-speed-1} @{in-sine}'); - - &:hover { - color: @compensated-black-hover; - } - } - } -} - -@media (min-width: @wide-1-breakpoint) { - section.header { - background-color: transparent; - - .container { - .justify-content(flex-start); - } - - .content { - .align-items(flex-start); - } - - .name { - color: @black; - } - - nav { - font-size: 14px; - margin-bottom: 0; - - ul { - text-align: left; - } - - ul li { - color: @gray; - - &:hover { - color: @black; - } - } - } - } -} - -// Icons - -section.icons { - background-color: @background; - - .container { - .align-items(center); - .justify-content(center); - } - - .content { - width: auto; - - a { - margin-left: 6px; - margin-right: 6px; - color: @compensated-black; - .transition(~'color @{transition-speed-1} @{in-sine}'); - - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } - - &:hover { - color: @compensated-black-hover; - } - - .icon { - font-size: 20px; - - &.larger { - font-size: 22px; - } - } - } - } -} - -@media (min-width: @wide-1-breakpoint) { - section.icons { - background-color: transparent; - - .container { - .justify-content(flex-start); - } - - .content { - a { - margin-left: 3px; - margin-right: 3px; - color: @gray; - - &:hover { - color: @black; - } - - .icon { - font-size: 18px; - - &.larger { - font-size: 20px; - } - } - } - - } - } -} - -// Main section - -section.main { - .container { - .align-items(center); - .justify-content(flex-start); - } - - .content { - color: @black-content; - font-size: @base-font-size; - - .title-container { - .flex-display(); - .justify-content(space-between); - - .initials { - display: none; - .heading(); - color: @gray; - - a { - color: @gray; - .transition(~'color @{transition-speed-1} @{in-sine}'); - - &:hover { - color: @black; - } - } - } - } - - .page-heading { - .heading(); - margin-bottom: floor(@vspacing/2); - } - - .front-matter { - .page-heading { - margin-bottom: 0; - } - - .meta { - .meta(); - .flex-display(); - margin-bottom: @vspacing; - } - - .date, .word-count, .reading-time .middot { - display: none; - } - - .middot { - font-size: 6px; - margin: 0 6px; - display: inline; - vertical-align: middle; - - &:before { - content: "•"; - } - } - } - } -} - -@media (min-width: @wide-1-breakpoint) { - section.main { - .content { - .front-matter { - .date, .word-count, .reading-time .middot { - display: initial; - } - } - - .title-container { - .initials { - display: none; - } - } - } - } -} - -// 404 page - -section.main { - .container.f04 { - .justify-content(center); - - .content { - .flex-display(); - .flex-direction(column); - .align-items(center); - - .num { - margin: 30px 0px 30px 0; - font-weight: 200; - font-family: @special-font-stack-1; - font-size: 50px; - } - - .detail { - margin-bottom: 40px; - } - } - } -} - -@media (min-width: @wide-1-breakpoint) { - section.main { - .container.f04 { - .justify-content(flex-start); - - .content { - .align-items(flex-start); - - .num { - margin: 0 0 10px 0; - font-size: 32px; - } - - .detail { - margin-bottom: 30px; - } - } - } - } -} - -// Post item - -section.main { - .container { - .content { - .post-item { - .flex-display(); - .align-items(center); - display: list-item; - list-style: disc inside; - - .meta { - .meta(); - display: none; - - min-width: 100px; - text-align: right; - margin-right: @vspacing/2; - } - } - } - } -} - -// Spacing - -section { - padding: 0 @vspacing/2; -} - -section.header { - padding-top: @vspacing; - padding-bottom: floor(@vspacing/2); -} - -section.icons { - padding-top: 0; - padding-bottom: @vspacing; -} - -section.main { - padding-top: @vspacing; - padding-bottom: @vspacing; -} - -@media (min-width: @wide-1-breakpoint) { - @vspacing: 60px; - - .container { - margin: 0 @vspacing/2; - } - - section.header { - padding-top: @vspacing; - padding-bottom: @vspacing; - } - - section.icons { - padding-top: @vspacing; - padding-bottom: @vspacing; - } - - section.main { - padding-top: 0; - padding-bottom: 0; - - .container { - .content { - .post-item { - display: flex; - list-style: none; - - .meta { - display: block; - } - } - } - } - } - - section.main.post { - padding-top: @vspacing; - padding-bottom: @vspacing; - } -} - -a { - color: @accent; - .transition(~'color @{transition-speed-1} @{in-sine}'); - - &:hover { - color: @link-hover; - } -} - -img { - max-width: 100%; -} - -img.profile { - min-width:100%; -} - -@media (min-width: @wide-1-breakpoint) { - img.profile { - min-width: 300px; - max-width: 300px !important; - } -} - -.page-heading a { - color: @black; -} - -@import 'markdown'; diff --git a/dev/less/markdown.less b/dev/less/markdown.less deleted file mode 100644 index 3caf9fb..0000000 --- a/dev/less/markdown.less +++ /dev/null @@ -1,196 +0,0 @@ -section.main .content { -.markdown { - -@background-gray: #f7f7f7; - -// -// Heading -// - -h1, h2, h3, h4, h5, h6 { - .heading(); - text-transform: none; - margin-top: 1.75rem; -} - -h1 { - font-size: 1.75rem; - margin-bottom: 2rem; -} - -h2 { - font-size: 1.5rem; - margin-bottom: 1.5rem; -} - -h3 { - font-size: 1em; - margin-bottom: 1rem; -} - -h4, h5, h6 { - font-size: 1rem; - margin-bottom: 1rem; - letter-spacing: none; - text-transform: none; -} - -// -// Code -// - -code, pre { - font-family: @monospace-font-stack; - font-size: 0.98rem; - background-color: @background-gray; -} - -code { - /* enclosed by single backtick (`) */ - padding: .15em .5em; - border-radius: 2px; -} - -pre { - /* Hugo specific: consider using the 'highlight' shortcode */ - display: block; - margin-top: 1rem; - margin-bottom: 2rem; - padding: 1rem; - line-height: 1.5em; - white-space: pre; - white-space: pre-wrap; - word-break: break-all; - word-wrap: break-word; -} - -pre code { - /* enclosed by 4 backticks (````) */ - padding: 0; - font-size: 0.9rem; -} - -a code { - color: @accent !important; - &:hover { - text-decoration: underline; - } -} - -// -// Body text -// - - -p { - /* Invoked by line break */ - font-size: 1rem; - margin-top: 0; - margin-bottom: 1em; -} - - -// TODO: Try out and adjust properties for selectors below - -// Lists - -ul, ol, dl { - margin-top: 1rem; - margin-bottom: 2rem; -} - -dt { - font-weight: bold; -} - -dd { - margin-bottom: .5rem; -} - -ul { - margin-bottom: 1.25rem; -} - -li { - list-style-type: disc; - list-style-position: inside; -} - -// Miscenllaneous - -em { - font-style: italic; -} - -strong { - font-weight: 700; -} - -hr { - position: relative; - margin: 1.75rem 0; - border: 0; - border-top: 1px solid lighten(@gray, 10%); - border-top: 1px solid lighten(@gray, 20%); -} - -abbr { - font-size: 0.85rem; - font-weight: bold; - color: lighten(@black, 20%); - text-transform: uppercase; -} - -abbr[title] { - cursor: help; - border-bottom: 1px dotted lighten(@gray, 10%); -} - - -// Quotes - -blockquote { - padding: .5rem 1rem; - margin: .8rem 0; - color: #7a7a7a; - border-left: .25rem solid #e5e5e5; -} - -blockquote p:last-child { - margin-bottom: 0; -} - -@media (min-width: 550px) { - blockquote { - padding-right: 5rem; - padding-left: 1.25rem; - } -} - -// Images and tables - -img { - margin: 1rem 0; - max-width: 100%; -} - -table { - margin-bottom: 1rem; - width: 100%; - border: 1px solid #e5e5e5; - border-collapse: collapse; -} - -td, -th { - padding: .25rem .5rem; - border: 1px solid #e5e5e5; -} - -tbody tr:nth-child(odd) td, -tbody tr:nth-child(odd) th { - background-color: @background-gray; -} - -} // end .markdown -} // end section.main .content diff --git a/dev/less/util.less b/dev/less/util.less deleted file mode 100644 index 667c03e..0000000 --- a/dev/less/util.less +++ /dev/null @@ -1,24 +0,0 @@ -.dark { - color: @black !important; -} - -.light { - color: @gray !important; -} - -.accent { - color: @accent !important; -} - -.small-screens-only { - @media (min-width: 550px) { - display: none; - } -} - -.large-screens-only { - display: none; - @media (min-width: 550px) { - display: initial; - } -}