mirror of
https://github.com/rottenwheel/revuo-weekly.git
synced 2024-12-25 07:29:23 -05:00
Merge pull request #32 from recanman/recanman/patch2
fix theme switcher position on mobile
This commit is contained in:
commit
5e41a540a6
54
Gemfile.lock
54
Gemfile.lock
@ -1,64 +1,68 @@
|
|||||||
GEM
|
GEM
|
||||||
remote: https://rubygems.org/
|
remote: https://rubygems.org/
|
||||||
specs:
|
specs:
|
||||||
addressable (2.8.0)
|
addressable (2.8.6)
|
||||||
public_suffix (>= 2.0.2, < 5.0)
|
public_suffix (>= 2.0.2, < 6.0)
|
||||||
colorator (1.1.0)
|
colorator (1.1.0)
|
||||||
concurrent-ruby (1.1.9)
|
concurrent-ruby (1.2.2)
|
||||||
em-websocket (0.5.3)
|
em-websocket (0.5.3)
|
||||||
eventmachine (>= 0.12.9)
|
eventmachine (>= 0.12.9)
|
||||||
http_parser.rb (~> 0)
|
http_parser.rb (~> 0)
|
||||||
eventmachine (1.2.7)
|
eventmachine (1.2.7)
|
||||||
ffi (1.15.5)
|
ffi (1.16.3)
|
||||||
forwardable-extended (2.6.0)
|
forwardable-extended (2.6.0)
|
||||||
|
google-protobuf (3.25.2)
|
||||||
http_parser.rb (0.8.0)
|
http_parser.rb (0.8.0)
|
||||||
i18n (1.10.0)
|
i18n (1.14.1)
|
||||||
concurrent-ruby (~> 1.0)
|
concurrent-ruby (~> 1.0)
|
||||||
jekyll (4.2.1)
|
jekyll (4.3.3)
|
||||||
addressable (~> 2.4)
|
addressable (~> 2.4)
|
||||||
colorator (~> 1.0)
|
colorator (~> 1.0)
|
||||||
em-websocket (~> 0.5)
|
em-websocket (~> 0.5)
|
||||||
i18n (~> 1.0)
|
i18n (~> 1.0)
|
||||||
jekyll-sass-converter (~> 2.0)
|
jekyll-sass-converter (>= 2.0, < 4.0)
|
||||||
jekyll-watch (~> 2.0)
|
jekyll-watch (~> 2.0)
|
||||||
kramdown (~> 2.3)
|
kramdown (~> 2.3, >= 2.3.1)
|
||||||
kramdown-parser-gfm (~> 1.0)
|
kramdown-parser-gfm (~> 1.0)
|
||||||
liquid (~> 4.0)
|
liquid (~> 4.0)
|
||||||
mercenary (~> 0.4.0)
|
mercenary (>= 0.3.6, < 0.5)
|
||||||
pathutil (~> 0.9)
|
pathutil (~> 0.9)
|
||||||
rouge (~> 3.0)
|
rouge (>= 3.0, < 5.0)
|
||||||
safe_yaml (~> 1.0)
|
safe_yaml (~> 1.0)
|
||||||
terminal-table (~> 2.0)
|
terminal-table (>= 1.8, < 4.0)
|
||||||
|
webrick (~> 1.7)
|
||||||
jekyll-feed (0.16.0)
|
jekyll-feed (0.16.0)
|
||||||
jekyll (>= 3.7, < 5.0)
|
jekyll (>= 3.7, < 5.0)
|
||||||
jekyll-paginate (1.1.0)
|
jekyll-paginate (1.1.0)
|
||||||
jekyll-sass-converter (2.1.0)
|
jekyll-sass-converter (3.0.0)
|
||||||
sassc (> 2.0.1, < 3.0)
|
sass-embedded (~> 1.54)
|
||||||
jekyll-watch (2.2.1)
|
jekyll-watch (2.2.1)
|
||||||
listen (~> 3.0)
|
listen (~> 3.0)
|
||||||
kramdown (2.3.1)
|
kramdown (2.4.0)
|
||||||
rexml
|
rexml
|
||||||
kramdown-parser-gfm (1.1.0)
|
kramdown-parser-gfm (1.1.0)
|
||||||
kramdown (~> 2.0)
|
kramdown (~> 2.0)
|
||||||
liquid (4.0.3)
|
liquid (4.0.4)
|
||||||
listen (3.7.1)
|
listen (3.8.0)
|
||||||
rb-fsevent (~> 0.10, >= 0.10.3)
|
rb-fsevent (~> 0.10, >= 0.10.3)
|
||||||
rb-inotify (~> 0.9, >= 0.9.10)
|
rb-inotify (~> 0.9, >= 0.9.10)
|
||||||
mercenary (0.4.0)
|
mercenary (0.4.0)
|
||||||
pathutil (0.16.2)
|
pathutil (0.16.2)
|
||||||
forwardable-extended (~> 2.6)
|
forwardable-extended (~> 2.6)
|
||||||
public_suffix (4.0.6)
|
public_suffix (5.0.4)
|
||||||
rb-fsevent (0.11.1)
|
rake (13.1.0)
|
||||||
|
rb-fsevent (0.11.2)
|
||||||
rb-inotify (0.10.1)
|
rb-inotify (0.10.1)
|
||||||
ffi (~> 1.0)
|
ffi (~> 1.0)
|
||||||
rexml (3.2.5)
|
rexml (3.2.6)
|
||||||
rouge (3.28.0)
|
rouge (4.2.0)
|
||||||
safe_yaml (1.0.5)
|
safe_yaml (1.0.5)
|
||||||
sassc (2.4.0)
|
sass-embedded (1.69.7)
|
||||||
ffi (~> 1.9)
|
google-protobuf (~> 3.25)
|
||||||
terminal-table (2.0.0)
|
rake (>= 13.0.0)
|
||||||
unicode-display_width (~> 1.1, >= 1.1.1)
|
terminal-table (3.0.2)
|
||||||
unicode-display_width (1.8.0)
|
unicode-display_width (>= 1.1.1, < 3)
|
||||||
|
unicode-display_width (2.5.0)
|
||||||
webrick (1.7.0)
|
webrick (1.7.0)
|
||||||
|
|
||||||
PLATFORMS
|
PLATFORMS
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<nav {% if site.reverse == true %}id="nav-left"{% else %}id="nav"{% endif %}>
|
<nav {% if site.reverse == true %}id="nav-left"{% else %}id="nav"{% endif %}>
|
||||||
<div id="nav-list">
|
<div id="nav-list">
|
||||||
<div class="nav-actions">
|
<div id="nav-actions-container" class="nav-actions">
|
||||||
<a class="icon" href="/support/" target="_blank"><img src="/img/donate.png" alt="Donate" title="Donate" /></a>
|
<a class="icon" href="https://revuo-xmr.com/support/" target="_blank"><img src="/img/donate.png" alt="Donate" title="Donate" /></a>
|
||||||
<a class="icon" href="/atom.xml" target="_blank"><img src="/img/rss_1.png" alt="ATOM Feed" title="ATOM Feed" /></a>
|
<a class="icon" href="/atom.xml" target="_blank"><img src="/img/rss_1.png" alt="ATOM Feed" title="ATOM Feed" /></a>
|
||||||
</div>
|
</div>
|
||||||
<a href="{{ site.baseurl }}">Revuo Weekly</a>
|
<a href="{{ site.baseurl }}">Revuo Weekly</a>
|
||||||
|
@ -5,15 +5,27 @@
|
|||||||
/*- Base reset -*/
|
/*- Base reset -*/
|
||||||
|
|
||||||
* {
|
* {
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, img {
|
html,
|
||||||
margin: 0;
|
body,
|
||||||
padding: 0;
|
h1,
|
||||||
border: 0;
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
ul,
|
||||||
|
ol,
|
||||||
|
li,
|
||||||
|
img {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*- Base color -*/
|
/*- Base color -*/
|
||||||
@ -25,36 +37,39 @@ $text-color: #888888;
|
|||||||
/*- Base settings -*/
|
/*- Base settings -*/
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background-color: $background-color;
|
background-color: $background-color;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
@media (min-width: 940px) {
|
|
||||||
font-size: 18px;
|
@media (min-width: 940px) {
|
||||||
}
|
font-size: 18px;
|
||||||
line-height: 1.5;
|
}
|
||||||
color: $text-color;
|
|
||||||
|
line-height: 1.5;
|
||||||
|
color: $text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*- Link -*/
|
/*- Link -*/
|
||||||
a {
|
a {
|
||||||
color: $main-color;
|
color: $main-color;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
border-bottom: 2px dotted #6a6d72;
|
border-bottom: 2px dotted #6a6d72;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
-webkit-transition: all .3s ease;
|
-webkit-transition: all .3s ease;
|
||||||
-moz-transition: all .3s ease;
|
-moz-transition: all .3s ease;
|
||||||
-ms-transition: all .3s ease;
|
-ms-transition: all .3s ease;
|
||||||
-o-transition: all .3s ease;
|
-o-transition: all .3s ease;
|
||||||
transition: all .3s ease;
|
transition: all .3s ease;
|
||||||
&:hover,
|
|
||||||
&:focus {
|
&:hover,
|
||||||
color: #999999;
|
&:focus {
|
||||||
|
color: #999999;
|
||||||
border-bottom: 2px dotted #333333;
|
border-bottom: 2px dotted #333333;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a#nav-menu {
|
a#nav-menu {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
@ -29,109 +29,122 @@ p.table-title {
|
|||||||
padding-top: 0.5em;
|
padding-top: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-table, .moneroversary-table {
|
.price-table,
|
||||||
margin: 0 0 1.3334rem 0;
|
.moneroversary-table {
|
||||||
width: 100%; // adjust to your needs
|
margin: 0 0 1.3334rem 0;
|
||||||
background: #45494f;
|
width: 100%; // adjust to your needs
|
||||||
color: #efefef;
|
background: #45494f;
|
||||||
border-radius: 2px;
|
color: #efefef;
|
||||||
overflow: hidden;
|
border-radius: 2px;
|
||||||
border-spacing: 0;
|
overflow: hidden;
|
||||||
background-color: var(--block-bg-color);
|
border-spacing: 0;
|
||||||
@media (min-width: $breakpoint-alpha) {
|
background-color: var(--block-bg-color);
|
||||||
color: #45494f;
|
|
||||||
tr.row3 {
|
@media (min-width: $breakpoint-alpha) {
|
||||||
background-color: var(--blog-bg-color-secondary);
|
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
padding-top: .5em;
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
padding-bottom: .5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
tr {
|
||||||
content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
|
border-top: 2px solid #fff;
|
||||||
font-weight: bold;
|
border-bottom: 2px solid #fff;
|
||||||
|
}
|
||||||
|
|
||||||
// optional stuff to make it look nicer
|
|
||||||
width: 6.5em; // magic number :( adjust according to your own content
|
|
||||||
display: inline-block;
|
tr.row1 {
|
||||||
// end options
|
background-color: var(--block-bg-color-heading);
|
||||||
|
}
|
||||||
@media (min-width: $breakpoint-alpha) {
|
|
||||||
|
th {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
text-align: left;
|
|
||||||
margin: .5em 1em;
|
|
||||||
@media (min-width: $breakpoint-alpha) {
|
|
||||||
display: table-cell;
|
|
||||||
padding: .25em .5em;
|
|
||||||
padding: 1em !important;
|
|
||||||
&:first-child {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
td {
|
||||||
|
display: block;
|
||||||
th, td:before {
|
|
||||||
color: var(--link-color);
|
&:first-child {
|
||||||
}
|
padding-top: .5em;
|
||||||
|
}
|
||||||
td.green {
|
|
||||||
color: #66d166;
|
&:last-child {
|
||||||
@media (min-width: $breakpoint-alpha) {
|
padding-bottom: .5em;
|
||||||
color: #51a751;
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
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.red {
|
td {
|
||||||
color: #e36f6e;
|
text-align: left;
|
||||||
@media (min-width: $breakpoint-alpha) {
|
margin: .5em 1em;
|
||||||
color: #d83231;
|
|
||||||
|
@media (min-width: $breakpoint-alpha) {
|
||||||
|
display: table-cell;
|
||||||
|
padding: .25em .5em;
|
||||||
|
padding: 1em !important;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
th,
|
||||||
|
td:before {
|
||||||
|
color: var(--link-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
td.green {
|
||||||
|
color: #66d166;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-alpha) {
|
||||||
|
color: #51a751;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td.red {
|
||||||
|
color: #e36f6e;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-alpha) {
|
||||||
|
color: #d83231;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.moneroversary-table {
|
.moneroversary-table {
|
||||||
margin: 1.3334rem 0 1.3334rem 0;
|
margin: 1.3334rem 0 1.3334rem 0;
|
||||||
|
|
||||||
@media (max-width: $breakpoint-alpha) {
|
@media (max-width: $breakpoint-alpha) {
|
||||||
background: #f0f0f0;
|
background: #f0f0f0;
|
||||||
color: #45494f;
|
|
||||||
}
|
|
||||||
th, td:before {
|
|
||||||
@media (max-width: $breakpoint-alpha) {
|
|
||||||
color: #45494f;
|
color: #45494f;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td:before {
|
||||||
|
@media (max-width: $breakpoint-alpha) {
|
||||||
|
color: #45494f;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -153,17 +166,20 @@ p.table-title {
|
|||||||
background-color: #db8b55;
|
background-color: #db8b55;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content ul, .content ol {
|
.content ul,
|
||||||
|
.content ol {
|
||||||
line-height: 1.9;
|
line-height: 1.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newsbyte, .event {
|
.newsbyte,
|
||||||
|
.event {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
background-color: var(--block-bg-color);
|
background-color: var(--block-bg-color);
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newsbyte:first-of-type, .event:first-of-type {
|
.newsbyte:first-of-type,
|
||||||
|
.event:first-of-type {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -176,16 +192,19 @@ p.table-title {
|
|||||||
background-color: #d5d5d5;
|
background-color: #d5d5d5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newsbyte h4, h4.stat {
|
.newsbyte h4,
|
||||||
|
h4.stat {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.newsbyte p, .event p {
|
.newsbyte p,
|
||||||
|
.event p {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -266,7 +285,8 @@ img.fob-img {
|
|||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
width: 8rem;
|
width: 8rem;
|
||||||
background-color: rgba(0, 0, 0, 0.75);;
|
background-color: rgba(0, 0, 0, 0.75);
|
||||||
|
;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -285,7 +305,8 @@ p.text-lead {
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#post-page img.img-lead, #post-page p.text-lead {
|
#post-page img.img-lead,
|
||||||
|
#post-page p.text-lead {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -299,19 +320,19 @@ img.localmonero {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sponsors {
|
.sponsors {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-ms-flex: 0 1 auto;
|
-ms-flex: 0 1 auto;
|
||||||
flex: 0 1 auto;
|
flex: 0 1 auto;
|
||||||
-webkit-box-orient: horizontal;
|
-webkit-box-orient: horizontal;
|
||||||
-webkit-box-direction: normal;
|
-webkit-box-direction: normal;
|
||||||
-ms-flex-direction: row;
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
-ms-flex-wrap: wrap;
|
-ms-flex-wrap: wrap;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
-ms-flex-pack: center;
|
-ms-flex-pack: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -324,6 +345,7 @@ img.localmonero {
|
|||||||
-ms-flex: 0 0 auto;
|
-ms-flex: 0 0 auto;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
flex-basis: auto;
|
flex-basis: auto;
|
||||||
|
|
||||||
@media (max-width: 520px) {
|
@media (max-width: 520px) {
|
||||||
-ms-flex-preferred-size: 100%;
|
-ms-flex-preferred-size: 100%;
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
@ -334,6 +356,7 @@ img.localmonero {
|
|||||||
img.dvchain {
|
img.dvchain {
|
||||||
height: 9rem;
|
height: 9rem;
|
||||||
margin-left: 3rem;
|
margin-left: 3rem;
|
||||||
|
|
||||||
@media (max-width: 520px) {
|
@media (max-width: 520px) {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
@ -353,7 +376,9 @@ img.dvchain {
|
|||||||
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 {
|
#periodical .revuo-classes a.pd,
|
||||||
|
#wrap.periodical .revuo-classes a.pd:active,
|
||||||
|
#wrap.periodical .revuo-classes a.pd:focus {
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -385,4 +410,4 @@ img.dvchain {
|
|||||||
|
|
||||||
html {
|
html {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
@ -1,13 +1,15 @@
|
|||||||
/* -- General Layout -- */
|
/* -- General Layout -- */
|
||||||
|
|
||||||
/* Required for footer to stick to the bottom */
|
/* Required for footer to stick to the bottom */
|
||||||
html, body {
|
html,
|
||||||
height: 100%;
|
body {
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navigation */
|
/* Navigation */
|
||||||
|
|
||||||
#nav, #nav-left {
|
#nav,
|
||||||
|
#nav-left {
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
color: $background-color;
|
color: $background-color;
|
||||||
@ -15,16 +17,19 @@ html, body {
|
|||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
|
||||||
@media (min-width: 940px) {
|
@media (min-width: 940px) {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($main-color, 5%);
|
background-color: lighten($main-color, 5%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav {
|
#nav {
|
||||||
@ -53,16 +58,17 @@ html, body {
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
> img {
|
|
||||||
|
>img {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Separator after menu */
|
/* Separator after menu */
|
||||||
&:after {
|
&:after {
|
||||||
display: block;
|
display: block;
|
||||||
@ -89,7 +95,9 @@ html, body {
|
|||||||
width: 1.5em;
|
width: 1.5em;
|
||||||
background-color: lighten($text-color, 35%);
|
background-color: lighten($text-color, 35%);
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
&:after, &:before {
|
|
||||||
|
&:after,
|
||||||
|
&:before {
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -98,29 +106,34 @@ html, body {
|
|||||||
background-color: lighten($text-color, 35%);
|
background-color: lighten($text-color, 35%);
|
||||||
transition: all 0.3s ease-in;
|
transition: all 0.3s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
top: -8px;
|
top: -8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
top: 4px;
|
top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-close {
|
&.btn-close {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-close:before {
|
&.btn-close:before {
|
||||||
top: 0;
|
top: 0;
|
||||||
-webkit-transform: rotate(-45deg);
|
-webkit-transform: rotate(-45deg);
|
||||||
-moz-transform: rotate(-45deg);
|
-moz-transform: rotate(-45deg);
|
||||||
-ms-transform: rotate(-45deg);
|
-ms-transform: rotate(-45deg);
|
||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
background-color: $background-color;
|
background-color: $background-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-close:after {
|
&.btn-close:after {
|
||||||
top: -4px;
|
top: -4px;
|
||||||
-webkit-transform: rotate(45deg);
|
-webkit-transform: rotate(45deg);
|
||||||
-moz-transform: rotate(45deg);
|
-moz-transform: rotate(45deg);
|
||||||
-ms-transform: rotate(45deg);
|
-ms-transform: rotate(45deg);
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
background-color: $background-color;
|
background-color: $background-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -130,73 +143,87 @@ html, body {
|
|||||||
.fixed {
|
.fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@media (min-width: 940px) {
|
@media (min-width: 940px) {
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#container {
|
#container {
|
||||||
margin:0 auto;
|
margin: 0 auto;
|
||||||
max-width: 730px;
|
max-width: 730px;
|
||||||
padding: 0 1.5rem;
|
padding: 0 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 24px 0;
|
padding: 24px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 23px;
|
margin-bottom: 23px;
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-height: 100px;
|
max-height: 100px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
@media (max-width: 940px) {
|
@media (max-width: 940px) {
|
||||||
max-height: 90px;
|
max-height: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
max-height: 60px;
|
max-height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
max-height: 50px;
|
max-height: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: 'Bebas Neue', sans-serif; //Emerald logo font
|
font-family: 'Bebas Neue', sans-serif; //Emerald logo font
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 4.5em;
|
font-size: 4.5em;
|
||||||
color: #d26e2b;
|
color: #d26e2b;
|
||||||
|
|
||||||
@media (max-width: 940px) {
|
@media (max-width: 940px) {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
font-size: 2.5em;
|
font-size: 2.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
display: none;
|
display: none;
|
||||||
content: '';
|
content: '';
|
||||||
width: 5rem;
|
width: 5rem;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
margin: 23px auto;
|
margin: 23px auto;
|
||||||
background-color: lighten($text-color, 70%);
|
background-color: lighten($text-color, 70%);
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
margin: 0.5rem auto;
|
margin: 0.5rem auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -211,32 +238,38 @@ html, body {
|
|||||||
|
|
||||||
#post-page {
|
#post-page {
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
|
|
||||||
@media (min-width: 940px) {
|
@media (min-width: 940px) {
|
||||||
margin-bottom: 1.3334em;
|
margin-bottom: 1.3334em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.post+.post:before {
|
.post+.post:before {
|
||||||
display: block;
|
display: block;
|
||||||
content: '';
|
content: '';
|
||||||
width: 5rem;
|
width: 5rem;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
margin: 23px auto;
|
margin: 23px auto;
|
||||||
background-color: lighten($background-color, 70%) !important;
|
background-color: lighten($background-color, 70%) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.by-line {
|
.by-line {
|
||||||
display: block;
|
display: block;
|
||||||
color: lighten($text-color, 25%);
|
color: lighten($text-color, 25%);
|
||||||
line-height: 1.5em; /* 24px/16px */
|
line-height: 1.5em;
|
||||||
margin-bottom: 1.5em; /* 24px/16px */
|
/* 24px/16px */
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
/* 24px/16px */
|
||||||
padding-top: 0.5em;
|
padding-top: 0.5em;
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
|
|
||||||
@media (min-width: 940px) {
|
@media (min-width: 940px) {
|
||||||
display: block;
|
display: block;
|
||||||
color: lighten($text-color, 25%);
|
color: lighten($text-color, 25%);
|
||||||
line-height: 1.3334em; /* 24px/18px */
|
line-height: 1.3334em;
|
||||||
margin-bottom: 1.3334em; /* 24px/18px */
|
/* 24px/18px */
|
||||||
|
margin-bottom: 1.3334em;
|
||||||
|
/* 24px/18px */
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -244,14 +277,18 @@ html, body {
|
|||||||
.by-line-post {
|
.by-line-post {
|
||||||
display: block;
|
display: block;
|
||||||
color: lighten($text-color, 25%);
|
color: lighten($text-color, 25%);
|
||||||
line-height: 1.5em; /* 24px/16px */
|
line-height: 1.5em;
|
||||||
|
/* 24px/16px */
|
||||||
padding-top: 0.5em;
|
padding-top: 0.5em;
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
|
|
||||||
@media (min-width: 940px) {
|
@media (min-width: 940px) {
|
||||||
display: block;
|
display: block;
|
||||||
color: lighten($text-color, 25%);
|
color: lighten($text-color, 25%);
|
||||||
line-height: 1.3334em; /* 24px/18px */
|
line-height: 1.3334em;
|
||||||
margin-bottom: 1.3334em; /* 24px/18px */
|
/* 24px/18px */
|
||||||
|
margin-bottom: 1.3334em;
|
||||||
|
/* 24px/18px */
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -262,14 +299,14 @@ img {
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
-webkit-border-radius: 4px;
|
-webkit-border-radius: 4px;
|
||||||
-moz-border-radius: 4px;
|
-moz-border-radius: 4px;
|
||||||
-ms-border-radius: 4px;
|
-ms-border-radius: 4px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
img[title="Emerald"] {
|
img[title="Emerald"] {
|
||||||
box-shadow: 0 2px 6px #ddd;
|
box-shadow: 0 2px 6px #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
color: lighten($text-color, 35%);
|
color: lighten($text-color, 35%);
|
||||||
@ -278,11 +315,15 @@ code {
|
|||||||
|
|
||||||
/* Set the vertical rhythm (and padding-left) for lists inside post content */
|
/* Set the vertical rhythm (and padding-left) for lists inside post content */
|
||||||
|
|
||||||
.content ul, .content ol {
|
.content ul,
|
||||||
line-height: 1.5em; /* 24px/16px */
|
.content ol {
|
||||||
|
line-height: 1.5em;
|
||||||
|
/* 24px/16px */
|
||||||
padding-left: 1.5em;
|
padding-left: 1.5em;
|
||||||
|
|
||||||
@media (min-width: 940px) {
|
@media (min-width: 940px) {
|
||||||
line-height: 1.33334em; /* 24px/18px */
|
line-height: 1.33334em;
|
||||||
|
/* 24px/18px */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -291,14 +332,17 @@ code {
|
|||||||
.pagination {
|
.pagination {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 2.666668em;
|
margin: 2.666668em;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
background-color: darken($background-color, 5%);
|
background-color: darken($background-color, 5%);
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
background-color: lighten($main-color, 5%);
|
background-color: lighten($main-color, 5%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-item {
|
.page-item {
|
||||||
background-color: $main-color;
|
background-color: $main-color;
|
||||||
color: $background-color;
|
color: $background-color;
|
||||||
@ -307,12 +351,15 @@ code {
|
|||||||
padding: 0.5em 1em;
|
padding: 0.5em 1em;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
-webkit-border-radius: 4px;
|
-webkit-border-radius: 4px;
|
||||||
-moz-border-radius: 4px;
|
-moz-border-radius: 4px;
|
||||||
-ms-border-radius: 4px;
|
-ms-border-radius: 4px;
|
||||||
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 */
|
/* Footer */
|
||||||
@ -325,17 +372,17 @@ footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#wrap {
|
#wrap {
|
||||||
min-height:100%;
|
min-height: 100%;
|
||||||
position:relative;
|
position: relative;
|
||||||
padding-bottom: 105px;
|
padding-bottom: 105px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
padding: 25px 0;
|
padding: 25px 0;
|
||||||
background-color: $main-color;
|
background-color: $main-color;
|
||||||
color: $background-color;
|
color: $background-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
@ -3,33 +3,35 @@
|
|||||||
// Nav menu
|
// Nav menu
|
||||||
|
|
||||||
@mixin icon-position($position) {
|
@mixin icon-position($position) {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 35px;
|
top: 35px;
|
||||||
#{$position}: 25px;
|
#{$position}: 25px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
background-color: rgba(240,240,240,.6);
|
background-color: rgba(240, 240, 240, .6);
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
top: 15px;
|
top: 15px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin open($x) {
|
@mixin open($x) {
|
||||||
-webkit-transform: translateX($x);
|
-webkit-transform: translateX($x);
|
||||||
-moz-transform: translateX($x);
|
-moz-transform: translateX($x);
|
||||||
-ms-transform: translateX($x);
|
-ms-transform: translateX($x);
|
||||||
transform: translateX($x);
|
transform: translateX($x);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@media (min-width: 940px) {
|
@media (min-width: 940px) {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin nav-position($position) {
|
@mixin nav-position($position) {
|
||||||
width: 14rem;
|
width: 14rem;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background-color: $main-color;
|
background-color: $main-color;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -38,9 +40,9 @@
|
|||||||
color: $background-color;
|
color: $background-color;
|
||||||
opacity: 0.95;
|
opacity: 0.95;
|
||||||
-webkit-transition: all 0.3s ease-in;
|
-webkit-transition: all 0.3s ease-in;
|
||||||
-moz-transition: all 0.3s ease-in;
|
-moz-transition: all 0.3s ease-in;
|
||||||
-ms-transition: all 0.3s ease-in;
|
-ms-transition: all 0.3s ease-in;
|
||||||
transition: all 0.3s ease-in;
|
transition: all 0.3s ease-in;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding: 72px 0;
|
padding: 72px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -10,4 +10,4 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -5,143 +5,198 @@
|
|||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Bebas Neue';
|
font-family: 'Bebas Neue';
|
||||||
src: url('../font/BebasNeue-Regular.woff') format('woff'), /* Pretty Modern Browsers */
|
src: url('../font/BebasNeue-Regular.woff') format('woff'),
|
||||||
}
|
/* Pretty Modern Browsers */
|
||||||
|
}
|
||||||
body {
|
|
||||||
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
body {
|
||||||
letter-spacing: 0.01em;
|
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
letter-spacing: 0.01em;
|
||||||
text-rendering: optimizeLegibility;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
/*- Typography for medium and small screen, based on 16px font-size -*/
|
|
||||||
|
/*- Typography for medium and small screen, based on 16px font-size -*/
|
||||||
p, ul, ol {
|
|
||||||
font-size: 18px;
|
p,
|
||||||
line-height: 1.7em; /* 24px/16px */
|
ul,
|
||||||
margin-bottom: 1.5em; /* 24px/16px */
|
ol {
|
||||||
}
|
font-size: 18px;
|
||||||
|
line-height: 1.7em;
|
||||||
h1 {
|
/* 24px/16px */
|
||||||
font-size: 2.25em; /* 36px/16px */
|
margin-bottom: 1.5em;
|
||||||
line-height: 1.3333em; /* 48px/36px */
|
/* 24px/16px */
|
||||||
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;
|
|
||||||
}
|
h1 {
|
||||||
|
font-size: 2.25em;
|
||||||
h2 {
|
/* 36px/16px */
|
||||||
font-size: 1.5em; /* 24px/16px */
|
line-height: 1.3333em;
|
||||||
line-height: 1.5em; /* 24px/24px */
|
/* 48px/36px */
|
||||||
padding: 1em 0 0 0; /* 12px/24px * 2, only top (Use padding instead of margin to maintain proximity with paragwithph) */
|
padding: 0.33335em 0;
|
||||||
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
/* 12px/36px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
||||||
@media (max-width: 480px) {
|
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||||
font-size: 1.6rem;
|
}
|
||||||
}
|
|
||||||
}
|
h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
h3 {
|
/* 24px/16px */
|
||||||
font-size: 1.3em; /* 18px/16px */
|
line-height: 1.5em;
|
||||||
line-height: 1.7em; /* 24px/18px */
|
/* 24px/24px */
|
||||||
padding: 0.66667em 0; /* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
padding: 1em 0 0 0;
|
||||||
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
/* 12px/24px * 2, only top (Use padding instead of margin to maintain proximity with paragwithph) */
|
||||||
}
|
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||||
|
|
||||||
.hted-head th {
|
@media (max-width: 480px) {
|
||||||
font-size: 1.1em;
|
font-size: 1.6rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
h4, h5, h6 {
|
|
||||||
font-size: 1.125em; /* 18px/16px */
|
h3 {
|
||||||
line-height: 1.7em; /* 24px/18px */
|
font-size: 1.3em;
|
||||||
padding: 0.66667em 0; /* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
/* 18px/16px */
|
||||||
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
line-height: 1.7em;
|
||||||
}
|
/* 24px/18px */
|
||||||
|
padding: 0.66667em 0;
|
||||||
h5 {
|
/* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
||||||
padding-bottom: 0.3em;
|
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||||
font-size: 1.3em;
|
}
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
.hted-head th {
|
||||||
|
font-size: 1.1em;
|
||||||
blockquote {
|
}
|
||||||
font-style: italic;
|
|
||||||
margin: 1.5em; /* 24px/18px */
|
h4,
|
||||||
-webkit-border-radius: 4px;
|
h5,
|
||||||
-moz-border-radius: 4px;
|
h6 {
|
||||||
-ms-border-radius: 4px;
|
font-size: 1.125em;
|
||||||
border-radius: 4px;
|
/* 18px/16px */
|
||||||
background-color: darken($background-color, 5%);
|
line-height: 1.7em;
|
||||||
padding: 0 1.5em; /* 24px/18px */
|
/* 24px/18px */
|
||||||
p, ul, ol {
|
padding: 0.66667em 0;
|
||||||
padding: 1.5em 0; /* 24px/18px */
|
/* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
||||||
}
|
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 520px) { //Breakpoint set to 940px
|
h5 {
|
||||||
|
padding-bottom: 0.3em;
|
||||||
p, ul, ol {
|
font-size: 1.3em;
|
||||||
font-size: 20px;
|
margin-bottom: 0.5em;
|
||||||
line-height: 1.7em; /* 24px/16px */
|
}
|
||||||
margin-bottom: 1.5em; /* 24px/16px */
|
|
||||||
}
|
blockquote {
|
||||||
|
font-style: italic;
|
||||||
h3, h5 {
|
margin: 1.5em;
|
||||||
font-size: 1.5em;
|
/* 24px/18px */
|
||||||
}
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
.hted-head th {
|
-ms-border-radius: 4px;
|
||||||
font-size: 1.2em;
|
border-radius: 4px;
|
||||||
}
|
background-color: darken($background-color, 5%);
|
||||||
|
padding: 0 1.5em;
|
||||||
}
|
|
||||||
|
/* 24px/18px */
|
||||||
/*- Typography for big screen, based on 18px font-size -*/
|
p,
|
||||||
|
ul,
|
||||||
@media (min-width: 940px) { //Breakpoint set to 940px
|
ol {
|
||||||
|
padding: 1.5em 0;
|
||||||
p, ul, ol {
|
/* 24px/18px */
|
||||||
font-size: 1em; /* 18px */
|
}
|
||||||
line-height: 1.7em; /* 24px/18px */
|
}
|
||||||
margin-bottom: 1.3334em; /* 24px/18px */
|
|
||||||
}
|
@media (min-width: 520px) {
|
||||||
|
//Breakpoint set to 940px
|
||||||
h1 {
|
|
||||||
font-size: 2.6667em; /* 48px/18px */
|
p,
|
||||||
line-height: 1em; /* 48px/48px */
|
ul,
|
||||||
padding: 0.25em 0; /* 12px/48px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
ol {
|
||||||
}
|
font-size: 20px;
|
||||||
|
line-height: 1.7em;
|
||||||
h2 {
|
/* 24px/16px */
|
||||||
font-size: 2em; /* 36px/18px */
|
margin-bottom: 1.5em;
|
||||||
line-height: 1.7em; /* 48px/36px */
|
/* 24px/16px */
|
||||||
padding: 0.66667em 0 0 0; /* 12px/36px * 2, pnly top (Use padding instead of margin to maintain proximity with paragraph) */
|
}
|
||||||
}
|
|
||||||
|
h3,
|
||||||
h3, h4, h5, h6 {
|
h5 {
|
||||||
font-size: 1.7em; /* 24px/18px */
|
font-size: 1.5em;
|
||||||
line-height: 1.7em; /* 24px/24px */
|
}
|
||||||
padding: 0.5em 0; /* 12px/24px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
|
|
||||||
}
|
.hted-head th {
|
||||||
|
font-size: 1.2em;
|
||||||
h5 {
|
}
|
||||||
padding-bottom: 0;
|
|
||||||
font-size: 1.5em;
|
}
|
||||||
}
|
|
||||||
|
/*- Typography for big screen, based on 18px font-size -*/
|
||||||
blockquote {
|
|
||||||
font-style: italic;
|
@media (min-width: 940px) {
|
||||||
margin: 1.3334em; /* 24px/18px */
|
//Breakpoint set to 940px
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
-moz-border-radius: 4px;
|
p,
|
||||||
-ms-border-radius: 4px;
|
ul,
|
||||||
border-radius: 4px;
|
ol {
|
||||||
background-color: darken($background-color, 5%);
|
font-size: 1em;
|
||||||
padding: 0 1.33334em; /* 24px/18px */
|
/* 18px */
|
||||||
p, ul, ol {
|
line-height: 1.7em;
|
||||||
padding: 1.33334em 0; /* 24px/18px */
|
/* 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 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
107
css/main.scss
107
css/main.scss
@ -5,53 +5,22 @@
|
|||||||
//Import
|
//Import
|
||||||
@import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss", "responsive.scss";
|
@import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss", "responsive.scss";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/////////////////////////////////////////
|
|
||||||
/////////////////////////////////////////
|
|
||||||
/////////////////////////////////////////
|
|
||||||
//////////// LIGHT THEME ////////////////
|
|
||||||
/////////////////////////////////////////
|
|
||||||
/////////////////////////////////////////
|
|
||||||
/////////////////////////////////////////
|
|
||||||
|
|
||||||
//html {
|
|
||||||
//background-color: #0f0f0f;
|
|
||||||
////background-color: #f0f0f0;
|
|
||||||
|
|
||||||
//html {
|
|
||||||
//[>background-color: #0f0f0f;<]
|
|
||||||
////background-color: #f0f0f0;
|
|
||||||
//background-color: lightblue;
|
|
||||||
//}
|
|
||||||
|
|
||||||
|
|
||||||
////body {
|
|
||||||
//////background-color: #f0f0f0;
|
|
||||||
////background-color: #0f0f0f;
|
|
||||||
|
|
||||||
//body {
|
|
||||||
//[>background-color: #0f0f0f;<]
|
|
||||||
////background-color: #f0f0f0;
|
|
||||||
//background-color: lightblue;
|
|
||||||
//}
|
|
||||||
|
|
||||||
// Default Style (Dark)
|
// Default Style (Dark)
|
||||||
:root {
|
:root {
|
||||||
--primary-color: #888888;
|
--primary-color: #888888;
|
||||||
--secondary-color: #666666;
|
--secondary-color: #666666;
|
||||||
--font-color: #cecece;
|
--font-color: #cecece;
|
||||||
--link-color: #e6e6e6;
|
--link-color: #e6e6e6;
|
||||||
--bg-color: #0f0f0f;
|
--bg-color: #0f0f0f;
|
||||||
--heading-color: #454545;
|
--heading-color: #454545;
|
||||||
--block-bg-color: #2f3234;
|
--block-bg-color: #2f3234;
|
||||||
--block-bg-color-secondary: #444444;
|
--block-bg-color-secondary: #444444;
|
||||||
--block-bg-color-heading: #333333;
|
--block-bg-color-heading: #333333;
|
||||||
--table-color: #cecece;
|
--table-color: #cecece;
|
||||||
--head-nav-bg-color: transparent;
|
--head-nav-bg-color: transparent;
|
||||||
--head-nav-text-color: #d56f2a;
|
--head-nav-text-color: #d56f2a;
|
||||||
--menu-color: #e1e1e1;
|
--menu-color: #e1e1e1;
|
||||||
--license-color: #666666;
|
--license-color: #666666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nojs-toggle {
|
.nojs-toggle {
|
||||||
@ -68,7 +37,7 @@
|
|||||||
transition: all .3s ease;
|
transition: all .3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-switcher:checked ~ * {
|
#theme-switcher:checked~* {
|
||||||
--primary-color: #666666;
|
--primary-color: #666666;
|
||||||
--secondary-color: #555555;
|
--secondary-color: #555555;
|
||||||
--font-color: #555555;
|
--font-color: #555555;
|
||||||
@ -78,18 +47,18 @@
|
|||||||
--block-bg-color: #d7d7d7;
|
--block-bg-color: #d7d7d7;
|
||||||
--block-bg-color-secondary: #c0c0c0;
|
--block-bg-color-secondary: #c0c0c0;
|
||||||
--block-bg-color-heading: #a5a5a5;
|
--block-bg-color-heading: #a5a5a5;
|
||||||
--table-color: #000000;
|
--table-color: #000000;
|
||||||
--head-nav-bg-color: transparent;
|
--head-nav-bg-color: transparent;
|
||||||
--head-nav-text-color: #d56f2a;
|
--head-nav-text-color: #d56f2a;
|
||||||
--menu-color: #202225;
|
--menu-color: #202225;
|
||||||
--license-color: #666666;
|
--license-color: #666666;
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-switcher:checked ~ .switch .slider {
|
#theme-switcher:checked~.switch .slider {
|
||||||
background-color: #d56f2a;
|
background-color: #d56f2a;
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-switcher:checked ~ .switch .slider::before {
|
#theme-switcher:checked~.switch .slider::before {
|
||||||
-webkit-transform: translateX(26px);
|
-webkit-transform: translateX(26px);
|
||||||
-moz-transform: translateX(26px);
|
-moz-transform: translateX(26px);
|
||||||
-ms-transform: translateX(26px);
|
-ms-transform: translateX(26px);
|
||||||
@ -102,10 +71,11 @@
|
|||||||
right: 10px;
|
right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// END theme switcher
|
// END theme switcher
|
||||||
|
|
||||||
// BEGIN menu toggle
|
// BEGIN menu toggle
|
||||||
#menu-toggle:checked ~ #nav {
|
#menu-toggle:checked~#nav {
|
||||||
-webkit-transform: translateX(-14rem);
|
-webkit-transform: translateX(-14rem);
|
||||||
-moz-transform: translateX(-14rem);
|
-moz-transform: translateX(-14rem);
|
||||||
-ms-transform: translateX(-14rem);
|
-ms-transform: translateX(-14rem);
|
||||||
@ -113,12 +83,12 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu-toggle:checked ~ .menu-toggle #menu {
|
#menu-toggle:checked~.menu-toggle #menu {
|
||||||
background: none;
|
background: none;
|
||||||
transition: all 0.1s ease-in;
|
transition: all 0.1s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu-toggle:checked ~ .menu-toggle #menu::before {
|
#menu-toggle:checked~.menu-toggle #menu::before {
|
||||||
top: 0;
|
top: 0;
|
||||||
-webkit-transform: rotate(-45deg);
|
-webkit-transform: rotate(-45deg);
|
||||||
-moz-transform: rotate(-45deg);
|
-moz-transform: rotate(-45deg);
|
||||||
@ -127,7 +97,7 @@
|
|||||||
background-color: #0F0F0F;
|
background-color: #0F0F0F;
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu-toggle:checked ~ .menu-toggle #menu::after {
|
#menu-toggle:checked~.menu-toggle #menu::after {
|
||||||
top: -4px;
|
top: -4px;
|
||||||
-webkit-transform: rotate(45deg);
|
-webkit-transform: rotate(45deg);
|
||||||
-moz-transform: rotate(45deg);
|
-moz-transform: rotate(45deg);
|
||||||
@ -137,10 +107,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 940px) {
|
@media (min-width: 940px) {
|
||||||
#menu-toggle:checked ~ #nav {
|
#menu-toggle:checked~#nav {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// END menu toggle
|
// END menu toggle
|
||||||
|
|
||||||
#wrap {
|
#wrap {
|
||||||
@ -149,35 +120,35 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
color: var(--secondary-color);
|
color: var(--secondary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--link-color);
|
color: var(--link-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.moneroversary-table,
|
.moneroversary-table,
|
||||||
.price-table {
|
.price-table {
|
||||||
color: var(--table-color);
|
color: var(--table-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#weekly .revuo-classes a.wk,
|
#weekly .revuo-classes a.wk,
|
||||||
#periodical .revuo-classes a.pd,
|
#periodical .revuo-classes a.pd,
|
||||||
#wrap.periodical .revuo-classes a.pd:active,
|
#wrap.periodical .revuo-classes a.pd:active,
|
||||||
#wrap.periodical .revuo-classes a.pd:focus {
|
#wrap.periodical .revuo-classes a.pd:focus {
|
||||||
background-color: var(--head-nav-bg-color);
|
background-color: var(--head-nav-bg-color);
|
||||||
color: var(--head-nav-text-color);
|
color: var(--head-nav-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
time.by-line,
|
time.by-line,
|
||||||
p.by-line-post {
|
p.by-line-post {
|
||||||
color: var(--table-color);
|
color: var(--table-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu,
|
#menu,
|
||||||
#menu::after,
|
#menu::after,
|
||||||
#menu::before {
|
#menu::before {
|
||||||
background-color: var(--menu-color);
|
background-color: var(--menu-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#header .action-container {
|
#header .action-container {
|
||||||
@ -200,8 +171,10 @@ p.by-line-post {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
a.rss, a.donate {
|
|
||||||
|
a.rss,
|
||||||
|
a.donate {
|
||||||
display: block;
|
display: block;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
66
js/main.js
66
js/main.js
@ -1,3 +1,7 @@
|
|||||||
|
// @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
|
||||||
|
// The above is a GNU LibreJS specific license declaration. The Expat license is the same as the MIT license.
|
||||||
|
// See: https://www.gnu.org/software/librejs/free-your-javascript.html#magnet-link-license
|
||||||
|
|
||||||
// Saves themes in-between pages to LocalStorage.
|
// Saves themes in-between pages to LocalStorage.
|
||||||
const themeSwitcher = document.getElementById('theme-switcher');
|
const themeSwitcher = document.getElementById('theme-switcher');
|
||||||
|
|
||||||
@ -11,4 +15,64 @@ if (document.addEventListener) {
|
|||||||
themeSwitcher.attachEvent('onclick', setTheme);
|
themeSwitcher.attachEvent('onclick', setTheme);
|
||||||
}
|
}
|
||||||
|
|
||||||
checkTheme()
|
checkTheme()
|
||||||
|
|
||||||
|
// Make the theme switcher in the hamburger menu on mobile devices work.
|
||||||
|
if (document.body.clientWidth < 940) {
|
||||||
|
const themeSwitcherLabel = document.getElementById('main-theme-switcher');
|
||||||
|
const navActionsContainer = document.getElementById('nav-actions-container');
|
||||||
|
|
||||||
|
// Move the theme switcher to inside the hamburger menu.
|
||||||
|
navActionsContainer.appendChild(themeSwitcher);
|
||||||
|
navActionsContainer.appendChild(themeSwitcherLabel);
|
||||||
|
|
||||||
|
themeSwitcherLabel.style.top = '';
|
||||||
|
themeSwitcherLabel.style.left = '42vw';
|
||||||
|
|
||||||
|
const themeVariables = [
|
||||||
|
// Light theme
|
||||||
|
[
|
||||||
|
{ name: 'primary-color', value: '#666666' },
|
||||||
|
{ name: 'secondary-color', value: '#555555' },
|
||||||
|
{ name: 'font-color', value: '#555555' },
|
||||||
|
{ name: 'link-color', value: '#444444' },
|
||||||
|
{ name: 'bg-color', value: '#f0f0f0' },
|
||||||
|
{ name: 'heading-color', value: '#666666' },
|
||||||
|
{ name: 'block-bg-color', value: '#d7d7d7' },
|
||||||
|
{ name: 'block-bg-color-secondary', value: '#c0c0c0' },
|
||||||
|
{ name: 'block-bg-color-heading', value: '#a5a5a5' },
|
||||||
|
{ name: 'table-color', value: '#000000' },
|
||||||
|
{ name: 'head-nav-bg-color', value: 'transparent' },
|
||||||
|
{ name: 'head-nav-text-color', value: '#d56f2a' },
|
||||||
|
{ name: 'menu-color', value: '#202225' },
|
||||||
|
{ name: 'license-color', value: '#666666' },
|
||||||
|
],
|
||||||
|
|
||||||
|
// Dark theme
|
||||||
|
[
|
||||||
|
{ name: 'primary-color', value: '#888888' },
|
||||||
|
{ name: 'secondary-color', value: '#666666' },
|
||||||
|
{ name: 'font-color', value: '#cecece' },
|
||||||
|
{ name: 'link-color', value: '#e6e6e6' },
|
||||||
|
{ name: 'bg-color', value: '#0f0f0f' },
|
||||||
|
{ name: 'heading-color', value: '#454545' },
|
||||||
|
{ name: 'block-bg-color', value: '#2f3234' },
|
||||||
|
{ name: 'block-bg-color-secondary', value: '#444444' },
|
||||||
|
{ name: 'block-bg-color-heading', value: '#333333' },
|
||||||
|
{ name: 'table-color', value: '#cecece' },
|
||||||
|
{ name: 'head-nav-bg-color', value: 'transparent' },
|
||||||
|
{ name: 'head-nav-text-color', value: '#d56f2a' },
|
||||||
|
{ name: 'menu-color', value: '#e1e1e1' },
|
||||||
|
{ name: 'license-color', value: '#666666' },
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
// Switch the theme when the theme switcher is clicked.
|
||||||
|
themeSwitcher.addEventListener('change', () => {
|
||||||
|
const theme = themeVariables[themeSwitcher.checked ? 1 : 0];
|
||||||
|
|
||||||
|
theme.forEach(variable => {
|
||||||
|
document.documentElement.style.setProperty(`--${variable.name}`, variable.value);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user