Merge pull request #3198 from wackerow/revanx

Remix RTD Docs design revamp and unification

docs/_static/css/fonts.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "Helvetica";
+  font-style: normal;
+  font-weight: 400;
+  src: local('Helvetica'), url(../fonts/Helvetica.ttc) format('truetype');
+}

docs/_static/css/tokens.css

@@ -0,0 +1,79 @@
+/**
+ * Theme tokens
+ */
+
+/* Base / light mode theme colors */
+:root {
+  /* Typography */
+  --size-body-xs: 0.75rem;
+  --size-body-small: 0.875rem;
+  --size-body-small-link: var(--size-body-small);
+  --size-body: 1rem;
+  --size-body-link: var(--size-body);
+  --size-body-big: 1.125rem;
+  --size-h1: 2.75rem;
+  --size-h2: 2.25rem;
+  --size-h3: 1.875rem;
+  --size-h4: 1.5rem;
+  --size-h5: 1.25rem;
+  --size-h6: 1rem;
+  --size-left-nav-title: var(--size-body);
+  --size-left-nav-lvl-1: var(--size-body-small);
+
+  --line-height-header: 1.625;
+
+  /* Spacing */
+  --space-side-width: 22.5rem;
+  --space-nav-height: 4.25rem;
+  --space-vertical-menu-pad-x: 1.625rem;
+
+  /* Shadows */
+  --shadow-base: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
+
+  /* Colors */
+  --color-background: #FFFFFF;
+  --color-body: #333333;
+  --color-body-light: #5F5F5F;
+  --color-code-background: #F4F4F4;
+  --color-primary: #2F6DF2;
+  --color-primary-transparent: #3B98F620;
+  --color-hover: #2F6DF2B2;
+
+  --color-a: #E0E7F8;
+  --color-b: #DFE6F4;
+  --color-c: #F3F0FF;
+  --color-d: #FFEDFB;
+  --color-gradient: linear-gradient(180deg, var(--color-a) 0%, var(--color-b) 37%, var(--color-c) 75%, var(--color-d) 100%);
+}
+
+/* Dark mode theme colors */
+:root[style*=dark] {
+  --color-background: #2A2C3F !important;
+  --color-body: #F8F8F8 !important;
+  --color-body-light: #A2A3C8 !important;
+  --color-code-background: #1A1B29 !important;
+  --color-primary: #007AA6 !important;
+  --color-primary-transparent: #007AA618;
+  --color-hover: #007AA6E5;
+
+  --color-a: var(--color-code-background);
+  --color-b: var(--color-code-background);
+  --color-c: var(--color-code-background);
+  --color-d: var(--color-code-background);
+}
+
+/* Black mode theme colors */
+:root[style*=black] {
+  --color-background: #0E0E0E !important;
+  --color-body: #F8F8F8 !important;
+  --color-body-light: #CDCDCD !important;
+  --color-code-background: #313131 !important;
+  --color-primary: #709EFF !important;
+  --color-primary-transparent: #709EFF10;
+  --color-hover: #709EFFE5;
+
+  --color-a: #131A2B;
+  --color-b: #121927;
+  --color-c: #262332;
+  --color-d: #32202E;
+}

docs/_static/js/constants.js

@@ -0,0 +1,55 @@
+// Color mode constants
+const COLOR_MODES = [
+  { name: "Light", icon: "_static/img/sun.svg", value: "light" },
+  { name: "Dark", icon: "_static/img/sunset.svg", value: "dark" },
+  { name: "Black", icon: "_static/img/moon.svg", value: "black" },
+]
+
+const COLOR_CHOICES = COLOR_MODES.map(({ value }) => value);
+
+const REMIX_LOGO_PATH = "_static/img/remix-logo.svg"
+const HAMBURGER_PATH = "_static/img/hamburger.svg";
+const CHEVRON_DOWN_PATH = "_static/img/down-arrow.svg";
+const NE_ARROW_PATH = "_static/img/northeast-arrow.svg";
+
+const COLOR_TOGGLE_ICON_CLASS = "color-toggle-icon";
+const MOBILE_MENU_ICON_CLASS = "mobile-menu-toggle-icon";
+const REMIX_LOGO_CLASS = "remix-logo";
+const LEARN_DROPDOWN_CLASS = "dropdown-button"
+const LANGUAGE_BUTTON_CLASS = "language-button"
+const LANGUAGE_MENU_ITEMS_CLASS = "language-menu-items"
+const THEME_BUTTON_WRAPPER_CLASS = "theme-button-wrapper";
+const THEME_BUTTON_CLASS = "theme-button";
+const THEME_DROPDOWN_MENU_CLASS = "theme-dropdown-menu";
+const LS_COLOR_SCHEME = "color-scheme";
+
+// Navigation constants
+const REMIX_HOME_URL = "https://remix-project.org";
+const REMIX_DOCS_URL = "/#"
+const REMIX_IDE_URL = "https://remix.ethereum.org";
+
+// Learn menu
+const LEARNETH_PLUGIN_TUTORIALS_URL = `${REMIX_IDE_URL}/?#activate=LearnEth`;
+const VIDEOS_URL = "https://www.youtube.com/channel/UCjTUPyFEr2xDGN6Cg8nKDaA";
+const ARTICLES_URL = "https://medium.com/remix-ide";
+
+/**
+ * type NavItem = { name: string } & ({ href: string } | { items: NavItem[] })
+ */
+const NAV_LINKS = [
+  { name: "About", href: REMIX_HOME_URL },
+  { name: "Documentation", href: REMIX_DOCS_URL },
+  { name: "IDE", href: REMIX_IDE_URL },
+  {
+    name: "Learn", items: [
+      { name: "Guided IDE Tutorial", href: LEARNETH_PLUGIN_TUTORIALS_URL },
+      { name: "Videos", href: VIDEOS_URL },
+      { name: "Articles", href: ARTICLES_URL },
+    ]
+  },
+]
+
+const MOBILE_MENU_TOGGLE_CLASS = "shift";
+const FLYOVER_MENU_TOGGLE_CLASS = "shift-up";
+const WRAPPER_CLASS = "unified-wrapper";
+

docs/_static/js/initialize.js

@@ -0,0 +1,28 @@
+// Dependencies: ./utils.js
+
+let mode = getColorMode()
+const loadedSvgs = {}
+
+const onDOMContentLoaded = () => {
+  preloadFonts();
+  rearrangeDom();
+  updateEditButtonLabel();
+  preloadColorModeIcons();
+  cleanSearchInput();
+  addHrUnderSearchForm();
+  updateMode();
+  buildHeader();
+  addFooterNote();
+  updateFooterButtonIcons();
+  toggleMobileMenu({ expanded: false });
+  updateFlyoverMenu();
+  setTimeout(hideFlyoverMenu, 250);
+}
+
+function main() {
+  document.addEventListener("DOMContentLoaded", onDOMContentLoaded);
+  document.addEventListener("click", handleGeneralClick);
+  document.addEventListener("keydown", handleKeyDown);
+}
+
+main()