mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-28 16:48:00 +02:00
219 lines
3.6 KiB
Plaintext
219 lines
3.6 KiB
Plaintext
/////////////////////////////////////
|
|
// TYPOGRAPHY CSS FOR KREMALICIOUS.COM
|
|
/////////////////////////////////////
|
|
|
|
body {
|
|
font-family: @font-family-base;
|
|
font-weight: @font-weight-base;
|
|
color: @text-color;
|
|
word-wrap: break-word;
|
|
|
|
font-size: @font-size-base;
|
|
line-height: @line-height-base;
|
|
|
|
padding-left: 2%;
|
|
padding-right: 2%;
|
|
|
|
@media @breakpoint1 {
|
|
font-size: @font-size-base;
|
|
line-height: @line-height-computed;
|
|
padding: 0;
|
|
}
|
|
|
|
@media @breakpoint3 {
|
|
font-size: 125%;
|
|
line-height: 1.6em;
|
|
}
|
|
}
|
|
|
|
|
|
// HEADINGS
|
|
/////////////////////////////////////
|
|
|
|
h1,h2,h3,h4,h5,h6,
|
|
.h1,.h2,.h3,.h4,.h5,.h6 {
|
|
font-family: @headings-font-family;
|
|
font-weight: @headings-font-weight;
|
|
line-height: @headings-line-height;
|
|
color: @headings-color;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
margin-top: @line-height-computed*2;
|
|
margin-bottom: @line-height-computed*2;
|
|
}
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: @line-height-computed;
|
|
margin-bottom: @line-height-computed;
|
|
}
|
|
|
|
h1, .h1 { font-size: ceil(@font-size-base * 2.25); }
|
|
h2, .h2 { font-size: ceil(@font-size-base * 1.70); }
|
|
h3, .h3 { font-size: ceil(@font-size-base * 1.60); }
|
|
h4, .h4 { font-size: ceil(@font-size-base * 1.35); }
|
|
h5, .h5 { font-size: ceil(@font-size-base * 1.1); }
|
|
h6, .h6 { font-size: @font-size-base; }
|
|
|
|
|
|
// LINKS
|
|
/////////////////////////////////////
|
|
|
|
a,
|
|
a:visited {
|
|
text-decoration: none;
|
|
color: @link-color;
|
|
.transition;
|
|
position: relative;
|
|
}
|
|
|
|
a:hover,
|
|
h1 a:visited:hover,
|
|
h2 a:visited:hover,
|
|
h3 a:visited:hover {
|
|
color: @link-color-hover;
|
|
}
|
|
|
|
a:active {
|
|
top: 1px;
|
|
}
|
|
|
|
h1 a,
|
|
h2 a,
|
|
h3 a,
|
|
h1 a:visited,
|
|
h2 a:visited,
|
|
h3 a:visited {
|
|
color: @headings-color;
|
|
}
|
|
|
|
|
|
// TEXT ELEMENTS
|
|
/////////////////////////////////////
|
|
|
|
p,ul,ol,blockquote,pre,td,th,label,img {
|
|
margin: 0 0 @line-height-computed;
|
|
}
|
|
|
|
p, li {
|
|
.hyphens(auto);
|
|
}
|
|
|
|
b, strong {
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
|
|
|
|
// QUOTES
|
|
/////////////////////////////////////
|
|
|
|
blockquote,
|
|
blockquote > p {
|
|
font-style: italic;
|
|
color: @text-color-light;
|
|
}
|
|
|
|
blockquote {
|
|
padding: (@line-height-computed / 2) @line-height-computed;
|
|
margin: 0 0 @line-height-computed;
|
|
border-left: 2px solid @text-color-dimmed;
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
|
|
// LISTS
|
|
/////////////////////////////////////
|
|
|
|
// Unordered and Ordered lists
|
|
ul,
|
|
ol {
|
|
margin-top: 0;
|
|
margin-bottom: @line-height-computed;
|
|
}
|
|
ul ul,
|
|
ul ol,
|
|
ol ol,
|
|
ol ul {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// List options
|
|
.list-unstyled {
|
|
padding-left: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
nav ul, nav ol {
|
|
.list-unstyled;
|
|
}
|
|
|
|
.entry-content ul,
|
|
.entry-content ol {
|
|
list-style: none;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.entry-content li {
|
|
position: relative;
|
|
margin-bottom: .5em;
|
|
|
|
&:before {
|
|
font-size: 14px;
|
|
font-family: 'entypo';
|
|
color: @text-color-light;
|
|
speak: none;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
line-height: 1;
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
position: absolute;
|
|
left: -2em;
|
|
top: .5em;
|
|
}
|
|
}
|
|
|
|
.entry-content ol li:before {
|
|
position: absolute;
|
|
left: -2em;
|
|
top: 0;
|
|
}
|
|
|
|
.entry-content ol {
|
|
counter-reset: ol-counter;
|
|
}
|
|
|
|
.entry-content ol li:before {
|
|
color: #fff;
|
|
content: counter(ol-counter);
|
|
counter-increment: ol-counter;
|
|
font-style: italic;
|
|
background: @text-color-dimmed;
|
|
border-radius: 1.2em;
|
|
width: 1.2em;
|
|
display: block;
|
|
height: 1.2em;
|
|
text-align: center;
|
|
line-height: 1.1em;
|
|
top: .2em;
|
|
.box-shadow(0 1px 0 rgba(255,255,255,.7));
|
|
}
|
|
|
|
|
|
// SELECTION
|
|
/////////////////////////////////////
|
|
|
|
::-moz-selection { background: #2e4f5c; color: #fff; }
|
|
::selection { background: #2e4f5c; color: #fff; } |