N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

More style cleanup and housekeeping

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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;
}
}

70
_assets/css/_forms.scss
View file

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

1
_assets/css/_mixins.scss
View file

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

115
_assets/css/_page.scss
View file

@ -31,16 +31,11 @@
}
.page__title {
margin-top: 0;
font-family: $serif;
}
.page__content {
ul, ol {
li + li {
margin-top: 0.5em;
}
}
}
.page__content {}
.page__hero {
position: relative;
@ -129,55 +124,22 @@
}
}
p {
margin-bottom: 10px;
margin-bottom: 0;
}
}
/* Footer wrapper */
.footer-wrap {
@include container;
@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);
}
}
.page__meta-title {
font-size: 14px;
margin-bottom: 10px;
text-transform: uppercase;
}
/* 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 prefix(12,1);
@include suffix(12,1);
@ -192,64 +154,19 @@
@include prefix(12,4);
@include suffix(12,3.5);
}
h4 {
text-transform: uppercase;
margin-bottom: 0;
}
li {
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 {
color: #fff;
border-bottom: 1px dotted #fff;
text-decoration: none;
&:hover {
border-bottom: 1px solid #fff;
text-decoration: underline;
}
}
}
/*
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;
.page__related-title {
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;
margin-bottom: 10px;
text-transform: uppercase;
}

3
_assets/css/_sidebar.scss
View file

@ -4,9 +4,6 @@
.sidebar {
display: none;
a, a:hover {
border-bottom: 0 solid transparent;
}
img {
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;
}

20
_assets/css/_utilities.scss
View file

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

2
_assets/css/main.scss
View file

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

3
_data/ui-text.yml
View file

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

4
_includes/footer.html
View file

@ -14,7 +14,7 @@
</div><!-- /.google-ads -->
{% endif %}
<div class="follow">
<div class="page__footer-follow">
<ul>
<li><strong>{{ site.data.ui-text[site.locale].follow_label }}</strong></li>
{% if site.twitter.username %}
@ -27,4 +27,4 @@
</ul>
</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>

4
_includes/social-share.html
View file

@ -1,5 +1,7 @@
<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://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>

2
_layouts/archive-taxonomy.html
View file

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

8
_layouts/default.html
View file

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

14
_layouts/single.html
View file

@ -22,6 +22,9 @@ layout: default
{% if site.share and page.share %}{% include social-share.html %}{% endif %}
<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 %}
{% 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>
@ -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>
{% endif %}
</footer>
</div><!-- /.article-wrap -->
</div>
{% if site.comments.provider and page.comments %}
{% case site.comments.provider %}
@ -47,13 +50,14 @@ layout: default
{% comment %}<!-- only show related on a post page when not disabled -->{% endcomment %}
{% if page.id and page.related and site.related_posts.size > 0 %}
<div class="related-articles">
<h4>{{ site.data.ui-text[site.locale].related_label }}</h4>
<div class="page__related">
{% 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>
{% for post in site.related_posts limit:3 %}
<li><a href="{{ base_path }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
<hr />
</div><!-- /.related-articles -->
</div>
{% endif %}

36
_posts/2013-01-11-markup-html-tags-and-formatting.md
View file

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

2
assets/css/main.css
View file

File diff suppressed because one or more lines are too long

2
assets/js/main.min.js vendored
View file

File diff suppressed because one or more lines are too long