mirror of
https://github.com/standardebooks/web.git
synced 2025-07-15 02:46:46 -04:00
Merge reset.css into core.css, and add settings page for specifying dark mode preferences
This commit is contained in:
Alex Cabal
parent
27d081b644
commit
11224136d1
9 changed files with 272 additions and 196 deletions
226
www/css/core.css
226
www/css/core.css
|
|
@ -95,22 +95,85 @@
|
|||
--link-highlight: var(--button);
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: dark){
|
||||
:root{
|
||||
--body-text: var(--dark-body-text);
|
||||
--header: var(--dark-header);
|
||||
--button: var(--dark-button);
|
||||
--button-highlight: var(--dark-button-highlight);
|
||||
--border: var(--dark-border);
|
||||
--sub-text: var(--dark-sub-text);
|
||||
--body-bg: var(--dark-body-bg);
|
||||
--input-hover: var(--dark-input-hover);
|
||||
--input-border: var(--dark-input-border);
|
||||
--input-outline: var(--dark-input-outline);
|
||||
--link-highlight: var(--button-highlight); /* lighter looks better in dark mode */
|
||||
}
|
||||
/* Start CSS reset */
|
||||
/* Dont @import this, to prevent FOUC */
|
||||
html{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a{
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
blockquote{
|
||||
margin: 0;
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
p{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ol{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h4{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h5{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h6{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
figure{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
q{
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner{
|
||||
border: 0;
|
||||
}
|
||||
/* End reset */
|
||||
|
||||
html{
|
||||
color: var(--body-text);
|
||||
font-family: "Crimson Pro", Georgia, serif;
|
||||
|
|
@ -539,6 +602,11 @@ form button{
|
|||
hyphens: none;
|
||||
}
|
||||
|
||||
form button{
|
||||
line-height: 1;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.ebooks nav li.highlighted a:focus,
|
||||
a.button:focus,
|
||||
input[type="search"]:focus,
|
||||
|
|
@ -1480,6 +1548,10 @@ select[multiple] option:last-child{
|
|||
margin-bottom: 1rem; /* needed for firefox */
|
||||
}
|
||||
|
||||
form[action="/settings"]{
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
form[action="/ebooks"] label{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -1932,7 +2004,7 @@ article.ebook section aside.donation p::after{
|
|||
display: inline;
|
||||
}
|
||||
|
||||
footer ul li:nth-child(3)::after{
|
||||
footer ul li:nth-child(4)::after{
|
||||
content: "\A"; /* This is a line break */
|
||||
white-space: pre;
|
||||
margin: 0;
|
||||
|
|
@ -2051,6 +2123,24 @@ article.ebook section aside.donation p::after{
|
|||
main.ebooks > ol{
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
footer ul li:nth-child(2)::after{
|
||||
content: "\A"; /* This is a line break */
|
||||
white-space: pre;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer ul li:nth-child(4)::after{
|
||||
content: "\b7";
|
||||
white-space: normal;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
footer ul li:nth-child(5)::after{
|
||||
content: "\A"; /* This is a line break */
|
||||
white-space: pre;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 680px){
|
||||
|
|
@ -2242,10 +2332,16 @@ article.ebook section aside.donation p::after{
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
footer ul li:nth-child(5)::after{
|
||||
content: "\A"; /* This is a line break */
|
||||
white-space: pre;
|
||||
margin: 0;
|
||||
form[action="/settings"] button{
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
form[action="/settings"] button,
|
||||
form[action="/settings"] span,
|
||||
form[action="/settings"] select{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2259,16 +2355,6 @@ article.ebook section aside.donation p::after{
|
|||
.masthead ol li img.contact{
|
||||
height: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 380px){
|
||||
main.front-page h1{
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6,code,.ebook h1 + p{
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
body > footer{
|
||||
padding-top: 0;
|
||||
|
|
@ -2282,6 +2368,16 @@ article.ebook section aside.donation p::after{
|
|||
footer ul li::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 380px){
|
||||
main.front-page h1{
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6,code,.ebook h1 + p{
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
main.ebooks > ol{
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -2308,7 +2404,6 @@ article.ebook section aside.donation p::after{
|
|||
grid-row: 6;
|
||||
}
|
||||
|
||||
|
||||
body > header ul li:nth-child(2n)::after{
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -2321,7 +2416,6 @@ article.ebook section aside.donation p::after{
|
|||
display: none;
|
||||
}
|
||||
|
||||
|
||||
body > header ul li:nth-child(2) ~ li,
|
||||
body > header ul li + li{
|
||||
margin-top: 1rem;
|
||||
|
|
@ -2341,73 +2435,3 @@ article.ebook section aside.donation p::after{
|
|||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: dark){
|
||||
|
||||
|
||||
main.front-page > section > section figure img{
|
||||
box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
body > header > a:focus{
|
||||
/* Since we use invert() to change the color of the SE logo,
|
||||
we must specify the light outline (which is dark)
|
||||
so that it inverts to white */
|
||||
outline: 1px dashed var(--light-input-outline);
|
||||
}
|
||||
|
||||
article.ebook section#read-online a::before,
|
||||
article.ebook section#download ul li a[class]::before,
|
||||
article.ebook section#details ul li a[class]::before,
|
||||
footer p:last-child a::before,
|
||||
main.front-page > section > section figure.oss img + img,
|
||||
main.front-page > section > h2::before,
|
||||
main.front-page > section > h2::after{
|
||||
filter: invert() grayscale(100%) brightness(120%) drop-shadow(3px 3px 1px rgba(0, 0, 0, .25)); /* grayscale and brightness makes it hit about #eeeeee */
|
||||
}
|
||||
|
||||
.masthead img[src*="portrait.svg"],
|
||||
.masthead img.contact{
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
.masthead img[src*="portrait.svg"]{
|
||||
border-color: var(--border-light);
|
||||
}
|
||||
|
||||
aside.donation,
|
||||
article.ebook section aside.donation{
|
||||
background: rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
aside.donation,
|
||||
article.ebook section aside.donation{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
select,
|
||||
input[type="search"]{
|
||||
box-shadow: 1px 1px 0 rgba(0, 0, 0, .5) inset;
|
||||
}
|
||||
|
||||
input::placeholder{
|
||||
color: rgba(255, 255, 255, .75);
|
||||
}
|
||||
|
||||
main.ebooks > ol img:hover{
|
||||
box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
article.ebook #more-ebooks img:hover{
|
||||
box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
label.select > span + span::after,
|
||||
label.search::before{
|
||||
text-shadow: 1px 1px 0 #000;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
text-shadow: 2px 2px 0 rgba(0, 0, 0, .75);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
79
www/css/dark.css
Normal file
79
www/css/dark.css
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
:root{
|
||||
--body-text: var(--dark-body-text);
|
||||
--header: var(--dark-header);
|
||||
--button: var(--dark-button);
|
||||
--button-highlight: var(--dark-button-highlight);
|
||||
--border: var(--dark-border);
|
||||
--sub-text: var(--dark-sub-text);
|
||||
--body-bg: var(--dark-body-bg);
|
||||
--input-hover: var(--dark-input-hover);
|
||||
--input-border: var(--dark-input-border);
|
||||
--input-outline: var(--dark-input-outline);
|
||||
--link-highlight: var(--button-highlight); /* lighter looks better in dark mode */
|
||||
}
|
||||
|
||||
main.front-page > section > section figure img{
|
||||
box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
body > header > a:focus{
|
||||
/* Since we use invert() to change the color of the SE logo,
|
||||
we must specify the light outline (which is dark)
|
||||
so that it inverts to white */
|
||||
outline: 1px dashed var(--light-input-outline);
|
||||
}
|
||||
|
||||
article.ebook section#read-online a::before,
|
||||
article.ebook section#download ul li a[class]::before,
|
||||
article.ebook section#details ul li a[class]::before,
|
||||
footer p:last-child a::before,
|
||||
main.front-page > section > section figure.oss img + img,
|
||||
main.front-page > section > h2::before,
|
||||
main.front-page > section > h2::after{
|
||||
filter: invert() grayscale(100%) brightness(120%) drop-shadow(3px 3px 1px rgba(0, 0, 0, .25)); /* grayscale and brightness makes it hit about #eeeeee */
|
||||
}
|
||||
|
||||
.masthead img[src*="portrait.svg"],
|
||||
.masthead img.contact{
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
.masthead img[src*="portrait.svg"]{
|
||||
border-color: var(--border-light);
|
||||
}
|
||||
|
||||
aside.donation,
|
||||
article.ebook section aside.donation{
|
||||
background: rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
aside.donation,
|
||||
article.ebook section aside.donation{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
select,
|
||||
input[type="search"]{
|
||||
box-shadow: 1px 1px 0 rgba(0, 0, 0, .5) inset;
|
||||
}
|
||||
|
||||
input::placeholder{
|
||||
color: rgba(255, 255, 255, .75);
|
||||
}
|
||||
|
||||
main.ebooks > ol img:hover{
|
||||
box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
article.ebook #more-ebooks img:hover{
|
||||
box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
label.select > span + span::after,
|
||||
label.search::before{
|
||||
text-shadow: 1px 1px 0 #000;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
text-shadow: 2px 2px 0 rgba(0, 0, 0, .75);
|
||||
}
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
/* Dont @import this, to prevent FOUC */
|
||||
html{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a{
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
blockquote{
|
||||
margin: 0;
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
p{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ol{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h4{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h5{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h6{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
q{
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
figure{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner{
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ie 11 compatibility */
|
||||
header{
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav{
|
||||
display: block;
|
||||
}
|
||||
|
||||
main{
|
||||
display: block;
|
||||
}
|
||||
|
||||
footer{
|
||||
display: block;
|
||||
}
|
||||
/* end ie 11 compatibility */
|
||||
Loading…
Add table
Add a link
Reference in a new issue