gaugendre/blog-css
1
0
Fork 0
Code Issues Pull requests Releases Activity

Replace blog css with scss version

Browse source
This commit is contained in:
Gabriel Augendre 2020-05-17 10:15:58 +02:00
parent 4582bc232f
commit 2dc4bfe56a
2 changed files with 143 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

154
current.css
View file

@ -1,154 +0,0 @@
body {
font-size: 110%;
}
#post .pic-container {
display: block;
text-align: center;
}
#post .profile-pic {
max-width: 200px;
}
/* Disable hidden effect for ease of use on touch screens */
.hidden.user.action {
opacity: 1;
}
/* Set global variables for colors */
:root {
--accent: #226997;
}
a.hashtag {
color: var(--main);
}
/* Links inside blog posts */
article table a:not(.hashtag), article p a:not(.hashtag), article ul a:not(.hashtag), a.hashtag span + span {
color: var(--main);
border-bottom: solid var(--accent) 1px;
text-decoration: none;
transition: border-bottom .12s ease;
}
article table a:not(.hashtag):hover, article p a:not(.hashtag):hover, article p a:not(.hashtag):focus, article ul a:not(.hashtag):hover, article ul a:not(.hashtag):focus, a.hashtag:hover span + span {
text-decoration: none;
border-color: transparent;
}
#post a, #post a.hashtag span + span {
border-bottom-width: 2.5px;
}
@media (prefers-color-scheme: dark) {
/* Set global variables for colors */
:root {
--accent: #496474;
--main: #eeeeee;
}
body {
color: var(--main);
background: #111;
}
article p a, article ul a {
color: var(--main);
}
header p.description, header nav a {
color: #7d7d7d;
}
body#post article time.dt-published {
color: #cacaca;
}
body#collection a.read-more {
color: #8c8c8c;
}
/*
Written in 2020 by Write.as
To the extent possible under law, the author(s) have dedicated all
copyright and related and neighboring rights to this software to the
public domain worldwide. This software is distributed without any
warranty.
You should have received a copy of the CC0 Public Domain Dedication
along with this software. If not, see
http://creativecommons.org/publicdomain/zero/1.0
*/
body .post-title a:link {
color: #ccc;
}
#collection .post-title a {
color: #ccc;
}
#collection {
color: #eee;
}
#collection pre {
background: #060606;
}
body h1 a, body header h2 a {
color: #cfcfcf;
}
body h1 a:hover, body header h2 a:hover {
color: #fff;
}
body h1 a:visited, body header h2 a:visited {
color: #ccc;
}
body #manage ul a, body .dropdown-nav ul a, body #manage ul ul a, body #manage ul a {
color: #ccc;
}
body .dropdown-nav ul ul, body .dropdown-nav ul li:hover, body #manage ul ul, body #manage ul ul li:hover, body #manage ul li:hover {
background: #222;
}
body #official-writing h2, body #official-writing h3, body #official-writing h4, body #wrapper h2, body #wrapper h3, body #wrapper h4 {
color: #ddd;
}
body a {
color: #a2a2ff;
}
body #official-writing h2, body #official-writing h3, body #official-writing h4, body #wrapper h2, body #wrapper h3, body #wrapper h4 {
color: #aaa;
}
body #official-writing ul.collections li.collection a.title:link, body #official-writing ul.collections li.collection a.title:visited, body #wrapper ul.collections li.collection a.title:link, body #wrapper ul.collections li.collection a.title:visited {
color: #cfcfcf;
}
body #official-writing ul.collections li a.create, body #wrapper ul.collections li a.create {
color: #aaa;
}
body#me #official-writing h2 a:link, body#me #official-writing h2 a:visited {
color: #a2a2ff;
}
input {
background: #202020;
color: #bbb;
}
#manage ul ul li img {
filter: invert(1);
}
#post code, #collection code, #subpage code {
background: #202020;
color: #bbb;
}
}

143
style.scss Normal file
View file

@ -0,0 +1,143 @@
// Set global variables for colors
:root {
--accent: #226997;
--main: #111111;
--main2: #575757;
--main3: #7d7d7d;
--background: #ffffff;
--background2: #f7f7f7;
}
body {
font-size: 110%;
color: var(--main);
background-color: var(--background);
h1, header h2 {
a, a:visited, a:link {
color: var(--main);
}
}
header {
p.description, nav a {
color: var(--main2);
}
}
// Disable hidden effect for ease of use on touch screens
.hidden.user.action {
opacity: 1;
color: var(--main3)
}
// Links in articles and in list view
article {
table, p, ul {
a:not(.hashtag), a.hashtag span + span {
color: var(--main);
border-bottom: solid var(--accent) 1px;
text-decoration: none;
transition: border-bottom .12s ease;
}
a:not(.hashtag):hover, a:not(.hashtag):focus, a.hashtag:hover span + span, a.hashtag:focus span + span {
text-decoration: none;
border-color: transparent;
}
}
}
// Override for links in articles only
&#post, &#subpage {
a, a.hashtag span + span {
border-bottom-width: 2.5px;
}
}
// "Menu" dropdown, only visible to author
#manage, .dropdown-nav, #manage ul {
a {
color: var(--main);
}
ul {
background: var(--background);
li {
&:hover {
background: var(--background2);
}
a {
color: var(--main);
}
}
}
}
// Does subpage even exist?
&#post, &#collection, &#subpage {
color: var(--main);
pre, code {
background: var(--background2);
color: var(--main2)
}
pre {
background: var(--background2);
}
.post-title a {
color: var(--main);
}
a.read-more {
color: var(--main3);
}
article time.dt-published {
color: var(--main2);
}
blockquote {
color: var(--main2)
}
.pic-container {
display: block;
text-align: center;
.profile-pic {
max-width: 200px;
}
}
}
}
@media (prefers-color-scheme: dark) {
:root {
--accent: #226997;
--main: #eeeeee;
--main2: #cecece;
--main3: #b1b1b1;
--background: #111111;
--background2: #575656;
}
// Add transparency to the image to make it look lighter
img {
opacity: .75;
transition: opacity .5s ease-in-out;
}
img:hover {
opacity: 1;
}
// No transparency for "view draft" icon
#manage ul ul li img {
opacity: 1;
filter: invert(1);
}
}