rottenwheel/revuo-weekly
1
0
Fork 0
mirror of https://github.com/rottenwheel/revuo-weekly.git synced 2024-11-25 20:43:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #32 from recanman/recanman/patch2

Browse Source 
fix theme switcher position on mobile
This commit is contained in:
rottenwheel 2024-01-23 01:35:22 +00:00 committed by GitHub
commit 5e41a540a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 644 additions and 459 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
Gemfile.lock
View File

@ -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

4
_includes/menu.html
View File

@ -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>

65
_sass/base.scss
View File

@ -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,34 +37,37 @@ $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 {

231
_sass/custom.scss
View File

@ -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 {
background-color: var(--blog-bg-color-secondary);
}
}
tr { @media (min-width: $breakpoint-alpha) {
border-top: 2px solid #fff; color: #45494f;
border-bottom: 2px solid #fff;
}
tr.row3 {
background-color: var(--blog-bg-color-secondary);
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;
// end options
@media (min-width: $breakpoint-alpha) {
tr.row1 {
background-color: var(--block-bg-color-heading);
}
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 { &:first-child {
color: var(--link-color); padding-top: .5em;
} }
td.green { &:last-child {
color: #66d166; padding-bottom: .5em;
@media (min-width: $breakpoint-alpha) { }
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;
}
}
} }
}
td.red { th,
color: #e36f6e; td {
@media (min-width: $breakpoint-alpha) { text-align: left;
color: #d83231; 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;
}
}
}
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;
} }

189
_sass/layout.scss
View File

@ -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 {
@ -56,7 +61,8 @@ html, body {
.icon { .icon {
padding: 0; padding: 0;
> img {
>img {
margin-bottom: 0; margin-bottom: 0;
} }
} }
@ -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;
} }

26
_sass/mixin.scss
View File

@ -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;

285
_sass/typography.scss
View File

@ -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 { body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
letter-spacing: 0.01em; letter-spacing: 0.01em;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; 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 { p,
font-size: 18px; ul,
line-height: 1.7em; /* 24px/16px */ ol {
margin-bottom: 1.5em; /* 24px/16px */ font-size: 18px;
} line-height: 1.7em;
/* 24px/16px */
margin-bottom: 1.5em;
/* 24px/16px */
}
h1 { h1 {
font-size: 2.25em; /* 36px/16px */ font-size: 2.25em;
line-height: 1.3333em; /* 48px/36px */ /* 36px/16px */
padding: 0.33335em 0; /* 12px/36px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ line-height: 1.3333em;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; /* 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 { h2 {
font-size: 1.5em; /* 24px/16px */ font-size: 1.5em;
line-height: 1.5em; /* 24px/24px */ /* 24px/16px */
padding: 1em 0 0 0; /* 12px/24px * 2, only top (Use padding instead of margin to maintain proximity with paragwithph) */ line-height: 1.5em;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; /* 24px/24px */
@media (max-width: 480px) { padding: 1em 0 0 0;
font-size: 1.6rem; /* 12px/24px * 2, only top (Use padding instead of margin to maintain proximity with paragwithph) */
} font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
h3 { @media (max-width: 480px) {
font-size: 1.3em; /* 18px/16px */ font-size: 1.6rem;
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 { h3 {
font-size: 1.1em; 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;
}
h4, h5, h6 { .hted-head th {
font-size: 1.125em; /* 18px/16px */ font-size: 1.1em;
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 { h4,
padding-bottom: 0.3em; h5,
font-size: 1.3em; h6 {
margin-bottom: 0.5em; 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;
}
blockquote { h5 {
font-style: italic; padding-bottom: 0.3em;
margin: 1.5em; /* 24px/18px */ font-size: 1.3em;
-webkit-border-radius: 4px; margin-bottom: 0.5em;
-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 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;
p, ul, ol { /* 24px/18px */
font-size: 20px; p,
line-height: 1.7em; /* 24px/16px */ ul,
margin-bottom: 1.5em; /* 24px/16px */ ol {
} padding: 1.5em 0;
/* 24px/18px */
}
}
h3, h5 { @media (min-width: 520px) {
font-size: 1.5em; //Breakpoint set to 940px
}
.hted-head th { p,
font-size: 1.2em; ul,
} ol {
font-size: 20px;
line-height: 1.7em;
/* 24px/16px */
margin-bottom: 1.5em;
/* 24px/16px */
}
} h3,
h5 {
font-size: 1.5em;
}
/*- Typography for big screen, based on 18px font-size -*/ .hted-head th {
font-size: 1.2em;
}
@media (min-width: 940px) { //Breakpoint set to 940px }
p, ul, ol { /*- Typography for big screen, based on 18px font-size -*/
font-size: 1em; /* 18px */
line-height: 1.7em; /* 24px/18px */
margin-bottom: 1.3334em; /* 24px/18px */
}
h1 { @media (min-width: 940px) {
font-size: 2.6667em; /* 48px/18px */ //Breakpoint set to 940px
line-height: 1em; /* 48px/48px */
padding: 0.25em 0; /* 12px/48px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
}
h2 { p,
font-size: 2em; /* 36px/18px */ ul,
line-height: 1.7em; /* 48px/36px */ ol {
padding: 0.66667em 0 0 0; /* 12px/36px * 2, pnly top (Use padding instead of margin to maintain proximity with paragraph) */ font-size: 1em;
} /* 18px */
line-height: 1.7em;
/* 24px/18px */
margin-bottom: 1.3334em;
/* 24px/18px */
}
h3, h4, h5, h6 { h1 {
font-size: 1.7em; /* 24px/18px */ font-size: 2.6667em;
line-height: 1.7em; /* 24px/24px */ /* 48px/18px */
padding: 0.5em 0; /* 12px/24px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ line-height: 1em;
} /* 48px/48px */
padding: 0.25em 0;
/* 12px/48px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
}
h5 { h2 {
padding-bottom: 0; font-size: 2em;
font-size: 1.5em; /* 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) */
}
blockquote { h3,
font-style: italic; h4,
margin: 1.3334em; /* 24px/18px */ h5,
-webkit-border-radius: 4px; h6 {
-moz-border-radius: 4px; font-size: 1.7em;
-ms-border-radius: 4px; /* 24px/18px */
border-radius: 4px; line-height: 1.7em;
background-color: darken($background-color, 5%); /* 24px/24px */
padding: 0 1.33334em; /* 24px/18px */ padding: 0.5em 0;
p, ul, ol { /* 12px/24px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
padding: 1.33334em 0; /* 24px/18px */ }
}
}
} 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 */
}
}
}

105
css/main.scss
View File

@ -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,7 +171,9 @@ p.by-line-post {
} }
#header { #header {
a.rss, a.donate {
a.rss,
a.donate {
display: block; display: block;
padding-bottom: 0; padding-bottom: 0;
} }

64
js/main.js
View File

@ -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');
@ -12,3 +16,63 @@ if (document.addEventListener) {
} }
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);
});
});
}