Improve code readability
This commit is contained in:
Michael Rose
parent
4df2367e1c
commit
d541d45c9c
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,9 +126,10 @@
|
|||
@each $socialnetwork, $color in $social {
|
||||
&--#{$socialnetwork} {
|
||||
background-color: $color;
|
||||
|
||||
&:hover {
|
||||
background-color: mix(#000, $color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -41,6 +41,7 @@
|
|||
|
||||
@mixin clearfix {
|
||||
clear: both;
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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%)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,15 +2,17 @@
|
|||
PRINT STYLES
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
/*
|
||||
Hide the following elements on print
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
.top-navigation,
|
||||
.social-share,
|
||||
.related-articles,
|
||||
.google-ads {
|
||||
.masthead,
|
||||
.toc,
|
||||
.page__share,
|
||||
.page__related,
|
||||
.ads,
|
||||
.page__footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,15 +162,18 @@ 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
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@ table {
|
|||
font-size: 0.8rem;
|
||||
border-collapse: collapse;
|
||||
border-bottom: 2px solid $border-color;
|
||||
|
||||
& + table {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
|
@ -30,4 +31,4 @@ td {
|
|||
|
||||
tr, td, th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -249,4 +252,4 @@ $navicon-height : 4px;
|
|||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue