[site] Extract website header, footer, and theme changer to separate files Allows them to be reused in other pages on the site. Signed-off-by: James Wainwright <james.wainwright@lowrisc.org>
diff --git a/site/landing/assets/scss/_main-header.scss b/site/landing/assets/scss/_main-header.scss index 12c0522..fb128bd 100644 --- a/site/landing/assets/scss/_main-header.scss +++ b/site/landing/assets/scss/_main-header.scss
@@ -12,7 +12,7 @@ transition: top .1s linear; text-decoration: none; - &:focus, + &:focus, &:focus-visible { top: 0; color: $dark-purple;
diff --git a/site/landing/layouts/index.html b/site/landing/layouts/index.html index 5b98009..4031289 100644 --- a/site/landing/layouts/index.html +++ b/site/landing/layouts/index.html
@@ -22,48 +22,7 @@ <a href="#main" class="skip-link">Skip to main content</a> - <header class="main-header"> - <h1 class="logo"> - <a href="/"> - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1068 200" aria-hidden="true" focusable="false"> - <g fill="#FFF" fill-rule="evenodd"> - <path - d="M932.8 60.2v3.2c-6.6-5.9-15.4-9.3-26.4-9.3-20.5 0-38 15.2-41 38h24.4c1.5 0 2.8-.8 3.3-2.2 3.1-7.8 10.1-12.7 18.9-12.7 11 0 20.8 9 20.8 22 0 13.2-9.8 22-20.8 22-8.8 0-15.8-4.8-18.9-12.7a3.6 3.6 0 00-3.3-2.2h-24.5a41.6 41.6 0 0067.5 28.6v3.3c0 2 1.6 3.5 3.6 3.5h20c2 0 3.5-1.6 3.5-3.5v-78c0-2-1.6-3.5-3.5-3.5h-20c-2 0-3.6 1.6-3.6 3.5zm-524-4a40.6 40.6 0 00-33.2 15.4v-9.9c0-2-1.6-3.5-3.5-3.5h-5.8c-2 0-3.5 1.6-3.5 3.5v30.4h11c1.6 0 3-1 3.4-2.5A31.2 31.2 0 01438 100c0 19.9-14 32.4-31.2 32.4a31.2 31.2 0 01-30-23.4 3.6 3.6 0 00-3.5-2.7h-10.5V167c0 2 1.5 3.5 3.5 3.5h5.8c2 0 3.5-1.6 3.5-3.5v-38.5a40.6 40.6 0 0033.2 15.4 42 42 0 0041.7-43.9 42 42 0 00-41.7-43.8zm658 33.3v48.7c0 2-1.6 3.5-3.6 3.5h-19.8c-2 0-3.6-1.6-3.6-3.5v-43c0-10-5.9-16.7-14.5-16.7-10.7 0-17.6 7.3-17.6 23.7v36c0 2-1.6 3.5-3.6 3.5h-20c-2 0-3.5-1.6-3.5-3.5v-78c0-2 1.5-3.5 3.5-3.5h20c2 0 3.6 1.6 3.6 3.5v4.6a35 35 0 0126-10.7c19.9 0 33 14 33 35.4zM859 135.2c.5 1.6-.3 3.4-1.8 4.1-5.8 2.9-12.2 5-20.6 5-21.1 0-33.8-11.6-33.8-34V78.3h-12c-1.9 0-3.5-1.6-3.5-3.6V60.2c0-2 1.6-3.5 3.6-3.5h11.9V35c0-2 1.5-3.5 3.5-3.5h20c2 0 3.6 1.6 3.6 3.5v21.6h21.5c2 0 3.5 1.6 3.5 3.5v14.4c0 2-1.6 3.6-3.5 3.6h-21.5v29.5c0 8.8 4.2 12.3 11.3 12.3 2.6 0 6-.7 8.9-1.8 2-.7 4 .4 4.6 2.4l4.3 14.6zm-112.3 3v-78c0-2 1.6-3.5 3.6-3.5h20c2 0 3.5 1.6 3.5 3.5v78c0 2-1.6 3.5-3.5 3.5h-20c-2 0-3.6-1.6-3.6-3.5zM776 31.6c0 8.6-6.6 15-15.7 15-9.2 0-15.6-6.4-15.6-15 0-8.3 6.4-15.4 15.6-15.4 9.1 0 15.7 7.1 15.7 15.4zm-42.8 103.6c.5 1.6-.3 3.4-1.8 4.1-5.8 2.9-12.2 5-20.6 5-21.1 0-33.8-11.6-33.8-34V78.3h-12c-1.9 0-3.5-1.6-3.5-3.6V60.2c0-2 1.6-3.5 3.6-3.5H677V35c0-2 1.5-3.5 3.5-3.5h20c2 0 3.6 1.6 3.6 3.5v21.6h21.5c2 0 3.5 1.6 3.5 3.5v14.4c0 2-1.6 3.6-3.5 3.6H704v29.5c0 8.8 4.2 12.3 11.3 12.3 2.6 0 6-.7 8.9-1.8 2-.7 4 .4 4.6 2.4l4.3 14.6zm-85.9-43.5v46.5c0 2-1.5 3.5-3.5 3.5H638c-2 0-3.5-1.6-3.5-3.5V94c0-15.6-9.3-26-23.2-26-17.5 0-29 11.8-29 33.5v36.6c0 2-1.6 3.5-3.5 3.5H573c-2 0-3.6-1.6-3.6-3.5V61.7c0-2 1.6-3.5 3.6-3.5h5.8c2 0 3.5 1.6 3.5 3.5v10.4a35.9 35.9 0 0131.5-16c20.2 0 33.5 14.5 33.5 35.6zM479.1 93h58.1c-2.4-16.4-14-25.4-28-25.4A30 30 0 00479.2 93zm71.1 9.7h-71.6c1.2 18.8 15.4 30 29.8 30 11.1 0 21.2-4 27.3-15.5a3.6 3.6 0 014-1.9l4.6 1.1c2.2.6 3.3 3 2.3 5a40 40 0 01-38.2 22.6 42.2 42.2 0 01-42.3-43.7c0-26.8 20.1-44 43.2-44 22.5 0 40.1 16.7 41 41.6v4.8zM331 99.9a31.2 31.2 0 00-31.5-32.2c-17.2 0-31.8 13-31.8 32.2a31.5 31.5 0 0031.8 32.5A31.4 31.4 0 00331 99.9zm12.7 0a43.1 43.1 0 01-44.2 43.8 43 43 0 01-44.3-43.8 42.8 42.8 0 0144.3-43.6c24.6 0 44.2 18 44.2 43.6zM170.6 106.6v7.1h24.8c2 0 3.6 1.7 3.6 3.6v21.3c0 1.9-1.7 3.5-3.6 3.5h-24.8v28.5H142v24.8c0 2-1.6 3.6-3.5 3.6h-21.3a3.6 3.6 0 01-3.6-3.6v-24.8h-7v-24.9c0-1.9 1.6-3.6 3.5-3.6h32v-32c0-1.8 1.6-3.5 3.5-3.5h24.9zm-117.3 0c1.8 0 3.4 1.6 3.6 3.4v32.2h32c1.8 0 3.4 1.5 3.5 3.3V170.6h-7.1v24.8c0 2-1.7 3.6-3.6 3.6H60.4a3.6 3.6 0 01-3.5-3.6v-24.8H28.4V142H3.6a3.6 3.6 0 01-3.6-3.5v-21.3c0-2 1.7-3.6 3.6-3.6h24.8v-7h24.9zm74.6-35.5v56.8H71.1V71.1h56.8zM81.7 0c2 0 3.6 1.7 3.6 3.6v24.8h7v24.9c0 1.9-1.6 3.6-3.5 3.6h-32v32c0 1.8-1.6 3.5-3.5 3.5H28.4v-7.1H3.6A3.6 3.6 0 010 81.7V60.4C0 58.5 1.7 57 3.6 57h24.8V28.4H57V3.6c0-2 1.6-3.6 3.5-3.6h21.3zm56.9 0c1.9 0 3.5 1.7 3.5 3.6v24.8h28.5V57h24.8c2 0 3.6 1.6 3.6 3.5v21.3c0 2-1.7 3.6-3.6 3.6h-24.8v7h-24.9a3.7 3.7 0 01-3.6-3.3V56.8h-32a3.7 3.7 0 01-3.5-3.3V28.4h7.1V3.6c0-2 1.7-3.6 3.6-3.6h21.3z" /> - </g> - </svg> - <span class="sr-only">opentitan.org</span> - </a> - </h1> - - <nav id="main-nav" class="main-nav" aria-label="Main"> - <ul id="menu" class="main-nav__list"> - <li class="main-nav__item"> - <a href="/book/doc/introduction.html">Documentation</a> - </li> - <li class="main-nav__item"> - <a href="/guides/getting_started">Getting Started</a> - </li> - <li class="main-nav__item"> - <a href="#partners">Partners</a> - </li> - <li class="main-nav__item"> - <a href="{{ .Site.Params.github_repo }}">Source</a> - </li> - <li class="main-nav__item"> - <a href="{{ .Site.Params.one_year_url }}">Blog</a> - </li> - <li class="main-nav__item user-toggle"> - <button class="[ toggle-button ] [ js-mode-toggle ]" aria-label="Switch light and dark theme"> - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> - <path fill="currentColor" - d="M12 2a10 10 0 01.3 20H12a10 10 0 110-20zm0 2a8 8 0 100 16v-3a5 5 0 010-10V4zm0 4v8a4 4 0 100-8z" - fill-rule="evenodd" /> - </svg> - </button> - </li> - </ul> - </nav> - </header> + {{ partial "header.html" . }} <main id="main" role="main"> <section id="intro" class="intro"> @@ -293,65 +252,15 @@ </section> </main> - <footer id="footer" class="footer"> - <svg class="ani-logo" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84"> - <g fill="none" fill-rule="evenodd"> - <rect class="center item" width="24" height="24" x="30" y="30" /> - <path class="ul item" d="M19 19h27v10.5c0 .8-.7 1.5-1.5 1.5H31v13.5c0 .8-.7 1.5-1.5 1.5H19V19z" /> - <path class="ll item" d="M19 65h27V54.5c0-.8-.7-1.5-1.5-1.5H31V39.5c0-.8-.7-1.5-1.5-1.5H19v27z" /> - <path class="ur item" d="M65 19H38v10.5c0 .8.7 1.5 1.5 1.5H53v13.5c0 .8.7 1.5 1.5 1.5H65V19z" /> - <path class="lr item" d="M65 65H38V54.5c0-.8.7-1.5 1.5-1.5H53V39.5c0-.8.7-1.5 1.5-1.5H65v27z" /> - <path class="right item item--outer" - d="M82.5 48c.8 0 1.5.7 1.5 1.5v9c0 .8-.7 1.5-1.5 1.5H69V48h13.5zm0-24c.8 0 1.5.7 1.5 1.5v9c0 .8-.7 1.5-1.5 1.5H69V24h13.5z" /> - <path class="left item item--outer" - d="M15 48v12H1.5C.7 60 0 59.3 0 58.5v-9c0-.8.7-1.5 1.5-1.5H15zm0-24v12H1.5C.7 36 0 35.3 0 34.5v-9c0-.8.7-1.5 1.5-1.5H15z" /> - <path class="top item item--outer" - d="M34.5 0c.8 0 1.5.7 1.5 1.5V15H24V1.5c0-.8.7-1.5 1.5-1.5h9zm24 0c.8 0 1.5.7 1.5 1.5V15H48V1.5c0-.8.7-1.5 1.5-1.5h9z" /> - <path class="bottom item item--outer" - d="M60 69v13.5c0 .8-.7 1.5-1.5 1.5h-9c-.8 0-1.5-.7-1.5-1.5V69h12zm-24 0v13.5c0 .8-.7 1.5-1.5 1.5h-9c-.8 0-1.5-.7-1.5-1.5V69h12z" /> - </g> - </svg> - - <nav class="footer-nav" aria-label="Full"> - <ul class="footer-nav__list"> - <li class="footer-nav__item"> - <a href="/book/doc/introduction.html">Documentation</a> - </li> - <li class="footer-nav__item"> - <a href="/guides/getting_started">Getting Started</a> - </li> - <li class="footer-nav__item"> - <a href="#partners">Partners</a> - </li> - <li class="footer-nav__item"> - <a href="{{ .Site.Params.github_repo }}">Source</a> - </li> - <li class="footer-nav__item"> - <a href="{{ .Site.Params.one_year_url }}">Blog</a> - </li> - <li class="footer-nav__item footer-nav__item--icons"> - <a href="{{ .Site.Params.github_repo }}" aria-label="View on Github"> - <svg focusable="false" width="24" height="20" viewBox="0 0 24 20"> - <path fill="currentColor" fill-rule="evenodd" - d="M11.4 1A9 9 0 002 10c0 4.2 2.7 7.7 6.5 9 .5 0 .7-.2.7-.5v-2.2s-2.7.5-3.3-1.2c0 0-.4-1-1-1.3 0 0-1-.6 0-.6 0 0 1 0 1.5 1 .8 1.4 2.2 1 2.8.7 0-.6.3-1 .6-1.2-2.1-.2-4.3-.5-4.3-4.1 0-1 .3-1.6.9-2.2C6.3 7 6 6 6.5 4.9c.8-.3 2.6 1 2.6 1a9.3 9.3 0 014.9 0s1.8-1.3 2.6-1c.6 1.2.2 2.2.1 2.5.6.6 1 1.2 1 2.2 0 3.6-2.2 3.9-4.4 4 .4.4.7 1 .7 1.8v3.1c0 .3.1.6.6.5a9.3 9.3 0 006.5-9c0-5-4.4-9-9.7-9z" /> - </svg> - </a> - </li> - </ul> - </nav> - - <p>© 2019 – {{ now.Format "2006" }} lowRISC contributors, <a href="/privacy-policy/">Privacy - Policy</a>, <a href="/usage-policy/">Usage Policy</a>.</p> - <p>The text content on this website is licensed under a - <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons - Attribution 4.0 International License</a>, except where otherwise noted.</p> - <p>No license is granted for the OpenTitan logo or other trademarks. <a - href="/trademark-usage-policy/">Trademark Usage Policy</a>.</p> - </footer> + {{ partial "footer.html" . }} <script src="/js/tiny-slider.js"></script> + <script src="/js/theme-changer.js"></script> <script> + // Enable JS features + document.documentElement.classList.remove('no-js'); + // Tiny Slider for Quotes var slider = tns({ container: '.js-partner-quotes', @@ -375,58 +284,6 @@ slider.updateSliderHeight() }) } - // Light and dark theme - document.documentElement.classList.remove('no-js'); - const STORAGE_KEY = 'user-color-scheme'; - const COLOR_MODE_KEY = '--color-mode'; - - const modeToggleButton = document.querySelector('.js-mode-toggle'); - - const getCSSCustomProp = propKey => { - let response = getComputedStyle(document.documentElement).getPropertyValue(propKey); - - if (response.length) { - response = response.replace(/\"/g, '').trim(); - } - - return response; - }; - - const applySetting = passedSetting => { - let currentSetting = passedSetting || localStorage.getItem(STORAGE_KEY); - - if (currentSetting) { - document.documentElement.setAttribute('data-user-color-scheme', currentSetting) - } - }; - - const toggleSetting = () => { - let currentSetting = localStorage.getItem(STORAGE_KEY); - - switch (currentSetting) { - case null: - currentSetting = getCSSCustomProp(COLOR_MODE_KEY) === 'dark' ? 'light' : 'dark'; - break; - case 'light': - currentSetting = 'dark'; - break; - case 'dark': - currentSetting = 'light'; - break; - } - - localStorage.setItem(STORAGE_KEY, currentSetting); - - return currentSetting; - }; - - modeToggleButton.addEventListener('click', evt => { - evt.preventDefault(); - - applySetting(toggleSetting()); - }); - - applySetting(); // control animation on intro area const intro = document.getElementById('intro');
diff --git a/site/landing/layouts/partials/footer.html b/site/landing/layouts/partials/footer.html new file mode 100644 index 0000000..2037cbd --- /dev/null +++ b/site/landing/layouts/partials/footer.html
@@ -0,0 +1,55 @@ +<footer id="footer" class="footer"> + <svg class="ani-logo" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84"> + <g fill="none" fill-rule="evenodd"> + <rect class="center item" width="24" height="24" x="30" y="30" /> + <path class="ul item" d="M19 19h27v10.5c0 .8-.7 1.5-1.5 1.5H31v13.5c0 .8-.7 1.5-1.5 1.5H19V19z" /> + <path class="ll item" d="M19 65h27V54.5c0-.8-.7-1.5-1.5-1.5H31V39.5c0-.8-.7-1.5-1.5-1.5H19v27z" /> + <path class="ur item" d="M65 19H38v10.5c0 .8.7 1.5 1.5 1.5H53v13.5c0 .8.7 1.5 1.5 1.5H65V19z" /> + <path class="lr item" d="M65 65H38V54.5c0-.8.7-1.5 1.5-1.5H53V39.5c0-.8.7-1.5 1.5-1.5H65v27z" /> + <path class="right item item--outer" + d="M82.5 48c.8 0 1.5.7 1.5 1.5v9c0 .8-.7 1.5-1.5 1.5H69V48h13.5zm0-24c.8 0 1.5.7 1.5 1.5v9c0 .8-.7 1.5-1.5 1.5H69V24h13.5z" /> + <path class="left item item--outer" + d="M15 48v12H1.5C.7 60 0 59.3 0 58.5v-9c0-.8.7-1.5 1.5-1.5H15zm0-24v12H1.5C.7 36 0 35.3 0 34.5v-9c0-.8.7-1.5 1.5-1.5H15z" /> + <path class="top item item--outer" + d="M34.5 0c.8 0 1.5.7 1.5 1.5V15H24V1.5c0-.8.7-1.5 1.5-1.5h9zm24 0c.8 0 1.5.7 1.5 1.5V15H48V1.5c0-.8.7-1.5 1.5-1.5h9z" /> + <path class="bottom item item--outer" + d="M60 69v13.5c0 .8-.7 1.5-1.5 1.5h-9c-.8 0-1.5-.7-1.5-1.5V69h12zm-24 0v13.5c0 .8-.7 1.5-1.5 1.5h-9c-.8 0-1.5-.7-1.5-1.5V69h12z" /> + </g> + </svg> + + <nav class="footer-nav" aria-label="Full"> + <ul class="footer-nav__list"> + <li class="footer-nav__item"> + <a href="/book/doc/introduction.html">Documentation</a> + </li> + <li class="footer-nav__item"> + <a href="/guides/getting_started">Getting Started</a> + </li> + <li class="footer-nav__item"> + <a href="#partners">Partners</a> + </li> + <li class="footer-nav__item"> + <a href="{{ .Site.Params.github_repo }}">Source</a> + </li> + <li class="footer-nav__item"> + <a href="{{ .Site.Params.one_year_url }}">Blog</a> + </li> + <li class="footer-nav__item footer-nav__item--icons"> + <a href="{{ .Site.Params.github_repo }}" aria-label="View on Github"> + <svg focusable="false" width="24" height="20" viewBox="0 0 24 20"> + <path fill="currentColor" fill-rule="evenodd" + d="M11.4 1A9 9 0 002 10c0 4.2 2.7 7.7 6.5 9 .5 0 .7-.2.7-.5v-2.2s-2.7.5-3.3-1.2c0 0-.4-1-1-1.3 0 0-1-.6 0-.6 0 0 1 0 1.5 1 .8 1.4 2.2 1 2.8.7 0-.6.3-1 .6-1.2-2.1-.2-4.3-.5-4.3-4.1 0-1 .3-1.6.9-2.2C6.3 7 6 6 6.5 4.9c.8-.3 2.6 1 2.6 1a9.3 9.3 0 014.9 0s1.8-1.3 2.6-1c.6 1.2.2 2.2.1 2.5.6.6 1 1.2 1 2.2 0 3.6-2.2 3.9-4.4 4 .4.4.7 1 .7 1.8v3.1c0 .3.1.6.6.5a9.3 9.3 0 006.5-9c0-5-4.4-9-9.7-9z" /> + </svg> + </a> + </li> + </ul> + </nav> + + <p>© 2019 – {{ now.Format "2006" }} lowRISC contributors, <a href="/privacy-policy/">Privacy + Policy</a>, <a href="/usage-policy/">Usage Policy</a>.</p> + <p>The text content on this website is licensed under a + <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons + Attribution 4.0 International License</a>, except where otherwise noted.</p> + <p>No license is granted for the OpenTitan logo or other trademarks. <a + href="/trademark-usage-policy/">Trademark Usage Policy</a>.</p> +</footer>
diff --git a/site/landing/layouts/partials/head.html b/site/landing/layouts/partials/head.html index 82165bb..48c99e0 100644 --- a/site/landing/layouts/partials/head.html +++ b/site/landing/layouts/partials/head.html
@@ -29,7 +29,13 @@ {{ $style := resources.Get "scss/style.scss" | resources.ToCSS $options }} <link rel="stylesheet" href="{{ $style.Permalink }}"> + {{ with .Params.ExtraStyles }} + {{ range $css_url := . }} + <link rel="stylesheet" href="{{ $css_url }}"> + {{ end }} + {{ end }} + <title>{{ .Title }} | OpenTitan</title> - {{ partial "gtag" . }} + {{ partial "gtag" . }} </head>
diff --git a/site/landing/layouts/partials/header.html b/site/landing/layouts/partials/header.html new file mode 100644 index 0000000..88ac336 --- /dev/null +++ b/site/landing/layouts/partials/header.html
@@ -0,0 +1,42 @@ +<header class="main-header"> + <h1 class="logo"> + <a href="/"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1068 200" aria-hidden="true" focusable="false"> + <g fill="#FFF" fill-rule="evenodd"> + <path + d="M932.8 60.2v3.2c-6.6-5.9-15.4-9.3-26.4-9.3-20.5 0-38 15.2-41 38h24.4c1.5 0 2.8-.8 3.3-2.2 3.1-7.8 10.1-12.7 18.9-12.7 11 0 20.8 9 20.8 22 0 13.2-9.8 22-20.8 22-8.8 0-15.8-4.8-18.9-12.7a3.6 3.6 0 00-3.3-2.2h-24.5a41.6 41.6 0 0067.5 28.6v3.3c0 2 1.6 3.5 3.6 3.5h20c2 0 3.5-1.6 3.5-3.5v-78c0-2-1.6-3.5-3.5-3.5h-20c-2 0-3.6 1.6-3.6 3.5zm-524-4a40.6 40.6 0 00-33.2 15.4v-9.9c0-2-1.6-3.5-3.5-3.5h-5.8c-2 0-3.5 1.6-3.5 3.5v30.4h11c1.6 0 3-1 3.4-2.5A31.2 31.2 0 01438 100c0 19.9-14 32.4-31.2 32.4a31.2 31.2 0 01-30-23.4 3.6 3.6 0 00-3.5-2.7h-10.5V167c0 2 1.5 3.5 3.5 3.5h5.8c2 0 3.5-1.6 3.5-3.5v-38.5a40.6 40.6 0 0033.2 15.4 42 42 0 0041.7-43.9 42 42 0 00-41.7-43.8zm658 33.3v48.7c0 2-1.6 3.5-3.6 3.5h-19.8c-2 0-3.6-1.6-3.6-3.5v-43c0-10-5.9-16.7-14.5-16.7-10.7 0-17.6 7.3-17.6 23.7v36c0 2-1.6 3.5-3.6 3.5h-20c-2 0-3.5-1.6-3.5-3.5v-78c0-2 1.5-3.5 3.5-3.5h20c2 0 3.6 1.6 3.6 3.5v4.6a35 35 0 0126-10.7c19.9 0 33 14 33 35.4zM859 135.2c.5 1.6-.3 3.4-1.8 4.1-5.8 2.9-12.2 5-20.6 5-21.1 0-33.8-11.6-33.8-34V78.3h-12c-1.9 0-3.5-1.6-3.5-3.6V60.2c0-2 1.6-3.5 3.6-3.5h11.9V35c0-2 1.5-3.5 3.5-3.5h20c2 0 3.6 1.6 3.6 3.5v21.6h21.5c2 0 3.5 1.6 3.5 3.5v14.4c0 2-1.6 3.6-3.5 3.6h-21.5v29.5c0 8.8 4.2 12.3 11.3 12.3 2.6 0 6-.7 8.9-1.8 2-.7 4 .4 4.6 2.4l4.3 14.6zm-112.3 3v-78c0-2 1.6-3.5 3.6-3.5h20c2 0 3.5 1.6 3.5 3.5v78c0 2-1.6 3.5-3.5 3.5h-20c-2 0-3.6-1.6-3.6-3.5zM776 31.6c0 8.6-6.6 15-15.7 15-9.2 0-15.6-6.4-15.6-15 0-8.3 6.4-15.4 15.6-15.4 9.1 0 15.7 7.1 15.7 15.4zm-42.8 103.6c.5 1.6-.3 3.4-1.8 4.1-5.8 2.9-12.2 5-20.6 5-21.1 0-33.8-11.6-33.8-34V78.3h-12c-1.9 0-3.5-1.6-3.5-3.6V60.2c0-2 1.6-3.5 3.6-3.5H677V35c0-2 1.5-3.5 3.5-3.5h20c2 0 3.6 1.6 3.6 3.5v21.6h21.5c2 0 3.5 1.6 3.5 3.5v14.4c0 2-1.6 3.6-3.5 3.6H704v29.5c0 8.8 4.2 12.3 11.3 12.3 2.6 0 6-.7 8.9-1.8 2-.7 4 .4 4.6 2.4l4.3 14.6zm-85.9-43.5v46.5c0 2-1.5 3.5-3.5 3.5H638c-2 0-3.5-1.6-3.5-3.5V94c0-15.6-9.3-26-23.2-26-17.5 0-29 11.8-29 33.5v36.6c0 2-1.6 3.5-3.5 3.5H573c-2 0-3.6-1.6-3.6-3.5V61.7c0-2 1.6-3.5 3.6-3.5h5.8c2 0 3.5 1.6 3.5 3.5v10.4a35.9 35.9 0 0131.5-16c20.2 0 33.5 14.5 33.5 35.6zM479.1 93h58.1c-2.4-16.4-14-25.4-28-25.4A30 30 0 00479.2 93zm71.1 9.7h-71.6c1.2 18.8 15.4 30 29.8 30 11.1 0 21.2-4 27.3-15.5a3.6 3.6 0 014-1.9l4.6 1.1c2.2.6 3.3 3 2.3 5a40 40 0 01-38.2 22.6 42.2 42.2 0 01-42.3-43.7c0-26.8 20.1-44 43.2-44 22.5 0 40.1 16.7 41 41.6v4.8zM331 99.9a31.2 31.2 0 00-31.5-32.2c-17.2 0-31.8 13-31.8 32.2a31.5 31.5 0 0031.8 32.5A31.4 31.4 0 00331 99.9zm12.7 0a43.1 43.1 0 01-44.2 43.8 43 43 0 01-44.3-43.8 42.8 42.8 0 0144.3-43.6c24.6 0 44.2 18 44.2 43.6zM170.6 106.6v7.1h24.8c2 0 3.6 1.7 3.6 3.6v21.3c0 1.9-1.7 3.5-3.6 3.5h-24.8v28.5H142v24.8c0 2-1.6 3.6-3.5 3.6h-21.3a3.6 3.6 0 01-3.6-3.6v-24.8h-7v-24.9c0-1.9 1.6-3.6 3.5-3.6h32v-32c0-1.8 1.6-3.5 3.5-3.5h24.9zm-117.3 0c1.8 0 3.4 1.6 3.6 3.4v32.2h32c1.8 0 3.4 1.5 3.5 3.3V170.6h-7.1v24.8c0 2-1.7 3.6-3.6 3.6H60.4a3.6 3.6 0 01-3.5-3.6v-24.8H28.4V142H3.6a3.6 3.6 0 01-3.6-3.5v-21.3c0-2 1.7-3.6 3.6-3.6h24.8v-7h24.9zm74.6-35.5v56.8H71.1V71.1h56.8zM81.7 0c2 0 3.6 1.7 3.6 3.6v24.8h7v24.9c0 1.9-1.6 3.6-3.5 3.6h-32v32c0 1.8-1.6 3.5-3.5 3.5H28.4v-7.1H3.6A3.6 3.6 0 010 81.7V60.4C0 58.5 1.7 57 3.6 57h24.8V28.4H57V3.6c0-2 1.6-3.6 3.5-3.6h21.3zm56.9 0c1.9 0 3.5 1.7 3.5 3.6v24.8h28.5V57h24.8c2 0 3.6 1.6 3.6 3.5v21.3c0 2-1.7 3.6-3.6 3.6h-24.8v7h-24.9a3.7 3.7 0 01-3.6-3.3V56.8h-32a3.7 3.7 0 01-3.5-3.3V28.4h7.1V3.6c0-2 1.7-3.6 3.6-3.6h21.3z" /> + </g> + </svg> + <span class="sr-only">opentitan.org</span> + </a> + </h1> + + <nav id="main-nav" class="main-nav" aria-label="Main"> + <ul id="menu" class="main-nav__list"> + <li class="main-nav__item"> + <a href="/book/doc/introduction.html">Documentation</a> + </li> + <li class="main-nav__item"> + <a href="/guides/getting_started">Getting Started</a> + </li> + <li class="main-nav__item"> + <a href="#partners">Partners</a> + </li> + <li class="main-nav__item"> + <a href="{{ .Site.Params.github_repo }}">Source</a> + </li> + <li class="main-nav__item"> + <a href="{{ .Site.Params.one_year_url }}">Blog</a> + </li> + <li class="main-nav__item user-toggle"> + <button class="[ toggle-button ] [ js-mode-toggle ]" aria-label="Switch light and dark theme"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <path fill="currentColor" + d="M12 2a10 10 0 01.3 20H12a10 10 0 110-20zm0 2a8 8 0 100 16v-3a5 5 0 010-10V4zm0 4v8a4 4 0 100-8z" + fill-rule="evenodd" /> + </svg> + </button> + </li> + </ul> + </nav> +</header>
diff --git a/site/landing/static/js/theme-changer.js b/site/landing/static/js/theme-changer.js new file mode 100644 index 0000000..4369aba --- /dev/null +++ b/site/landing/static/js/theme-changer.js
@@ -0,0 +1,50 @@ +const STORAGE_KEY = 'user-color-scheme'; +const COLOR_MODE_KEY = '--color-mode'; + +const modeToggleButton = document.querySelector('.js-mode-toggle'); + +const getCSSCustomProp = propKey => { + let response = getComputedStyle(document.documentElement).getPropertyValue(propKey); + + if (response.length) { + response = response.replace(/\"/g, '').trim(); + } + + return response; +}; + +const applySetting = passedSetting => { + let currentSetting = passedSetting || localStorage.getItem(STORAGE_KEY); + + if (currentSetting) { + document.documentElement.setAttribute('data-user-color-scheme', currentSetting) + } +}; + +const toggleSetting = () => { + let currentSetting = localStorage.getItem(STORAGE_KEY); + + switch (currentSetting) { + case null: + currentSetting = getCSSCustomProp(COLOR_MODE_KEY) === 'dark' ? 'light' : 'dark'; + break; + case 'light': + currentSetting = 'dark'; + break; + case 'dark': + currentSetting = 'light'; + break; + } + + localStorage.setItem(STORAGE_KEY, currentSetting); + + return currentSetting; +}; + +modeToggleButton.addEventListener('click', evt => { + evt.preventDefault(); + + applySetting(toggleSetting()); +}); + +applySetting();