From d36d3aa373212ea37260b964cbc56cb65377d4fc Mon Sep 17 00:00:00 2001 From: Nishanth Shanmugham Date: Sat, 5 Sep 2015 13:24:22 -0500 Subject: [PATCH] More image changes * Margins for social icons --- main.less | 41 ++++++++++++++++++++++++++--------------- markdown.less | 2 +- static/css/main.css | 17 +++++++++++++---- 3 files changed, 40 insertions(+), 20 deletions(-) diff --git a/main.less b/main.less index 2869b9e..a053e64 100644 --- a/main.less +++ b/main.less @@ -1,6 +1,6 @@ // Font imports -@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700); +@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400); @import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400italic,700,700italic); @import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); @import url(http://fonts.googleapis.com/css?family=Raleway:200,700); @@ -101,7 +101,7 @@ body { @media (min-width: 550px) { body { - .justify-content(center); // vertically center all sections + .justify-content(center); // vertically center all sections } } @@ -114,8 +114,8 @@ body { // * Sections – the cornerstone of page elements // * Container – contains section contents -// -// Both classes are flex elements +// +// Both classes are flex elements .section { .flex-display(); @@ -196,10 +196,15 @@ body { text-align: center; .flex-display(inline-flex); } - + ul a { - margin-right: 12px; - + margin-left: 6px; + margin-right: 6px; + + &:first-child { + margin-left: 0; + } + &:last-child { margin-right: 0; } @@ -262,10 +267,15 @@ body { .content { a { + margin-left: 6px; margin-right: 6px; color: @milk; .transition(~'color @{transition-speed-1} @{in-sine}'); + &:first-child { + margin-left: 0; + } + &:last-child { margin-right: 0; } @@ -294,8 +304,9 @@ body { } .content { - a { - margin-right: 4px; + a { + margin-left: 2px; + margin-right: 2px; color: @gray; &:hover { @@ -320,9 +331,9 @@ body { .section.main { .container { .align-items(center); - .justify-content(flex-start); + .justify-content(flex-start); } - + .content { color: @black; font-size: @base-font-size; @@ -378,7 +389,7 @@ body { .section.main { .container.f04 { .justify-content(center); - + .content { .flex-display(); .flex-direction(column); @@ -402,7 +413,7 @@ body { .section.main { .container.f04 { .justify-content(flex-start); - + .content { .align-items(flex-start); @@ -463,7 +474,7 @@ body { @media (min-width: 550px) { @vspacing: 60px; - + .container { margin: 0 @vspacing/2; } @@ -471,7 +482,7 @@ body { .section.header { padding-top: @vspacing; padding-bottom: @vspacing; - } + } .section.icons { padding-top: @vspacing; diff --git a/markdown.less b/markdown.less index f704ca3..3f0628e 100644 --- a/markdown.less +++ b/markdown.less @@ -154,7 +154,7 @@ blockquote p:last-child { // Images and tables img { - margin: 0 0 1rem; + margin: 1rem 0; max-width: 100%; } diff --git a/static/css/main.css b/static/css/main.css index 90c4335..84f4452 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,4 +1,4 @@ -@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700); +@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400); @import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400italic,700,700italic); @import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); @import url(http://fonts.googleapis.com/css?family=Raleway:200,700); @@ -202,7 +202,11 @@ body { display: inline-flex; } .section.header nav ul a { - margin-right: 12px; + margin-left: 6px; + margin-right: 6px; +} +.section.header nav ul a:first-child { + margin-left: 0; } .section.header nav ul a:last-child { margin-right: 0; @@ -263,6 +267,7 @@ body { justify-content: center; } .section.icons .content a { + margin-left: 6px; margin-right: 6px; color: #fefefe; -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); @@ -270,6 +275,9 @@ body { -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); } +.section.icons .content a:first-child { + margin-left: 0; +} .section.icons .content a:last-child { margin-right: 0; } @@ -293,7 +301,8 @@ body { justify-content: flex-start; } .section.icons .content a { - margin-right: 4px; + margin-left: 2px; + margin-right: 2px; color: #b7b7b7; } .section.icons .content a:hover { @@ -601,7 +610,7 @@ img { } } .section.main .content .markdown img { - margin: 0 0 1rem; + margin: 1rem 0; max-width: 100%; } .section.main .content .markdown table {