More style cleanup and housekeeping

This commit is contained in:
Michael Rose 2016-03-11 15:55:06 -05:00
parent a3d251a18e
commit 5d9e0af805
17 changed files with 219 additions and 154 deletions

54
_assets/css/_footer.scss Normal file
View file

@ -0,0 +1,54 @@
/* ==========================================================================
FOOTER
========================================================================== */
.page__footer {
@include container;
@include clearfix;
clear: both;
padding-bottom: 3em;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
footer {
@include grid(12,10);
@include prefix(12,1);
@include suffix(12,1);
@include breakpoint($small) {
@include grid(12,6);
@include prefix(12,3);
@include suffix(12,3);
}
@include breakpoint($x-large) {
@include grid(12,4.5);
@include prefix(12,4);
@include suffix(12,3.5);
}
}
}
.page__footer-copyright {
font-size: 14px;
}
.page__footer-follow {
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline-block;
}
li + li:before {
content: "";
padding-right: 5px;
}
}

View file

@ -32,6 +32,7 @@ btnform {
display: none; display: none;
} }
} }
label, label,
input, input,
button, button,
@ -40,6 +41,7 @@ textarea {
vertical-align: baseline; vertical-align: baseline;
*vertical-align: middle; *vertical-align: middle;
} }
input, input,
button, button,
select, select,
@ -47,6 +49,7 @@ textarea {
font-family: $serif; font-family: $serif;
box-sizing: border-box; box-sizing: border-box;
} }
label { label {
display: block; display: block;
margin-bottom: 10px / 8; margin-bottom: 10px / 8;
@ -59,6 +62,7 @@ label {
display: block; display: block;
} }
} }
input, input,
textarea, textarea,
select { select {
@ -73,12 +77,15 @@ select {
border-color: mix(#fff, $accent-color, 50%); border-color: mix(#fff, $accent-color, 50%);
} }
} }
.input-mini { .input-mini {
width: 60px; width: 60px;
} }
.input-small { .input-small {
width: 90px; width: 90px;
} }
input[type="image"], input[type="image"],
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
@ -92,6 +99,7 @@ input[type="radio"] {
border-radius: 0; border-radius: 0;
border: 0 \9; border: 0 \9;
} }
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
box-sizing: border-box; box-sizing: border-box;
@ -99,10 +107,12 @@ input[type="radio"] {
*width: 13px; *width: 13px;
*height: 13px; *height: 13px;
} }
input[type="image"] { input[type="image"] {
border: 0; border: 0;
box-shadow: none; box-shadow: none;
} }
input[type="file"] { input[type="file"] {
width: auto; width: auto;
padding: initial; padding: initial;
@ -112,6 +122,7 @@ input[type="file"] {
background-color: initial; background-color: initial;
box-shadow: none; box-shadow: none;
} }
input[type="button"], input[type="button"],
input[type="reset"], input[type="reset"],
input[type="submit"] { input[type="submit"] {
@ -120,37 +131,45 @@ input[type="submit"] {
cursor: pointer; cursor: pointer;
*overflow: visible; *overflow: visible;
} }
select, select,
input[type="file"] { input[type="file"] {
*margin-top: 4px; *margin-top: 4px;
} }
select { select {
width: auto; width: auto;
background-color: #fff; background-color: #fff;
} }
select[multiple], select[multiple],
select[size] { select[size] {
height: auto; height: auto;
} }
textarea { textarea {
resize: vertical; resize: vertical;
height: auto; height: auto;
overflow: auto; overflow: auto;
vertical-align: top; vertical-align: top;
} }
input[type="hidden"] { input[type="hidden"] {
display: none; display: none;
} }
.radio, .radio,
.checkbox { .checkbox {
padding-left: 18px; padding-left: 18px;
font-weight: normal; font-weight: normal;
} }
.radio input[type="radio"], .radio input[type="radio"],
.checkbox input[type="checkbox"] { .checkbox input[type="checkbox"] {
float: left; float: left;
margin-left: -18px; margin-left: -18px;
} }
.radio.inline, .radio.inline,
.checkbox.inline { .checkbox.inline {
display: inline-block; display: inline-block;
@ -158,11 +177,13 @@ input[type="hidden"] {
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
} }
.radio.inline + .radio.inline, .radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline { .checkbox.inline + .checkbox.inline {
margin-left: 10px; margin-left: 10px;
} }
/* /*
Disabled state Disabled state
========================================================================== */ ========================================================================== */
@ -177,6 +198,7 @@ textarea[readonly] {
cursor: not-allowed; cursor: not-allowed;
} }
/* /*
Focus & active state Focus & active state
========================================================================== */ ========================================================================== */
@ -187,6 +209,7 @@ textarea:focus {
outline: 0; outline: 0;
outline: thin dotted \9; outline: thin dotted \9;
} }
input[type="file"]:focus, input[type="file"]:focus,
input[type="radio"]:focus, input[type="radio"]:focus,
input[type="checkbox"]:focus, input[type="checkbox"]:focus,
@ -194,6 +217,7 @@ select:focus {
box-shadow: none; box-shadow: none;
} }
/* /*
Help text Help text
========================================================================== */ ========================================================================== */
@ -202,17 +226,20 @@ select:focus {
.help-inline { .help-inline {
color: mix(#fff, #000, 50%); color: mix(#fff, #000, 50%);
} }
.help-block { .help-block {
display: block; display: block;
margin-bottom: 1em; margin-bottom: 1em;
line-height: 1em; line-height: 1em;
} }
.help-inline { .help-inline {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
padding-left: 5px; padding-left: 5px;
} }
/* /*
.form-inline .form-inline
========================================================================== */ ========================================================================== */
@ -223,9 +250,11 @@ select:focus {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
} }
.form-inline label { .form-inline label {
display: inline-block; display: inline-block;
} }
.form-inline .radio, .form-inline .radio,
.form-inline .checkbox, .form-inline .checkbox,
.form-inline .radio { .form-inline .radio {
@ -233,12 +262,14 @@ select:focus {
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
} }
.form-inline .radio input[type="radio"], .form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] { .form-inline .checkbox input[type="checkbox"] {
float: left; float: left;
margin-left: 0; margin-left: 0;
margin-right: 3px; } margin-right: 3px; }
/* /*
.form-search .form-search
========================================================================== */ ========================================================================== */
@ -249,15 +280,18 @@ select:focus {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
} }
.form-search .search-query { .form-search .search-query {
padding-left: 14px; padding-left: 14px;
padding-right: 14px; padding-right: 14px;
margin-bottom: 0; margin-bottom: 0;
border-radius: 14px; border-radius: 14px;
} }
.form-search label { .form-search label {
display: inline-block; display: inline-block;
} }
.form-search .radio, .form-search .radio,
.form-search .checkbox, .form-search .checkbox,
.form-inline .radio { .form-inline .radio {
@ -265,9 +299,45 @@ select:focus {
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
} }
.form-search .radio input[type="radio"], .form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"] { .form-search .checkbox input[type="checkbox"] {
float: left; float: left;
margin-left: 0; margin-left: 0;
margin-right: 3px; margin-right: 3px;
}
/*
Google search form
========================================================================== */
#goog-fixurl {
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
li {
list-style-type: none;
}
}
}
#goog-wm-qt {
width: auto;
margin-right: 10px;
margin-bottom: 20px;
padding: 8px 20px;
display: inline-block;
font-size: 14px;
background-color: #fff;
color: #000;
border-width: 2px !important;
border-style: solid !important;
border-color: lighten(#000,50);
border-radius: $border-radius;
}
#goog-wm-sb {
@extend .btn;
} }

View file

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

View file

@ -31,16 +31,11 @@
} }
.page__title { .page__title {
margin-top: 0;
font-family: $serif; font-family: $serif;
} }
.page__content { .page__content {}
ul, ol {
li + li {
margin-top: 0.5em;
}
}
}
.page__hero { .page__hero {
position: relative; position: relative;
@ -129,55 +124,22 @@
} }
} }
p { p {
margin-bottom: 10px; margin-bottom: 0;
} }
} }
.page__meta-title {
/* Footer wrapper */ font-size: 14px;
.footer-wrap { margin-bottom: 10px;
@include container; text-transform: uppercase;
@include clearfix;
clear: both;
padding-bottom: 3em;
.copyright {
font-size: 14px;
}
footer {
@include grid(12,10);
@include prefix(12,1);
@include suffix(12,1);
@include breakpoint($small) {
@include grid(12,6);
@include prefix(12,3);
@include suffix(12,3);
}
@include breakpoint($x-large) {
@include grid(12,4.5);
@include prefix(12,4);
@include suffix(12,3.5);
}
}
} }
/* Follow links */
.follow {
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline-block;
}
li + li:before {
content: "";
padding-right: 5px;
}
}
/* Related articles list */ /*
.related-articles { Related
========================================================================== */
.page__related {
@include grid(12,10); @include grid(12,10);
@include prefix(12,1); @include prefix(12,1);
@include suffix(12,1); @include suffix(12,1);
@ -192,64 +154,19 @@
@include prefix(12,4); @include prefix(12,4);
@include suffix(12,3.5); @include suffix(12,3.5);
} }
h4 {
text-transform: uppercase;
margin-bottom: 0;
}
li { li {
margin-bottom: 0; margin-bottom: 0;
} }
}
/*
Browser upgrade alert
========================================================================== */
.browser-upgrade {
background: #000;
text-align: center;
margin: 0 0 2em 0;
padding: 10px;
text-align: center;
color: #fff;
a { a {
color: #fff;
border-bottom: 1px dotted #fff;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
border-bottom: 1px solid #fff; text-decoration: underline;
} }
} }
} }
/* .page__related-title {
Google search form
========================================================================== */
#goog-fixurl {
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
li {
list-style-type: none;
}
}
}
#goog-wm-qt {
width: auto;
margin-right: 10px;
margin-bottom: 20px;
padding: 8px 20px;
display: inline-block;
font-size: 14px; font-size: 14px;
background-color: #fff; margin-bottom: 10px;
color: #000; text-transform: uppercase;
border-width: 2px !important;
border-style: solid !important;
border-color: lighten(#000,50);
border-radius: $border-radius;
}
#goog-wm-sb {
@extend .btn;
} }

View file

@ -4,9 +4,6 @@
.sidebar { .sidebar {
display: none; display: none;
a, a:hover {
border-bottom: 0 solid transparent;
}
img { img {
width: 100%; width: 100%;
} }

33
_assets/css/_tables.scss Normal file
View file

@ -0,0 +1,33 @@
/* ==========================================================================
TABLES
========================================================================== */
table {
width: 100%;
font-family: $sans-serif;
font-size: 0.8rem;
border-collapse: collapse;
border-bottom: 2px solid $border-color;
& + table {
margin-top: 1em;
}
}
thead {
border-bottom: 2px solid $border-color;
}
th {
padding: 0.5em;
font-weight: bold;
text-align: left;
}
td {
border-bottom: 1px solid $border-color;
padding: 0.5em;
}
tr, td, th {
vertical-align: middle;
}

View file

@ -95,22 +95,6 @@ body:hover .visually-hidden button {
Alignment Alignment
========================================================================== */ ========================================================================== */
.float-left {
clear: right;
@include breakpoint($large) {
float: left;
clear: none;
}
}
.float-right {
clear: left;
@include breakpoint($large) {
float: right;
clear: none;
}
}
/* clearfix */ /* clearfix */
.cf { clear: both; } .cf { clear: both; }
@ -122,7 +106,7 @@ body:hover .visually-hidden button {
/* image align left */ /* image align left */
.image-left { .align-left {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -134,7 +118,7 @@ body:hover .visually-hidden button {
/* image align right */ /* image align right */
.image-right { .align-right {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;

View file

@ -15,11 +15,13 @@
@import "base"; @import "base";
@import "utilities"; @import "utilities";
@import "tables";
@import "buttons"; @import "buttons";
@import "notices"; @import "notices";
@import "masthead"; @import "masthead";
@import "navigation"; @import "navigation";
@import "toc"; // table of contents @import "toc"; // table of contents
@import "footer";
@import "syntax"; @import "syntax";
@import "forms"; @import "forms";

View file

@ -8,9 +8,10 @@ en: &DEFAULT_EN
toc_label : "Overview" toc_label : "Overview"
ext_link_label : "Direct Link" ext_link_label : "Direct Link"
share_on_label : "Share on" share_on_label : "Share on"
date_label : "Last Updated:" meta_label :
tags_label : "Tags:" tags_label : "Tags:"
categories_label : "Categories:" categories_label : "Categories:"
date_label : "Last Updated:"
related_label : "You May Also Enjoy" related_label : "You May Also Enjoy"
follow_label : "Follow:" follow_label : "Follow:"
feed_label : "Feed" feed_label : "Feed"

View file

@ -14,7 +14,7 @@
</div><!-- /.google-ads --> </div><!-- /.google-ads -->
{% endif %} {% endif %}
<div class="follow"> <div class="page__footer-follow">
<ul> <ul>
<li><strong>{{ site.data.ui-text[site.locale].follow_label }}</strong></li> <li><strong>{{ site.data.ui-text[site.locale].follow_label }}</strong></li>
{% if site.twitter.username %} {% if site.twitter.username %}
@ -27,4 +27,4 @@
</ul> </ul>
</div> </div>
<div class="copyright">&copy; {{ site.time | date: '%Y' }} {{ site.name | default: site.title }}. {{ site.data.ui-text[site.locale].powered_by }} <a href="http://jekyllrb.com" rel="nofollow">Jekyll</a> &amp; <a href="https://mademistakes.com/work/minimal-mistakes-jekyll-theme/" rel="nofollow">Minimal Mistakes</a>.</div> <div class="page__footer-copyright">&copy; {{ site.time | date: '%Y' }} {{ site.name | default: site.title }}. {{ site.data.ui-text[site.locale].powered_by }} <a href="http://jekyllrb.com" rel="nofollow">Jekyll</a> &amp; <a href="https://mademistakes.com/work/minimal-mistakes-jekyll-theme/" rel="nofollow">Minimal Mistakes</a>.</div>

View file

@ -1,5 +1,7 @@
<section class="page__share"> <section class="page__share">
<h4 class="page__share-title">{{ site.data.ui-text[site.locale].share_on_label }}</h4> {% if site.data.ui-text[site.locale].share_on_label %}
<h4 class="page__share-title">{{ site.data.ui-text[site.locale].share_on_label }}</h4>
{% endif %}
<a href="https://twitter.com/intent/tweet?text={{ base_path }}{{ page.url }}" class="btn btn--twitter" title="Share on Twitter"><i class="fa fa-twitter"></i><span> Twitter</span></a> <a href="https://twitter.com/intent/tweet?text={{ base_path }}{{ page.url }}" class="btn btn--twitter" title="Share on Twitter"><i class="fa fa-twitter"></i><span> Twitter</span></a>
<a href="https://www.facebook.com/sharer/sharer.php?u={{ base_path }}{{ page.url }}" class="btn btn--facebook" title="Share on Facebook"><i class="fa fa-facebook"></i><span> Facebook</span></a> <a href="https://www.facebook.com/sharer/sharer.php?u={{ base_path }}{{ page.url }}" class="btn btn--facebook" title="Share on Facebook"><i class="fa fa-facebook"></i><span> Facebook</span></a>
<a href="https://plus.google.com/share?url={{ base_path }}{{ page.url }}" class="btn btn--google-plus" title="Share on Google Plus"><i class="fa fa-google-plus"></i><span> Google+</span></a> <a href="https://plus.google.com/share?url={{ base_path }}{{ page.url }}" class="btn btn--google-plus" title="Share on Google Plus"><i class="fa fa-google-plus"></i><span> Google+</span></a>

View file

@ -9,4 +9,4 @@ author_profile: false
{% for post in page.posts %} {% for post in page.posts %}
{% include archive-list-single.html %} {% include archive-list-single.html %}
{% endfor %} {% endfor %}
</div><!-- /.archive --> </div>

View file

@ -27,7 +27,7 @@ layout: compress
{% if page.header.caption %} {% if page.header.caption %}
<span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span> <span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
{% endif %} {% endif %}
</div><!-- /.image-wrap --> </div>
{% endif %} {% endif %}
{% if site.breadcrumbs %} {% if site.breadcrumbs %}
@ -55,13 +55,13 @@ layout: compress
{% unless page.author_profile or page.sidebar %}&nbsp;{% endunless %} {% unless page.author_profile or page.sidebar %}&nbsp;{% endunless %}
</div> </div>
{{ content }} {{ content }}
</div><!-- /#main --> </div>
<div class="footer-wrap"> <div class="page__footer">
<footer> <footer>
{% include footer.html %} {% include footer.html %}
</footer> </footer>
</div><!-- /.footer-wrap --> </div>
{% include scripts.html %} {% include scripts.html %}

View file

@ -22,6 +22,9 @@ layout: default
{% if site.share and page.share %}{% include social-share.html %}{% endif %} {% if site.share and page.share %}{% include social-share.html %}{% endif %}
<footer class="page__meta"> <footer class="page__meta">
{% if site.data.ui-text[site.locale].meta_label %}
<h4 class="page__meta-title">{{ site.data.ui-text[site.locale].meta_label }}</h4>
{% endif %}
{% include page__taxonomy.html %} {% include page__taxonomy.html %}
{% if page.modified %} {% if page.modified %}
<p class="page__date"><strong>{{ site.data.ui-text[site.locale].date_label }}</strong> <time datetime="{{ page.modified | date: "%Y-%m-%d" }}">{{ page.modified | date: "%B %d, %Y" }}</time></p> <p class="page__date"><strong>{{ site.data.ui-text[site.locale].date_label }}</strong> <time datetime="{{ page.modified | date: "%Y-%m-%d" }}">{{ page.modified | date: "%B %d, %Y" }}</time></p>
@ -29,7 +32,7 @@ layout: default
<p class="page__date"><strong>{{ site.data.ui-text[site.locale].date_label }}</strong> <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time></p> <p class="page__date"><strong>{{ site.data.ui-text[site.locale].date_label }}</strong> <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time></p>
{% endif %} {% endif %}
</footer> </footer>
</div><!-- /.article-wrap --> </div>
{% if site.comments.provider and page.comments %} {% if site.comments.provider and page.comments %}
{% case site.comments.provider %} {% case site.comments.provider %}
@ -47,13 +50,14 @@ layout: default
{% comment %}<!-- only show related on a post page when not disabled -->{% endcomment %} {% comment %}<!-- only show related on a post page when not disabled -->{% endcomment %}
{% if page.id and page.related and site.related_posts.size > 0 %} {% if page.id and page.related and site.related_posts.size > 0 %}
<div class="related-articles"> <div class="page__related">
<h4>{{ site.data.ui-text[site.locale].related_label }}</h4> {% if site.data.ui-text[site.locale].related_label %}
<h4 class="page__related-title">{{ site.data.ui-text[site.locale].related_label }}</h4>
{% endif %}
<ul> <ul>
{% for post in site.related_posts limit:3 %} {% for post in site.related_posts limit:3 %}
<li><a href="{{ base_path }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></li> <li><a href="{{ base_path }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
<hr /> </div>
</div><!-- /.related-articles -->
{% endif %} {% endif %}

View file

@ -38,22 +38,22 @@ Multi line blockquote with a cite reference:
## Tables ## Tables
| Employee | Salary | | | Employee | Salary | |
| -------- | ------ | - | | -------- | ------ | ------------------------------------------------------------ |
| [John Doe](#) | $1 | Because that's all Steve Jobs needed for a salary. | | [John Doe](#) | $1 | Because that's all Steve Jobs needed for a salary. |
| [Jane Doe](#) |$100K |For all the blogging she does. | | [Jane Doe](#) | $100K | For all the blogging she does. |
| [Fred Bloggs](#) | $100M | Pictures are worth a thousand words, right? So Jane × 1,000. | | [Fred Bloggs](#) | $100M | Pictures are worth a thousand words, right? So Jane × 1,000. |
| [Jane Bloggs](#) | $100B | With hair like that?! Enough said. | | [Jane Bloggs](#) | $100B | With hair like that?! Enough said. |
| Header1 | Header2 | Header3 | | Header1 | Header2 | Header3 |
|:--------|:-------:|--------:| |:--------|:-------:|--------:|
| cell1 | cell2 | cell3 | | cell1 | cell2 | cell3 |
| cell4 | cell5 | cell6 | | cell4 | cell5 | cell6 |
|---- |-----------------------------|
| cell1 | cell2 | cell3 | | cell1 | cell2 | cell3 |
| cell4 | cell5 | cell6 | | cell4 | cell5 | cell6 |
|===== |=============================|
| Foot1 | Foot2 | Foot3 | Foot1 | Foot2 | Foot3 |
## Definition Lists ## Definition Lists
@ -104,21 +104,21 @@ Do It Live
Make any link standout more when applying the `.btn` class. Make any link standout more when applying the `.btn` class.
```html ```html
<a href="#" class="btn btn-success">Success Button</a> <a href="#" class="btn--success">Success Button</a>
``` ```
[Primary Button](#){: .btn} [Primary Button](#){: .btn}
[Success Button](#){: .btn .btn-success} [Success Button](#){: .btn .btn--success}
[Warning Button](#){: .btn .btn-warning} [Warning Button](#){: .btn .btn--warning}
[Danger Button](#){: .btn .btn-danger} [Danger Button](#){: .btn .btn--danger}
[Info Button](#){: .btn .btn-info} [Info Button](#){: .btn .btn--info}
```markdown ```markdown
[Primary Button Text](#link){: .btn} [Primary Button Text](#link){: .btn}
[Success Button Text](#link){: .btn .btn-success} [Success Button Text](#link){: .btn .btn--success}
[Warning Button Text](#link){: .btn .btn-warning} [Warning Button Text](#link){: .btn .btn--warning}
[Danger Button Text](#link){: .btn .btn-danger} [Danger Button Text](#link){: .btn .btn--danger}
[Info Button Text](#link){: .btn .btn-info} [Info Button Text](#link){: .btn .btn--info}
``` ```
## Notices ## Notices

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long