diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index cdf817d73..dd98ac1e7 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -10,7 +10,10 @@ - + + + + {{ partial "opengraph.html" . }} {{ partial "twitter_cards.html" . }} @@ -156,6 +159,17 @@ + @@ -165,6 +179,7 @@ {{ end }} + {{ block "script" . }} {{ end }} diff --git a/layouts/index.html b/layouts/index.html index 7805d7a91..fa5b3f5cb 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -3,11 +3,16 @@
- -

{{ .Params.leadTitle }}

-

{{ .Params.leadDescription }}

+ + + + OONI logo + +

{{ .Params.leadTitle }}

+

{{ .Params.leadDescription }}

@@ -124,10 +129,7 @@

Contact

Contact the OONI team by sending an email to contact@openobservatory.org. Encrypted emails can be sent using the following PGP key:

-

- Key ID: 6B2943F00CB177B7
- Fingerprint: 4C15 DDA9 96C6 C0CF 48BD 3309 6B29 43F0 0CB1 77B7 -

+ 
🔒 Key ID: 6B2943F00CB177B7
  Fingerprint: 4C15 DDA9 96C6 C0CF 48BD 3309 6B29 43F0 0CB1 77B7
diff --git a/layouts/install/single.html b/layouts/install/single.html index 2097f9fd1..dc22e1e6f 100644 --- a/layouts/install/single.html +++ b/layouts/install/single.html @@ -3,7 +3,12 @@
- + + + + OONI logo +

{{ .Params.leadTitle }}

{{ .Params.leadDescription }}

diff --git a/layouts/section/about.html b/layouts/section/about.html index 5c53ea598..7319b7bbc 100644 --- a/layouts/section/about.html +++ b/layouts/section/about.html @@ -46,12 +46,11 @@

Contact

Encrypted emails can be sent using the following PGP key:

-

-pub 4096R/6B2943F00CB177B7 2016-03-23
-Key fingerprint = 4C15 DDA9 96C6 C0CF 48BD 3309 6B29 43F0 0CB1 77B7
-uid [ultimate] OONI - Open Observatory of Network Interference
-sub 4096R/8EBD2087374399AB 2016-03-23
-

+ 
🔒 pub  4096R/6B2943F00CB177B7 2016-03-23
+  Key  fingerprint = 4C15 DDA9 96C6 C0CF 48BD  3309 6B29 43F0 0CB1 77B7
+  uid  [ultimate] OONI - Open Observatory of Network Interference
+  sub  4096R/8EBD2087374399AB 2016-03-23
+

For real-time communication, you can reach us on Slack or IRC.

diff --git a/layouts/section/data.html b/layouts/section/data.html index 26992991e..70ceb5ab8 100644 --- a/layouts/section/data.html +++ b/layouts/section/data.html @@ -4,7 +4,12 @@
- + + + + OONI Explorer +

OONI Explorer @@ -14,7 +19,14 @@

- + + + + + OONI API + +

The OONI API enables you to perform your own analysis of OONI data. For batch consumption of OONI data, you can fetch the whole OONI dataset from the

- + + + + OONI logo +

Measure internet censorship

diff --git a/static/css/master.css b/static/css/master.css index fc5970cd6..fa8f8e962 100644 --- a/static/css/master.css +++ b/static/css/master.css @@ -1,17 +1,96 @@ /* ================================================================== */ /* Resets */ +/* ================================================================== */ +/* theme */ + +:root { + --body-background: #fff; + --body-font-color: #1c1c1c; + --link: #0588cb; + --link-hover: #0056b3; + --pre-bg: #f2f2f2; + --base-blue: #0588cb; + --base-blue-hover: #056aa6; + --feature-bg-color: #F1F3F5; + --partner-logo-color: unset; + --button-hover-color: #FFF; +} + + +@media (prefers-color-scheme: light) { + :root { + --body-background: #fff; + --body-font-color: #1c1c1c; + --link: #0588cb; + --link-hover: #0056b3; + --pre-bg: #f2f2f2; + --base-blue: #0588cb; + --base-blue-hover: #056aa6; + --feature-bg-color: #F1F3F5; + --partner-logo-color: unset; + --button-hover-color: #FFF; + } +} + +@media (prefers-color-scheme: dark) { + :root { + --body-background: #343a40; + --body-font-color: #dee2e6; + --link: #5db8fe; + --link-hover: #94d1ff; + --pre-bg: #495057; + --base-blue: #056aa6; + --base-blue-hover: #0588cb; + --feature-bg-color: #495057; + --partner-logo-color: #dee2e6; + --button-hover-color: #dee2e6; + } +} + +.light { + --body-background: #fff; + --body-font-color: #1c1c1c; + --link: #0588cb; + --link-hover: #0056b3; + --pre-bg: #f2f2f2; + --base-blue: #0588cb; + --base-blue-hover: #056aa6; + --feature-bg-color: #F1F3F5; + --partner-logo-color: unset; + --button-hover-color: #FFF; +} + +.dark { + --body-background: #343a40; + --body-font-color: #dee2e6; + --link: #5db8fe; + --link-hover: #94d1ff; + --pre-bg: #495057; + --base-blue: #056aa6; + --base-blue-hover: #0588cb; + --feature-bg-color: #495057; + --partner-logo-color: #dee2e6; + --button-hover-color: #dee2e6; +} + /* ================================================================== */ /* Font selection */ html { color: #1c1c1c; + color: var(--body-font-color); background-color: #fff; + background-color: var(--body-background); } body { overflow-x: hidden; font-family: "Fira Sans", sans-serif; + color: #1c1c1c; + color: var(--body-font-color); + background-color: #fff; + background-color: var(--body-background); } h1, h2, h3, h4, h5, nav, .toc { @@ -87,6 +166,50 @@ footer a:hover { background-image: url('/images/logos/mastodon-brands.png'); } +.footer-theme-buttons { + margin: 0; + padding: 0; + background-color: #26292c; + border-radius: 30px; + width: 100px; +} + +.footer-theme-buttons li { + display: inline-block; + cursor: pointer; + padding: 5px; + margin: 0; + transition: 300ms; +} + +.footer-theme-buttons li.active { + background-color: var(--base-blue-hover); + border-radius: 15px; +} + +.footer-theme-buttons li span { + display: block; + background-repeat: no-repeat; + height: 20px; + width: 20px; +} + +.footer-theme-buttons li:hover { + background-color: var(--base-blue-hover); + border-radius: 15px; +} + +.footer-theme-buttons li span.lightsvg { + background-image: url('/images/light.svg'); +} + +.footer-theme-buttons li span.darksvg { + background-image: url('/images/dark.svg'); +} + +.footer-theme-buttons li span.autosvg { + background-image: url('/images/auto.svg'); +} /* ================================================================== */ /* Rows */ @@ -114,6 +237,12 @@ h2.overlined { a { text-decoration: none; color: #0588cb; + color: var(--link); +} + +a:hover { + color: #0056b3; + color: var(--link-hover); } p, ol, ul { @@ -163,14 +292,18 @@ th, td { a.explorer-button { border: 2px solid #ffffff; + border: 2px solid var(--button-hover-color); background-color: #0588cb; -z-index: 999999999; + background-color: var(--base-blue); + z-index: 999999999; } a.explorer-button:hover{ text-decoration: none; color: #0588cb; + color: var(--base-blue); background-color: #ffffff; + background-color: var(--button-hover-color); } .nav-menu-donate{ text-align: center; @@ -183,6 +316,7 @@ a.explorer-button:hover{ } pre { background-color: #f2f2f2; + background-color: var(--pre-bg); padding: 0.5rem 1rem; margin: 1.6rem 0; position: relative; @@ -212,8 +346,11 @@ code { font-weight: 600; text-decoration: none; color: #0588cb; + color: var(--base-blue); background-color: white; + background-color: var(--button-hover-color); border: 1px solid #0588cb; + border: 1px solid var(--base-blue); text-align: center; letter-spacing: .5px; cursor: pointer; @@ -223,7 +360,9 @@ code { .ooni-btn:hover { color: white; border: 1px solid #0588cb; + border: 1px solid var(--base-blue); background-color: #0588cb; + background-color: var(--base-blue); } .square-btn { @@ -232,6 +371,7 @@ code { outline: 0; text-decoration: none; background-color: #0588cb; + background-color: var(--base-blue); color: white; text-align: center; letter-spacing: .5px; @@ -244,6 +384,7 @@ code { .square-btn:hover { background-color: #056aa6; + background-color: var(--base-blue-hover); text-decoration: none; color: white; } @@ -332,6 +473,7 @@ table { th { color: #fff; background: #0588CB; + background: var(--base-blue); border-right: 1px dashed #fff; font-size: 1em; font-weight: 500; @@ -402,6 +544,7 @@ nav.navbar { position: relative; z-index: 10; background-color: #0588cb; + background-color: var(--base-blue); color: #fff; padding-bottom: 10px; } @@ -485,6 +628,7 @@ header .wordmark { /* How it works */ .homepage .ooni-explorer { background-color: #0588cb; + background-color: var(--base-blue); color: #fff; margin-bottom: 3.5rem; } @@ -495,6 +639,7 @@ header .wordmark { .blue-bg-section { background-color: #0588cb; + background-color: var(--base-blue); color: #fff; } @@ -538,6 +683,7 @@ h1.article-title { .read-more { color: #0588cb!important; + color: var(--link)!important; } @@ -592,6 +738,9 @@ h1.article-title { transition: all 350ms ease; align-items: center; justify-content: center; + background-color: unset; + background-color: var(--partner-logo-color); + border-radius: 10px; } .partner-logo { @@ -603,6 +752,25 @@ h1.article-title { bottom: 10px; justify-content: space-between; align-items: center; + background-color: unset; + background-color: var(--partner-logo-color); +} + +.partner-box a { + color: #0588cb; +} + +.partner-box a:hover { + color: #0056b3; +} + +.partner-country { + color: #000; +} + +.partner-page-details .partner-country { + color: #000; + color: var(--body-font-color); } .partner-page-logo { @@ -610,6 +778,8 @@ h1.article-title { justify-content: space-between; align-items: center; width: 200px; + background-color: unset; + background-color: var(--partner-logo-color); height: 180px; border: 1px solid rgba(0,0,0,0.2); border-radius: 4px; @@ -632,6 +802,7 @@ h1.article-title { .back-link { font-weight: bold; color: black; + color: var(--body-font-color); } .stat-box { @@ -682,15 +853,6 @@ div.ooni-team-member { display: block; } -.ooni-team-member .pgp-fingerprint { - word-break: break-all; -} - -.ooni-team-member .pgp-fingerprint:before { - content: "🔒"; - margin-right: 6px; -} - .vertical-align-helper { display: inline-block; height: 100%; @@ -717,6 +879,7 @@ div.ooni-team-member { width: 100%; height: 20rem; background-color: #0588cb; + background-color: var(--base-blue); margin-top: 0.24rem; } @@ -782,6 +945,7 @@ pre span.lw { .toc .active { font-weight: bold; color: #0588cb; + color: var(--base-blue); } .toc a { @@ -808,6 +972,8 @@ pre span.lw { .blog-post img { max-width: 100%; + background-color: unset; + background-color: var(--partner-logo-color); } .clearfix { @@ -911,7 +1077,9 @@ a.icon-links img { .feature-container { background-color: #F1F3F5; + background-color: var(--feature-bg-color); color: #000000; + color: var(--body-font-color); z-index: 5; position: relative; } @@ -978,8 +1146,10 @@ p.test-paragraph { .question-container { border: #0588cb solid 1px; + border: var(--base-blue) solid 1px; border-radius: 10px; background: #0588cb; + background: var(--base-blue); transition: .1s; } @@ -990,13 +1160,16 @@ p.test-paragraph { .question-container:hover { border: #0588cb solid 1px; + border: var(--base-blue) solid 1px; background: white; + background: var(--button-hover-color); cursor: pointer; transition: .1s; } .question-container:hover > a { color: #0588cb; + color: var(--base-blue); transition: .1s; text-decoration: none; } diff --git a/static/data/ooni-api-inverted.svg b/static/data/ooni-api-inverted.svg new file mode 100644 index 000000000..72babee74 --- /dev/null +++ b/static/data/ooni-api-inverted.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/static/data/ooni-api.png b/static/data/ooni-api.png deleted file mode 100644 index 8c03bf37d..000000000 Binary files a/static/data/ooni-api.png and /dev/null differ diff --git a/static/data/ooni-api.svg b/static/data/ooni-api.svg new file mode 100644 index 000000000..4a598fd02 --- /dev/null +++ b/static/data/ooni-api.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/static/data/ooni-explorer-inverted.svg b/static/data/ooni-explorer-inverted.svg new file mode 100644 index 000000000..1bfc06256 --- /dev/null +++ b/static/data/ooni-explorer-inverted.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/data/ooni-explorer.png b/static/data/ooni-explorer.png deleted file mode 100644 index abb8f3015..000000000 Binary files a/static/data/ooni-explorer.png and /dev/null differ diff --git a/static/data/ooni-explorer.svg b/static/data/ooni-explorer.svg new file mode 100644 index 000000000..bc0bc39e6 --- /dev/null +++ b/static/data/ooni-explorer.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/auto.svg b/static/images/auto.svg new file mode 100644 index 000000000..44e5e668d --- /dev/null +++ b/static/images/auto.svg @@ -0,0 +1 @@ + diff --git a/static/images/dark.svg b/static/images/dark.svg new file mode 100644 index 000000000..49a0282e8 --- /dev/null +++ b/static/images/dark.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/static/images/light.svg b/static/images/light.svg new file mode 100644 index 000000000..966a8a39f --- /dev/null +++ b/static/images/light.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/static/images/logos/OONI-VerticalColor-Inverted.png b/static/images/logos/OONI-VerticalColor-Inverted.png new file mode 100644 index 000000000..5dd7a7777 Binary files /dev/null and b/static/images/logos/OONI-VerticalColor-Inverted.png differ diff --git a/static/images/logos/OONI-VerticalColor-Inverted@2x.png b/static/images/logos/OONI-VerticalColor-Inverted@2x.png new file mode 100644 index 000000000..55c6fa124 Binary files /dev/null and b/static/images/logos/OONI-VerticalColor-Inverted@2x.png differ diff --git a/static/install/OONI-logo-horizontal-inverted.svg b/static/install/OONI-logo-horizontal-inverted.svg new file mode 100644 index 000000000..cfbed566f --- /dev/null +++ b/static/install/OONI-logo-horizontal-inverted.svg @@ -0,0 +1,148 @@ + + + + + + + + diff --git a/static/install/index.svg b/static/install/OONI-logo-horizontal.svg similarity index 100% rename from static/install/index.svg rename to static/install/OONI-logo-horizontal.svg diff --git a/static/js/set-theme.js b/static/js/set-theme.js new file mode 100644 index 000000000..8142a467c --- /dev/null +++ b/static/js/set-theme.js @@ -0,0 +1,65 @@ +const themeColor = document.querySelector('meta[name="theme-color"]'); +const colorScheme = document.querySelector('meta[name="color-scheme"]'); +const doc = document.documentElement; +const nav = document.querySelector("nav.navbar"); +const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)"); +const currentTheme = localStorage.getItem("theme"); +const themeButtons = document.querySelectorAll(".footer-theme-buttons li"); +// This function comes from https://michaelti.ca/sandbox/2020/05/01/dark-mode-images-with-a-manual-toggle-switch/ +function changePicturesTheme(userPrefer='') { + document.querySelectorAll('picture > source[data-user-theme]').forEach(element => { + element.remove(); + }); + if (userPrefer) { + document.querySelectorAll(`picture > source[media*="(prefers-color-scheme: ${userPrefer})"]`).forEach(element => { + const cloned = element.cloneNode(); + cloned.removeAttribute('media'); + cloned.setAttribute('data-user-theme', userPrefer); + element.parentNode.prepend(cloned); + }); + } +}; +if (currentTheme == "dark") { + if (!prefersDarkScheme.matches) { + doc.classList.toggle(currentTheme); + } + darkModeBtn.classList.add("active"); +} else if (currentTheme == "light") { + if (prefersDarkScheme.matches) { + doc.classList.toggle(currentTheme); + } + lightModeBtn.classList.add("active"); +} else { + autoModeBtn.classList.add("active"); +} +themeColor.content = getComputedStyle(nav).backgroundColor; +colorScheme.content= currentTheme; +changePicturesTheme(currentTheme); +function setTheme(thisElement, userPrefer = undefined ) { + themeButtons.forEach(function(ele) { + ele.classList.remove("active"); + }); + thisElement.classList.add("active"); + if (userPrefer == 'auto') { + doc.classList.remove("light"); + doc.classList.remove("dark"); + colorScheme.content = "light dark"; + localStorage.removeItem("theme"); + } else if (userPrefer == 'light') { + doc.classList.remove("dark"); + if (!doc.classList.contains(userPrefer)) { + doc.classList.add(userPrefer); + } + colorScheme.content= userPrefer; + localStorage.setItem("theme", userPrefer); + } else if (userPrefer == 'dark') { + doc.classList.remove("light"); + if (!doc.classList.contains(userPrefer)) { + doc.classList.add(userPrefer); + } + colorScheme.content= userPrefer; + localStorage.setItem("theme", userPrefer); + } + themeColor.content = getComputedStyle(nav).backgroundColor; + changePicturesTheme(userPrefer); +} \ No newline at end of file