Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add dark mode support #130

Open
wants to merge 9 commits into
base: gh-pages
Choose a base branch
from
Open

Add dark mode support #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bf185a3
Add dark mode support
xfq Mar 14, 2024
623946c
Use spaces in index.html
xfq Mar 20, 2024
ce69f89
Fix the colour of h4
xfq Mar 21, 2024
6ff2bec
Change more colours
xfq Mar 22, 2024
ada5b6a
Use spaces in index.html
xfq Mar 22, 2024
91ddf10
Use spaces in index.html
xfq Mar 22, 2024
901ea1c
Use spaces in index.html
xfq Mar 22, 2024
62e3476
Tweak
xfq Mar 22, 2024
ecc58e4
Use HTML's meta tag
xfq May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8"/>
<meta name="color-scheme" content="light dark">
<title>Internationalization Best Practices for Spec Developers</title>

<!--
Expand Down Expand Up @@ -552,9 +553,9 @@ <h3>Identifying the language of strings</h3>
<p>[[[#bidi_strings]]].</p>
</div>

<div class="note">
<div class="note" id="string_meta_progress">
<p>Work on language and direction metadata for string formats is a work in progress. Specifications might need to include a note indicating the need for future adoption of metadata. Here is a prototype:</p>
<p class="example_note" style="background-color:white;border:1px solid green;padding:10px">The field <code>{fieldname}</code> should follow the best practices found in <cite>Strings on the Web: Language and Direction Metadata</cite> [[STRING-META]]. This includes making use of any future standards which emerge regarding the reporting of string language and direction metadata.</p>
<p class="example_note">The field <code>{fieldname}</code> should follow the best practices found in <cite>Strings on the Web: Language and Direction Metadata</cite> [[STRING-META]]. This includes making use of any future standards which emerge regarding the reporting of string language and direction metadata.</p>
</div>

<div class="req" id="bp_lang_field_based_metadata">
Expand Down
167 changes: 64 additions & 103 deletions local.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
font-family: Arial, monospace;
font-size: 0.75em;
letter-spacing: 0.03em;
color: brown;
color: var(--uname-text);
}
/** end of unicode styles */

Expand All @@ -33,24 +33,49 @@
* (currently respec_2022.css). *
*/



.bp { /*background-color:#ffffcc; border: 1px solid #ccc;*/
background-color: #feb;
border-radius: 8px;
border-radius: 4px;
padding: 10px;
position: relative;
margin: 30px;
margin-right: 60px;
}
.bp a {
font-style: italic;
}
.bp a.local {
display:none;
:root {
--blue: blue;
--checklistGroup-li-bg: antiquewhite;
--checklistGroup-li-input: chocolate;
--checklistGroup-li: brown;
--example-note-bg: white;
--exampleNamesTable-td-border: #ddd;
--exampleNamesTable-tr-2n: #f2f2f2;
--exampleNamesTable-tr-hover: var(--exampleNamesTable-td-border);
--h4-color: #005a9c;
--links-bg: #EFEFF9;
--links-title-text: #005a9c;
--localdef-bg: white;
--localdef-border: brown;
--review-comments-bg: #EFEFF9;
--summary-text: saddlebrown;
--uname-text: brown;
--xref-bg: #fbf4e0;
}

@media (prefers-color-scheme: dark) {
:root {
--blue: rgb(51 125 255);
--checklistGroup-li-bg: rgb(69 43 9);
--checklistGroup-li-input: rgb(228 132 63);
--checklistGroup-li: rgb(215 99 99);
--example-note-bg: #181a1b;
--exampleNamesTable-td-border: rgb(58 62 65);
--exampleNamesTable-tr-2n: rgb(31 34 35);
--exampleNamesTable-tr-hover: var(--exampleNamesTable-td-border);
--h4-color: rgb(110 194 255);
--links-bg: rgb(30 33 34);
--links-title-text: rgb(110 194 255);
--localdef-bg: rgb(24 26 27);
--localdef-border: rgb(154 39 39);
--review-comments-bg: rgb(30 33 34);
--summary-text: rgb(236 164 113);
--uname-text: rgb(215 99 99);
--xref-bg: rgb(53 42 11);
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably need to add .links {} here too

}


.advisement { /*background-color:#ffffcc; border: 1px solid #ccc;*/
border-radius: 4px;
position: relative;
Expand All @@ -66,49 +91,13 @@ body {
counter-reset: advisement; /* Set the section counter to 0 */
/*counter-reset: bp; Set the section counter to 0 */
}
a.self {
position: absolute;
top: -20px;
border: medium none;
transition: opacity 0.2s ease 0s;
opacity: 0.5;
color: #999;
text-decoration: none;
}
a.self:visited {
color: #999;
}
a.self:hover {
color: red;
}
a.self::after {
content: attr(href);
font-weight: normal;
font-style: italic;
font-size: 80%;
}

.editor-note {
font-style: italic;
color: teal;
}
.ed {
font-style: italic;
color: white;
background-color: #F90;
padding-left: 10px; padding-right: 10px;
}

.new-term {
font-weight: bold
}
code {
font-family: monospace;
}
del {
display: inline;
color: silver;
}
section h2 {
margin-top: 5em;
margin-bottom: 0em;
Expand All @@ -117,23 +106,10 @@ section h2 {
margin-top: 0;
}

ins {
background-color: #99FF99;
text-decoration: none;
}
.term {
font-weight: bold;
margin-top: 1em;
}
.definition {
position: relative;
background-color: #efefef;
padding: 0.5em;
border: 0.5em;
border-left: 6pt solid green;
border-right: 6pt solid green;
margin: 1em auto;
}
a.termref:link {
color:#C60;
text-decoration:none;
Expand Down Expand Up @@ -171,23 +147,7 @@ a.termref:active {
background-color: #E2FFF0;
font-size: 0.8em;
}
span.note-head {
padding: .2em;
color:#066;
border: none;
position:relative;
display: block;
width: 40px;
left: -1.5em;
top: -.5em;
background: #F2FFF1;
padding-left: .2em;
text-align: center;
}

.counterstyle { margin: 20px 30px; }
.counterstyle code { font-family: "Lucida Console", Monaco, monospace; color: black; font-size: 12px; }

@media print {
.bp { background: #ffcc99 }

Expand All @@ -198,7 +158,7 @@ body { font-size: 80%; margin: 2em; }



h4 { color: #005a9c; margin-top: 2em; }
h4 { color: var(--h4-color); margin-top: 2em; }
.indent { margin-left: 3em; }

.links h4, .xref h4 {
Expand All @@ -213,7 +173,7 @@ h4 { color: #005a9c; margin-top: 2em; }
/*background-color: #a09de5; border: 1px solid #ccc; */
font-size: 90%;
padding: 1em;
background-color: #EFEFF9;
background-color: var(--links-bg);
border-radius: 5px;
/*margin-bottom: 20px;
float: left; width: 60%;*/
Expand All @@ -222,7 +182,7 @@ h4 { color: #005a9c; margin-top: 2em; }
/* background-color: #feb; border: 1px solid #fc0; border-radius: 10px;*/
font-size: 80%;
padding: 1em;
background-color: #fbf4e0;
background-color: var(--xref-bg);
border-radius: 5px;
/*margin-bottom: 40px;
float: right; width: 30%;*/
Expand All @@ -238,7 +198,7 @@ h4 { color: #005a9c; margin-top: 2em; }

.bigtext {
font-size: 36pt;
color: blue;
color: var(--blue);
text-align: left;
}

Expand All @@ -251,19 +211,14 @@ table.cpExample {
width: 80%;
}

p.sidenote {
color: gray;
font-size:60%;
}

table.truncExample th,
table.truncExample td {
vertical-align: top;
}

table.truncExample kbd,
table.truncExample code {
color: blue;
color: var(--blue);
font-size: larger;
}

Expand Down Expand Up @@ -366,7 +321,7 @@ table.whitespace caption {
}


.links_title { margin-top: 0; font-weight: bold; color: #005a9c; }
.links_title { margin-top: 0; font-weight: bold; color: var(--links-title-text); }
.links_subtitle { font-style: italic; margin-block-start: 1rem; margin-bottom: 0; }


Expand All @@ -377,8 +332,8 @@ table.whitespace caption {
padding-inline: 1rem;
padding-block: .3em;
min-height: 2rem;
color: brown;
background-color: antiquewhite;
color: var(--checklistGroup-li);
background-color: var(--checklistGroup-li-bg);
border-radius: 5px;
font-size: 95%;
}
Expand All @@ -389,7 +344,7 @@ table.whitespace caption {
margin-inline-start: 1rem;
}
.checklistGroup li input {
accent-color: chocolate;
accent-color: var(--checklistGroup-li-input);
}
.checklist summary {
font-weight: normal;
Expand All @@ -400,7 +355,7 @@ table.whitespace caption {
margin-inline-start: 2rem;
}
.summaryC summary {
color: saddlebrown;
color: var(--summary-text);
font-weight: normal;
cursor: pointer;
}
Expand All @@ -414,7 +369,7 @@ table.whitespace caption {
.reviewComments {
font-size: 90%;
padding: 1em;
background-color: #EFEFF9;
background-color: var(--review-comments-bg);
border-radius: 5px;
margin-block: 0;
font-style: italic;
Expand All @@ -426,13 +381,13 @@ table.whitespace caption {
}

.exampleNamesTable td, .exampleNamesTable th {
border: 1px solid #ddd;
border: 1px solid var(--exampleNamesTable-td-border);
padding: 8px;
}

.exampleNamesTable tr:nth-child(even){background-color: #f2f2f2;}
.exampleNamesTable tr:nth-child(even){background-color: var(--exampleNamesTable-tr-2n);}

.exampleNamesTable tr:hover {background-color: #ddd;}
.exampleNamesTable tr:hover {background-color: var(--exampleNamesTable-tr-hover);}

.exampleNamesTable th {
cursor: pointer;
Expand All @@ -456,8 +411,14 @@ td.exampleChar {
}

.localdef {
background-color:white;
border: 1px solid brown;
background-color:var(--localdef-bg);
border: 1px solid var(--localdef-border);
margin:0.5em;
padding:0.5em;
}

#string_meta_progress p.example_note {
background-color: var(--example-note-bg);
border: 1px solid green;
padding:10px;
}