mirror of
https://github.com/middleman/middleman.git
synced 2022-11-09 12:20:27 -05:00
Support dark mode color scheme (#2481)
Dark is a less intrusive brightness which makes it a more sensible default. Make files more XHTML compatible Remove sitemap.js Add .css indent_size to .editorconfig Remove unused css-selectors from colors.css Move colors to separate file Create colors.css Wrap colors in @media(prefers-color-scheme: light) Add colors.css to meta_pages' config.html.erb Add colors.css to meta_pages' sitemap.html.erb Add colors.css to meta_pages' index.html.erb Add colors from sitemap.css to colors.css Add colors from config.css to colors.css Remove colors from sitemap.css Remove colors from config.css Make colors for dark scheme pass WCAG AAA
This commit is contained in:
immeëmosol
GitHub
parent
e260fff30b
commit
960ca08b5e
9 changed files with 154 additions and 129 deletions
|
|
@ -11,3 +11,6 @@ insert_final_newline = true
|
|||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[*.css]
|
||||
indent_size = 4
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
@media (prefers-color-scheme: dark) {
|
||||
a, a:visited, a:hover, a:focus, a:active,
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
summary,
|
||||
.extension.active, .key, .value,
|
||||
#header h1 .logo, #header .toc-nav-link {
|
||||
color: #C88D04;
|
||||
background-color: transparent;
|
||||
}
|
||||
body {
|
||||
background-color: #032129;
|
||||
color: #FBC547;
|
||||
}
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
||||
letter-spacing: 0.1rem;
|
||||
word-spacing: 0.1rem;
|
||||
}
|
||||
[class^="icon-"],
|
||||
[class*=" icon-"] ,
|
||||
details > summary:before {
|
||||
filter: invert(0.5);
|
||||
}
|
||||
.inactive, .inactive:after, .ignored > summary, .ignored > summary:after {
|
||||
color: #A8A8A8;
|
||||
background-color: transparent;
|
||||
}
|
||||
#main footer {
|
||||
background-color: #FBC547;
|
||||
border-top-color: #FBC547;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
a, a:visited, a:hover, a:focus, a:active,
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
summary,
|
||||
.extension.active, .key, .value,
|
||||
#header h1 .logo, #header .toc-nav-link {
|
||||
color: #002B36;
|
||||
}
|
||||
body {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQAgMAAADzfxo+AAAADFBMVEXx6tfv6NXs5dLg3czcnqHfAAAARUlEQVR4Xu2RsQkAIAwEE3UAR3KJOKRLuJeVCOZbBSvhrwjPw3NFxJxqQKTkpOsEJH0sPxZRRFE8lc3pA/Fuzh9tKKJoAr91xp3fgwThAAAAAElFTkSuQmCC") repeat scroll 0 0 #EFE8D5;
|
||||
color: #655740;
|
||||
}
|
||||
.inactive, .inactive:after, .ignored > summary, .ignored > summary:after {
|
||||
color: #999999;
|
||||
}
|
||||
#main footer {
|
||||
background-color: #C6BDA8;
|
||||
border-top-color: #C6BDA8;
|
||||
}
|
||||
#main pre {
|
||||
background-color: #F8F8F8;
|
||||
box-shadow:
|
||||
0 1px 1px #A89A7A inset,
|
||||
0 1px 0 #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
|
@ -14,7 +14,6 @@
|
|||
|
||||
.key, .extension.active {
|
||||
font-weight: bold;
|
||||
color: #002B36;
|
||||
}
|
||||
|
||||
.default {
|
||||
|
|
@ -24,7 +23,6 @@
|
|||
}
|
||||
|
||||
.value {
|
||||
color: #002B36;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
|
|
@ -36,14 +34,9 @@
|
|||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.inactive {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.inactive:after {
|
||||
content: "Inactive";
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
margin-left: 10px;
|
||||
font-size: .7em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,14 +46,10 @@ html {
|
|||
font-size: 100.01%;
|
||||
}
|
||||
body {
|
||||
color: #655740;
|
||||
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
|
||||
font-size: 87.5%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #002B36;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
line-height: 1.1;
|
||||
|
|
@ -87,14 +83,7 @@ h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
|
|||
p {
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
a {
|
||||
color: #002B36;
|
||||
}
|
||||
a:visited, a:hover, a:focus, a:active {
|
||||
color: #002B36;
|
||||
}
|
||||
blockquote {
|
||||
color: #666666;
|
||||
font-style: italic;
|
||||
margin: 1.5em;
|
||||
}
|
||||
|
|
@ -108,15 +97,14 @@ sup, sub {
|
|||
line-height: 0;
|
||||
}
|
||||
abbr, acronym {
|
||||
border-bottom: 1px dotted #666666;
|
||||
border-bottom-color: #666666;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
address {
|
||||
font-style: italic;
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
del {
|
||||
color: #666666;
|
||||
}
|
||||
pre {
|
||||
margin: 1.5em 0;
|
||||
white-space: pre;
|
||||
|
|
@ -156,7 +144,6 @@ th, td {
|
|||
padding: 2px 10px 2px 0;
|
||||
}
|
||||
body {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQAgMAAADzfxo+AAAADFBMVEXx6tfv6NXs5dLg3czcnqHfAAAARUlEQVR4Xu2RsQkAIAwEE3UAR3KJOKRLuJeVCOZbBSvhrwjPw3NFxJxqQKTkpOsEJH0sPxZRRFE8lc3pA/Fuzh9tKKJoAr91xp3fgwThAAAAAElFTkSuQmCC") repeat scroll 0 0 #EFE8D5;
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
|
|
@ -196,16 +183,22 @@ body {
|
|||
margin-top: 1em;
|
||||
}
|
||||
#main pre {
|
||||
background: none repeat scroll 0 0 #F8F8F8;
|
||||
background-repeat: repeat;
|
||||
background-position: 0 0;
|
||||
background-image: none;
|
||||
background-attachment: scroll;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
box-shadow: 0 1px 1px #A89A7A inset, 0 1px 0 white;
|
||||
margin: 1.5em 0;
|
||||
overflow: auto;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
#main footer {
|
||||
background: none repeat scroll 0 0 #C6BDA8;
|
||||
border-top: 1px solid #C6BDA8;
|
||||
background-repeat: repeat;
|
||||
background-position: 0 0;
|
||||
background-image: none;
|
||||
background-attachment: scroll;
|
||||
border-top-width: 1px;
|
||||
border-top-style: solid;
|
||||
overflow: hidden;
|
||||
padding: 1em 10px;
|
||||
}
|
||||
|
|
@ -245,30 +238,11 @@ body {
|
|||
.grid .toc-block:nth-child(3n+1) {
|
||||
clear: left;
|
||||
}
|
||||
pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .lisp .string, pre .javadoc {
|
||||
color: #93A1A1;
|
||||
font-style: italic;
|
||||
}
|
||||
pre .keyword, pre .css .rule .keyword, pre .winutils, pre .javascript .title, pre .method, pre .addition, pre .css .tag, pre .lisp .title {
|
||||
color: #859900;
|
||||
}
|
||||
pre .number, pre .command, pre .string, pre .tag .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor {
|
||||
color: #2AA198;
|
||||
}
|
||||
pre .title, pre .localvars, pre .function .title, pre .chunk, pre .decorator, pre .builtin, pre .built_in, pre .lisp .title, pre .identifier, pre .title .keymethods, pre .id {
|
||||
color: #268BD2;
|
||||
}
|
||||
pre .attribute, pre .variable, pre .instancevar, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .label {
|
||||
color: #B58900;
|
||||
}
|
||||
pre .preprocessor, pre .pi, pre .shebang, pre .symbol, pre .diff .change, pre .special, pre .keymethods, pre .attr_selector, pre .important, pre .subst, pre .cdata {
|
||||
color: #CB4B16;
|
||||
}
|
||||
pre .deletion {
|
||||
color: #DC322F;
|
||||
}
|
||||
pre .tex .formula {
|
||||
background: none repeat scroll 0 0 #EEE8D5;
|
||||
background-repeat: repeat;
|
||||
background-position: 0 0;
|
||||
background-image: none;
|
||||
background-attachment: scroll;
|
||||
}
|
||||
.grid {
|
||||
display: inline;
|
||||
|
|
@ -304,7 +278,10 @@ pre .tex .formula {
|
|||
width: 180px;
|
||||
}
|
||||
#header h1 .logo {
|
||||
background: none repeat scroll 0 0 #002B36;
|
||||
background-repeat: repeat;
|
||||
background-position: 0 0;
|
||||
background-image: none;
|
||||
background-attachment: scroll;
|
||||
border-radius: 0 0 0 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
|
@ -321,7 +298,6 @@ pre .tex .formula {
|
|||
}
|
||||
#header .toc-nav-link {
|
||||
-moz-box-sizing: border-box;
|
||||
color: #002B36;
|
||||
display: inline;
|
||||
float: right;
|
||||
font-family: "Arvo","andale mono","lucida console",monospace;
|
||||
|
|
@ -381,4 +357,4 @@ pre .tex .formula {
|
|||
.nav-list a {
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
summary {
|
||||
display: block;
|
||||
font-family: "Arvo","andale mono","lucida console",monospace;
|
||||
color: #002B36;
|
||||
}
|
||||
|
||||
details > details {
|
||||
|
|
@ -41,18 +40,14 @@ summary > i {
|
|||
font-family: "Arvo","andale mono","lucida console",monospace;
|
||||
}
|
||||
|
||||
.ignored > summary {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.ignored i {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
|
||||
.ignored > summary:after {
|
||||
content: "Ignored";
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
margin-left: 10px;
|
||||
font-size: .7em;
|
||||
}
|
||||
|
|
@ -649,4 +644,4 @@ details.open > summary:before {
|
|||
|
||||
.icon-fullscreen {
|
||||
background-position: -456px -144px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,57 +1,56 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="utf-8" />
|
||||
<title>Middleman Configuration</title>
|
||||
<link type="text/css" rel="stylesheet" href="/__middleman/assets/meta.css">
|
||||
<link type="text/css" rel="stylesheet" href="/__middleman/assets/config.css">
|
||||
<link type="text/css" rel="stylesheet" href="/__middleman/assets/colors.css" />
|
||||
<link type="text/css" rel="stylesheet" href="/__middleman/assets/meta.css" />
|
||||
<link type="text/css" rel="stylesheet" href="/__middleman/assets/config.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<article id="main">
|
||||
<a href="/__middleman/">« back</a>
|
||||
<h1>Middleman Configuration</h1>
|
||||
|
||||
<p>This page shows the current configuration of your Middleman application. <a href="https://middlemanapp.com/advanced/configuration/">Read more about configuring Middleman.</a></p>
|
||||
|
||||
<p>
|
||||
<a href="#core">Core configuration</a>
|
||||
| <a href="#extensions">Extensions</a>
|
||||
</p>
|
||||
|
||||
<h2 id="core">Core Configuration</h2>
|
||||
<ul class="settings">
|
||||
<% global_config.each do |setting| %>
|
||||
<li class="setting"><%= setting.render %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
|
||||
<h2 id="extensions">Extensions</h2>
|
||||
<ul class="extensions">
|
||||
<% [extension_config, auto_activated_config].each do |extensions| %>
|
||||
<% extensions.each do |ext_name, configs| %>
|
||||
<li>
|
||||
<% registered_extensions.delete(ext_name) %>
|
||||
|
||||
<span class="extension active">:<%= ext_name %></span>
|
||||
|
||||
<% if configs && !configs.empty? %>
|
||||
<ul class="settings">
|
||||
<% configs.each do |setting| %>
|
||||
<li class="setting"><%= setting.render %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% end %>
|
||||
</li>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% registered_extensions.keys.each do |ext_name| %>
|
||||
<li><span class="extension inactive"><%= ext_name.inspect %></span></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</article>
|
||||
<h1>Middleman Configuration</h1>
|
||||
<a href="/__middleman/">Information</a>
|
||||
<a>Configuration</a>
|
||||
<a href="/__middleman/sitemap/">Sitemap</a>
|
||||
<p>
|
||||
This page shows the current configuration of your Middleman application.
|
||||
<a href="https://middlemanapp.com/advanced/configuration/"
|
||||
>Read more about configuring Middleman.</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#core">Core configuration</a>
|
||||
| <a href="#extensions">Extensions</a>
|
||||
</p>
|
||||
<h2 id="core">Core Configuration</h2>
|
||||
<ul class="settings">
|
||||
<% global_config.each do |setting| %>
|
||||
<li class="setting"><%= setting.render %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<h2 id="extensions">Extensions</h2>
|
||||
<ul class="extensions">
|
||||
<% [extension_config, auto_activated_config].each do |extensions| %>
|
||||
<% extensions.each do |ext_name, configs| %>
|
||||
<li>
|
||||
<% registered_extensions.delete(ext_name) %>
|
||||
<span class="extension active">:<%= ext_name %></span>
|
||||
<% if configs && !configs.empty? %>
|
||||
<ul class="settings">
|
||||
<% configs.each do |setting| %>
|
||||
<li class="setting"><%= setting.render %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% end %>
|
||||
</li>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% registered_extensions.keys.each do |ext_name| %>
|
||||
<li><span class="extension inactive"><%= ext_name.inspect %></span></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,22 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="utf-8" />
|
||||
<title>Middleman Info</title>
|
||||
<link type="text/css" rel="stylesheet" href="/__middleman/assets/meta.css">
|
||||
<link type="text/css" rel="stylesheet" href="/__middleman/assets/colors.css" />
|
||||
<link type="text/css" rel="stylesheet" href="/__middleman/assets/meta.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<article id="main">
|
||||
<h1>Middleman Information</h1>
|
||||
<a>Information</a>
|
||||
<a href="/__middleman/config/">Configuration</a>
|
||||
<a href="/__middleman/sitemap/">Sitemap</a>
|
||||
<p>
|
||||
Middleman version <%= Middleman::VERSION %>
|
||||
This page shows an overview of the Middleman application its meta-pages.
|
||||
</p>
|
||||
<p>Middleman version <%= Middleman::VERSION %></p>
|
||||
<ul class="nav-list">
|
||||
<li>
|
||||
<a href="/__middleman/sitemap/">Sitemap</a>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,27 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Middleman Sitemap</title>
|
||||
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="/__middleman/assets/meta.css">
|
||||
<link type="text/css" rel="stylesheet" href="/__middleman/assets/sitemap.css">
|
||||
<link type="text/css" rel="stylesheet" href="/__middleman/assets/colors.css" />
|
||||
<link type="text/css" rel="stylesheet" href="/__middleman/assets/meta.css" />
|
||||
<link type="text/css" rel="stylesheet" href="/__middleman/assets/sitemap.css" />
|
||||
<script src="/__middleman/assets/jquery-1.8.2.min.js"></script>
|
||||
<script src="/__middleman/assets/jquery.details-1.6.min.js"></script>
|
||||
<script src="/__middleman/assets/sitemap.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<article id="main">
|
||||
<a href="/__middleman/">« back</a>
|
||||
<h1>Middleman Sitemap</h1>
|
||||
|
||||
<p>This page shows all of the pages in
|
||||
<a href="https://middlemanapp.com/advanced/sitemap/">the sitemap</a>,
|
||||
Middleman's view of your site.</p>
|
||||
|
||||
<%= sitemap_tree.render %>
|
||||
<a href="/__middleman/">Information</a>
|
||||
<a href="/__middleman/config/">Configuration</a>
|
||||
<a>Sitemap</a>
|
||||
<p>
|
||||
This page shows all of the pages in
|
||||
<a href="https://middlemanapp.com/advanced/sitemap/">the sitemap</a>,
|
||||
Middleman's view of your site.
|
||||
</p>
|
||||
<%= sitemap_tree.render %>
|
||||
</article>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue