mirror of
https://github.com/rottenwheel/revuo-weekly.git
synced 2025-07-30 01:58:46 -04:00
Revert "code optimization"
This commit is contained in:
rottenstonks
GitHub
parent
edfc31a049
commit
83c37d1b6b
26 changed files with 565 additions and 1159 deletions
|
|
@ -6,23 +6,11 @@
|
|||
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
img {
|
||||
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, img {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
|
@ -30,42 +18,43 @@ img {
|
|||
|
||||
/*- Base color -*/
|
||||
|
||||
$main-color: #e9e9e9;
|
||||
$background-color: #0f0f0f;
|
||||
$main-color: #E9E9E9;
|
||||
$background-color: #0F0F0F;
|
||||
$text-color: #888888;
|
||||
|
||||
/*- Base settings -*/
|
||||
|
||||
html {
|
||||
background-color: $background-color;
|
||||
font-size: 16px;
|
||||
scroll-behavior: smooth;
|
||||
@media (min-width: 940px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
line-height: 1.5;
|
||||
color: $text-color;
|
||||
background-color: $background-color;
|
||||
font-size: 16px;
|
||||
scroll-behavior: smooth;
|
||||
@media (min-width: 940px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
line-height: 1.5;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
|
||||
/*- Link -*/
|
||||
a {
|
||||
color: $main-color;
|
||||
outline: 0;
|
||||
border-bottom: 2px dotted #6a6d72;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
-moz-transition: all 0.3s ease;
|
||||
-ms-transition: all 0.3s ease;
|
||||
-o-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #999999;
|
||||
border-bottom: 2px dotted #333333;
|
||||
}
|
||||
color: $main-color;
|
||||
outline: 0;
|
||||
border-bottom: 2px dotted #6a6d72;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
-webkit-transition: all .3s ease;
|
||||
-moz-transition: all .3s ease;
|
||||
-ms-transition: all .3s ease;
|
||||
-o-transition: all .3s ease;
|
||||
transition: all .3s ease;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #999999;
|
||||
border-bottom: 2px dotted #333333;
|
||||
}
|
||||
}
|
||||
|
||||
a#nav-menu {
|
||||
border-bottom: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,35 @@
|
|||
p.note {
|
||||
font-size: 0.7em;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: -1rem;
|
||||
font-size: 0.7em;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
.bcstats {
|
||||
background-color: var(--block-bg-color);
|
||||
margin-bottom: 1.3334rem;
|
||||
border-radius: 2px;
|
||||
background-color: var(--block-bg-color);
|
||||
margin-bottom: 1.3334rem;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.bcstats p {
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bcstats p:nth-child(even) {
|
||||
background-color: var(--blog-bg-color-secondary);
|
||||
background-color: var(--blog-bg-color-secondary);
|
||||
}
|
||||
|
||||
$breakpoint-alpha: 480px; // adjust to your needs
|
||||
|
||||
p.table-title {
|
||||
margin: 0;
|
||||
padding-bottom: 0.5em;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
padding-top: 0.5em;
|
||||
margin: 0;
|
||||
padding-bottom: 0.5em;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.price-table,
|
||||
.moneroversary-table {
|
||||
.price-table, .moneroversary-table {
|
||||
margin: 0 0 1.3334rem 0;
|
||||
width: 100%; // adjust to your needs
|
||||
background: #45494f;
|
||||
|
|
@ -43,354 +42,347 @@ p.table-title {
|
|||
color: #45494f;
|
||||
tr.row3 {
|
||||
background-color: var(--blog-bg-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
tr {
|
||||
border-top: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
tr.row1 {
|
||||
background-color: var(--block-bg-color-heading);
|
||||
}
|
||||
|
||||
|
||||
th {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
td {
|
||||
display: block;
|
||||
|
||||
display: block;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0.5em;
|
||||
padding-top: .5em;
|
||||
}
|
||||
&:last-child {
|
||||
padding-bottom: 0.5em;
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: attr(data-th) ": "; // who knew you could do this? The internet, that's who.
|
||||
content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
|
||||
font-weight: bold;
|
||||
|
||||
// optional stuff to make it look nicer
|
||||
width: 6.5em; // magic number :( adjust according to your own content
|
||||
display: inline-block;
|
||||
// end options
|
||||
|
||||
|
||||
@media (min-width: $breakpoint-alpha) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
|
||||
th, td {
|
||||
text-align: left;
|
||||
margin: 0.5em 1em;
|
||||
margin: .5em 1em;
|
||||
@media (min-width: $breakpoint-alpha) {
|
||||
display: table-cell;
|
||||
padding: 0.25em 0.5em;
|
||||
padding: 1em !important;
|
||||
padding: .25em .5em;
|
||||
padding: 1em !important;
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td:before {
|
||||
}
|
||||
|
||||
th, td:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
td.green {
|
||||
color: #66d166;
|
||||
color: #66d166;
|
||||
@media (min-width: $breakpoint-alpha) {
|
||||
color: #51a751;
|
||||
color: #51a751;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
td.red {
|
||||
color: #e36f6e;
|
||||
color: #e36f6e;
|
||||
@media (min-width: $breakpoint-alpha) {
|
||||
color: #d83231;
|
||||
color: #d83231;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.moneroversary-table {
|
||||
margin: 1.3334rem 0 1.3334rem 0;
|
||||
@media (max-width: $breakpoint-alpha) {
|
||||
margin: 1.3334rem 0 1.3334rem 0;
|
||||
@media (max-width: $breakpoint-alpha) {
|
||||
background: #f0f0f0;
|
||||
color: #45494f;
|
||||
}
|
||||
th,
|
||||
td:before {
|
||||
@media (max-width: $breakpoint-alpha) {
|
||||
color: #45494f;
|
||||
}
|
||||
}
|
||||
th, td:before {
|
||||
@media (max-width: $breakpoint-alpha) {
|
||||
color: #45494f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.moneroversary-table tr.row1 {
|
||||
background-color: #db8b55;
|
||||
background-color: #db8b55;
|
||||
}
|
||||
|
||||
.content h3 {
|
||||
margin-top: 3rem;
|
||||
background-color: #45494f;
|
||||
color: white;
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 2px;
|
||||
margin-top: 3rem;
|
||||
background-color: #45494f;
|
||||
color: white;
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.content h3.orange {
|
||||
background-color: #db8b55;
|
||||
background-color: #db8b55;
|
||||
}
|
||||
|
||||
.content ul,
|
||||
.content ol {
|
||||
line-height: 1.9;
|
||||
.content ul, .content ol {
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.newsbyte,
|
||||
.event {
|
||||
padding: 1rem;
|
||||
background-color: var(--block-bg-color);
|
||||
margin-top: 1rem;
|
||||
.newsbyte, .event {
|
||||
padding: 1rem;
|
||||
background-color: var(--block-bg-color);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.newsbyte:first-of-type,
|
||||
.event:first-of-type {
|
||||
margin-top: 0;
|
||||
.newsbyte:first-of-type, .event:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.newsbyte:after {
|
||||
display: none;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin-top: 2rem;
|
||||
background-color: #d5d5d5;
|
||||
display: none;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin-top: 2rem;
|
||||
background-color: #d5d5d5;
|
||||
}
|
||||
|
||||
.newsbyte h4,
|
||||
h4.stat {
|
||||
font-size: 18px;
|
||||
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-weight: 700;
|
||||
@media (max-width: 480px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
.newsbyte h4, h4.stat {
|
||||
font-size: 18px;
|
||||
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||
font-weight: 700;
|
||||
@media (max-width: 480px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.newsbyte p,
|
||||
.event p {
|
||||
margin-bottom: 0;
|
||||
.newsbyte p, .event p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p.date {
|
||||
margin-bottom: 0.2em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.proposal {
|
||||
margin-bottom: 1rem;
|
||||
padding: 1em;
|
||||
background-color: var(--block-bg-color);
|
||||
margin-bottom: 1rem;
|
||||
padding: 1em;
|
||||
background-color: var(--block-bg-color);
|
||||
}
|
||||
|
||||
.proposal p {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.proposal p:first-child {
|
||||
padding-bottom: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.proposal p a {
|
||||
line-height: 1.7;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
img.merchant-img {
|
||||
width: 15rem;
|
||||
margin: 0 0 24px 0;
|
||||
width: 15rem;
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
|
||||
img#pepperworks {
|
||||
margin-top: 40px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
img#openpriv {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img#veracrypt {
|
||||
width: 10rem;
|
||||
margin-top: 40px;
|
||||
width: 10rem;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
p.address {
|
||||
background-color: var(--block-bg-color);
|
||||
color: var(--link-color);
|
||||
font-weight: bold;
|
||||
word-wrap: break-word;
|
||||
padding: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
border-radius: 2px;
|
||||
-webkit-touch-callout: all;
|
||||
-webkit-user-select: all;
|
||||
-khtml-user-select: all;
|
||||
-moz-user-select: all;
|
||||
-ms-user-select: all;
|
||||
user-select: all;
|
||||
background-color: var(--block-bg-color);
|
||||
color: var(--link-color);
|
||||
font-weight: bold;
|
||||
word-wrap: break-word;
|
||||
padding: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
border-radius: 2px;
|
||||
-webkit-touch-callout: all;
|
||||
-webkit-user-select: all;
|
||||
-khtml-user-select: all;
|
||||
-moz-user-select: all;
|
||||
-ms-user-select: all;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
a.qr {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
a.qr img {
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img.merchant-img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
img.fob-img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 8rem;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
padding: 1rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 8rem;
|
||||
background-color: rgba(0, 0, 0, 0.75);;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
img.wikileaks-img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 10rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
img#njalla {
|
||||
background-color: #01051f;
|
||||
padding: 1rem;
|
||||
background-color: #01051F;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
p.text-lead {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#post-page img.img-lead,
|
||||
#post-page p.text-lead {
|
||||
display: none;
|
||||
#post-page img.img-lead, #post-page p.text-lead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img.gratuitas {
|
||||
width: 10rem;
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
img.localmonero {
|
||||
width: 10rem;
|
||||
margin-bottom: -1rem;
|
||||
width: 10rem;
|
||||
margin-bottom: -1rem;
|
||||
}
|
||||
|
||||
.sponsors {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sponsor {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
flex-basis: auto;
|
||||
@media (max-width: 520px) {
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
box-sizing: border-box;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
flex-basis: auto;
|
||||
@media (max-width: 520px) {
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
img.dvchain {
|
||||
height: 9rem;
|
||||
margin-left: 3rem;
|
||||
@media (max-width: 520px) {
|
||||
margin-left: auto;
|
||||
margin-top: 1rem;
|
||||
height: auto;
|
||||
width: 13rem;
|
||||
}
|
||||
height: 9rem;
|
||||
margin-left: 3rem;
|
||||
@media (max-width: 520px) {
|
||||
margin-left: auto;
|
||||
margin-top: 1rem;
|
||||
height: auto;
|
||||
width: 13rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Periodical
|
||||
// Periodical
|
||||
|
||||
.revuo-classes a {
|
||||
padding: 1rem 2rem;
|
||||
width: 11rem;
|
||||
padding: 1rem 2rem;
|
||||
width: 11rem;
|
||||
}
|
||||
|
||||
#weekly .revuo-classes a.wk {
|
||||
background-color: #f0f0f0;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
#periodical .revuo-classes a.pd,
|
||||
#wrap.periodical .revuo-classes a.pd:active,
|
||||
#wrap.periodical .revuo-classes a.pd:focus {
|
||||
background-color: #f0f0f0;
|
||||
#periodical .revuo-classes a.pd, #wrap.periodical .revuo-classes a.pd:active, #wrap.periodical .revuo-classes a.pd:focus {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
// Typography for Periodical
|
||||
|
||||
.hted-head {
|
||||
margin: 2.5rem 0 1.3334rem 0;
|
||||
background: #d9dadb;
|
||||
color: #222222;
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
padding: 1em;
|
||||
text-align: left;
|
||||
margin: 2.5rem 0 1.3334rem 0;
|
||||
background: #d9dadb;
|
||||
color: #222222;
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
padding: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#post-page h2 {
|
||||
line-height: 1.3;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-numbers-display {
|
||||
display: inline-block;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
display: inline-block;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
/* -- General Layout -- */
|
||||
|
||||
/* Required for footer to stick to the bottom */
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
|
||||
#nav,
|
||||
#nav-left {
|
||||
#nav, #nav-left {
|
||||
a {
|
||||
display: block;
|
||||
color: $background-color;
|
||||
|
|
@ -25,8 +23,8 @@ body {
|
|||
}
|
||||
}
|
||||
span {
|
||||
font-weight: 200;
|
||||
}
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
|
||||
#nav {
|
||||
|
|
@ -48,13 +46,14 @@ body {
|
|||
}
|
||||
|
||||
#nav-list {
|
||||
|
||||
.nav-actions {
|
||||
/* Will turn to flex on mobile */
|
||||
display: none;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.icon {
|
||||
padding: 0;
|
||||
> img {
|
||||
|
|
@ -63,10 +62,11 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/* Separator after menu */
|
||||
&:after {
|
||||
display: block;
|
||||
content: "";
|
||||
content: '';
|
||||
width: 5rem;
|
||||
height: 1px;
|
||||
margin: 23px auto;
|
||||
|
|
@ -89,8 +89,7 @@ body {
|
|||
width: 1.5em;
|
||||
background-color: lighten($text-color, 35%);
|
||||
margin-top: 8px;
|
||||
&:after,
|
||||
&:before {
|
||||
&:after, &:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
|
|
@ -111,17 +110,17 @@ body {
|
|||
&.btn-close:before {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
background-color: $background-color;
|
||||
}
|
||||
&.btn-close:after {
|
||||
top: -4px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -137,67 +136,67 @@ body {
|
|||
}
|
||||
|
||||
#container {
|
||||
margin: 0 auto;
|
||||
max-width: 730px;
|
||||
padding: 0 1.5rem;
|
||||
margin:0 auto;
|
||||
max-width: 730px;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
#header {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
position: relative;
|
||||
margin-bottom: 23px;
|
||||
@media (max-width: 480px) {
|
||||
padding-top: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $text-color;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: $text-color;
|
||||
display: inline-block;
|
||||
border-bottom: none;
|
||||
}
|
||||
img {
|
||||
max-height: 100px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
max-height: 100px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
@media (max-width: 940px) {
|
||||
max-height: 90px;
|
||||
max-height: 90px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
max-height: 60px;
|
||||
max-height: 60px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
max-height: 50px;
|
||||
max-height: 50px;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
font-family: "Bebas Neue", sans-serif; //Emerald logo font
|
||||
font-family: 'Bebas Neue', sans-serif; //Emerald logo font
|
||||
font-weight: 400;
|
||||
font-size: 4.5em;
|
||||
color: #d26e2b;
|
||||
@media (max-width: 940px) {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
font-size: 3em;
|
||||
font-size: 3em;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
font-size: 2.5em;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
content: "";
|
||||
display: none;
|
||||
content: '';
|
||||
width: 5rem;
|
||||
height: 1px;
|
||||
margin: 23px auto;
|
||||
background-color: lighten($text-color, 70%);
|
||||
@media (max-width: 480px) {
|
||||
margin: 0.5rem auto;
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
padding-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -213,18 +212,18 @@ body {
|
|||
#post-page {
|
||||
margin-bottom: 1.5em;
|
||||
@media (min-width: 940px) {
|
||||
margin-bottom: 1.3334em;
|
||||
}
|
||||
margin-bottom: 1.3334em;
|
||||
}
|
||||
}
|
||||
|
||||
.post + .post:before {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 5rem;
|
||||
height: 1px;
|
||||
margin: 23px auto;
|
||||
background-color: lighten($background-color, 70%) !important;
|
||||
}
|
||||
.post+.post:before {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 5rem;
|
||||
height: 1px;
|
||||
margin: 23px auto;
|
||||
background-color: lighten($background-color, 70%) !important;
|
||||
}
|
||||
|
||||
.by-line {
|
||||
display: block;
|
||||
|
|
@ -263,14 +262,14 @@ img {
|
|||
margin: 0 auto;
|
||||
margin-bottom: 24px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
img[title="Emerald"] {
|
||||
box-shadow: 0 2px 6px #ddd;
|
||||
}
|
||||
box-shadow: 0 2px 6px #ddd;
|
||||
}
|
||||
|
||||
code {
|
||||
color: lighten($text-color, 35%);
|
||||
|
|
@ -279,8 +278,7 @@ code {
|
|||
|
||||
/* Set the vertical rhythm (and padding-left) for lists inside post content */
|
||||
|
||||
.content ul,
|
||||
.content ol {
|
||||
.content ul, .content ol {
|
||||
line-height: 1.5em; /* 24px/16px */
|
||||
padding-left: 1.5em;
|
||||
@media (min-width: 940px) {
|
||||
|
|
@ -309,14 +307,12 @@ code {
|
|||
padding: 0.5em 1em;
|
||||
border-bottom: none;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.page-item:hover,
|
||||
.page-item:active,
|
||||
.page-item:focus {
|
||||
border-bottom: none;
|
||||
.page-item:hover, .page-item:active, .page-item:focus {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
|
@ -329,17 +325,17 @@ footer {
|
|||
}
|
||||
|
||||
#wrap {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
padding-bottom: 105px;
|
||||
min-height:100%;
|
||||
position:relative;
|
||||
padding-bottom: 105px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 25px 0;
|
||||
background-color: $main-color;
|
||||
color: $background-color;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
padding: 25px 0;
|
||||
background-color: $main-color;
|
||||
color: $background-color;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,25 +3,25 @@
|
|||
// Nav menu
|
||||
|
||||
@mixin icon-position($position) {
|
||||
display: block;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
#{$position}: 25px;
|
||||
z-index: 10;
|
||||
height: 36px;
|
||||
padding: 8px;
|
||||
background-color: rgba(240, 240, 240, 0.6);
|
||||
background-color: rgba(240,240,240,.6);
|
||||
@media (max-width: 480px) {
|
||||
top: 15px;
|
||||
right: 10px;
|
||||
top: 15px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin open($x) {
|
||||
-webkit-transform: translateX($x);
|
||||
-moz-transform: translateX($x);
|
||||
-ms-transform: translateX($x);
|
||||
transform: translateX($x);
|
||||
-webkit-transform: translateX($x);
|
||||
-moz-transform: translateX($x);
|
||||
-ms-transform: translateX($x);
|
||||
transform: translateX($x);
|
||||
width: 100%;
|
||||
@media (min-width: 940px) {
|
||||
width: 30%;
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
}
|
||||
|
||||
@mixin nav-position($position) {
|
||||
width: 14rem;
|
||||
width: 14rem;
|
||||
position: fixed;
|
||||
background-color: $main-color;
|
||||
top: 0;
|
||||
|
|
@ -38,10 +38,10 @@
|
|||
color: $background-color;
|
||||
opacity: 0.95;
|
||||
-webkit-transition: all 0.3s ease-in;
|
||||
-moz-transition: all 0.3s ease-in;
|
||||
-ms-transition: all 0.3s ease-in;
|
||||
transition: all 0.3s ease-in;
|
||||
-moz-transition: all 0.3s ease-in;
|
||||
-ms-transition: all 0.3s ease-in;
|
||||
transition: all 0.3s ease-in;
|
||||
z-index: 1;
|
||||
padding: 72px 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,199 +4,63 @@
|
|||
*/
|
||||
|
||||
// .highlight { background-color: #FFF; }
|
||||
.lineno {
|
||||
color: darken($background-color, 25%);
|
||||
margin-right: 1em;
|
||||
}
|
||||
.highlight .c {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
} /* Comment */
|
||||
.highlight .err {
|
||||
color: #a61717;
|
||||
background-color: #e3d2d2;
|
||||
} /* Error */
|
||||
.highlight .k {
|
||||
font-weight: bold;
|
||||
} /* Keyword */
|
||||
.highlight .o {
|
||||
font-weight: bold;
|
||||
} /* Operator */
|
||||
.highlight .cm {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
} /* Comment.Multiline */
|
||||
.highlight .cp {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
} /* Comment.Preproc */
|
||||
.highlight .c1 {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
} /* Comment.Single */
|
||||
.highlight .cs {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
} /* Comment.Special */
|
||||
.highlight .gd {
|
||||
color: #000000;
|
||||
background-color: #ffdddd;
|
||||
} /* Generic.Deleted */
|
||||
.highlight .gd .x {
|
||||
color: #000000;
|
||||
background-color: #ffaaaa;
|
||||
} /* Generic.Deleted.Specific */
|
||||
.highlight .ge {
|
||||
font-style: italic;
|
||||
} /* Generic.Emph */
|
||||
.highlight .gr {
|
||||
color: #aa0000;
|
||||
} /* Generic.Error */
|
||||
.highlight .gh {
|
||||
color: #999999;
|
||||
} /* Generic.Heading */
|
||||
.highlight .gi {
|
||||
color: #000000;
|
||||
background-color: #ddffdd;
|
||||
} /* Generic.Inserted */
|
||||
.highlight .gi .x {
|
||||
color: #000000;
|
||||
background-color: #aaffaa;
|
||||
} /* Generic.Inserted.Specific */
|
||||
.highlight .go {
|
||||
color: #888888;
|
||||
} /* Generic.Output */
|
||||
.highlight .gp {
|
||||
color: #555555;
|
||||
} /* Generic.Prompt */
|
||||
.highlight .gs {
|
||||
font-weight: bold;
|
||||
} /* Generic.Strong */
|
||||
.highlight .gu {
|
||||
color: #aaaaaa;
|
||||
} /* Generic.Subheading */
|
||||
.highlight .gt {
|
||||
color: #aa0000;
|
||||
} /* Generic.Traceback */
|
||||
.highlight .kc {
|
||||
font-weight: bold;
|
||||
} /* Keyword.Constant */
|
||||
.highlight .kd {
|
||||
font-weight: bold;
|
||||
} /* Keyword.Declaration */
|
||||
.highlight .kp {
|
||||
font-weight: bold;
|
||||
} /* Keyword.Pseudo */
|
||||
.highlight .kr {
|
||||
font-weight: bold;
|
||||
} /* Keyword.Reserved */
|
||||
.highlight .kt {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
} /* Keyword.Type */
|
||||
.highlight .m {
|
||||
color: #009999;
|
||||
} /* Literal.Number */
|
||||
.highlight .s {
|
||||
color: #d14;
|
||||
} /* Literal.String */
|
||||
.highlight .na {
|
||||
color: #008080;
|
||||
} /* Name.Attribute */
|
||||
.highlight .nb {
|
||||
color: #0086b3;
|
||||
} /* Name.Builtin */
|
||||
.highlight .nc {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
} /* Name.Class */
|
||||
.highlight .no {
|
||||
color: #008080;
|
||||
} /* Name.Constant */
|
||||
.highlight .ni {
|
||||
color: #800080;
|
||||
} /* Name.Entity */
|
||||
.highlight .ne {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
} /* Name.Exception */
|
||||
.highlight .nf {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
} /* Name.Function */
|
||||
.highlight .nn {
|
||||
color: #555555;
|
||||
} /* Name.Namespace */
|
||||
.highlight .nt {
|
||||
color: #000080;
|
||||
} /* Name.Tag */
|
||||
.highlight .nv {
|
||||
color: #008080;
|
||||
} /* Name.Variable */
|
||||
.highlight .ow {
|
||||
font-weight: bold;
|
||||
} /* Operator.Word */
|
||||
.highlight .w {
|
||||
color: #bbbbbb;
|
||||
} /* Text.Whitespace */
|
||||
.highlight .mf {
|
||||
color: #009999;
|
||||
} /* Literal.Number.Float */
|
||||
.highlight .mh {
|
||||
color: #009999;
|
||||
} /* Literal.Number.Hex */
|
||||
.highlight .mi {
|
||||
color: #009999;
|
||||
} /* Literal.Number.Integer */
|
||||
.highlight .mo {
|
||||
color: #009999;
|
||||
} /* Literal.Number.Oct */
|
||||
.highlight .sb {
|
||||
color: #d14;
|
||||
} /* Literal.String.Backtick */
|
||||
.highlight .sc {
|
||||
color: #d14;
|
||||
} /* Literal.String.Char */
|
||||
.highlight .sd {
|
||||
color: #d14;
|
||||
} /* Literal.String.Doc */
|
||||
.highlight .s2 {
|
||||
color: #d14;
|
||||
} /* Literal.String.Double */
|
||||
.highlight .se {
|
||||
color: #d14;
|
||||
} /* Literal.String.Escape */
|
||||
.highlight .sh {
|
||||
color: #d14;
|
||||
} /* Literal.String.Heredoc */
|
||||
.highlight .si {
|
||||
color: #d14;
|
||||
} /* Literal.String.Interpol */
|
||||
.highlight .sx {
|
||||
color: #d14;
|
||||
} /* Literal.String.Other */
|
||||
.highlight .sr {
|
||||
color: #009926;
|
||||
} /* Literal.String.Regex */
|
||||
.highlight .s1 {
|
||||
color: #d14;
|
||||
} /* Literal.String.Single */
|
||||
.highlight .ss {
|
||||
color: #990073;
|
||||
} /* Literal.String.Symbol */
|
||||
.highlight .bp {
|
||||
color: #999999;
|
||||
} /* Name.Builtin.Pseudo */
|
||||
.highlight .vc {
|
||||
color: #008080;
|
||||
} /* Name.Variable.Class */
|
||||
.highlight .vg {
|
||||
color: #008080;
|
||||
} /* Name.Variable.Global */
|
||||
.highlight .vi {
|
||||
color: #008080;
|
||||
} /* Name.Variable.Instance */
|
||||
.highlight .il {
|
||||
color: #009999;
|
||||
} /* Literal.Number.Integer.Long */
|
||||
.lineno { color: darken($background-color, 25%); margin-right: 1em; }
|
||||
.highlight .c { color: #999988; font-style: italic } /* Comment */
|
||||
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
|
||||
.highlight .k { font-weight: bold } /* Keyword */
|
||||
.highlight .o { font-weight: bold } /* Operator */
|
||||
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
|
||||
.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
|
||||
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
|
||||
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
|
||||
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
|
||||
.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
|
||||
.highlight .ge { font-style: italic } /* Generic.Emph */
|
||||
.highlight .gr { color: #aa0000 } /* Generic.Error */
|
||||
.highlight .gh { color: #999999 } /* Generic.Heading */
|
||||
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
|
||||
.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
|
||||
.highlight .go { color: #888888 } /* Generic.Output */
|
||||
.highlight .gp { color: #555555 } /* Generic.Prompt */
|
||||
.highlight .gs { font-weight: bold } /* Generic.Strong */
|
||||
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
|
||||
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
|
||||
.highlight .kc { font-weight: bold } /* Keyword.Constant */
|
||||
.highlight .kd { font-weight: bold } /* Keyword.Declaration */
|
||||
.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
|
||||
.highlight .kr { font-weight: bold } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
|
||||
.highlight .m { color: #009999 } /* Literal.Number */
|
||||
.highlight .s { color: #d14 } /* Literal.String */
|
||||
.highlight .na { color: #008080 } /* Name.Attribute */
|
||||
.highlight .nb { color: #0086B3 } /* Name.Builtin */
|
||||
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
|
||||
.highlight .no { color: #008080 } /* Name.Constant */
|
||||
.highlight .ni { color: #800080 } /* Name.Entity */
|
||||
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
|
||||
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
|
||||
.highlight .nn { color: #555555 } /* Name.Namespace */
|
||||
.highlight .nt { color: #000080 } /* Name.Tag */
|
||||
.highlight .nv { color: #008080 } /* Name.Variable */
|
||||
.highlight .ow { font-weight: bold } /* Operator.Word */
|
||||
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
|
||||
.highlight .mf { color: #009999 } /* Literal.Number.Float */
|
||||
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: #009999 } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
|
||||
.highlight .sb { color: #d14 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #d14 } /* Literal.String.Char */
|
||||
.highlight .sd { color: #d14 } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #d14 } /* Literal.String.Double */
|
||||
.highlight .se { color: #d14 } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #d14 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #d14 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #009926 } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: #d14 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
|
||||
.highlight .vc { color: #008080 } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #008080 } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
|
||||
|
|
|
|||
|
|
@ -4,159 +4,144 @@
|
|||
//
|
||||
|
||||
@font-face {
|
||||
font-family: "Bebas Neue";
|
||||
src: url("../font/BebasNeue-Regular.woff") format("woff"); /* Pretty Modern Browsers */
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
||||
letter-spacing: 0.01em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/*- Typography for medium and small screen, based on 16px font-size -*/
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
font-size: 18px;
|
||||
line-height: 1.7em; /* 24px/16px */
|
||||
margin-bottom: 1.5em; /* 24px/16px */
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.25em; /* 36px/16px */
|
||||
line-height: 1.3333em; /* 48px/36px */
|
||||
padding: 0.33335em 0; /* 12px/36px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
||||
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em; /* 24px/16px */
|
||||
line-height: 1.5em; /* 24px/24px */
|
||||
padding: 1em 0 0 0; /* 12px/24px * 2, only top (Use padding instead of margin to maintain proximity with paragwithph) */
|
||||
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
||||
@media (max-width: 480px) {
|
||||
font-size: 1.6rem;
|
||||
font-family: 'Bebas Neue';
|
||||
src: url('../font/BebasNeue-Regular.woff') format('woff'), /* Pretty Modern Browsers */
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em; /* 18px/16px */
|
||||
line-height: 1.7em; /* 24px/18px */
|
||||
padding: 0.66667em 0; /* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
||||
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.hted-head th {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 1.125em; /* 18px/16px */
|
||||
line-height: 1.7em; /* 24px/18px */
|
||||
padding: 0.66667em 0; /* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
||||
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
h5 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.3em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
margin: 1.5em; /* 24px/18px */
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: darken($background-color, 5%);
|
||||
padding: 0 1.5em; /* 24px/18px */
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
padding: 1.5em 0; /* 24px/18px */
|
||||
|
||||
body {
|
||||
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||
letter-spacing: 0.01em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 520px) {
|
||||
//Breakpoint set to 940px
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
font-size: 20px;
|
||||
line-height: 1.7em; /* 24px/16px */
|
||||
margin-bottom: 1.5em; /* 24px/16px */
|
||||
|
||||
/*- Typography for medium and small screen, based on 16px font-size -*/
|
||||
|
||||
p, ul, ol {
|
||||
font-size: 18px;
|
||||
line-height: 1.7em; /* 24px/16px */
|
||||
margin-bottom: 1.5em; /* 24px/16px */
|
||||
}
|
||||
|
||||
h3,
|
||||
h5 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.hted-head th {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
/*- Typography for big screen, based on 18px font-size -*/
|
||||
|
||||
@media (min-width: 940px) {
|
||||
//Breakpoint set to 940px
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
font-size: 1em; /* 18px */
|
||||
line-height: 1.7em; /* 24px/18px */
|
||||
margin-bottom: 1.3334em; /* 24px/18px */
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 2.6667em; /* 48px/18px */
|
||||
line-height: 1em; /* 48px/48px */
|
||||
padding: 0.25em 0; /* 12px/48px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
||||
font-size: 2.25em; /* 36px/16px */
|
||||
line-height: 1.3333em; /* 48px/36px */
|
||||
padding: 0.33335em 0; /* 12px/36px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
||||
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
font-size: 2em; /* 36px/18px */
|
||||
line-height: 1.7em; /* 48px/36px */
|
||||
padding: 0.66667em 0 0 0; /* 12px/36px * 2, pnly top (Use padding instead of margin to maintain proximity with paragraph) */
|
||||
font-size: 1.5em; /* 24px/16px */
|
||||
line-height: 1.5em; /* 24px/24px */
|
||||
padding: 1em 0 0 0; /* 12px/24px * 2, only top (Use padding instead of margin to maintain proximity with paragwithph) */
|
||||
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||
@media (max-width: 480px) {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 1.7em; /* 24px/18px */
|
||||
line-height: 1.7em; /* 24px/24px */
|
||||
padding: 0.5em 0; /* 12px/24px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em; /* 18px/16px */
|
||||
line-height: 1.7em; /* 24px/18px */
|
||||
padding: 0.66667em 0; /* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
||||
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.hted-head th {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
font-size: 1.125em; /* 18px/16px */
|
||||
line-height: 1.7em; /* 24px/18px */
|
||||
padding: 0.66667em 0; /* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
||||
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
h5 {
|
||||
padding-bottom: 0;
|
||||
font-size: 1.5em;
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.3em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
margin: 1.3334em; /* 24px/18px */
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: darken($background-color, 5%);
|
||||
padding: 0 1.33334em; /* 24px/18px */
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
padding: 1.33334em 0; /* 24px/18px */
|
||||
}
|
||||
font-style: italic;
|
||||
margin: 1.5em; /* 24px/18px */
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: darken($background-color, 5%);
|
||||
padding: 0 1.5em; /* 24px/18px */
|
||||
p, ul, ol {
|
||||
padding: 1.5em 0; /* 24px/18px */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 520px) { //Breakpoint set to 940px
|
||||
|
||||
p, ul, ol {
|
||||
font-size: 20px;
|
||||
line-height: 1.7em; /* 24px/16px */
|
||||
margin-bottom: 1.5em; /* 24px/16px */
|
||||
}
|
||||
|
||||
h3, h5 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.hted-head th {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*- Typography for big screen, based on 18px font-size -*/
|
||||
|
||||
@media (min-width: 940px) { //Breakpoint set to 940px
|
||||
|
||||
p, ul, ol {
|
||||
font-size: 1em; /* 18px */
|
||||
line-height: 1.7em; /* 24px/18px */
|
||||
margin-bottom: 1.3334em; /* 24px/18px */
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.6667em; /* 48px/18px */
|
||||
line-height: 1em; /* 48px/48px */
|
||||
padding: 0.25em 0; /* 12px/48px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em; /* 36px/18px */
|
||||
line-height: 1.7em; /* 48px/36px */
|
||||
padding: 0.66667em 0 0 0; /* 12px/36px * 2, pnly top (Use padding instead of margin to maintain proximity with paragraph) */
|
||||
}
|
||||
|
||||
h3, h4, h5, h6 {
|
||||
font-size: 1.7em; /* 24px/18px */
|
||||
line-height: 1.7em; /* 24px/24px */
|
||||
padding: 0.5em 0; /* 12px/24px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
||||
}
|
||||
|
||||
h5 {
|
||||
padding-bottom: 0;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
margin: 1.3334em; /* 24px/18px */
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: darken($background-color, 5%);
|
||||
padding: 0 1.33334em; /* 24px/18px */
|
||||
p, ul, ol {
|
||||
padding: 1.33334em 0; /* 24px/18px */
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue