mirror of
https://github.com/rottenwheel/revuo-weekly.git
synced 2024-11-26 04:53:30 +01:00
formatting
This commit is contained in:
recanman
parent
6025946ad0
commit
38301f8715
@ -10,7 +10,19 @@
|
||||
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;
|
||||
@ -28,9 +40,11 @@ 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;
|
||||
}
|
||||
@ -48,6 +62,7 @@ a {
|
||||
-ms-transition: all .3s ease;
|
||||
-o-transition: all .3s ease;
|
||||
transition: all .3s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #999999;
|
||||
|
||||
@ -29,7 +29,8 @@ p.table-title {
|
||||
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;
|
||||
@ -38,8 +39,10 @@ p.table-title {
|
||||
overflow: hidden;
|
||||
border-spacing: 0;
|
||||
background-color: var(--block-bg-color);
|
||||
|
||||
@media (min-width: $breakpoint-alpha) {
|
||||
color: #45494f;
|
||||
|
||||
tr.row3 {
|
||||
background-color: var(--blog-bg-color-secondary);
|
||||
}
|
||||
@ -66,6 +69,7 @@ p.table-title {
|
||||
&:first-child {
|
||||
padding-top: .5em;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
@ -85,13 +89,16 @@ p.table-title {
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
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;
|
||||
}
|
||||
@ -103,12 +110,14 @@ p.table-title {
|
||||
|
||||
}
|
||||
|
||||
th, td:before {
|
||||
th,
|
||||
td:before {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
td.green {
|
||||
color: #66d166;
|
||||
|
||||
@media (min-width: $breakpoint-alpha) {
|
||||
color: #51a751;
|
||||
}
|
||||
@ -116,6 +125,7 @@ p.table-title {
|
||||
|
||||
td.red {
|
||||
color: #e36f6e;
|
||||
|
||||
@media (min-width: $breakpoint-alpha) {
|
||||
color: #d83231;
|
||||
}
|
||||
@ -125,11 +135,14 @@ p.table-title {
|
||||
|
||||
.moneroversary-table {
|
||||
margin: 1.3334rem 0 1.3334rem 0;
|
||||
|
||||
@media (max-width: $breakpoint-alpha) {
|
||||
background: #f0f0f0;
|
||||
color: #45494f;
|
||||
}
|
||||
th, td:before {
|
||||
|
||||
th,
|
||||
td:before {
|
||||
@media (max-width: $breakpoint-alpha) {
|
||||
color: #45494f;
|
||||
}
|
||||
@ -153,17 +166,20 @@ p.table-title {
|
||||
background-color: #db8b55;
|
||||
}
|
||||
|
||||
.content ul, .content ol {
|
||||
.content ul,
|
||||
.content ol {
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.newsbyte, .event {
|
||||
.newsbyte,
|
||||
.event {
|
||||
padding: 1rem;
|
||||
background-color: var(--block-bg-color);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.newsbyte:first-of-type, .event:first-of-type {
|
||||
.newsbyte:first-of-type,
|
||||
.event:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -176,16 +192,19 @@ p.table-title {
|
||||
background-color: #d5d5d5;
|
||||
}
|
||||
|
||||
.newsbyte h4, h4.stat {
|
||||
.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 {
|
||||
.newsbyte p,
|
||||
.event p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -266,7 +285,8 @@ img.fob-img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 8rem;
|
||||
background-color: rgba(0, 0, 0, 0.75);;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@ -285,7 +305,8 @@ p.text-lead {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -324,6 +345,7 @@ img.localmonero {
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
flex-basis: auto;
|
||||
|
||||
@media (max-width: 520px) {
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
@ -334,6 +356,7 @@ img.localmonero {
|
||||
img.dvchain {
|
||||
height: 9rem;
|
||||
margin-left: 3rem;
|
||||
|
||||
@media (max-width: 520px) {
|
||||
margin-left: auto;
|
||||
margin-top: 1rem;
|
||||
@ -353,7 +376,9 @@ img.dvchain {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
/* -- General Layout -- */
|
||||
|
||||
/* Required for footer to stick to the bottom */
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
|
||||
#nav, #nav-left {
|
||||
#nav,
|
||||
#nav-left {
|
||||
a {
|
||||
display: block;
|
||||
color: $background-color;
|
||||
@ -15,13 +17,16 @@ html, body {
|
||||
font-size: 1.5em;
|
||||
font-weight: 400;
|
||||
border-bottom: none;
|
||||
|
||||
@media (min-width: 940px) {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($main-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 200;
|
||||
}
|
||||
@ -56,7 +61,8 @@ html, body {
|
||||
|
||||
.icon {
|
||||
padding: 0;
|
||||
> img {
|
||||
|
||||
>img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -89,7 +95,9 @@ html, body {
|
||||
width: 1.5em;
|
||||
background-color: lighten($text-color, 35%);
|
||||
margin-top: 8px;
|
||||
&:after, &:before {
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -98,15 +106,19 @@ html, body {
|
||||
background-color: lighten($text-color, 35%);
|
||||
transition: all 0.3s ease-in;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
&.btn-close {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&.btn-close:before {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
@ -115,6 +127,7 @@ html, body {
|
||||
transform: rotate(-45deg);
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
&.btn-close:after {
|
||||
top: -4px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
@ -130,13 +143,14 @@ html, body {
|
||||
.fixed {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 940px) {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
#container {
|
||||
margin:0 auto;
|
||||
margin: 0 auto;
|
||||
max-width: 730px;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
@ -146,44 +160,55 @@ html, body {
|
||||
padding: 24px 0;
|
||||
position: relative;
|
||||
margin-bottom: 23px;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $text-color;
|
||||
display: inline-block;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 100px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
|
||||
@media (max-width: 940px) {
|
||||
max-height: 90px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
max-height: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
max-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Bebas Neue', sans-serif; //Emerald logo font
|
||||
font-weight: 400;
|
||||
font-size: 4.5em;
|
||||
color: #d26e2b;
|
||||
|
||||
@media (max-width: 940px) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
content: '';
|
||||
@ -191,10 +216,12 @@ html, body {
|
||||
height: 1px;
|
||||
margin: 23px auto;
|
||||
background-color: lighten($text-color, 70%);
|
||||
|
||||
@media (max-width: 480px) {
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@ -211,6 +238,7 @@ html, body {
|
||||
|
||||
#post-page {
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
@media (min-width: 940px) {
|
||||
margin-bottom: 1.3334em;
|
||||
}
|
||||
@ -223,20 +251,25 @@ html, body {
|
||||
height: 1px;
|
||||
margin: 23px auto;
|
||||
background-color: lighten($background-color, 70%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.by-line {
|
||||
display: block;
|
||||
color: lighten($text-color, 25%);
|
||||
line-height: 1.5em; /* 24px/16px */
|
||||
margin-bottom: 1.5em; /* 24px/16px */
|
||||
line-height: 1.5em;
|
||||
/* 24px/16px */
|
||||
margin-bottom: 1.5em;
|
||||
/* 24px/16px */
|
||||
padding-top: 0.5em;
|
||||
font-weight: 200;
|
||||
|
||||
@media (min-width: 940px) {
|
||||
display: block;
|
||||
color: lighten($text-color, 25%);
|
||||
line-height: 1.3334em; /* 24px/18px */
|
||||
margin-bottom: 1.3334em; /* 24px/18px */
|
||||
line-height: 1.3334em;
|
||||
/* 24px/18px */
|
||||
margin-bottom: 1.3334em;
|
||||
/* 24px/18px */
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
@ -244,14 +277,18 @@ html, body {
|
||||
.by-line-post {
|
||||
display: block;
|
||||
color: lighten($text-color, 25%);
|
||||
line-height: 1.5em; /* 24px/16px */
|
||||
line-height: 1.5em;
|
||||
/* 24px/16px */
|
||||
padding-top: 0.5em;
|
||||
font-weight: 200;
|
||||
|
||||
@media (min-width: 940px) {
|
||||
display: block;
|
||||
color: lighten($text-color, 25%);
|
||||
line-height: 1.3334em; /* 24px/18px */
|
||||
margin-bottom: 1.3334em; /* 24px/18px */
|
||||
line-height: 1.3334em;
|
||||
/* 24px/18px */
|
||||
margin-bottom: 1.3334em;
|
||||
/* 24px/18px */
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
@ -269,7 +306,7 @@ img {
|
||||
|
||||
img[title="Emerald"] {
|
||||
box-shadow: 0 2px 6px #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
color: lighten($text-color, 35%);
|
||||
@ -278,11 +315,15 @@ code {
|
||||
|
||||
/* Set the vertical rhythm (and padding-left) for lists inside post content */
|
||||
|
||||
.content ul, .content ol {
|
||||
line-height: 1.5em; /* 24px/16px */
|
||||
.content ul,
|
||||
.content ol {
|
||||
line-height: 1.5em;
|
||||
/* 24px/16px */
|
||||
padding-left: 1.5em;
|
||||
|
||||
@media (min-width: 940px) {
|
||||
line-height: 1.33334em; /* 24px/18px */
|
||||
line-height: 1.33334em;
|
||||
/* 24px/18px */
|
||||
}
|
||||
}
|
||||
|
||||
@ -291,14 +332,17 @@ code {
|
||||
.pagination {
|
||||
text-align: center;
|
||||
margin: 2.666668em;
|
||||
|
||||
span {
|
||||
background-color: darken($background-color, 5%);
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: lighten($main-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.page-item {
|
||||
background-color: $main-color;
|
||||
color: $background-color;
|
||||
@ -311,7 +355,10 @@ code {
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.page-item:hover, .page-item:active, .page-item:focus {
|
||||
|
||||
.page-item:hover,
|
||||
.page-item:active,
|
||||
.page-item:focus {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@ -325,8 +372,8 @@ footer {
|
||||
}
|
||||
|
||||
#wrap {
|
||||
min-height:100%;
|
||||
position:relative;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
padding-bottom: 105px;
|
||||
}
|
||||
|
||||
|
||||
@ -10,7 +10,8 @@
|
||||
z-index: 10;
|
||||
height: 36px;
|
||||
padding: 8px;
|
||||
background-color: rgba(240,240,240,.6);
|
||||
background-color: rgba(240, 240, 240, .6);
|
||||
|
||||
@media (max-width: 480px) {
|
||||
top: 15px;
|
||||
right: 10px;
|
||||
@ -23,6 +24,7 @@
|
||||
-ms-transform: translateX($x);
|
||||
transform: translateX($x);
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 940px) {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
@ -5,88 +5,120 @@
|
||||
|
||||
@font-face {
|
||||
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;
|
||||
letter-spacing: 0.01em;
|
||||
-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 {
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
font-size: 18px;
|
||||
line-height: 1.7em; /* 24px/16px */
|
||||
margin-bottom: 1.5em; /* 24px/16px */
|
||||
}
|
||||
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) */
|
||||
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) */
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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) */
|
||||
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 {
|
||||
.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) */
|
||||
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 {
|
||||
h5 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.3em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
margin: 1.5em; /* 24px/18px */
|
||||
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 */
|
||||
}
|
||||
}
|
||||
padding: 0 1.5em;
|
||||
|
||||
@media (min-width: 520px) { //Breakpoint set to 940px
|
||||
/* 24px/18px */
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
padding: 1.5em 0;
|
||||
/* 24px/18px */
|
||||
}
|
||||
}
|
||||
|
||||
p, ul, ol {
|
||||
@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 */
|
||||
line-height: 1.7em;
|
||||
/* 24px/16px */
|
||||
margin-bottom: 1.5em;
|
||||
/* 24px/16px */
|
||||
}
|
||||
|
||||
h3, h5 {
|
||||
h3,
|
||||
h5 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
@ -94,34 +126,52 @@
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/*- Typography for big screen, based on 18px font-size -*/
|
||||
/*- Typography for big screen, based on 18px font-size -*/
|
||||
|
||||
@media (min-width: 940px) { //Breakpoint set to 940px
|
||||
@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 */
|
||||
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.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) */
|
||||
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) */
|
||||
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 {
|
||||
@ -131,17 +181,22 @@
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
margin: 1.3334em; /* 24px/18px */
|
||||
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 */
|
||||
padding: 0 1.33334em;
|
||||
|
||||
/* 24px/18px */
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
padding: 1.33334em 0;
|
||||
/* 24px/18px */
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -5,37 +5,6 @@
|
||||
//Import
|
||||
@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)
|
||||
:root {
|
||||
--primary-color: #888888;
|
||||
@ -68,7 +37,7 @@
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
#theme-switcher:checked ~ * {
|
||||
#theme-switcher:checked~* {
|
||||
--primary-color: #666666;
|
||||
--secondary-color: #555555;
|
||||
--font-color: #555555;
|
||||
@ -85,11 +54,11 @@
|
||||
--license-color: #666666;
|
||||
}
|
||||
|
||||
#theme-switcher:checked ~ .switch .slider {
|
||||
#theme-switcher:checked~.switch .slider {
|
||||
background-color: #d56f2a;
|
||||
}
|
||||
|
||||
#theme-switcher:checked ~ .switch .slider::before {
|
||||
#theme-switcher:checked~.switch .slider::before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-moz-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
@ -102,10 +71,11 @@
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// END theme switcher
|
||||
|
||||
// BEGIN menu toggle
|
||||
#menu-toggle:checked ~ #nav {
|
||||
#menu-toggle:checked~#nav {
|
||||
-webkit-transform: translateX(-14rem);
|
||||
-moz-transform: translateX(-14rem);
|
||||
-ms-transform: translateX(-14rem);
|
||||
@ -113,12 +83,12 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#menu-toggle:checked ~ .menu-toggle #menu {
|
||||
#menu-toggle:checked~.menu-toggle #menu {
|
||||
background: none;
|
||||
transition: all 0.1s ease-in;
|
||||
}
|
||||
|
||||
#menu-toggle:checked ~ .menu-toggle #menu::before {
|
||||
#menu-toggle:checked~.menu-toggle #menu::before {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
@ -127,7 +97,7 @@
|
||||
background-color: #0F0F0F;
|
||||
}
|
||||
|
||||
#menu-toggle:checked ~ .menu-toggle #menu::after {
|
||||
#menu-toggle:checked~.menu-toggle #menu::after {
|
||||
top: -4px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
@ -137,10 +107,11 @@
|
||||
}
|
||||
|
||||
@media (min-width: 940px) {
|
||||
#menu-toggle:checked ~ #nav {
|
||||
#menu-toggle:checked~#nav {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
// END menu toggle
|
||||
|
||||
#wrap {
|
||||
@ -200,7 +171,9 @@ p.by-line-post {
|
||||
}
|
||||
|
||||
#header {
|
||||
a.rss, a.donate {
|
||||
|
||||
a.rss,
|
||||
a.donate {
|
||||
display: block;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user