Improve code readability

This commit is contained in:
Michael Rose 2016-03-21 16:36:24 -04:00
parent 4df2367e1c
commit d541d45c9c
19 changed files with 213 additions and 25 deletions

View file

@ -20,12 +20,12 @@
<li><strong>{{ site.data.ui-text[site.locale].follow_label }}</strong></li>
{% endif %}
{% if site.twitter.username %}
<li><a href="https://twitter.com/{{ site.twitter.username }}"><i class="fa fa-fw fa-twitter"></i> Twitter</a></li>
<li><a href="https://twitter.com/{{ site.twitter.username }}"><i class="fa fa-fw fa-twitter-square"></i> Twitter</a></li>
{% endif %}
{% if site.facebook.username %}
<li><a href="https://facebook.com/{{ site.facebook.username }}"><i class="fa fa-fw fa-facebook"></i> Facebook</a></li>
<li><a href="https://facebook.com/{{ site.facebook.username }}"><i class="fa fa-fw fa-facebook-square"></i> Facebook</a></li>
{% endif %}
<li><a href="{{ base_path }}/feed.xml"><i class="fa fa-fw fa-rss"></i> {{ site.data.ui-text[site.locale].feed_label }}</a></li>
<li><a href="{{ base_path }}/feed.xml"><i class="fa fa-fw fa-rss-square"></i> {{ site.data.ui-text[site.locale].feed_label }}</a></li>
</ul>
</div>

View file

@ -4,15 +4,19 @@
.archive {
margin-bottom: 2em;
@include breakpoint($medium) {
@include span(12 of 12);
}
@include breakpoint($large) {
@include span(10 of 12 last);
}
@include breakpoint($x-large) {
@include prefix(0.5 of 12);
}
a {
text-decoration: none;
}
@ -34,6 +38,7 @@
.archive__item-excerpt {
font-size: 14px;
& + p {
text-indent: 0;
}
@ -43,6 +48,7 @@ a:hover {
.archive__item-teaser {
box-shadow: 0 0 10px rgba(#000, 0.25);
}
.archive__item-title {
text-decoration: underline;
}
@ -57,9 +63,11 @@ a:hover {
@include breakpoint($medium) {
padding-right: $right-sidebar-width-narrow;
}
@include breakpoint($large) {
padding-right: $right-sidebar-width;
}
@include breakpoint($x-large) {
padding-right: $right-sidebar-width-wide;
}
@ -72,15 +80,18 @@ a:hover {
.grid__item {
margin-bottom: 2em;
.archive__item-excerpt {
display: none;
}
.archive__item-teaser {
border-radius: $border-radius;
img {
width: 100%;
}
}
@include breakpoint($small) {
@include gallery(5 of 10);
.archive__item-teaser {
@ -88,13 +99,16 @@ a:hover {
overflow: hidden;
}
}
@include breakpoint($medium) {
margin-left: 0; // reset before mixin does its thing
margin-right: 0; // reset before mixin does its thing
@include gallery(2.5 of 10);
.archive__item-teaser {
max-height: 120px;
}
.archive__item-excerpt {
display: block;
}

View file

@ -9,6 +9,7 @@ body {
font-family: $serif;
line-height: 1.5;
background-color: $body-color;
&.overflow--hidden {
/* when primary navigation is visible, the content in the background won't scroll */
overflow: hidden;
@ -23,18 +24,23 @@ h1, h2, h3, h4, h5, h6 {
h1 {
font-size: 32px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
h6 {
font-size: 14px;
}
@ -60,6 +66,7 @@ del a {
p {
margin: 0 0 $indent-var;
// sibling indentation
@if $paragraph-indent == true {
& + p {
@ -93,13 +100,16 @@ blockquote {
padding-right: 1em;
font-style: italic;
border-left: 0.25em solid $accent-color;
a {
color: inherit;
}
cite {
font-family: $sans-serif;
font-size: 14px;
font-style: normal;
&:before {
content: "\2014";
padding-right: 5px;
@ -113,10 +123,12 @@ a {
&:focus {
@extend %tab-focus;
}
&:hover,
&:active {
outline: 0;
}
&:hover {
img {
box-shadow: 0 0 10px rgba(#000, 0.25);
@ -129,6 +141,7 @@ a {
ol, ul {
@include breakpoint($small) {
padding-left: 0;
ol, ul {
padding: 0.5em 1em;
}
@ -141,9 +154,11 @@ tt, code, kbd, samp, pre {
font-family: $monospace;
font-size: 14px;
}
pre {
overflow-x: auto; // add scrollbars to wide code blocks
}
p code,
li code,
figcaption code {
@ -152,6 +167,7 @@ figcaption code {
background: mix(#fff, $light-gray, 40%);
border: 1px solid $light-gray;
border-radius: $border-radius;
&:before, &:after {
letter-spacing: -0.2em;
content: "\00a0"; // non-breaking space
@ -179,19 +195,23 @@ figure {
align-items: flex-start;
flex-wrap: wrap;
margin: 2em 0;
img,
iframe,
.fluid-width-video-wrapper {
margin-bottom: 1em;
}
img {
width: 100%;
border-radius: $border-radius;
transition: box-shadow 0.3s;
}
> a {
display: block;
}
&.half {
> a,
> img {
@ -199,10 +219,12 @@ figure {
width: calc(50% - 0.5em);
}
}
figcaption {
width: 100%;
}
}
&.third {
> a,
> img {
@ -210,6 +232,7 @@ figure {
width: calc(33.3333% - 0.5em);
}
}
figcaption {
width: 100%;
}
@ -223,16 +246,19 @@ figcaption {
color: mix(#fff, $text-color, 25%);
font-family: $sans-serif;
font-size: 0.8rem;
a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid $light-gray;
transition: border 0.4s ease-in-out;
&:hover {
color: #000;
border-bottom-color: #000;
}
}
code {
font-size: 0.64rem;
}
@ -268,9 +294,11 @@ nav {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}

View file

@ -22,12 +22,15 @@
border: 0 !important;
border-radius: $border-radius;
cursor: pointer;
&:hover {
background-color: mix(white, #000, 20%);
}
.icon {
margin-right: 0.5em;
}
.icon + .hidden {
margin-left: -0.5em; // override for hidden text
}
@ -37,6 +40,7 @@
&--block {
display: block;
width: 100%;
+ .btn--block {
margin-top: 0.25em;
}
@ -48,6 +52,7 @@
color: currentColor !important;
border: 1px solid currentColor !important; // override
background-color: #fff;
&:hover {
background-color: mix(#000, #fff, 20%);
}
@ -64,6 +69,7 @@
&--info {
background-color: $info-color;
&:hover {
background-color: mix(#000, $info-color, 20%);
}
@ -73,6 +79,7 @@
&--warning {
background-color: $warning-color;
&:hover {
background-color: mix(#000, $warning-color, 20%);
}
@ -82,6 +89,7 @@
&--success {
background-color: $success-color;
&:hover {
background-color: mix(#000, $success-color, 20%);
}
@ -91,6 +99,7 @@
&--danger {
background-color: $danger-color;
&:hover {
background-color: mix(#000, $danger-color, 20%);
}
@ -117,6 +126,7 @@
@each $socialnetwork, $color in $social {
&--#{$socialnetwork} {
background-color: $color;
&:hover {
background-color: mix(#000, $color, 20%);
}

View file

@ -7,15 +7,19 @@
@include clearfix;
margin-top: 3em;
padding: 0 2em 3em;
@include breakpoint($large) {
padding-left: 1em;
padding-right: 1em;
}
@include breakpoint($x-large) {
max-width: $x-large;
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
@ -26,9 +30,11 @@
@include breakpoint($large) {
@include prefix(2 of 12);
}
@include breakpoint($x-large) {
@include prefix(2.5 of 12);
}
font-size: 14px;
}
@ -36,9 +42,11 @@
@include breakpoint($large) {
@include prefix(2 of 12);
}
@include breakpoint($x-large) {
@include prefix(2.5 of 12);
}
ul {
margin: 0;
padding: 0;
@ -56,4 +64,8 @@
content: "";
padding-right: 5px;
}
a {
font-weight: bold;
}
}

View file

@ -4,11 +4,13 @@
btnform {
margin: 0 0 5px 0;
fieldset {
margin-bottom: 5px;
padding: 0;
border-width: 0;
}
legend {
display: block;
width: 100%;
@ -20,14 +22,17 @@ btnform {
border-bottom: 1px solid mix(#fff, #000, 80%);
white-space: normal;
}
p {
margin-bottom: 5px / 2;
}
ul {
list-style-type: none;
margin: 0 0 5px 0;
padding: 0;
}
br {
display: none;
}
@ -56,6 +61,7 @@ label {
font-weight: bold;
color: $text-color;
cursor: pointer;
input,
textarea,
select {
@ -73,6 +79,7 @@ select {
background-color: #fff;
border: 1px solid mix(#fff, #000, 80%);
color: $text-color;
&:hover {
border-color: mix(#fff, $accent-color, 50%);
}
@ -224,7 +231,7 @@ select:focus {
.help-block,
.help-inline {
color: mix(#fff, #000, 50%);
color: $info-color;
}
.help-block {

View file

@ -9,16 +9,20 @@
font-family: $sans-serif-narrow;
font-weight: 700;
text-transform: uppercase;
@include breakpoint($large) {
padding-left: 1em;
padding-right: 1em;
}
@include breakpoint($x-large) {
max-width: $x-large;
}
nav {
z-index: 1;
z-index: 10;
}
a {
text-decoration: none;
}
@ -29,9 +33,11 @@
@include breakpoint($large) {
@include prefix(2 of 12);
}
@include breakpoint($x-large) {
@include prefix(2.5 of 12);
}
font-size: 24px;
}
@ -39,9 +45,11 @@
@include breakpoint($large) {
@include prefix(2 of 12);
}
@include breakpoint($x-large) {
@include prefix(2.5 of 12);
}
margin-bottom: 1em;
ul {
margin: 0;
@ -56,4 +64,10 @@
list-style-type: none;
font-size: 16px;
white-space: nowrap;
a {
&:hover {
color: $gray;
}
}
}

View file

@ -41,6 +41,7 @@
@mixin clearfix {
clear: both;
&::after {
clear: both;
content: "";

View file

@ -13,18 +13,22 @@
padding-left: 2em;
padding-right: 2em;
font-family: $sans-serif;
ol {
padding: 0;
list-style: none;
font-size: 14px;
@include breakpoint($medium) {
@include span(10 of 12);
@include pre(2);
}
}
li {
display: inline;
}
.current {
font-weight: bold;
}
@ -38,18 +42,22 @@
.pagination {
padding-top: 0.5em;
border-top: 1px solid $border-color;
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline-block;
}
li + li:before {
content: "";
padding-right: 10px;
}
.current {
font-weight: bold;
}
@ -93,7 +101,6 @@
font-weight: bold;
a {
padding-left: 0;
color: $text-color !important;
}
}

View file

@ -15,34 +15,42 @@
padding: 1em;
background-color: mix(#fff, $notice-color, 90%);
border-radius: $border-radius;
h4 {
margin-top: 0 !important; // override
margin-bottom: 0.75em;
line-height: 1 !important; // override
}
@at-root .page__content #{&} h4 {
// using at-root to override .page-content h4 font size
margin-bottom: 0;
font-size: 1rem;
}
@at-root .page__content #{&} a {
border-bottom-width: 2px;
box-shadow: none !important; // override
&:hover {
background-color: transparent !important; // override
}
}
p {
margin-bottom: 0;
a {
border-bottom: 1px solid mix(#fff, $notice-color, 50%) !important; // override
}
}
h4 + p {
// remove space above paragraphs that appear directly after notice headline
margin-top: 0;
padding-top: 0;
}
code {
background-color: mix(#fff, $notice-color, 70%)
}

View file

@ -10,10 +10,12 @@
padding-left: 2em;
padding-right: 2em;
z-index: 0;
@include breakpoint($large) {
padding-left: 1em;
padding-right: 1em;
}
@include breakpoint($x-large) {
max-width: $x-large;
}
@ -23,10 +25,12 @@
@include breakpoint($medium) {
padding-right: $right-sidebar-width-narrow;
}
@include breakpoint($large) {
@include span(10 of 12 last);
padding-right: $right-sidebar-width;
}
@include breakpoint($x-large) {
@include prefix(0.5 of 12);
padding-right: $right-sidebar-width-wide;
@ -70,9 +74,11 @@
z-index: 5;
opacity: 0.5;
border-radius: $border-radius 0 $border-radius 0;
@include breakpoint($large) {
padding: 5px 10px;
}
a {
color: #fff;
text-decoration: none;
@ -105,6 +111,7 @@
color: mix(#fff, $gray, 25%);
font-family: $sans-serif;
font-size: 14px;
p {
margin-bottom: 0.5em;
}
@ -135,6 +142,7 @@
text-decoration: none;
border: 1px solid $light-gray;
border-radius: $border-radius;
&:hover {
text-decoration: none;
border-color: $gray;
@ -142,7 +150,6 @@
}
/*
Comments
========================================================================== */
@ -167,12 +174,15 @@
border-top: 1px solid $border-color;
@include clearfix();
float: left;
@include breakpoint($large) {
@include pre(2 of 12);
}
@include breakpoint($x-large) {
@include pre(2.5 of 12);
}
a {
text-decoration: none;
}

View file

@ -7,10 +7,12 @@
========================================================================== */
@media print {
.top-navigation,
.social-share,
.related-articles,
.google-ads {
.masthead,
.toc,
.page__share,
.page__related,
.ads,
.page__footer {
display: none;
}
}

View file

@ -9,12 +9,15 @@ html {
box-sizing: border-box;
background-color: $background-color;
font-size: 15px;
@include breakpoint($medium) {
font-size: 16px;
}
@include breakpoint($large) {
font-size: 18px;
}
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
@ -89,9 +92,11 @@ sup {
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
@ -126,16 +131,19 @@ textarea {
font-size: 100%;
vertical-align: middle;
}
button,
input {
*overflow: visible; // inner spacing ie IE6/7
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // inner padding and border oddities in FF3/4
padding: 0;
border: 0;
}
button,
html input[type="button"], // avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls
input[type="reset"],
@ -143,6 +151,7 @@ input[type="submit"] {
-webkit-appearance: button; // corrects inability to style clickable `input` types in iOS
cursor: pointer; // improves usability and consistency of cursor style between image-type `input` and others
}
label,
select,
button,
@ -153,14 +162,17 @@ input[type="radio"],
input[type="checkbox"] {
cursor: pointer; // improves usability and consistency of cursor style between image-type `input` and others
}
input[type="search"] { // Appearance in Safari/Chrome
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; // inner-padding issues in Chrome OSX, Safari 5
}
textarea {
overflow: auto; // remove vertical scrollbar in IE6-9
vertical-align: top; // readability and alignment cross-browser

View file

@ -9,20 +9,35 @@
.sidebar {
@include clearfix();
margin-bottom: 1em;
@include breakpoint($large) {
@include span(2 of 12);
@include suffix(0.25 of 12);
}
@include breakpoint($x-large) {
padding-right: 0;
}
h2, h3, h4, h5, h6 {
margin-bottom: 0;
font-family: $sans-serif-narrow;
}
p, li {
font-size: 14px;
h3 {
font-size: 20px;
}
h4 {
font-size: 18px;
}
p, li {
font-family: $sans-serif;
font-size: 14px;
line-height: 1.2;
}
img {
width: 100%;
}
@ -35,17 +50,21 @@
right: 1em;
width: $right-sidebar-width-narrow;
padding-left: 2em;
@include breakpoint($large) {
width: $right-sidebar-width;
}
@include breakpoint($x-large) {
width: $right-sidebar-width-wide;
padding-left: span(1 of 12);
}
}
@include breakpoint($large) {
right: calc(50% - (0.5 * #{$large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
}
@include breakpoint($x-large) {
right: calc(50% - (0.5 * #{$x-large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
}
@ -60,11 +79,13 @@
vertical-align: top;
width: 36px;
height: 36px;
@include breakpoint($large) {
display: block;
width: 100%;
height: 100%;
}
img {
max-width: 110px;
border-radius: 50%;
@ -78,6 +99,7 @@
padding-left: 15px;
padding-right: 15px;
line-height: 1;
@include breakpoint($large) {
display: block;
width: 100%;
@ -89,6 +111,7 @@
.author__name {
margin: 0;
font-size: 18px;
@include breakpoint($large) {
margin-top: 10px;
margin-bottom: 10px;
@ -101,8 +124,7 @@
.author__bio {
margin-bottom: 10px;
font-size: 14px;
font-style: italic;
@include breakpoint($large) {
margin-bottom: 20px;
}
@ -116,6 +138,7 @@
z-index: 9999;
position: relative;
cursor: pointer;
@include breakpoint($large) {
display: block;
}
@ -123,6 +146,7 @@
margin: 0;
padding: 5px 10px;
color: mix(#fff, $gray, 25%);
@include breakpoint($large) {
display: none;
}
@ -141,6 +165,7 @@
background: #fff;
z-index: -1;
box-shadow: 0 0 10px rgba(#000, 0.25);
@include breakpoint($large) {
display: block;
position: relative;
@ -150,6 +175,7 @@
background: transparent;
box-shadow: none;
}
&:before {
display: block;
content: "";
@ -161,10 +187,12 @@
border-width: 0 10px 10px;
border-color: $border-color transparent;
z-index: 0;
@include breakpoint($large) {
display: none;
}
}
&:after {
display: block;
content: "";
@ -176,10 +204,12 @@
border-width: 0 10px 10px;
border-color: #fff transparent;
z-index: 1;
@include breakpoint($large) {
display: none;
}
}
a {
display: block;
margin-bottom: 5px;
@ -187,6 +217,7 @@
font-size: 14px;
text-decoration: none;
white-space: nowrap;
&:hover {
text-decoration: underline;
}

View file

@ -2,12 +2,12 @@
Syntax highlighting
========================================================================== */
div.highlighter-rouge,
figure.highlight {
div.highlighter-rouge, figure.highlight {
margin-bottom: 1em;
padding: 1em;
border: 1px solid $border-color;
border-radius: $border-radius;
.highlight {
margin: 0;
font-family: $monospace;
@ -21,75 +21,98 @@ figure.highlight {
.highlight, .highlight .w {
color: #303030;
}
.highlight .err {
color: #151515;
background-color: #ac4142;
}
.highlight .c, .highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs {
color: #505050;
}
.highlight .cp {
color: #f4bf75;
}
.highlight .nt {
color: #f4bf75;
}
.highlight .o, .highlight .ow {
color: #d0d0d0;
}
.highlight .p, .highlight .pi {
color: #d0d0d0;
}
.highlight .gi {
color: #90a959;
}
.highlight .gd {
color: #ac4142;
}
.highlight .gh {
color: #6a9fb5;
background-color: #151515;
font-weight: bold;
}
.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
color: #aa759f;
}
.highlight .kc {
color: #d28445;
}
.highlight .kt {
color: #d28445;
}
.highlight .kd {
color: #d28445;
}
.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
color: #90a959;
}
.highlight .sr {
color: #75b5aa;
}
.highlight .si {
color: #8f5536;
}
.highlight .se {
color: #8f5536;
}
.highlight .nn {
color: #f4bf75;
}
.highlight .nc {
color: #f4bf75;
}
.highlight .no {
color: #f4bf75;
}
.highlight .na {
color: #6a9fb5;
}
.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mb, .highlight .mx {
color: #90a959;
}
.highlight .ss {
color: #90a959;
}

View file

@ -8,6 +8,7 @@ table {
font-size: 0.8rem;
border-collapse: collapse;
border-bottom: 2px solid $border-color;
& + table {
margin-top: 1em;
}

View file

@ -24,6 +24,7 @@
padding: 0;
width: 100%;
list-style: none;
a {
display: block;
padding: 10px 20px;
@ -32,17 +33,21 @@
font-weight: bold;
line-height: 1.5;
border-bottom: 1px solid $border-color;
&:hover {
color: #000;
background: $border-color;
}
}
li ul > li a {
font-weight: normal;
}
// hide sub sub links on small screens
li > ul li {
display: none;
@include breakpoint($medium) {
display: block;
}

View file

@ -110,6 +110,7 @@ body:hover .visually-hidden button {
display: block;
margin-left: auto;
margin-right: auto;
@include breakpoint($small) {
float: left;
margin-right: 1em;
@ -122,6 +123,7 @@ body:hover .visually-hidden button {
display: block;
margin-left: auto;
margin-right: auto;
@include breakpoint($small) {
float: right;
margin-left: 1em;
@ -218,6 +220,7 @@ $navicon-height : 4px;
position: -webkit-sticky;
position: sticky;
top: 3em;
> * {
display: block;
}

File diff suppressed because one or more lines are too long