Improve typography
This commit is contained in:
parent
f161948750
commit
c088d244cc
11 changed files with 4221 additions and 606 deletions
1828
assets/css/ie.css
1828
assets/css/ie.css
File diff suppressed because it is too large
Load diff
2886
assets/css/main.css
2886
assets/css/main.css
File diff suppressed because it is too large
Load diff
|
@ -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%;
|
||||
|
|
|
@ -1,7 +1,4 @@
|
|||
// ROOT =======================================================
|
||||
html {
|
||||
font-size: 95%;
|
||||
}
|
||||
// TYPOGRAPHY =================================================
|
||||
// TEXTURE ====================================================
|
||||
// ELEMENTS ===================================================
|
||||
|
|
|
@ -1,7 +1,4 @@
|
|||
// ROOT =======================================================
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
// TYPOGRAPHY =================================================
|
||||
// TEXTURE ====================================================
|
||||
// ELEMENTS ===================================================
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
@compcolor : spin(@basecolor, 180);
|
||||
@bordercolor : @basecolor;
|
||||
@white : #fff;
|
||||
@black : #000;
|
||||
@black : #111;
|
||||
@accentcolor : @black;
|
||||
/* Links ================================================= */
|
||||
@linkcolor : #343434;
|
||||
|
|
Loading…
Reference in a new issue