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

Create media query mixins and consolidate .less files

Browse source
This commit is contained in:
Michael Rose 2014-02-13 13:29:42 -05:00
parent 51723f2c15
commit b9b9154797
16 changed files with 227 additions and 317 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Gruntfile.js
View file

@ -22,9 +22,6 @@ module.exports = function(grunt) {
files: {
'assets/css/main.min.css': [
'assets/less/main.less'
],
'assets/css/ie.min.css': [
'assets/less/ie.less'
]
}
}
@ -66,8 +63,7 @@ module.exports = function(grunt) {
watch: {
less: {
files: [
'assets/less/*.less',
'assets/less/bootstrap/*.less'
'assets/less/*.less'
],
tasks: ['recess']
},

4
_includes/_head.html
View file

@ -38,10 +38,6 @@
<!-- For all browsers -->
<link rel="stylesheet" href="{{ site.url }}/assets/css/main.min.css">
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="{{ site.url }}/assets/css/ie.min.css">
<![endif]-->
<meta http-equiv="cleartype" content="on">
<!-- Load Modernizr -->

2
assets/css/ie.min.css vendored
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

44
assets/less/1382.less
View file

@ -1,44 +0,0 @@
// ROOT =======================================================
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
.site-name {
.grid(12,1.5);
.prefix(12,2);
}
.top-navigation {
.grid(12,8);
}
.image-wrap {
&:after {
left: 33.333333333%;
}
.headline-wrap {
.prefix(12,1);
}
}
.image-credit {
.grid(12,8.5);
}
#main article {
.grid(12,4.5);
}
#index {
.grid(12,4.5);
}
.related-articles {
.grid(12,4.5);
.prefix(12,4);
.suffix(12,3.5);
}
.footer-wrap footer {
.grid(12,4.5);
.prefix(12,4);
.suffix(12,3.5);
}
.article-author-side {
.grid(12,1.5);
.prefix(12,2);
}
// VENDOR-SPECIFIC ============================================

6
assets/less/2x.less
View file

@ -1,6 +0,0 @@
// ROOT =======================================================
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
// VENDOR-SPECIFIC ============================================

11
assets/less/480.less
View file

@ -1,11 +0,0 @@
// ROOT =======================================================
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
.image-grid {
li {
width: 33.333333%;
}
}
// VENDOR-SPECIFIC ============================================

90
assets/less/600.less
View file

@ -1,90 +0,0 @@
// ROOT =======================================================
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
.site-name {
.grid(12,2);
.prefix(12,0.5);
.suffix(12,0.5);
}
.top-navigation {
.grid(12,9);
.prefix(12,0);
.suffix(12,0);
}
.image-wrap .headline-wrap,
.image-wrap:after {
left: 25%;
}
.image-wrap .headline-wrap {
margin-left: 0;
}
.image-credit {
.grid(12,9);
.prefix(12,0);
.suffix(12,0);
}
#main article {
.grid(12,6);
.prefix(12,0);
.suffix(12,0);
}
#index {
.grid(12,6);
.prefix(12,0);
.suffix(12,0);
}
.footer-wrap footer {
.grid(12,6);
.prefix(12,3);
.suffix(12,3);
}
.article-author-side {
display: block;
.grid(12,2);
.prefix(12,0.5);
.suffix(12,0.5);
h3,
.bio-photo,
p,
.author-social {
display: block;
max-width: 125px;
margin: auto;
}
h3 {
margin-top: 10px;
margin-bottom: 10px;
}
p {
margin-bottom: 20px;
}
.author-social {
margin-bottom: 5px;
}
}
.article-author-bottom {
display: none;
}
.toc {
display: block;
.grid(12,2);
.prefix(12,0.5);
.suffix(12,0.5);
position: absolute;
top: 5.5em;
right: 0;
background-color: @white;
}
.image-grid {
li {
width: 25%;
}
}
.related-articles {
.grid(12,6);
.prefix(12,3);
.suffix(12,3);
}
// VENDOR-SPECIFIC ============================================

12
assets/less/768.less
View file

@ -1,12 +0,0 @@
// ROOT =======================================================
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
/* Image Grid ============================================== */
.image-grid {
li {
width: 20%;
}
}
// VENDOR-SPECIFIC ============================================

25
assets/less/992.less
View file

@ -1,25 +0,0 @@
// ROOT =======================================================
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
.article-author-side,
.article-author-bottom {
h3,
.bio-photo,
p,
.author-social {
max-width: 150px;
}
img.bio-photo {
margin-left: 25px;
margin-right: 25px;
}
}
/* Image Grid ============================================== */
.image-grid {
li {
width: 16.666666666%;
}
}
// VENDOR-SPECIFIC ============================================

112
assets/less/elements.less
View file

@ -1,71 +1,75 @@
hr {
display: block;
margin: 1em 0;
padding: 0;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #fff;
display: block;
margin: 1em 0;
padding: 0;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #fff;
}
/* Figures and images ==================================== */
article img {
max-width: 100%;
height: auto;
border-width: 0;
vertical-align: middle;
-ms-interpolation-mode: bicubic;
max-width: 100%;
height: auto;
border-width: 0;
vertical-align: middle;
-ms-interpolation-mode: bicubic;
}
svg:not(:root) {
overflow: hidden;
overflow: hidden;
}
.half {
.container();
.clearfix();
img {
.grid(12,6);
}
figcaption {
.grid(12,12);
}
.container();
.clearfix();
@media @480px {
img {
.grid(12,6);
}
figcaption {
.grid(12,12);
}
}
}
.third {
.container();
.clearfix();
img {
.grid(12,4);
}
figcaption {
.grid(12,12);
}
.container();
.clearfix();
@media @480px {
img {
.grid(12,4);
}
figcaption {
.grid(12,12);
}
}
}
/* Buttons ============================================== */
.btn {
display: inline-block;
margin-bottom: 20px;
padding: 8px 20px;
.font-rem(14);
background-color: @black;
color: @white;
border: 2px solid @black !important;
.rounded(4px);
&:visited {
color: @white;
}
&:hover {
background-color: @white;
color: @black;
}
&:active {
.translate(0, 2px);
}
display: inline-block;
margin-bottom: 20px;
padding: 8px 20px;
.font-rem(14);
background-color: @black;
color: @white;
border: 2px solid @black !important;
.rounded(4px);
&:visited {
color: @white;
}
&:hover {
background-color: @white;
color: @black;
}
&:active {
.translate(0, 2px);
}
}
/* Well ================================================= */
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
.rounded(4px);
.box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
.rounded(4px);
.box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
}

37
assets/less/ie.less
View file

@ -1,37 +0,0 @@
// ===========================================================
// Minimal Mistakes
// By: Michael Rose
// ===========================================================/
// ROOT =======================================================
/* CSS Normalize =========================================== */
@import "normalize.less";
/* Variables and mixins ==================================== */
@import "variables.less";
/* Site wide styles (html, body, global classes) =========== */
@import "site.less";
// TYPOGRAPHY =================================================
@import "typography.less";
// MIXINS =====================================================
@import "mixins.less";
@import "grid.less";
// ELEMENTS ===================================================
/* Figures, images, social media, other elements =========== */
@import "elements.less";
/* Standard form controls ================================== */
@import "forms.less";
// LAYOUT =====================================================
/* Page level layout styles */
@import "page.less";
// MODERNIZR ==================================================
// MEDIA QUERIES ==============================================
/* 480px wide ============================================== */
@import "480.less";
/* 600px wide ============================================== */
@import "600.less";
/* 768px wide ============================================== */
@import "768.less";
/* 992px wide ============================================== */
@import "992.less";
/* 1382px wide ============================================= */
@import "1382.less";

24
assets/less/main.less
View file

@ -37,27 +37,3 @@
@media print {
@import "print.less";
}
/* 480px wide ============================================== */
@media only screen and (min-width: 30em) {
@import "480.less";
}
/* 600px wide ============================================== */
@media only screen and (min-width: 37.5em) {
@import "600.less";
}
/* 768px wide ============================================== */
@media only screen and (min-width: 48em) {
@import "768.less";
}
/* 992px wide ============================================== */
@media only screen and (min-width: 62em) {
@import "992.less";
}
/* 1382px wide ============================================= */
@media only screen and (min-width: 86.375em) {
@import "1382.less";
}
/* 2x for retina displays ================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
@import "2x.less";
}

14
assets/less/mixins.less
View file

@ -294,3 +294,17 @@ height : auto;
width : auto;
margin : 0;
overflow: visible; }
// MEDIA QUERIES
// --------------------------------------------------
@480px: ~"only screen and (min-width: 30em)";
@600px: ~"only screen and (min-width: 37.5em)";
@768px: ~"only screen and (min-width: 48em)";
@992px: ~"only screen and (min-width: 62em)";
@1382px: ~"only screen and (min-width: 86.375em)";
@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
~"only screen and (-o-min-device-pixel-ratio: 3/2)",
~"only screen and (min-resolution: 144dpi)",
~"only screen and (min-resolution: 1.5dppx)";

145
assets/less/page.less
View file

@ -18,6 +18,15 @@ body {
margin-bottom: 1em;
float: none;
display: block;
@media @600px {
.grid(12,2);
.prefix(12,0.5);
.suffix(12,0.5);
}
@media @1382px {
.grid(12,1.5);
.prefix(12,2);
}
}
.top-navigation {
.grid(12,10);
@ -26,8 +35,14 @@ body {
margin-bottom: 1em;
float: none;
display: block;
}
.top-navigation {
@media @600px {
.grid(12,9);
.prefix(12,0);
.suffix(12,0);
}
@media @1382px {
.grid(12,8);
}
ul {
list-style: none;
margin: 0;
@ -57,6 +72,14 @@ body {
.prefix(12,1);
.suffix(12,1);
margin-bottom: 2em;
@media @600px {
.grid(12,6);
.prefix(12,0);
.suffix(12,0);
}
@media @1382px {
.grid(12,4.5);
}
}
}
#index {
@ -65,6 +88,14 @@ body {
.prefix(12,1);
.suffix(12,1);
margin-bottom: 2em;
@media @600px {
.grid(12,6);
.prefix(12,0);
.suffix(12,0);
}
@media @1382px {
.grid(12,4.5);
}
h3 {
margin: 0;
padding-bottom: .5em;
@ -97,6 +128,12 @@ body {
height: 0;
border: 20px solid transparent;
border-bottom-color: @bodycolor;
@media @600px {
left: 25%;
}
@media @1382px {
left: 33.333333333%;
}
}
img {
width: 100%;
@ -107,6 +144,13 @@ body {
position: absolute;
bottom: 25px;
.prefix(12,1);
@media @600px {
left: 25%;
margin-left: 0;
}
@media @1382px {
.prefix(12,1);
}
h1, h2 {
color: @white;
.text-shadow(0 1px 2px rgba(0,0,0,.25));
@ -152,9 +196,52 @@ body {
}
.article-author-side {
display: none;
@media @600px {
display: block;
.grid(12,2);
.prefix(12,0.5);
.suffix(12,0.5);
h3,
.bio-photo,
p,
.author-social {
display: block;
max-width: 125px;
margin: auto;
}
h3 {
margin-top: 10px;
margin-bottom: 10px;
}
p {
margin-bottom: 20px;
}
.author-social {
margin-bottom: 5px;
}
}
@media @992px {
h3,
.bio-photo,
p,
.author-social {
max-width: 150px;
}
img.bio-photo {
margin-left: 25px;
margin-right: 25px;
}
}
@media @1382px {
.grid(12,1.5);
.prefix(12,2);
}
}
.article-author-bottom {
margin-bottom: 1em;
@media @600px {
display: none;
}
.bio-photo {
float: left;
margin-right: 25px;
@ -163,6 +250,18 @@ body {
display: inline-block;
margin-right: 5px;
}
@media @992px {
h3,
.bio-photo,
p,
.author-social {
max-width: 150px;
}
img.bio-photo {
margin-left: 25px;
margin-right: 25px;
}
}
}
.article-wrap {
// Dotted line underlines for links
@ -181,6 +280,16 @@ body {
.toc {
display: none;
font-size: 95%;
@media @600px {
display: block;
.grid(12,2);
.prefix(12,0.5);
.suffix(12,0.5);
position: absolute;
top: 5.5em;
right: 0;
background-color: @white;
}
header {
background: lighten(@black, 10);
}
@ -232,6 +341,18 @@ body {
padding: 0;
li {
.grid(12,6);
@media @480px {
width: 33.333333%;
}
@media @600px {
width: 25%;
}
@media @768px {
width: 20%;
}
@media @992px {
width: 16.666666666%;
}
}
}
.recent-grid {
@ -302,6 +423,16 @@ body {
.grid(12,10);
.prefix(12,1);
.suffix(12,1);
@media @600px {
.grid(12,6);
.prefix(12,3);
.suffix(12,3);
}
@media @1382px {
.grid(12,4.5);
.prefix(12,4);
.suffix(12,3.5);
}
}
}
.related-articles {
@ -309,6 +440,16 @@ body {
.prefix(12,1);
.suffix(12,1);
margin-bottom: 2em;
@media @600px {
.grid(12,6);
.prefix(12,3);
.suffix(12,3);
}
@media @1382px {
.grid(12,4.5);
.prefix(12,4);
.suffix(12,3.5);
}
h4 {
text-transform: uppercase;

8
assets/less/typography.less
View file

@ -71,6 +71,14 @@ figcaption {
line-height: 1.3;
font-style: italic;
color: lighten(@text-color, 30);
@media @600px {
.grid(12,9);
.prefix(12,0);
.suffix(12,0);
}
@media @1382px {
.grid(12,8.5);
}
a {
color: lighten(@text-color, 30);
}