///\r
-/// Massively by HTML5 UP\r
+/// Editorial by HTML5 UP\r
/// html5up.net | @ajlkn\r
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
///\r
\r
/* Type */\r
\r
- html {\r
- font-size: 16pt;\r
+ body, input, select, textarea {\r
+ color: _palette(fg);\r
+ font-family: _font(family);\r
+ font-size: 13pt;\r
+ font-weight: _font(weight);\r
+ line-height: 1.65;\r
\r
@include breakpoint('<=xlarge') {\r
- font-size: 12pt;\r
+ font-size: 11pt;\r
}\r
\r
@include breakpoint('<=large') {\r
- font-size: 11pt;\r
+ font-size: 10pt;\r
}\r
\r
@include breakpoint('<=xxsmall') {\r
- font-size: 10pt;\r
+ font-size: 9pt;\r
}\r
}\r
\r
- body {\r
- color: _palette(fg);\r
- }\r
-\r
- body, input, select, textarea {\r
- font-family: _font(family);\r
- font-weight: _font(weight);\r
- font-size: 1rem;\r
- line-height: 2.375;\r
- }\r
-\r
a {\r
@include vendor('transition', (\r
'color #{_duration(transition)} ease-in-out',\r
- 'background-color #{_duration(transition)} ease-in-out',\r
- 'border-color #{_duration(transition)} ease-in-out',\r
- 'box-shadow #{_duration(transition)} ease-in-out'\r
+ 'border-bottom-color #{_duration(transition)} ease-in-out'\r
));\r
border-bottom: dotted 1px;\r
+ color: _palette(accent);\r
text-decoration: none;\r
\r
&:hover {\r
- border-bottom-color: transparent;\r
+ border-bottom-color: _palette(accent);\r
+ color: _palette(accent) !important;\r
+\r
+ strong {\r
+ color: inherit;\r
+ }\r
}\r
}\r
\r
strong, b {\r
+ color: _palette(fg-bold);\r
font-weight: _font(weight-bold);\r
}\r
\r
}\r
\r
p {\r
- text-align: justify;\r
margin: 0 0 _size(element-margin) 0;\r
}\r
\r
h1, h2, h3, h4, h5, h6 {\r
+ color: _palette(fg-bold);\r
font-family: _font(family-heading);\r
font-weight: _font(weight-heading);\r
line-height: 1.5;\r
- letter-spacing: 0.075em;\r
- text-transform: uppercase;\r
margin: 0 0 (_size(element-margin) * 0.5) 0;\r
\r
a {\r
- border-bottom: 0;\r
color: inherit;\r
text-decoration: none;\r
+ border-bottom: 0;\r
}\r
}\r
\r
h1 {\r
- font-size: 4rem;\r
- line-height: 1.1;\r
- margin: 0 0 _size(element-margin) 0;\r
+ font-size: 4em;\r
+ margin: 0 0 (_size(element-margin) * 0.25) 0;\r
+ line-height: 1.3;\r
}\r
\r
h2 {\r
- font-size: 1.75rem;\r
- line-height: 1.3;\r
- margin: 0 0 (_size(element-margin) * 0.75) 0;\r
+ font-size: 1.75em;\r
}\r
\r
h3 {\r
- font-size: 1.25rem;\r
- margin: 0 0 (_size(element-margin) * 0.75) 0;\r
+ font-size: 1.25em;\r
}\r
\r
h4 {\r
- font-size: 1rem;\r
+ font-size: 1.1em;\r
}\r
\r
h5 {\r
- font-size: 0.9rem;\r
+ font-size: 0.9em;\r
}\r
\r
h6 {\r
- font-size: 0.8rem;\r
+ font-size: 0.7em;\r
+ }\r
+\r
+ @include breakpoint('<=xlarge') {\r
+ h1 {\r
+ font-size: 3.5em;\r
+ }\r
+ }\r
+\r
+ @include breakpoint('<=medium') {\r
+ h1 {\r
+ font-size: 3.25em;\r
+ }\r
+ }\r
+\r
+ @include breakpoint('<=small') {\r
+ h1 {\r
+ font-size: 2em;\r
+ line-height: 1.4;\r
+ }\r
+\r
+ h2 {\r
+ font-size: 1.5em;\r
+ }\r
}\r
\r
sub {\r
- font-size: 0.8rem;\r
+ font-size: 0.8em;\r
position: relative;\r
- top: 0.5rem;\r
+ top: 0.5em;\r
}\r
\r
sup {\r
- font-size: 0.8rem;\r
+ font-size: 0.8em;\r
position: relative;\r
- top: -0.5rem;\r
+ top: -0.5em;\r
}\r
\r
blockquote {\r
- border-left: solid 4px;\r
+ border-left: solid 3px _palette(border);\r
font-style: italic;\r
margin: 0 0 _size(element-margin) 0;\r
padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);\r
}\r
\r
code {\r
+ background: _palette(border-bg);\r
border-radius: _size(border-radius);\r
- border: solid 2px;\r
+ border: solid 1px _palette(border);\r
font-family: _font(family-fixed);\r
- font-size: 0.9rem;\r
- margin: 0 0.25rem;\r
- padding: 0.25rem 0.65rem;\r
+ font-size: 0.9em;\r
+ margin: 0 0.25em;\r
+ padding: 0.25em 0.65em;\r
}\r
\r
pre {\r
-webkit-overflow-scrolling: touch;\r
font-family: _font(family-fixed);\r
- font-size: 0.9rem;\r
+ font-size: 0.9em;\r
margin: 0 0 _size(element-margin) 0;\r
\r
code {\r
display: block;\r
line-height: 1.75;\r
- padding: 1rem 1.5rem;\r
+ padding: 1em 1.5em;\r
overflow-x: auto;\r
}\r
}\r
\r
hr {\r
border: 0;\r
- border-bottom: solid 2px;\r
- margin: (_size(element-margin) * 1.5) 0;\r
+ border-bottom: solid 1px _palette(border);\r
+ margin: _size(element-margin) 0;\r
\r
&.major {\r
- margin: (_size(element-margin) * 2.5) 0;\r
+ margin: (_size(element-margin) * 1.5) 0;\r
}\r
}\r
\r
\r
.align-right {\r
text-align: right;\r
- }\r
-\r
- @mixin color-typography($p: null) {\r
- @if $p != null {\r
- color: _palette($p, fg);\r
- }\r
-\r
- input, select, textarea {\r
- color: _palette($p, fg-bold);\r
- }\r
-\r
- a {\r
- color: _palette($p, fg-bold);\r
- border-bottom-color: transparentize(_palette($p, fg), 0.5);\r
-\r
- &:hover {\r
- border-bottom-color: transparent;\r
- color: _palette($p, accent) !important;\r
- }\r
- }\r
-\r
- strong, b {\r
- color: _palette($p, fg-bold);\r
- }\r
-\r
- h1, h2, h3, h4, h5, h6 {\r
- color: _palette($p, fg-bold);\r
- }\r
-\r
- blockquote {\r
- border-left-color: _palette($p, border);\r
- }\r
-\r
- code {\r
- background: _palette($p, border-bg);\r
- border-color: _palette($p, border);\r
- }\r
-\r
- hr {\r
- border-bottom-color: _palette($p, border);\r
- }\r
- }\r
-\r
- @include color-typography;
\ No newline at end of file
+ }
\ No newline at end of file
projects / editorial.git / blobdiff