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

Massage the grid layout

Browse source
This commit is contained in:
Michael Rose 2016-03-20 15:20:33 -04:00
parent 1e3b62d893
commit 780b30c9f6
12 changed files with 56 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_includes/toc
View file

@ -1,6 +1,6 @@
<aside class="toc">
<aside class="sidebar__right">
<nav class="toc" markdown="1">
<header><h4 class="toc__title"><i class="fa fa-{{ include.icon | default: 'book' }}"></i> {{ include.title | default: site.data.ui-text[site.locale].toc_label }}</h4></header>
<nav markdown="1">
* Auto generated table of contents
{:toc .toc__menu}
</nav>

5
_layouts/default.html
View file

@ -35,7 +35,7 @@ layout: compress
{% endif %}
<div id="main" role="main">
<div class="sidebar sticky">
{% if page.author_profile or page.sidebar %}<div class="sidebar sticky">
{% if page.author_profile %}{% include author-profile.html %}{% endif %}
{% if page.sidebar %}
{% for s in page.sidebar %}
@ -52,8 +52,7 @@ layout: compress
{% if s.text %}{{ s.text | markdownify }}{% endif %}
{% endfor %}
{% endif %}
{% unless page.author_profile or page.sidebar %}&nbsp;{% endunless %}
</div>
</div>{% endif %}
{{ content }}
</div>

4
assets/_scss/_archive.scss
View file

@ -5,10 +5,10 @@
.archive {
margin-bottom: 2em;
@include breakpoint($medium) {
@include span(10 of 12 last);
@include span(12 of 12);
}
@include breakpoint($large) {
@include suffix(3 of 12);
@include span(10 of 12 last);
}
@include breakpoint($x-large) {
@include prefix(0.5 of 12);

6
assets/_scss/_footer.scss
View file

@ -7,7 +7,7 @@
@include clearfix;
margin-top: 3em;
padding: 0 2em 3em;
@include breakpoint($medium) {
@include breakpoint($large) {
padding-left: 1em;
padding-right: 1em;
}
@ -23,7 +23,7 @@
}
.page__footer-copyright {
@include breakpoint($medium) {
@include breakpoint($large) {
@include prefix(2 of 12);
}
@include breakpoint($x-large) {
@ -33,7 +33,7 @@
}
.page__footer-follow {
@include breakpoint($medium) {
@include breakpoint($large) {
@include prefix(2 of 12);
}
@include breakpoint($x-large) {

6
assets/_scss/_masthead.scss
View file

@ -9,7 +9,7 @@
font-family: $sans-serif-narrow;
font-weight: 700;
text-transform: uppercase;
@include breakpoint($medium) {
@include breakpoint($large) {
padding-left: 1em;
padding-right: 1em;
}
@ -23,7 +23,7 @@
/* Site name */
.site-name {
@include breakpoint($medium) {
@include breakpoint($large) {
@include prefix(2 of 12);
}
@include breakpoint($x-large) {
@ -33,7 +33,7 @@
}
.masthead__menu {
@include breakpoint($medium) {
@include breakpoint($large) {
@include prefix(2 of 12);
}
@include breakpoint($x-large) {

10
assets/_scss/_page.scss
View file

@ -9,7 +9,7 @@
margin-top: 2em;
padding-left: 2em;
padding-right: 2em;
@include breakpoint($medium) {
@include breakpoint($large) {
padding-left: 1em;
padding-right: 1em;
}
@ -20,13 +20,15 @@
.page {
@include breakpoint($medium) {
@include span(10 of 12 last);
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;
}
}
@ -67,7 +69,7 @@
z-index: 5;
opacity: 0.5;
border-radius: $border-radius 0 $border-radius 0;
@include breakpoint($medium) {
@include breakpoint($large) {
padding: 5px 10px;
}
a {
@ -164,7 +166,7 @@
border-top: 1px solid $border-color;
@include clearfix();
float: left;
@include breakpoint($medium) {
@include breakpoint($large) {
@include pre(2 of 12);
}
@include breakpoint($x-large) {

40
assets/_scss/_sidebar.scss
View file

@ -2,15 +2,17 @@
SIDEBAR
========================================================================== */
/*
Default
========================================================================== */
.sidebar {
@include clearfix();
margin-bottom: 2em;
padding-bottom: 1em;
border-bottom: 1px solid $border-color;
@include breakpoint($medium) {
@include breakpoint($large) {
@include span(2 of 12);
@include suffix(0.25 of 12);
border-bottom: none;
}
@include breakpoint($x-large) {
padding-right: 0;
@ -27,6 +29,28 @@
}
}
.sidebar__right {
@include breakpoint($medium) {
position: absolute;
top: 0;
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;
}
}
@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
}
}
/*
Author profile and links
========================================================================== */
@ -35,7 +59,7 @@
float: left;
width: 50px;
margin-right: 10px;
@include breakpoint($medium) {
@include breakpoint($large) {
float: none;
width: initial;
}
@ -48,7 +72,7 @@
.author__content {
float: right;
width: calc(100% - 60px); // subtract avatar width + any margin/padding
@include breakpoint($medium) {
@include breakpoint($large) {
float: none;
width: 100%;
}
@ -58,7 +82,7 @@
margin: 0;
font-family: $sans-serif-narrow;
font-size: 20px;
@include breakpoint($medium) {
@include breakpoint($large) {
margin-top: 10px;
margin-bottom: 10px;
}
@ -68,7 +92,7 @@
margin-bottom: 10px;
font-size: 14px;
font-style: italic;
@include breakpoint($medium) {
@include breakpoint($large) {
margin-bottom: 20px;
}
}
@ -80,7 +104,7 @@
padding-right: 5px;
font-size: 14px;
text-decoration: none;
@include breakpoint($medium) {
@include breakpoint($large) {
display: block;
}
&:hover {

12
assets/_scss/_toc.scss
View file

@ -9,16 +9,6 @@
text-transform: uppercase;
letter-spacing: 1px;
background-color: #fff;
@include breakpoint($large) {
position: absolute;
top: 0;
right: calc(50% - (0.5 * #{$large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
width: $right-sidebar-width;
padding-left: 2em;
}
@include breakpoint($x-large) {
right: calc(50% - (0.5 * #{$x-large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
}
}
.toc__title {
@ -53,7 +43,7 @@
// hide sub sub links on small screens
li > ul li {
display: none;
@include breakpoint($large) {
@include breakpoint($medium) {
display: block;
}
}

2
assets/_scss/_variables.scss
View file

@ -81,7 +81,9 @@ $x-large : 1280px;
Grid
========================================================================== */
$right-sidebar-width-narrow : 200px;
$right-sidebar-width : 300px;
$right-sidebar-width-wide : 400px;
$susy: (
columns: 12,

2
assets/css/main.css
View file

File diff suppressed because one or more lines are too long

2
assets/js/_main.js
View file

@ -12,7 +12,7 @@ $(document).ready(function(){
var stickySideBar = function(){
var windowWidth = $(window).width();
if (windowWidth > 768) {
if (windowWidth > 1024) {
// fix
Stickyfill.rebuild();
Stickyfill.init();

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

File diff suppressed because one or more lines are too long