steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Improve typography

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

8
assets/less/480.less
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%;

3
assets/less/600.less
View File

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

3
assets/less/768.less
View File

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

11
assets/less/992.less
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 {

60
assets/less/elements.less
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 {

2
assets/less/main.less
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";

11
assets/less/page.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;

13
assets/less/typography.less
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 {

2
assets/less/variables.less
View File

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