diff --git a/assets/css/ie.css b/assets/css/ie.css index 803df4c8..fd3a4239 100644 --- a/assets/css/ie.css +++ b/assets/css/ie.css @@ -43,81 +43,42 @@ table{border-collapse:collapse;border-spacing:0;margin-bottom:1.5em;} .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";} .clearfix:after{clear:both;} .unstyled-list{list-style:none;margin-left:0;padding-left:0;}.unstyled-list li{list-style-type:none;} -@font-face{font-family:"Ampersand";src:local("Georgia"),local("Garamond"),local("Palatino"),local("Book Antiqua");unicode-range:U+270C;}@font-face{font-family:"Ampersand";src:local("Georgia");unicode-range:U+270C;}.ampersand-placeholder{font-family:Verdana,sans-serif;} -.breakword{word-wrap:break-word;} -.normal-wrap{word-wrap:normal;} -.inherit-wrap{word-wrap:auto;} -.drop-cap:first-letter{float:left;margin:inherit;padding:inherit;font-size:4em;font-family:inherit;line-height:1;text-indent:0;background:transparent;color:inherit;} -html{font:normal 112.5%/1.65 serif;} -body{word-wrap:normal;color:#333332;} -.tera{font-size:117px;font-size:6.5rem;margin-bottom:0.25384615384615383rem;} -.giga{font-size:90px;font-size:5rem;margin-bottom:0.33rem;} -.mega{font-size:72px;font-size:4rem;margin-bottom:0.4125rem;} -.alpha{font-size:60px;font-size:3.3333333333333335rem;margin-bottom:0.495rem;} -.beta{font-size:48px;font-size:2.6666666666666665rem;margin-bottom:0.61875rem;} -.gamma{font-size:36px;font-size:2rem;margin-bottom:0.825rem;} -.delta{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;} -.epsilon{font-size:21px;font-size:1.1666666666666667rem;margin-bottom:1.4142857142857141rem;} -.zeta{font-size:18px;font-size:1rem;margin-bottom:1.65rem;} -h1{font-size:60px;font-size:3.3333333333333335rem;margin-bottom:0.495rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h2{font-size:48px;font-size:2.6666666666666665rem;margin-bottom:0.61875rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h3{font-size:36px;font-size:2rem;margin-bottom:0.825rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h4{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h5{font-size:21px;font-size:1.1666666666666667rem;margin-bottom:1.4142857142857141rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h6{font-size:18px;font-size:1rem;margin-bottom:1.65rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -p{margin:0 0 1.5em;}p+p{text-indent:1.5em;margin-top:-1.5em;} -abbr,acronym,blockquote,code,dir,kbd,listing,plaintext,q,samp,tt,var,xmp{-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-o-hyphens:none;hyphens:none;} -pre code{word-wrap:normal;white-space:-moz-pre-wrap;white-space:pre-wrap;} -pre{white-space:pre;} -code{white-space:pre;font-family:monospace;} -abbr{font-variant:small-caps;font-weight:400;text-transform:lowercase;color:#333332;}abbr:hover{cursor:help;} -h1,h2,h3,h4,h5,h6{color:#333332;} -.lining dt,.lining dd{display:inline;margin:0;} -.lining dt+dt:before,.lining dd+dt:before{content:"\A";white-space:pre;} -.lining dd+dd:before{content:", ";} -.lining dd:before{content:": ";margin-left:-0.2rem;} -.dictionary-style dt{display:inline;counter-reset:definitions;}.dictionary-style dt+dt:before{content:", ";margin-left:-0.2rem;} -.dictionary-style dd{display:block;counter-increment:definitions;}.dictionary-style dd:before{content:counter(definitions, decimal) ". ";} -.stats-tabs{padding:0;}.stats-tabs li{display:inline-block;margin:0 0.625rem 0 0;padding:0 0.625rem 0 0;border-right:0.125rem solid #cccccc;}.stats-tabs li:last-child{margin:0;padding:0;border:none;} -.stats-tabs li a{display:inline-block;font-size:1.5rem;font-weight:bold;}.stats-tabs li a b{display:block;margin:0.125rem 0 0 0;font-size:0.875rem;font-weight:normal;} -.cite{display:block;font-size:0.875em;text-align:right;} -.pull-quote{position:relative;padding:1em;}.pull-quote:before,.pull-quote:after{height:1em;opacity:0.15;position:absolute;font-size:4em;} -.pull-quote:before{content:'“';top:0em;left:0em;} -.pull-quote:after{content:'”';bottom:0em;right:0em;} -h1,h2,h3,h4,h5,h6{font-family:'PT Sans Narrow',sans-serif;font-weight:700;} -h6{font-weight:400;} -a{text-decoration:none;color:#343434;}a:visited{color:#4e4e4e;} -a:hover{color:#1a1a1a;} -a:focus{outline:thin dotted;color:#343434;} +body{font-family:'PT Serif',serif;color:#333332;} +h1,h2,h3,h4,h5,h6{font-family:'PT Sans Narrow',sans-serif;} +h1{font-size:32px;font-size:2rem;} +a{text-decoration:none;color:#343434;}a:visited{color:#676767;} +a:hover{color:#010101;} +a:focus{outline:thin dotted;color:#010101;} a:hover,a:active{outline:0;} -b,strong{font-weight:700;} -ul li{list-style-type:square;} -ol li{list-style-type:upper-roman;} -p>a,li>a,em>a,a>em,footer a{text-decoration:none;border-bottom:1px dotted #b3b3b1;} -p>a:hover,li>a:hover,em>a:hover,footer a:hover{text-decoration:none;border-bottom:1px solid #b3b3b1;} -figcaption{margin-top:0.75em;line-height:1.25;font-size:18px;font-size:1rem;margin-bottom:1.65rem;font-family:'PT Sans Narrow',sans-serif;counter-increment:captions;}figcaption:before{font-weight:700;text-transform:uppercase;content:"Figure " counter(captions) ": ";} -.notice{margin-top:1.5em;padding:.5em 1em;text-indent:0;font-size:90%;background-color:#ddd;border-left:10px solid #ccc;} -blockquote{font-style:italic;margin-left:0;padding-left:1em;border-left:10px solid #ccc;}blockquote p+p{text-indent:0;margin-top:0;} -.footnotes{font-size:90%;} +.link-arrow{font-weight:100;text-decoration:underline;font-style:normal;} +figcaption{padding-top:10px;font-size:14px;font-size:0.875rem;line-height:1.8571;line-height:1.3;color:#4d4d4b;} +.image-credit{margin:0 auto;max-width:440px;padding-top:5px;padding-right:20px;padding-left:20px;text-align:right;font-size:14px;font-size:0.875rem;line-height:1.8571;line-height:1.3;color:#80807e;*zoom:1;}.image-credit:before,.image-credit:after{display:table;content:"";} +.image-credit:after{clear:both;} +.image-credit:before,.image-credit:after{display:table;content:"";line-height:0;} +.image-credit:after{clear:both;} +.image-credit a{color:#80807e;} +.notice{margin-top:1.5em;padding:.5em 1em;text-indent:0;font-size:14px;font-size:0.875rem;background-color:#ffffff;border:1px solid #cccccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +blockquote{margin-left:-28px;padding-left:20px;border-left:8px solid #333332;font-family:'PT Serif',serif;font-style:italic;font-size:24px;font-size:1.5rem;} +.entry-content .footnotes ol,.entry-content .footnotes li,.entry-content .footnotes p{font-size:14px;font-size:0.875rem;line-height:1.8571;margin-bottom:26px;margin-bottom:1.625rem;} tt,code,kbd,samp,pre{font-family:Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;} -p code{font-size:80%;white-space:nowrap;margin:0 2px;padding:0 5px;border:1px solid #e6e6e6;background-color:#f2f2f2;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +p code,li code{font-size:12px;font-size:0.75rem;line-height:1.5;white-space:nowrap;margin:0 2px;padding:0 5px;border:1px solid #e6e6e6;background-color:#f2f2f2;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +pre{font-size:12px;font-size:0.75rem;line-height:1.5;overflow-x:auto;} +.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;} +.clearfix:after{clear:both;} .hidden{display:none;visibility:hidden;} .visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;clip:auto;height:auto;width:auto;margin:0;overflow:visible;} -.visible-phone{display:none !important;} -.visible-tablet{display:none !important;} -.hidden-desktop{display:none !important;} -@media (max-width:767px){.visible-phone{display:inherit !important;} .hidden-phone{display:none !important;} .hidden-desktop{display:inherit !important;} .visible-desktop{display:none !important;}}@media (min-width:768px) and (max-width:979px){.visible-tablet{display:inherit !important;} .hidden-tablet{display:none !important;} .hidden-desktop{display:inherit !important;} .visible-desktop{display:none !important ;}}hr{display:block;margin:1em 0;padding:0;height:1px;border:0;border-top:1px solid #ccc;border-bottom:1px solid #fff;} +hr{display:block;margin:1em 0;padding:0;height:1px;border:0;border-top:1px solid #ccc;border-bottom:1px solid #fff;} article img{max-width:100%;height:auto;border-width:0;vertical-align:middle;-ms-interpolation-mode:bicubic;} svg:not(:root){overflow:hidden;} .half{margin:0 auto;width:100%;*zoom:1;}.half:before,.half:after{display:table;content:"";} .half:after{clear:both;} -.half:before,.half:after{content:"";display:table;} +.half:before,.half:after{display:table;content:"";line-height:0;} .half:after{clear:both;} .half img{display:inline;float:left;width:50%;} .half figcaption{display:inline;float:left;width:100%;} .third{margin:0 auto;width:100%;*zoom:1;}.third:before,.third:after{display:table;content:"";} .third:after{clear:both;} -.third:before,.third:after{content:"";display:table;} +.third:before,.third:after{display:table;content:"";line-height:0;} .third:after{clear:both;} .third img{display:inline;float:left;width:33.333333333333336%;} .third figcaption{display:inline;float:left;width:100%;} @@ -176,18 +137,15 @@ html{background-color:#ffffff;font-family:'PT Serif',serif;font-color:#333332;fo .top-navigation li{list-style-type:none;display:inline;margin-right:25px;}.top-navigation li a{decoration:none;border-bottom:0 solid transparent;-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-ms-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;} #main{counter-reset:captions;margin:0 auto;width:100%;*zoom:1;clear:both;margin-top:1em;}#main:before,#main:after{display:table;content:"";} #main:after{clear:both;} -#main:before,#main:after{content:"";display:table;} +#main:before,#main:after{display:table;content:"";line-height:0;} #main:after{clear:both;} #main article{margin:0 auto;width:100%;display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;margin-bottom:2em;} -#index{margin:0 auto;width:100%;display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;margin-bottom:2em;}#index article h2{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;margin-bottom:0;} +#index{margin:0 auto;width:100%;display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;margin-bottom:2em;}#index article h2{margin-bottom:0;} #index article p+p{text-indent:0;} .image-wrap{position:relative;margin-bottom:2em;}.image-wrap:after{content:" ";display:block;position:absolute;bottom:-1px;left:8%;width:0;height:0;border:20px solid transparent;border-bottom-color:#ffffff;} .image-wrap img{width:100%;height:auto;-ms-interpolation-mode:bicubic;} .image-wrap .headline-wrap{position:absolute;bottom:25px;margin-left:8.333333333333334%;}.image-wrap .headline-wrap h1,.image-wrap .headline-wrap h2{color:#ffffff;text-shadow:0 1px 2px rgba(0, 0, 0, 0.25);} -.headline-wrap h1{font-size:48px;font-size:2.6666666666666665rem;margin-bottom:0.61875rem;} -.headline-wrap h2{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;text-transform:uppercase;} -.article-wrap h2{font-size:36px;font-size:2rem;margin-bottom:0.825rem;} -.article-wrap h3{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;} +.headline-wrap h2{text-transform:uppercase;} .byline{clear:both;font-size:80%;} .article-author-top h4,.article-author-bottom h4{margin-bottom:0.5em;} .article-author-top p,.article-author-bottom p{font-size:80%;font-style:italic;} @@ -205,12 +163,12 @@ html{background-color:#ffffff;font-family:'PT Serif',serif;font-color:#333332;fo .toc li ul{margin:0;border-top:1px solid #808080;} .image-grid{*zoom:1;list-style:none;margin:0 0 1em;padding:0;}.image-grid:before,.image-grid:after{display:table;content:"";} .image-grid:after{clear:both;} -.image-grid:before,.image-grid:after{content:"";display:table;} +.image-grid:before,.image-grid:after{display:table;content:"";line-height:0;} .image-grid:after{clear:both;} .image-grid li{display:inline;float:left;width:50%;} .recent-grid{*zoom:1;list-style:none;margin:1em 0;}.recent-grid:before,.recent-grid:after{display:table;content:"";} .recent-grid:after{clear:both;} -.recent-grid:before,.recent-grid:after{content:"";display:table;} +.recent-grid:before,.recent-grid:after{display:table;content:"";line-height:0;} .recent-grid:after{clear:both;} .recent-grid li{display:inline;}.recent-grid li a{border-bottom:0 solid transparent;}.recent-grid li a:hover{border-bottom:0 solid transparent;} .recent-grid img{width:19%;margin-bottom:1%;} @@ -222,14 +180,14 @@ html{background-color:#ffffff;font-family:'PT Serif',serif;font-color:#333332;fo .holder span{margin:0 5px;} .footer-wrap{margin:0 auto;width:100%;*zoom:1;clear:both;margin-top:1em;padding-top:2em;padding-bottom:3em;background-color:#000000;}.footer-wrap:before,.footer-wrap:after{display:table;content:"";} .footer-wrap:after{clear:both;} -.footer-wrap:before,.footer-wrap:after{content:"";display:table;} +.footer-wrap:before,.footer-wrap:after{display:table;content:"";line-height:0;} .footer-wrap:after{clear:both;} .footer-wrap a,.footer-wrap a:active,.footer-wrap a:visited,.footer-wrap p,.footer-wrap h4,.footer-wrap h5,.footer-wrap h6{color:#bfbfbf;} .footer-wrap a{border-bottom:0 solid transparent;}.footer-wrap a:hover{color:#ffffff;border-bottom:0 solid transparent;} .footer-wrap footer{display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;} -.related-articles{display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;}.related-articles h4{font-size:21px;font-size:1.1666666666666667rem;margin-bottom:1.4142857142857141rem;text-transform:uppercase;margin-bottom:0;} +.related-articles{display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;}.related-articles h4{text-transform:uppercase;margin-bottom:0;} .related-articles li{margin-bottom:0;color:#ffffff;} -.footer-icons li{display:inline-block;padding-right:5px;}.footer-icons li a{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;color:#9a9a9a;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;}.footer-icons li a:hover{text-decoration:none;border-bottom:none;}.footer-icons li a:hover .icon-twitter,.footer-icons li a:hover .icon-twitter-sign{color:#2aa9df;} +.footer-icons li{display:inline-block;padding-right:5px;}.footer-icons li a{color:#9a9a9a;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;}.footer-icons li a:hover{text-decoration:none;border-bottom:none;}.footer-icons li a:hover .icon-twitter,.footer-icons li a:hover .icon-twitter-sign{color:#2aa9df;} .footer-icons li a:hover .icon-facebook,.footer-icons li a:hover .icon-facebook-sign{color:#3a5a98;} .footer-icons li a:hover .icon-instagram,.footer-icons li a:hover .icon-instagram-sign{color:#306088;} .footer-icons li a:hover .icon-google-plus,.footer-icons li a:hover .icon-google-plus-sign{color:#b63324;} diff --git a/assets/css/main.css b/assets/css/main.css index 663d4fa0..bf14781f 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -43,64 +43,26 @@ table{border-collapse:collapse;border-spacing:0;margin-bottom:1.5em;} .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";} .clearfix:after{clear:both;} .unstyled-list{list-style:none;margin-left:0;padding-left:0;}.unstyled-list li{list-style-type:none;} -@font-face{font-family:"Ampersand";src:local("Georgia"),local("Garamond"),local("Palatino"),local("Book Antiqua");unicode-range:U+270C;}@font-face{font-family:"Ampersand";src:local("Georgia");unicode-range:U+270C;}.ampersand-placeholder{font-family:Verdana,sans-serif;} -.breakword{word-wrap:break-word;} -.normal-wrap{word-wrap:normal;} -.inherit-wrap{word-wrap:auto;} -.drop-cap:first-letter{float:left;margin:inherit;padding:inherit;font-size:4em;font-family:inherit;line-height:1;text-indent:0;background:transparent;color:inherit;} -html{font:normal 112.5%/1.65 serif;} -body{word-wrap:normal;color:#333332;} -.tera{font-size:117px;font-size:6.5rem;margin-bottom:0.25384615384615383rem;} -.giga{font-size:90px;font-size:5rem;margin-bottom:0.33rem;} -.mega{font-size:72px;font-size:4rem;margin-bottom:0.4125rem;} -.alpha{font-size:60px;font-size:3.3333333333333335rem;margin-bottom:0.495rem;} -.beta{font-size:48px;font-size:2.6666666666666665rem;margin-bottom:0.61875rem;} -.gamma{font-size:36px;font-size:2rem;margin-bottom:0.825rem;} -.delta{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;} -.epsilon{font-size:21px;font-size:1.1666666666666667rem;margin-bottom:1.4142857142857141rem;} -.zeta{font-size:18px;font-size:1rem;margin-bottom:1.65rem;} -h1{font-size:60px;font-size:3.3333333333333335rem;margin-bottom:0.495rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h2{font-size:48px;font-size:2.6666666666666665rem;margin-bottom:0.61875rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h3{font-size:36px;font-size:2rem;margin-bottom:0.825rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h4{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h5{font-size:21px;font-size:1.1666666666666667rem;margin-bottom:1.4142857142857141rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h6{font-size:18px;font-size:1rem;margin-bottom:1.65rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -p{margin:0 0 1.5em;}p+p{text-indent:1.5em;margin-top:-1.5em;} -abbr,acronym,blockquote,code,dir,kbd,listing,plaintext,q,samp,tt,var,xmp{-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-o-hyphens:none;hyphens:none;} -pre code{word-wrap:normal;white-space:-moz-pre-wrap;white-space:pre-wrap;} -pre{white-space:pre;} -code{white-space:pre;font-family:monospace;} -abbr{font-variant:small-caps;font-weight:400;text-transform:lowercase;color:#333332;}abbr:hover{cursor:help;} -h1,h2,h3,h4,h5,h6{color:#333332;} -.lining dt,.lining dd{display:inline;margin:0;} -.lining dt+dt:before,.lining dd+dt:before{content:"\A";white-space:pre;} -.lining dd+dd:before{content:", ";} -.lining dd:before{content:": ";margin-left:-0.2rem;} -.dictionary-style dt{display:inline;counter-reset:definitions;}.dictionary-style dt+dt:before{content:", ";margin-left:-0.2rem;} -.dictionary-style dd{display:block;counter-increment:definitions;}.dictionary-style dd:before{content:counter(definitions, decimal) ". ";} -.stats-tabs{padding:0;}.stats-tabs li{display:inline-block;margin:0 0.625rem 0 0;padding:0 0.625rem 0 0;border-right:0.125rem solid #cccccc;}.stats-tabs li:last-child{margin:0;padding:0;border:none;} -.stats-tabs li a{display:inline-block;font-size:1.5rem;font-weight:bold;}.stats-tabs li a b{display:block;margin:0.125rem 0 0 0;font-size:0.875rem;font-weight:normal;} -.cite{display:block;font-size:0.875em;text-align:right;} -.pull-quote{position:relative;padding:1em;}.pull-quote:before,.pull-quote:after{height:1em;opacity:0.15;position:absolute;font-size:4em;} -.pull-quote:before{content:'“';top:0em;left:0em;} -.pull-quote:after{content:'”';bottom:0em;right:0em;} -h1,h2,h3,h4,h5,h6{font-family:'PT Sans Narrow',sans-serif;font-weight:700;} -h6{font-weight:400;} -a{text-decoration:none;color:#343434;}a:visited{color:#4e4e4e;} -a:hover{color:#1a1a1a;} -a:focus{outline:thin dotted;color:#343434;} +body{font-family:'PT Serif',serif;color:#333332;} +h1,h2,h3,h4,h5,h6{font-family:'PT Sans Narrow',sans-serif;} +h1{font-size:32px;font-size:2rem;} +a{text-decoration:none;color:#343434;}a:visited{color:#676767;} +a:hover{color:#010101;} +a:focus{outline:thin dotted;color:#010101;} a:hover,a:active{outline:0;} -b,strong{font-weight:700;} -ul li{list-style-type:square;} -ol li{list-style-type:upper-roman;} -p>a,li>a,em>a,a>em,footer a{text-decoration:none;border-bottom:1px dotted #b3b3b1;} -p>a:hover,li>a:hover,em>a:hover,footer a:hover{text-decoration:none;border-bottom:1px solid #b3b3b1;} -figcaption{margin-top:0.75em;line-height:1.25;font-size:18px;font-size:1rem;margin-bottom:1.65rem;font-family:'PT Sans Narrow',sans-serif;counter-increment:captions;}figcaption:before{font-weight:700;text-transform:uppercase;content:"Figure " counter(captions) ": ";} -.notice{margin-top:1.5em;padding:.5em 1em;text-indent:0;font-size:90%;background-color:#ddd;border-left:10px solid #ccc;} -blockquote{font-style:italic;margin-left:0;padding-left:1em;border-left:10px solid #ccc;}blockquote p+p{text-indent:0;margin-top:0;} -.footnotes{font-size:90%;} +.link-arrow{font-weight:100;text-decoration:underline;font-style:normal;} +figcaption{padding-top:10px;font-size:14px;font-size:0.875rem;line-height:1.8571;line-height:1.3;color:#4d4d4b;} +.image-credit{margin:0 auto;max-width:440px;padding-top:5px;padding-right:20px;padding-left:20px;text-align:right;font-size:14px;font-size:0.875rem;line-height:1.8571;line-height:1.3;color:#80807e;*zoom:1;}.image-credit:before,.image-credit:after{display:table;content:"";} +.image-credit:after{clear:both;} +.image-credit:before,.image-credit:after{display:table;content:"";line-height:0;} +.image-credit:after{clear:both;} +.image-credit a{color:#80807e;} +.notice{margin-top:1.5em;padding:.5em 1em;text-indent:0;font-size:14px;font-size:0.875rem;background-color:#ffffff;border:1px solid #cccccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +blockquote{margin-left:-28px;padding-left:20px;border-left:8px solid #333332;font-family:'PT Serif',serif;font-style:italic;font-size:24px;font-size:1.5rem;} +.entry-content .footnotes ol,.entry-content .footnotes li,.entry-content .footnotes p{font-size:14px;font-size:0.875rem;line-height:1.8571;margin-bottom:26px;margin-bottom:1.625rem;} tt,code,kbd,samp,pre{font-family:Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;} -p code{font-size:80%;white-space:nowrap;margin:0 2px;padding:0 5px;border:1px solid #e6e6e6;background-color:#f2f2f2;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +p code,li code{font-size:12px;font-size:0.75rem;line-height:1.5;white-space:nowrap;margin:0 2px;padding:0 5px;border:1px solid #e6e6e6;background-color:#f2f2f2;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +pre{font-size:12px;font-size:0.75rem;line-height:1.5;overflow-x:auto;} .highlight{background-color:#efefef;font-family:Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;font-size:80%;color:#333332;margin-bottom:1.5em;} .highlight pre{margin:0px;padding:1em;} .hll{background-color:#ffffcc;} @@ -164,23 +126,22 @@ p code{font-size:80%;white-space:nowrap;margin:0 2px;padding:0 5px;border:1px so .vg{color:#008080;} .vi{color:#008080;} .il{color:#009999;} +.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;} +.clearfix:after{clear:both;} .hidden{display:none;visibility:hidden;} .visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;clip:auto;height:auto;width:auto;margin:0;overflow:visible;} -.visible-phone{display:none !important;} -.visible-tablet{display:none !important;} -.hidden-desktop{display:none !important;} -@media (max-width:767px){.visible-phone{display:inherit !important;} .hidden-phone{display:none !important;} .hidden-desktop{display:inherit !important;} .visible-desktop{display:none !important;}}@media (min-width:768px) and (max-width:979px){.visible-tablet{display:inherit !important;} .hidden-tablet{display:none !important;} .hidden-desktop{display:inherit !important;} .visible-desktop{display:none !important ;}}hr{display:block;margin:1em 0;padding:0;height:1px;border:0;border-top:1px solid #ccc;border-bottom:1px solid #fff;} +hr{display:block;margin:1em 0;padding:0;height:1px;border:0;border-top:1px solid #ccc;border-bottom:1px solid #fff;} article img{max-width:100%;height:auto;border-width:0;vertical-align:middle;-ms-interpolation-mode:bicubic;} svg:not(:root){overflow:hidden;} .half{margin:0 auto;width:100%;*zoom:1;}.half:before,.half:after{display:table;content:"";} .half:after{clear:both;} -.half:before,.half:after{content:"";display:table;} +.half:before,.half:after{display:table;content:"";line-height:0;} .half:after{clear:both;} .half img{display:inline;float:left;width:50%;} .half figcaption{display:inline;float:left;width:100%;} .third{margin:0 auto;width:100%;*zoom:1;}.third:before,.third:after{display:table;content:"";} .third:after{clear:both;} -.third:before,.third:after{content:"";display:table;} +.third:before,.third:after{display:table;content:"";line-height:0;} .third:after{clear:both;} .third img{display:inline;float:left;width:33.333333333333336%;} .third figcaption{display:inline;float:left;width:100%;} @@ -252,18 +213,15 @@ html{background-color:#ffffff;font-family:'PT Serif',serif;font-color:#333332;fo .top-navigation li{list-style-type:none;display:inline;margin-right:25px;}.top-navigation li a{decoration:none;border-bottom:0 solid transparent;-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-ms-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;} #main{counter-reset:captions;margin:0 auto;width:100%;*zoom:1;clear:both;margin-top:1em;}#main:before,#main:after{display:table;content:"";} #main:after{clear:both;} -#main:before,#main:after{content:"";display:table;} +#main:before,#main:after{display:table;content:"";line-height:0;} #main:after{clear:both;} #main article{margin:0 auto;width:100%;display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;margin-bottom:2em;} -#index{margin:0 auto;width:100%;display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;margin-bottom:2em;}#index article h2{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;margin-bottom:0;} +#index{margin:0 auto;width:100%;display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;margin-bottom:2em;}#index article h2{margin-bottom:0;} #index article p+p{text-indent:0;} .image-wrap{position:relative;margin-bottom:2em;}.image-wrap:after{content:" ";display:block;position:absolute;bottom:-1px;left:8%;width:0;height:0;border:20px solid transparent;border-bottom-color:#ffffff;} .image-wrap img{width:100%;height:auto;-ms-interpolation-mode:bicubic;} .image-wrap .headline-wrap{position:absolute;bottom:25px;margin-left:8.333333333333334%;}.image-wrap .headline-wrap h1,.image-wrap .headline-wrap h2{color:#ffffff;text-shadow:0 1px 2px rgba(0, 0, 0, 0.25);} -.headline-wrap h1{font-size:48px;font-size:2.6666666666666665rem;margin-bottom:0.61875rem;} -.headline-wrap h2{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;text-transform:uppercase;} -.article-wrap h2{font-size:36px;font-size:2rem;margin-bottom:0.825rem;} -.article-wrap h3{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;} +.headline-wrap h2{text-transform:uppercase;} .byline{clear:both;font-size:80%;} .article-author-top h4,.article-author-bottom h4{margin-bottom:0.5em;} .article-author-top p,.article-author-bottom p{font-size:80%;font-style:italic;} @@ -281,12 +239,12 @@ html{background-color:#ffffff;font-family:'PT Serif',serif;font-color:#333332;fo .toc li ul{margin:0;border-top:1px solid #808080;} .image-grid{*zoom:1;list-style:none;margin:0 0 1em;padding:0;}.image-grid:before,.image-grid:after{display:table;content:"";} .image-grid:after{clear:both;} -.image-grid:before,.image-grid:after{content:"";display:table;} +.image-grid:before,.image-grid:after{display:table;content:"";line-height:0;} .image-grid:after{clear:both;} .image-grid li{display:inline;float:left;width:50%;} .recent-grid{*zoom:1;list-style:none;margin:1em 0;}.recent-grid:before,.recent-grid:after{display:table;content:"";} .recent-grid:after{clear:both;} -.recent-grid:before,.recent-grid:after{content:"";display:table;} +.recent-grid:before,.recent-grid:after{display:table;content:"";line-height:0;} .recent-grid:after{clear:both;} .recent-grid li{display:inline;}.recent-grid li a{border-bottom:0 solid transparent;}.recent-grid li a:hover{border-bottom:0 solid transparent;} .recent-grid img{width:19%;margin-bottom:1%;} @@ -298,14 +256,14 @@ html{background-color:#ffffff;font-family:'PT Serif',serif;font-color:#333332;fo .holder span{margin:0 5px;} .footer-wrap{margin:0 auto;width:100%;*zoom:1;clear:both;margin-top:1em;padding-top:2em;padding-bottom:3em;background-color:#000000;}.footer-wrap:before,.footer-wrap:after{display:table;content:"";} .footer-wrap:after{clear:both;} -.footer-wrap:before,.footer-wrap:after{content:"";display:table;} +.footer-wrap:before,.footer-wrap:after{display:table;content:"";line-height:0;} .footer-wrap:after{clear:both;} .footer-wrap a,.footer-wrap a:active,.footer-wrap a:visited,.footer-wrap p,.footer-wrap h4,.footer-wrap h5,.footer-wrap h6{color:#bfbfbf;} .footer-wrap a{border-bottom:0 solid transparent;}.footer-wrap a:hover{color:#ffffff;border-bottom:0 solid transparent;} .footer-wrap footer{display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;} -.related-articles{display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;}.related-articles h4{font-size:21px;font-size:1.1666666666666667rem;margin-bottom:1.4142857142857141rem;text-transform:uppercase;margin-bottom:0;} +.related-articles{display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;}.related-articles h4{text-transform:uppercase;margin-bottom:0;} .related-articles li{margin-bottom:0;color:#ffffff;} -.footer-icons li{display:inline-block;padding-right:5px;}.footer-icons li a{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;color:#9a9a9a;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;}.footer-icons li a:hover{text-decoration:none;border-bottom:none;}.footer-icons li a:hover .icon-twitter,.footer-icons li a:hover .icon-twitter-sign{color:#2aa9df;} +.footer-icons li{display:inline-block;padding-right:5px;}.footer-icons li a{color:#9a9a9a;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;}.footer-icons li a:hover{text-decoration:none;border-bottom:none;}.footer-icons li a:hover .icon-twitter,.footer-icons li a:hover .icon-twitter-sign{color:#2aa9df;} .footer-icons li a:hover .icon-facebook,.footer-icons li a:hover .icon-facebook-sign{color:#3a5a98;} .footer-icons li a:hover .icon-instagram,.footer-icons li a:hover .icon-instagram-sign{color:#306088;} .footer-icons li a:hover .icon-google-plus,.footer-icons li a:hover .icon-google-plus-sign{color:#b63324;} diff --git a/assets/less/coderay.less b/assets/less/coderay.less index b76e9529..db52c9a7 100644 --- a/assets/less/coderay.less +++ b/assets/less/coderay.less @@ -1,6 +1,6 @@ .CodeRay { background-color: #efefef; - font-family: @codefont; + font-family: @code-font; font-size: 80%; color: #333332; margin-bottom: 1.5em; diff --git a/assets/less/forms.less b/assets/less/forms.less index 594f44af..37c77a43 100644 --- a/assets/less/forms.less +++ b/assets/less/forms.less @@ -40,7 +40,7 @@ input, button, select, textarea { - font-family: @basefont; + font-family: @base-font; .box-sizing(border-box); } label { diff --git a/assets/less/ie.less b/assets/less/ie.less index 1cd4c4d0..2f902a2b 100644 --- a/assets/less/ie.less +++ b/assets/less/ie.less @@ -12,7 +12,7 @@ @import "site.less"; // TYPOGRAPHY ================================================= /* Typeplate.com typographic starter pack ================== */ -@import "typeplate.less"; +// @import "typeplate.less"; @import "typography.less"; // MIXINS ===================================================== @import "mixins.less"; diff --git a/assets/less/main.less b/assets/less/main.less index 253e0531..b90e1133 100644 --- a/assets/less/main.less +++ b/assets/less/main.less @@ -12,7 +12,7 @@ @import "site.less"; // TYPOGRAPHY ================================================= /* Typeplate.com typographic starter pack ================== */ -@import "typeplate.less"; +// @import "typeplate.less"; @import "typography.less"; /* Pygments Syntax highlighting ============================= */ @import "pygments.less"; diff --git a/assets/less/mixins.less b/assets/less/mixins.less index 1329a231..e5df34a3 100644 --- a/assets/less/mixins.less +++ b/assets/less/mixins.less @@ -1,76 +1,124 @@ -// =========================================================== +// UTILITY MIXINS +// -------------------------------------------------- -// 320 and Up by Andy Clarke -// Version: 3.0 -// URL: http://stuffandnonsense.co.uk/projects/320andup/ -// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 -// Modified by: Michael Rose +// Clearfix +// -------------------- +// For clearing floats like a boss h5bp.com/q +.clearfix { + *zoom: 1; + &:before, + &:after { + display: table; + content: ""; + // Fixes Opera/contenteditable bug: + // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 + line-height: 0; + } + &:after { + clear: both; + } +} -// ===========================================================/ +// Webkit-style focus +// -------------------- +.tab-focus() { + // Default + outline: thin dotted #333; + // Webkit + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} -// ROOT ===================================================== -// TYPOGRAPHY =============================================== -.font-size(@font-size: 16){ -@rem: (@font-size / 10); -font-size : @font-size * 1px; -font-size : ~"@{rem}rem"; } +// Center-align a block level element +// ---------------------------------- +.center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} -.lineheight(@font-size: 16){ -@rem: (@font-size / 10); -line-height: @font-size * 1px; -line-height: ~"@{rem}rem"; } +// TYPOGRAPHY +// -------------------------------------------------- + +// Full-fat vertical rhythm +// ------------------------ +.font-size(@size) { + font-size: 0px + @size; + font-size: 0rem + @size / @doc-font-size; + line-height: 0 + round(@doc-line-height / @size*10000) / 10000; + margin-bottom: 0px + @doc-line-height; + margin-bottom: 0rem + (@doc-line-height / @doc-font-size); +} + +// Just the REMs +// ------------- +.font-rem(@size) { + font-size: 0px + @size; + font-size: 0rem + @size / @doc-font-size; +} + +// Just font-size and line-height +// ------------------------------ +.font(@size) { + font-size: 0px + @size; + font-size: 0rem + @size / @doc-font-size; + line-height: 0 + round(@doc-line-height / @size*10000) / 10000; +} .text-overflow() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -// COLOR ==================================================== -// TEXTURE ================================================== -/* Gradients ============================================= */ +// GRADIENTS +// -------------------------------------------------- + .horizontal(@startColor : @white, @endColor : @lightergrey) { background-color: @endColor; background-image : -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ -background-image : -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ -background-image : -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ -background-image : -ms-linear-gradient(left, @startColor, @endColor); // IE10 -background-image : -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 -background-image : linear-gradient(left, @startColor, @endColor); // W3C +background-image : -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ +background-image : -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ +background-image : -ms-linear-gradient(left, @startColor, @endColor); // IE10 +background-image : -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 +background-image : linear-gradient(left, @startColor, @endColor); // W3C background-repeat : repeat-x; } .vertical(@startColor : @white, @endColor: @lightergrey) { background-image : -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ -background-image : -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ +background-image : -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-color : @endColor; -background-image : -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ -background-image : -ms-linear-gradient(top, @startColor, @endColor); // IE10 -background-image : -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 -background-image : linear-gradient(top, @startColor, @endColor); // W3C +background-image : -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ +background-image : -ms-linear-gradient(top, @startColor, @endColor); // IE10 +background-image : -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 +background-image : linear-gradient(top, @startColor, @endColor); // W3C background-repeat : repeat-x; } .directional(@startColor : @white, @endColor : @lightergrey, @deg : 45deg) { background-color : @endColor; -background-image : -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ -background-image : -ms-linear-gradient(@deg, @startColor, @endColor); // IE10 -background-image : -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ -background-image : -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 -background-image : linear-gradient(@deg, @startColor, @endColor); // W3C +background-image : -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ +background-image : -ms-linear-gradient(@deg, @startColor, @endColor); // IE10 +background-image : -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ +background-image : -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 +background-image : linear-gradient(@deg, @startColor, @endColor); // W3C background-repeat : repeat-x; } -/* .bordered(COLOR, COLOR, COLOR, COLOR); ================ */ +// .bordered(COLOR, COLOR, COLOR, COLOR); .bordered(@top-color: #eee, @right-color: #eee, @bottom-color: #eee, @left-color: #eee) { border-top : solid 1px @top-color; border-left : solid 1px @left-color; border-right : solid 1px @right-color; border-bottom : solid 1px @bottom-color; } -/* .rounded(VALUE); ====================================== */ +// ROUND CORNERS +// -------------------------------------------------- + +// .rounded(VALUE); .rounded(@radius:4px) { -webkit-border-radius : @radius; -moz-border-radius : @radius; border-radius : @radius; } -/* .border-radius(VALUE,VALUE,VALUE,VALUE); ============== */ +// .border-radius(VALUE,VALUE,VALUE,VALUE); .border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { -webkit-border-top-right-radius : @topright; -webkit-border-bottom-right-radius : @bottomright; @@ -88,29 +136,32 @@ border-top-left-radius : @topleft; -moz-background-clip : padding; background-clip : padding-box; } -/* .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) =========== */ +// .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { -webkit-box-shadow : @shadow; -moz-box-shadow : @shadow; box-shadow : @shadow; } -/* .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); ======= */ +// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) { -webkit-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); -moz-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); } -/* .text-shadow(); ======================================== */ +// .text-shadow(); .text-shadow(@shadow: 0 2px 3px rgba(0,0,0,.25)) { text-shadow : @shadow; } -/* .opacity(VALUE); ======================================= */ +// .opacity(VALUE); .opacity(@opacity : .5) { -webkit-opacity : @opacity; -moz-opacity : @opacity; opacity : @opacity; } -/* .rotate(VALUEdeg); ===================================== */ +// TRANSFORMATIONS +// -------------------------------------------------- + +// .rotate(VALUEdeg); .rotate(@deg) { -webkit-transform : rotate(@deg); -moz-transform : rotate(@deg); @@ -118,7 +169,7 @@ opacity : @opacity; } -o-transform : rotate(@deg); transform : rotate(@deg); } -/* .scale(VALUE); ========================================= */ +// .scale(VALUE); .scale(@ratio) { -webkit-transform : scale(@ratio); -moz-transform : scale(@ratio); @@ -126,7 +177,7 @@ transform : rotate(@deg); } -o-transform : scale(@ratio); transform : scale(@ratio); } -/* .skew(VALUE, VALUE); =================================== */ +// .skew(VALUE, VALUE); .skew(@x: 0, @y: 0) { -webkit-transform : skew(@x, @y); -moz-transform : skew(@x, @y); @@ -134,7 +185,7 @@ transform : scale(@ratio); } -o-transform : skew(@x, @y); transform : skew(@x, @y); } -/* .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); */ +// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); .transition(@transition) { -webkit-transition : @transition; -moz-transition : @transition; @@ -142,7 +193,7 @@ transform : skew(@x, @y); } -o-transition : @transition; transition : @transition; } -/* .translate(VALUE, VALUE) =============================== */ +// .translate(VALUE, VALUE) .translate(@x: 0, @y: 0) { -webkit-transform : translate(@x, @y); -moz-transform : translate(@x, @y); @@ -157,51 +208,46 @@ transform : translate(@x, @y); } -o-transform : translate(@x, @y, @z); transform : translate(@x, @y, @z); } -// ELEMENTS ================================================== -/* .background-alpha(VALUE VALUE); ======================== */ +.animation(@name, @duration: 300ms, @delay: 0, @ease: ease) { + -webkit-animation: @name @duration @delay @ease; + -moz-animation: @name @duration @delay @ease; + -ms-animation: @name @duration @delay @ease; +} + +// BACKGROUND +// -------------------------------------------------- + +// .background-alpha(VALUE VALUE); .background-alpha(@color: @white, @alpha: 1) { background-color : hsla(hue(@color), saturation(@color), lightness(@color), @alpha); } -/* .background-size(VALUE VALUE); ========================= */ +// .background-size(VALUE VALUE); .background-size(@size){ -webkit-background-size : @size; -moz-background-size : @size; -o-background-size : @size; background-size : @size; } -/* .background-clip(VALUE); (border-box, padding-box, content-box) */ +// .background-clip(VALUE); (border-box, padding-box, content-box) .background-clip(@clip) { -webkit-background-clip : @clip; -moz-background-clip : @clip; background-clip : @clip; } -/* .box-sizing(VALUE); (border-box, padding-box, content-box) */ +// .box-sizing(VALUE); (border-box, padding-box, content-box) .box-sizing(@boxsize: border-box) { -webkit-box-sizing : @boxsize; -moz-box-sizing : @boxsize; -ms-box-sizing : @boxsize; box-sizing : @boxsize; } -/* Contain floats ========================================= */ -.clearfix() { - *zoom:1; - &:before, - &:after { - content:""; - display:table; - } - &:after { - clear:both; - } -} - -/* For image replacement ================================== */ +// For image replacement .hide-text() { text-indent : 100%; white-space : nowrap; overflow : hidden; } -/* Hide from visual and speaking browsers ================= */ +// Hide from visual and speaking browsers .hidden() { display : none !important; visibility : hidden; } @@ -210,23 +256,23 @@ visibility : hidden; } visibility: hidden; } -/* Hide but maintain layout =============================== */ +// Hide but maintain layout .invisible() { visibility : hidden; } -/* .resize(VALUE) (none, both, horizontal, vertical, inherit) */ +// .resize(VALUE) (none, both, horizontal, vertical, inherit) .resize(@direction: both) { resize : @direction; overflow : auto; } -/* .userselect(VALUE) (all, element, none, text) ========== */ +// .userselect(VALUE) (all, element, none, text) .user-select(@select) { -webkit-user-select : @select; -moz-user-select : @select; -o-user-select : @select; user-select : @select; } -/* Hidden but available to speaking browsers ============== */ +// Hidden but available to speaking browsers .visuallyhidden() { overflow : hidden; position : absolute; @@ -237,7 +283,7 @@ margin : -1px; padding : 0; border : 0; } -/* Make visuallyhidden focusable with a keyboard ========== */ +// Make visuallyhidden focusable with a keyboard .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { position : static; @@ -245,55 +291,4 @@ clip : auto; height : auto; width : auto; margin : 0; -overflow: visible; } - -/* Responsive visibility utilities =================================== */ -/* For desktops =========================================== */ -.visible-phone { display: none !important; } -.visible-tablet { display: none !important; } -.visible-desktop { } // Don't set initially -.hidden-phone { } -.hidden-tablet { } -.hidden-desktop { display: none !important; } -/* Mobile phones only =====================================*/ -@media (max-width: 767px) { - // Show - .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior - // Hide - .hidden-phone { display: none !important; } - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important; } -} -/* Tablets & small desktops only ========================== */ -@media (min-width: 768px) and (max-width: 979px) { - // Show - .visible-tablet { display: inherit !important; } - // Hide - .hidden-tablet { display: none !important; } - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important ; } -} - -// LAYOUT ==================================================== -/* .columns(250px, 0, 24px, COLOR, solid, 1px) ============ */ -.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #eee, @columnRuleStyle: solid, @columnRuleWidth: 1px) { --webkit-column-width : @colwidth; --webkit-column-count : @colcount; --webkit-column-gap : @colgap; --webkit-column-rule-color : @columnRuleColor; --webkit-column-rule-style : @columnRuleStyle; --webkit-column-rule-width : @columnRuleWidth; --moz-column-width : @colwidth; --moz-column-count : @colcount; --moz-column-gap : @colgap; --moz-column-rule-color : @columnRuleColor; --moz-column-rule-style : @columnRuleStyle; --moz-column-rule-width : @columnRuleWidth; -column-width : @colwidth; -column-count : @colcount; -column-gap : @colgap; -column-rule-color : @columnRuleColor; -column-rule-style : @columnRuleStyle; -column-rule-width : @columnRuleWidth; } \ No newline at end of file +overflow: visible; } \ No newline at end of file diff --git a/assets/less/page.less b/assets/less/page.less index 753227b4..d2bdd05d 100644 --- a/assets/less/page.less +++ b/assets/less/page.less @@ -1,13 +1,13 @@ html { background-color: @bodycolor; - font-family: @basefont; + font-family: @base-font; font-color: @textcolor; font-size: 90%; } .navigation-wrapper { .container(); padding: 2em 0 3em; - font-family: @baseheadingfont; + font-family: @heading-font; font-weight: 700; text-transform: uppercase; } @@ -64,7 +64,6 @@ html { margin-bottom: 2em; article { h2 { - .delta(); margin-bottom: 0; } p+p { @@ -103,19 +102,17 @@ html { } .headline-wrap { h1 { - .beta(); + } h2 { - .delta(); text-transform: uppercase; } } .article-wrap { h2 { - .gamma(); + } h3 { - .delta(); } } .byline { @@ -176,7 +173,7 @@ html { display: block; margin: 0; padding: 0; - font-family: @baseheadingfont; + font-family: @heading-font; border-bottom: 1px solid darken(@white, 50); &:last-child { border-bottom: 0 solid transparent; @@ -223,7 +220,7 @@ html { } } .holder { - font-family: @baseheadingfont; + font-family: @heading-font; a { cursor: pointer; margin: 0 5px; @@ -288,7 +285,7 @@ html { .prefix(12,1); .suffix(12,1); h4 { - .epsilon(); + text-transform: uppercase; margin-bottom: 0; } @@ -302,7 +299,6 @@ html { display: inline-block; padding-right: 5px; a { - .delta(); color: lighten(@basecolor, 40%); .transition(.4s linear); &:hover { diff --git a/assets/less/pygments.less b/assets/less/pygments.less index 9076b380..c0b2853a 100644 --- a/assets/less/pygments.less +++ b/assets/less/pygments.less @@ -1,6 +1,6 @@ .highlight { background-color: #efefef; - font-family: @codefont; + font-family: @code-font; font-size: 80%; color: #333332; margin-bottom: 1.5em; diff --git a/assets/less/typography.less b/assets/less/typography.less index e0a105be..e56044a7 100644 --- a/assets/less/typography.less +++ b/assets/less/typography.less @@ -1,25 +1,33 @@ -/* Headings ============================================== */ -h1, h2, h3, h4, h5, h6 { - font-family: @baseheadingfont; - font-weight: 700; -} -h6 { - font-weight: 400; +// Body +// -------------------------------------------------- +body { + font-family: @base-font; + color: @text-color; } -/* Links ================================================= */ +// Headings +// -------------------------------------------------- +h1, h2, h3, h4, h5, h6 { + font-family: @heading-font; +} +h1 { + .font-rem(32); +} + +// Links +// -------------------------------------------------- a { text-decoration: none; - color: @linkcolor; + color: @link-color; &:visited { - color: @linkcolorvisited; + color: lighten(@link-color, 20); } &:hover { - color: @linkcolorhover; + color: darken(@link-color, 20); } &:focus { outline: thin dotted; - color: @linkcolorfocus; + color: darken(@link-color, 20); } &:hover, &:active { @@ -27,88 +35,90 @@ a { } } -b, strong { - font-weight: 700; +.link-arrow { + font-weight: 100; + text-decoration: underline; + font-style: normal; } -/* Lists ============================================== */ -ul { - li { - list-style-type: square - } -} -ol { - li { - list-style-type: upper-roman; - } -} - -/* Add underline for main links ======================= */ -p > a, -li > a, -em > a, -a > em, -footer a { - text-decoration: none; - border-bottom: 1px dotted lighten(@textcolor, 50%); -} -p > a:hover, -li > a:hover, -em > a:hover, -footer a:hover { - text-decoration: none; - border-bottom: 1px solid lighten(@textcolor, 50%); -} - -/* Figure caption ===================================== */ +// Figures +// -------------------------------------------------- figcaption { - margin-top: (@indent-val / 2); - line-height: 1.25; - .zeta(); - font-family: @baseheadingfont; - counter-increment: captions; - &:before { - font-weight: 700; - text-transform: uppercase; - content: "Figure " counter(captions) ": "; + padding-top: 10px; + .font(14); + line-height: 1.3; + color: lighten(@text-color, 10); +} + +// Feature Image Caption +// -------------------------------------------------- +.image-credit { + margin: 0 auto; + max-width: 440px; + padding-top: 5px; + padding-right: 20px; + padding-left: 20px; + text-align: right; + .font(14); + line-height: 1.3; + color: lighten(@text-color, 30); + .clearfix(); + a { + color: lighten(@text-color, 30); } } -/* Notice ============================================== */ +// Note text +// -------------------------------------------------- .notice { margin-top: 1.5em; padding: .5em 1em; text-indent: 0; - font-size: 90%; - background-color: #ddd; - border-left: 10px solid #ccc; + .font-rem(14); + background-color: @body-color; + border: 1px solid darken(@body-color,20); + .rounded(3px); } -/* Blockquote =========================================== */ + +// Blockquotes +// -------------------------------------------------- blockquote { + margin-left: -28px; + padding-left: 20px; + border-left: 8px solid @border-color; + font-family: @alt-font; font-style: italic; - border-left: 10px solid #ccc; - margin-left: 0; - padding-left: 1em; - border-left: 10px solid #ccc; - p+p { - text-indent: 0; - margin-top: 0; + .font-rem(24); +} + +// Footnotes +// -------------------------------------------------- +.entry-content .footnotes { + ol, li, p { + .font-size(14); } } -/* Footnotes ============================================= */ -.footnotes { - font-size: 90%; -} -/* Code ================================================== */ + +// Code +// -------------------------------------------------- tt, code, kbd, samp, pre { - font-family: @codefont; + font-family: @code-font; +} +p, +li { + code { + .font-rem(12); + line-height: 1.5; + white-space: nowrap; + margin: 0 2px; + padding: 0 5px; + border: 1px solid lighten(@black, 90); + background-color: lighten(@black, 95); + .rounded(3px); + } +} +pre { + .font-rem(12); + line-height: 1.5; + overflow-x: auto; } -p code { - font-size: 80%; - white-space: nowrap; - margin: 0 2px; - padding: 0 5px; - border: 1px solid lighten(@black, 90); - background-color: lighten(@black, 95); - .rounded(3px); -} \ No newline at end of file diff --git a/assets/less/variables.less b/assets/less/variables.less index 41ab42ee..ca25a581 100644 --- a/assets/less/variables.less +++ b/assets/less/variables.less @@ -1,11 +1,17 @@ // TYPOGRAPHY ================================================ -@basefont: 'PT Serif', serif; -@baseheadingfont: 'PT Sans Narrow', sans-serif; -@codefont: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; +@doc-font-size: 16; +@doc-line-height: 26; +@base-font: 'PT Serif', serif; +@heading-font: 'PT Sans Narrow', sans-serif; +@code-font: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; +@alt-font: @base-font; // COLOR ==================================================== @bodycolor : #fff; +@body-color: @bodycolor; @textcolor : #333332; +@text-color : @textcolor; +@border-color: @text-color; @basecolor : #343434; @compcolor : spin(@basecolor, 180); @bordercolor : @basecolor; @@ -14,6 +20,7 @@ @accentcolor : @black; /* Links ================================================= */ @linkcolor : #343434; +@link-color: @linkcolor; @linkcolorhover : darken(@linkcolor, 10); @linkcolorvisited : lighten(@linkcolorhover, 20); @linkcolorfocus : darken(@linkcolorvisited, 10); \ No newline at end of file