Improve typography

This commit is contained in:
Michael Rose 2013-09-07 10:10:55 -04:00
parent f161948750
commit c088d244cc
11 changed files with 4221 additions and 606 deletions

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

View file

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

View file

@ -1,7 +1,4 @@
// ROOT =======================================================
html {
font-size: 95%;
}
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================

View file

@ -1,7 +1,4 @@
// ROOT =======================================================
html {
font-size: 100%;
}
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================

View file

@ -1,11 +1,16 @@
// ROOT =======================================================
html {
font-size: 112.5%;
}
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
.article-author-top,
.article-author-bottom {
img.bio-photo {
width: 150px;
height: 150px;
.rounded(150px);
}
}
/* Image Grid ============================================== */
.image-grid {
li {

View file

@ -38,49 +38,41 @@ svg:not(:root) {
.grid(12,12);
}
}
/* Buttons =============================================== */
/* Buttons ============================================== */
.btn {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
padding: 12px 24px;
margin-bottom: 2em;
line-height: 1;
text-align: center;
text-transform: uppercase;
vertical-align: middle;
border: 4px double @textcolor;
.rounded(50px);
cursor: pointer;
*margin-left: .3em;
.transition(.4s linear);
&:visited {
border: 4px double @linkcolorvisited;
}
&:hover {
border: 4px double @linkcolorhover;
}
}
.btn:first-child {
*margin-left: 0;
}
.btn-inverse {
border: 4px double @white;
color: @white;
margin-bottom: 20px;
padding: 8px 20px;
.font-rem(14);
background-color: @black;
color: @white;
border: 2px solid @black !important;
.rounded(20px);
&:visited {
color: @white;
border-color: @white;
}
&:hover {
color: @white;
border-color: @white;
background-color: @white;
color: @black;
}
&:active {
.translate(0, 2px);
}
}
.btn-small {
font-size: 60%;
padding: 6px 12px;
.author-social {
display: block;
margin-bottom: 5px;
.font-rem(14);
color: @black;
&:visited {
color: @black;
}
&:hover {
.scale(1.1);
}
&:active {
.translate(0, 2px);
}
}
/* Well ================================================= */
.well {

View file

@ -11,8 +11,6 @@
/* Site wide styles (html, body, global classes) =========== */
@import "site.less";
// TYPOGRAPHY =================================================
/* Typeplate.com typographic starter pack ================== */
// @import "typeplate.less";
@import "typography.less";
/* Pygments Syntax highlighting ============================= */
@import "pygments.less";

View file

@ -1,8 +1,7 @@
html {
body {
background-color: @bodycolor;
font-family: @base-font;
font-color: @textcolor;
font-size: 90%;
}
.navigation-wrapper {
.container();
@ -121,8 +120,8 @@ html {
}
.article-author-top,
.article-author-bottom {
h4 {
margin-bottom: 0.5em;
h3 {
margin-bottom: 0;
}
p {
font-size: 80%;
@ -132,6 +131,8 @@ html {
border-bottom: 0 solid transparent;
}
img.bio-photo {
width: 100px;
height: 100px;
.rounded(100px);
}
}
@ -331,7 +332,7 @@ html {
}
}
}
.chrome-frame {
.browser-upgrade {
background: #000;
text-align: center;
margin: 0 0 2em 0;

View file

@ -11,7 +11,7 @@ h1, h2, h3, h4, h5, h6 {
font-family: @heading-font;
}
h1 {
.font-rem(32);
.font-size(32);
}
// Links
@ -98,6 +98,17 @@ blockquote {
}
}
// Paragraphs
// --------------------------------------------------
p {
margin: 0 0 @indent-var;
& + p {
//siblings indentation
text-indent: @indent-var;
margin-top: -(@indent-var);
}
}
// Code
// --------------------------------------------------
tt, code, kbd, samp, pre {

View file

@ -16,7 +16,7 @@
@compcolor : spin(@basecolor, 180);
@bordercolor : @basecolor;
@white : #fff;
@black : #000;
@black : #111;
@accentcolor : @black;
/* Links ================================================= */
@linkcolor : #343434;