Minor adjustments to TOC and author sidebar

This commit is contained in:
Michael Rose 2013-09-09 11:27:38 -04:00
parent 9708efd7d1
commit b6aa91bfe3
13 changed files with 52 additions and 24 deletions

View file

@ -142,7 +142,7 @@ Insert the following HTML in post or page content that you want a *table of cont
``` html ``` html
<section id="table-of-contents" class="toc"> <section id="table-of-contents" class="toc">
<header> <header>
<h3 class="delta">Contents</h3> <h3>Contents</h3>
</header> </header>
<div id="drawer" markdown="1"> <div id="drawer" markdown="1">
* Auto generated table of contents * Auto generated table of contents

View file

@ -13,7 +13,7 @@ image:
<section id="table-of-contents" class="toc"> <section id="table-of-contents" class="toc">
<header> <header>
<h3 class="delta">Contents</h3> <h3>Contents</h3>
</header> </header>
<div id="drawer" markdown="1"> <div id="drawer" markdown="1">
* Auto generated table of contents * Auto generated table of contents

1
assets/css/ie.min.css vendored Normal file

File diff suppressed because one or more lines are too long

1
assets/css/main.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -3,14 +3,6 @@
// TEXTURE ==================================================== // TEXTURE ====================================================
// ELEMENTS =================================================== // ELEMENTS ===================================================
// LAYOUT ===================================================== // LAYOUT =====================================================
.article-author-top,
.article-author-bottom {
.transition(all .2s ease);
.opacity(.7);
&:hover {
.opacity(1);
}
}
.image-grid { .image-grid {
li { li {
width: 33.333333%; width: 33.333333%;

View file

@ -45,6 +45,24 @@
.grid(12,2); .grid(12,2);
.prefix(12,0.5); .prefix(12,0.5);
.suffix(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 { .article-author-bottom {
display: none; display: none;
@ -54,8 +72,8 @@
.grid(12,2); .grid(12,2);
.prefix(12,0.5); .prefix(12,0.5);
.suffix(12,0.5); .suffix(12,0.5);
position: fixed; position: absolute;
top: 120px; top: 5.5em;
right: 0; right: 0;
.box-shadow(0 0 5px rgba(0,0,0,.50)); .box-shadow(0 0 5px rgba(0,0,0,.50));
} }

View file

@ -5,6 +5,12 @@
// LAYOUT ===================================================== // LAYOUT =====================================================
.article-author-top, .article-author-top,
.article-author-bottom { .article-author-bottom {
h3,
.bio-photo,
p,
.author-social {
max-width: 150px;
}
img.bio-photo { img.bio-photo {
width: 150px; width: 150px;
height: 150px; height: 150px;

View file

@ -4,6 +4,7 @@
.font(12); .font(12);
color: #333332; color: #333332;
margin-bottom: 1.5em; margin-bottom: 1.5em;
.rounded(4px);
pre { pre {
margin: 0px; margin: 0px;
padding: 1em; padding: 1em;

View file

@ -47,7 +47,7 @@ svg:not(:root) {
background-color: @black; background-color: @black;
color: @white; color: @white;
border: 2px solid @black !important; border: 2px solid @black !important;
.rounded(20px); .rounded(4px);
&:visited { &:visited {
color: @white; color: @white;
} }

View file

@ -69,8 +69,12 @@ body {
} }
article { article {
h2 { h2 {
margin-bottom: 0; margin-bottom: 4px;
.font-rem(24); .font-rem(20);
text-transform: uppercase;
}
p {
.font-rem(14);
} }
p+p { p+p {
text-indent: 0; text-indent: 0;
@ -145,7 +149,6 @@ body {
} }
.article-author-top { .article-author-top {
display: none; display: none;
text-align: center;
} }
.article-author-bottom { .article-author-bottom {
margin-bottom: 1em; margin-bottom: 1em;
@ -204,15 +207,20 @@ body {
font-family: @heading-font; font-family: @heading-font;
border-bottom: 1px solid darken(@white, 50); border-bottom: 1px solid darken(@white, 50);
&:last-child { &:last-child {
border-bottom: 0 solid transparent; border-bottom-width: 0;
}
a, a:hover {
color: @white;
border-bottom: 0 solid transparent;
} }
a { a {
padding: 10px; padding: 10px;
display: block; display: block;
color: @white;
border-bottom-width: 0;
&:hover {
font-weight: 400;
:before {
content: "\00bb";
padding-right: 5px;
}
}
} }
ul { ul {
margin: 0; margin: 0;

View file

@ -4,6 +4,7 @@
.font(12); .font(12);
color: #333332; color: #333332;
margin-bottom: 1.5em; margin-bottom: 1.5em;
.rounded(4px);
pre { pre {
position: relative; position: relative;
margin: 0; margin: 0;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

View file

@ -12,7 +12,7 @@ image:
<section id="table-of-contents" class="toc"> <section id="table-of-contents" class="toc">
<header> <header>
<h3 class="delta">Contents</h3> <h3 >Contents</h3>
</header> </header>
<div id="drawer" markdown="1"> <div id="drawer" markdown="1">
* Auto generated table of contents * Auto generated table of contents
@ -131,7 +131,7 @@ Any article or page that you want a *table of contents* to render insert the fol
{% highlight html %} {% highlight html %}
<section id="table-of-contents" class="toc"> <section id="table-of-contents" class="toc">
<header> <header>
<h3 class="delta">Contents</h3> <h3>Contents</h3>
</header> </header>
<div id="drawer" markdown="1"> <div id="drawer" markdown="1">
* Auto generated table of contents * Auto generated table of contents