├── content ├── timetravel │ └── _index.md └── posts │ └── timetravel.md ├── data ├── pulls.json └── contributors.json ├── static ├── robots.txt ├── favicon.ico ├── images │ ├── logo.jpg │ ├── logo.png │ └── logo.dark.png ├── fonts │ ├── HKGrotesk-Bold.woff │ ├── HKGrotesk-Light.woff │ ├── HKGrotesk-Italic.woff │ ├── HKGrotesk-Medium.woff │ ├── HKGrotesk-Regular.woff │ ├── HKGrotesk-SemiBold.woff │ ├── HKGrotesk-BoldItalic.woff │ ├── HKGrotesk-BoldLegacy.woff │ ├── HKGrotesk-LegacyItalic.woff │ ├── HKGrotesk-LightItalic.woff │ ├── HKGrotesk-LightLegacy.woff │ ├── HKGrotesk-MediumItalic.woff │ ├── HKGrotesk-MediumLegacy.woff │ ├── HKGrotesk-RegularLegacy.woff │ ├── HKGrotesk-SemiBoldItalic.woff │ ├── HKGrotesk-SemiBoldLegacy.woff │ ├── HKGrotesk-BoldLegacyItalic.woff │ ├── HKGrotesk-LightLegacyItalic.woff │ ├── HKGrotesk-MediumLegacyItalic.woff │ └── HKGrotesk-SemiBoldLegacyItalic.woff ├── files │ ├── Full Logo Oxide_Color.ai │ └── Full Logo Oxide_Color.eps ├── js │ ├── custom.js │ ├── timetravel.js │ └── lib │ │ └── modernizr-2.6.2.min.js ├── css │ ├── timetravel.css │ ├── HKGrotesk.css │ └── custom.css └── data │ └── contributors.json ├── .gitignore ├── config.toml ├── README.md ├── LICENSE ├── Makefile ├── .github └── workflows │ └── update-contributors.yml └── layouts ├── section └── timetravel.html ├── partials ├── logo.svg ├── circuits.svg └── circuit.svg └── index.html /content/timetravel/_index.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /data/pulls.json: -------------------------------------------------------------------------------- 1 | ../static/data/pulls.json -------------------------------------------------------------------------------- /data/contributors.json: -------------------------------------------------------------------------------- 1 | ../static/data/contributors.json -------------------------------------------------------------------------------- /static/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | 4 | Sitemap: sitemap.xml -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.swo 2 | *.swp 3 | .DS_Store 4 | public/ 5 | resources/ 6 | .idea 7 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/favicon.ico -------------------------------------------------------------------------------- /static/images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/images/logo.jpg -------------------------------------------------------------------------------- /static/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/images/logo.png -------------------------------------------------------------------------------- /static/images/logo.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/images/logo.dark.png -------------------------------------------------------------------------------- /content/posts/timetravel.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Timetravel" 3 | date: 2020-01-06T23:52:24Z 4 | draft: true 5 | --- 6 | 7 | -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-Bold.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-Light.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-Italic.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-Medium.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-Regular.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-SemiBold.woff -------------------------------------------------------------------------------- /static/files/Full Logo Oxide_Color.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/files/Full Logo Oxide_Color.ai -------------------------------------------------------------------------------- /static/files/Full Logo Oxide_Color.eps: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/files/Full Logo Oxide_Color.eps -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-BoldItalic.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-BoldLegacy.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-BoldLegacy.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-LegacyItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-LegacyItalic.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-LightItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-LightItalic.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-LightLegacy.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-LightLegacy.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-MediumItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-MediumItalic.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-MediumLegacy.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-MediumLegacy.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-RegularLegacy.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-RegularLegacy.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-SemiBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-SemiBoldItalic.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-SemiBoldLegacy.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-SemiBoldLegacy.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-BoldLegacyItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-BoldLegacyItalic.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-LightLegacyItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-LightLegacyItalic.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-MediumLegacyItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-MediumLegacyItalic.woff -------------------------------------------------------------------------------- /static/fonts/HKGrotesk-SemiBoldLegacyItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oxidecomputer/design-site/HEAD/static/fonts/HKGrotesk-SemiBoldLegacyItalic.woff -------------------------------------------------------------------------------- /config.toml: -------------------------------------------------------------------------------- 1 | # baseurl = "https://design.oxide.computer" 2 | languageCode = "en-us" 3 | title = "Oxide Computer Company" 4 | canonifyUrls = true 5 | 6 | [params] 7 | description = "We are building a small and ambitious UX team to help build a new user experience for computing! We are looking for an engineer who loves amazing design and a designer who loves to code experiences and interfaces." 8 | headline = "We want you" 9 | github_url = "https://github.com/oxidecomputer" 10 | twitter_handle = "oxidecomputer" 11 | google_analytics = "UA-148178470-2" 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # design.oxide.computer 2 | 3 | We are looking for designers who code to help build a new user experience for computing! 4 | 5 | Interested? Send a PR with any improvement to this repo on GitHub or [apply through our careers page](https://oxide.computer/careers/product-engineering/). 6 | 7 | [![Update contributors](https://github.com/oxidecomputer/design-site/workflows/Update%20contributors/badge.svg)](https://github.com/oxidecomputer/design-site/actions?query=workflow%3A%22Update+contributors%22+branch%3Amaster) 8 | 9 | ## Contributing 10 | 11 | ### Running locally 12 | 13 | Install [hugo](https://gohugo.io/). 14 | 15 | Run `hugo serve` to automatically update as you make changes. This will output 16 | the url to the browser. 17 | 18 | Or you can use `make serve`. 19 | 20 | ### Deploying 21 | 22 | The site is deployed on [Vercel](https://vercel.com/) and we get previews of changes in PRs. 23 | 24 | ## Prior Art 25 | 26 | This idea was based off something a team at [Microsoft](https://microsoft.github.io/join-dev-design/) did as well :) 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 Jessie Frazelle 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /static/js/custom.js: -------------------------------------------------------------------------------- 1 | const themeToggle = document.querySelector( 2 | '.theme-toggle input[type="checkbox"]' 3 | ); 4 | themeToggle.addEventListener("change", switchTheme, false); 5 | 6 | function switchTheme(e) { 7 | const theme = e.target.checked ? "dark" : "light"; 8 | document.documentElement.setAttribute("data-theme", theme); 9 | localStorage.setItem("theme", theme); 10 | } 11 | 12 | function selectedTheme() { 13 | return localStorage.getItem("theme"); 14 | } 15 | 16 | const currentTheme = selectedTheme(); 17 | if (currentTheme) { 18 | document.documentElement.setAttribute("data-theme", currentTheme); 19 | } 20 | 21 | const mql = matchMedia("(prefers-color-scheme: dark)"); 22 | if ((mql.matches && currentTheme != "light") || currentTheme === "dark") { 23 | themeToggle.checked = true; 24 | } 25 | 26 | mql.addListener((e) => { 27 | if (!selectedTheme()) { 28 | themeToggle.checked = e.matches; 29 | } 30 | }); 31 | 32 | var paths = document.querySelectorAll('.st0'); 33 | [].forEach.call(paths, function (path) { 34 | var length = path.getTotalLength(); 35 | path.style.transition = path.style.WebkitTransition = 'none'; 36 | path.style.strokeDasharray = length + ' ' + length; 37 | path.style.strokeDashoffset = length; 38 | path.getBoundingClientRect(); 39 | path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 4s ease-in-out'; 40 | path.style.strokeDashoffset = '0'; 41 | }); 42 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | NAME := oxide-website 2 | 3 | # Set the graph driver as the current graphdriver if not set. 4 | DOCKER_GRAPHDRIVER := $(if $(DOCKER_GRAPHDRIVER),$(DOCKER_GRAPHDRIVER),$(shell docker info 2>&1 | grep "Storage Driver" | sed 's/.*: //')) 5 | export DOCKER_GRAPHDRIVER 6 | 7 | # If this session isn't interactive, then we don't want to allocate a 8 | # TTY, which would fail, but if it is interactive, we do want to attach 9 | # so that the user can send e.g. ^C through. 10 | INTERACTIVE := $(shell [ -t 0 ] && echo 1 || echo 0) 11 | ifeq ($(INTERACTIVE), 1) 12 | DOCKER_FLAGS += -t 13 | endif 14 | 15 | DOCKER_FLAGS+=--rm -i \ 16 | --disable-content-trust=true 17 | DOCKER_FLAGS+=-v $(CURDIR):/src/$(NAME) 18 | DOCKER_FLAGS+=--workdir /src/$(NAME) 19 | 20 | all: serve 21 | 22 | IP_ADDRESS := $(shell ifconfig | grep -Eo 'inet (addr:)?([0-9]*\.){3}[0-9]*' | grep -Eo '([0-9]*\.){3}[0-9]*' | grep -v '127.0.0.1' | tail -1) 23 | .PHONY: serve 24 | serve: ## Serve the website locally. 25 | hugo serve --bind $(IP_ADDRESS) --baseURL http://$(IP_ADDRESS) 26 | 27 | .PHONY: help 28 | help: 29 | @grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}' 30 | 31 | check_defined = \ 32 | $(strip $(foreach 1,$1, \ 33 | $(call __check_defined,$1,$(strip $(value 2))))) 34 | 35 | __check_defined = \ 36 | $(if $(value $1),, \ 37 | $(error Undefined $1$(if $2, ($2))$(if $(value @), \ 38 | required by target `$@'))) 39 | -------------------------------------------------------------------------------- /.github/workflows/update-contributors.yml: -------------------------------------------------------------------------------- 1 | on: 2 | push: 3 | branches: 4 | - master # Push events on master branch 5 | name: Update contributors 6 | jobs: 7 | updateContributors: 8 | name: Update contributors 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@master 12 | - name: Fetch origin 13 | run: | 14 | git remote set-url origin https://${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git 15 | git fetch origin 16 | - name: Update contibutors 17 | run: | 18 | mkdir -p static/data 19 | curl -sSL -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" https://api.github.com/repos/oxidecomputer/design-site/contributors > static/data/contributors.json 20 | curl -sSL -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" https://api.github.com/repos/oxidecomputer/design-site/pulls?state=closed > static/data/pulls.json 21 | shell: bash 22 | - name: Commit changes to README 23 | run: | 24 | git config --local user.email "github-actions[bot]@users.noreply.github.com" 25 | git config --local user.name "github-actions[bot]" 26 | git add static/data 27 | git commit -m "Update contributors" || echo "Nothing to commit" 28 | - name: Push Changes 29 | run: | 30 | git push https://${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git HEAD:master 31 | -------------------------------------------------------------------------------- /static/js/timetravel.js: -------------------------------------------------------------------------------- 1 | const previewURLPrefix = "https://design-site-git"; 2 | const previewURLSuffix = ".oxidecomputer.now.sh"; 3 | 4 | const $timeFrame = document.querySelector("#time-frame"); 5 | const $prTitle = document.querySelector("#prTitle"); 6 | const $prMerged = document.querySelector("#prMerged"); 7 | const $prLink = document.querySelector("#prLink"); 8 | const $prUser = document.querySelector("#prUser"); 9 | const $prAvatar = document.querySelector("#prAvatar"); 10 | const $prIndex = document.querySelector("#prIndex"); 11 | const $prCount = document.querySelector("#prCount"); 12 | 13 | let prIndex = 0; 14 | 15 | function firstPR() { 16 | prIndex = 0; 17 | changeContent(); 18 | } 19 | 20 | function nextPR() { 21 | if (prIndex < prNumbers.length - 1) { 22 | prIndex = prIndex + 1; 23 | } 24 | changeContent(); 25 | } 26 | 27 | function previousPR() { 28 | if (prIndex > 0) { 29 | prIndex = prIndex - 1; 30 | } 31 | changeContent(); 32 | } 33 | 34 | function lastPR() { 35 | prIndex = prNumbers.length - 1; 36 | changeContent(); 37 | } 38 | 39 | function changeContent() { 40 | const pr = prMap.get(prNumbers[prIndex]); 41 | // TODO: Replace checks with ES2020 Optional Chaining 42 | // to prevent breaking when repo does not exist anymore 43 | const isFork = pr.head.repo && pr.head.repo.fork || false; 44 | const owner = pr.head.repo && pr.head.repo.owner.login || ''; 45 | const ref = pr.head.ref; 46 | 47 | // Will be: prefix-fork-owner-ref-suffix 48 | // Or: prefix-ref-suffix 49 | $timeFrame.src = `${previewURLPrefix}${isFork ? `-fork-${owner}` : ''}-${ref}${previewURLSuffix}`; 50 | $prTitle.textContent = pr.title; 51 | $prMerged.textContent = pr.merged_at; 52 | $prLink.href = pr.html_url; 53 | $prUser.textContent = pr.user.login; 54 | $prAvatar.src = pr.user.avatar_url; 55 | $prIndex.textContent = prIndex + 1; 56 | $prCount.textContent = prNumbers.length; 57 | } 58 | 59 | document.addEventListener("DOMContentLoaded", function () { 60 | lastPR(); 61 | }); 62 | -------------------------------------------------------------------------------- /static/css/timetravel.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body, 8 | html { 9 | width: 100%; 10 | height: 100%; 11 | margin: 0; 12 | padding: 0; 13 | color: #F2F2F2; 14 | } 15 | 16 | hr { 17 | border: 0; 18 | height: 0; 19 | border-top: 1px solid rgba(0, 0, 0, 0.1); 20 | border-bottom: 1px solid rgba(255, 255, 255, 0.2); 21 | margin-bottom: 1rem; 22 | } 23 | 24 | /* utils */ 25 | 26 | .-text--fade { 27 | opacity: 0.4; 28 | } 29 | 30 | .container { 31 | position: relative; 32 | display: flex; 33 | flex-flow: column nowrap; 34 | height: 100%; 35 | } 36 | 37 | .display-wrapper { 38 | flex: 5; 39 | border: none; 40 | } 41 | 42 | .history { 43 | position: relative; 44 | flex: 0 1 auto; 45 | padding: 2rem; 46 | background: rgba(18, 18, 18, 1); 47 | color: #bbb; 48 | border-left: 1px solid rgba(255, 255, 255, 0.12); 49 | overflow: hidden; 50 | } 51 | 52 | .history a:hover { 53 | border-bottom: none; 54 | } 55 | 56 | .history a svg { 57 | fill: #48d597; 58 | } 59 | 60 | .history__controller { 61 | position: relative; 62 | margin-bottom: 0.5rem; 63 | padding: 1rem 0; 64 | display: flex; 65 | justify-content: space-between; 66 | font-size: 0.8rem; 67 | } 68 | 69 | .history__controller > button { 70 | background: rgba(255, 255, 255, 0.1); 71 | border-radius: 0.2rem; 72 | border: 1px solid transparent; 73 | color: #bbb; 74 | cursor: pointer; 75 | display: inline-block; 76 | padding: 0.25em 0.75em; 77 | position: relative; 78 | transition: all 0.3s ease; 79 | transform: translateY(0); 80 | } 81 | 82 | .history__controller > button > span { 83 | outline: none; 84 | padding: 4px 9px; 85 | margin: -4px -9px; 86 | } 87 | 88 | .history__controller > button:hover { 89 | border-color: rgba(255, 255, 255, 0.1); 90 | box-shadow: 2px 3px #000; 91 | } 92 | 93 | .history__controller > button:active { 94 | box-shadow: none; 95 | } 96 | 97 | .history__exit { 98 | position: absolute; 99 | font-size: 1rem; 100 | top: 1rem; 101 | right: 1rem; 102 | padding: 0.2rem; 103 | } 104 | 105 | .pr__title-wrapper { 106 | display: flex; 107 | justify-content: space-between; 108 | align-items: baseline; 109 | } 110 | 111 | .pr__title { 112 | font-size: 1.5rem; 113 | } 114 | 115 | .pr__people-wrapper { 116 | position: relative; 117 | padding: 0.5rem 0; 118 | } 119 | 120 | .pr__people { 121 | position: relative; 122 | display: block; 123 | margin-bottom: 0.5rem; 124 | } 125 | 126 | .pr__avatar { 127 | position: relative; 128 | width: 2rem; 129 | height: 2rem; 130 | border-radius: 0.25rem; 131 | border: 1px solid rgba(255, 255, 255, 0.2); 132 | overflow: hidden; 133 | } 134 | 135 | .pr__people > * { 136 | display: inline-block; 137 | vertical-align: middle; 138 | } 139 | 140 | .pr__mergedAt { 141 | font-size: 0.9rem; 142 | opacity: 0.5; 143 | } 144 | 145 | @media screen and (min-width: 60rem) { 146 | .container { 147 | flex-direction: row; 148 | } 149 | 150 | .history { 151 | flex: 1 1 10rem; 152 | } 153 | 154 | .history__exit { 155 | padding: 0; 156 | } 157 | } 158 | -------------------------------------------------------------------------------- /layouts/section/timetravel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Oxide Computer Company: Hyperscaler infrastructure for the rest of us 5 | 6 | 7 | 8 | 28 | 29 | 30 |
31 |
32 |

33 | 1 34 | / 35 | 70 36 |

37 |
38 | 39 | 40 | 41 | 42 |
43 |
44 |
45 |
46 |

47 | 48 | 49 | 50 |
51 |

52 |
53 |
54 | 55 |

56 |
57 |
58 |
59 | 60 | 61 | 62 |
63 | 64 |
65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /static/css/HKGrotesk.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'HK Grotesk'; 3 | font-style: normal; 4 | font-weight: normal; 5 | src: local('HK Grotesk Regular'), url('/fonts/HKGrotesk-Regular.woff') format('woff'); 6 | } 7 | 8 | 9 | @font-face { 10 | font-family: 'HK Grotesk Legacy'; 11 | font-style: normal; 12 | font-weight: normal; 13 | src: local('HK Grotesk Regular Legacy'), url('/fonts/HKGrotesk-RegularLegacy.woff') format('woff'); 14 | } 15 | 16 | 17 | @font-face { 18 | font-family: 'HK Grotesk'; 19 | font-style: italic; 20 | font-weight: normal; 21 | src: local('HK Grotesk Italic'), url('/fonts/HKGrotesk-Italic.woff') format('woff'); 22 | } 23 | 24 | 25 | @font-face { 26 | font-family: 'HK Grotesk Legacy'; 27 | font-style: italic; 28 | font-weight: normal; 29 | src: local('HK Grotesk Legacy Italic'), url('/fonts/HKGrotesk-LegacyItalic.woff') format('woff'); 30 | } 31 | 32 | 33 | @font-face { 34 | font-family: 'HK Grotesk'; 35 | font-style: normal; 36 | font-weight: 300; 37 | src: local('HK Grotesk Light'), url('/fonts/HKGrotesk-Light.woff') format('woff'); 38 | } 39 | 40 | 41 | @font-face { 42 | font-family: 'HK Grotesk Legacy'; 43 | font-style: normal; 44 | font-weight: 300; 45 | src: local('HK Grotesk Light Legacy'), url('/fonts/HKGrotesk-LightLegacy.woff') format('woff'); 46 | } 47 | 48 | 49 | @font-face { 50 | font-family: 'HK Grotesk'; 51 | font-style: italic; 52 | font-weight: 300; 53 | src: local('HK Grotesk Light Italic'), url('/fonts/HKGrotesk-LightItalic.woff') format('woff'); 54 | } 55 | 56 | 57 | @font-face { 58 | font-family: 'HK Grotesk Legacy'; 59 | font-style: italic; 60 | font-weight: 300; 61 | src: local('HK Grotesk Light Legacy Italic'), url('/fonts/HKGrotesk-LightLegacyItalic.woff') format('woff'); 62 | } 63 | 64 | 65 | @font-face { 66 | font-family: 'HK Grotesk'; 67 | font-style: normal; 68 | font-weight: 500; 69 | src: local('HK Grotesk Medium'), url('/fonts/HKGrotesk-Medium.woff') format('woff'); 70 | } 71 | 72 | 73 | @font-face { 74 | font-family: 'HK Grotesk Legacy'; 75 | font-style: normal; 76 | font-weight: 500; 77 | src: local('HK Grotesk Medium Legacy'), url('/fonts/HKGrotesk-MediumLegacy.woff') format('woff'); 78 | } 79 | 80 | 81 | @font-face { 82 | font-family: 'HK Grotesk'; 83 | font-style: italic; 84 | font-weight: 500; 85 | src: local('HK Grotesk Medium Italic'), url('/fonts/HKGrotesk-MediumItalic.woff') format('woff'); 86 | } 87 | 88 | 89 | @font-face { 90 | font-family: 'HK Grotesk Legacy'; 91 | font-style: italic; 92 | font-weight: 500; 93 | src: local('HK Grotesk Medium Legacy Italic'), url('/fonts/HKGrotesk-MediumLegacyItalic.woff') format('woff'); 94 | } 95 | 96 | 97 | @font-face { 98 | font-family: 'HK Grotesk'; 99 | font-style: normal; 100 | font-weight: 600; 101 | src: local('HK Grotesk SemiBold'), url('/fonts/HKGrotesk-SemiBold.woff') format('woff'); 102 | } 103 | 104 | 105 | @font-face { 106 | font-family: 'HK Grotesk Legacy'; 107 | font-style: normal; 108 | font-weight: 600; 109 | src: local('HK Grotesk SemiBold Legacy'), url('/fonts/HKGrotesk-SemiBoldLegacy.woff') format('woff'); 110 | } 111 | 112 | 113 | @font-face { 114 | font-family: 'HK Grotesk'; 115 | font-style: italic; 116 | font-weight: 600; 117 | src: local('HK Grotesk SemiBold Italic'), url('/fonts/HKGrotesk-SemiBoldItalic.woff') format('woff'); 118 | } 119 | 120 | 121 | @font-face { 122 | font-family: 'HK Grotesk Legacy'; 123 | font-style: italic; 124 | font-weight: 600; 125 | src: local('HK Grotesk SemiBold Legacy Italic'), url('/fonts/HKGrotesk-SemiBoldLegacyItalic.woff') format('woff'); 126 | } 127 | 128 | 129 | @font-face { 130 | font-family: 'HK Grotesk'; 131 | font-style: normal; 132 | font-weight: 700; 133 | src: local('HK Grotesk Bold'), url('/fonts/HKGrotesk-Bold.woff') format('woff'); 134 | } 135 | 136 | 137 | @font-face { 138 | font-family: 'HK Grotesk Legacy'; 139 | font-style: normal; 140 | font-weight: 700; 141 | src: local('HK Grotesk Bold Legacy'), url('/fonts/HKGrotesk-BoldLegacy.woff') format('woff'); 142 | } 143 | 144 | 145 | @font-face { 146 | font-family: 'HK Grotesk'; 147 | font-style: italic; 148 | font-weight: 700; 149 | src: local('HK Grotesk Bold Italic'), url('/fonts/HKGrotesk-BoldItalic.woff') format('woff'); 150 | } 151 | 152 | 153 | @font-face { 154 | font-family: 'HK Grotesk Legacy'; 155 | font-style: italic; 156 | font-weight: 700; 157 | src: local('HK Grotesk Bold Legacy Italic'), url('/fonts/HKGrotesk-BoldLegacyItalic.woff') format('woff'); 158 | } 159 | -------------------------------------------------------------------------------- /layouts/partials/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /layouts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | {{ .Site.Title }}: Design 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
{{ partial "circuits.svg" . }}
46 |
47 |
48 |
49 | 54 |
55 |

{{.Site.Title}}

56 |

{{.Site.Params.Headline}}

57 |

{{.Site.Params.Description}}

58 |

59 | Interested and align with our principles of operation? 60 | 61 | Send a PR with any improvement to this repo on GitHub or apply through our careers page. 62 | 63 |

64 |
65 |
66 | 70 |
71 | 89 |
90 | 91 | 92 | 93 | 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /static/css/custom.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | :root { 3 | /* color defaults */ 4 | --light-primary-color: #48d597; 5 | --light-font-color: #F2F2F2; 6 | --light-svg-color: #d5d5d5; 7 | --light-bg-color: #222222; 8 | 9 | --dark-primary-color: #1D916F; 10 | --dark-font-color: #222; 11 | --dark-svg-color: #393939; 12 | --dark-bg-color: #F2F2F2; 13 | 14 | --primary-color: var(--light-primary-color); 15 | --font-color: var(--light-font-color); 16 | --svg-color: var(--light-svg-color); 17 | --bg-color: var(--light-bg-color); 18 | 19 | /* typeface defaults */ 20 | --title-font-size: 7vw; 21 | --title-min-font-size: 42px; 22 | --title-max-font-size: 72px; 23 | --base-font-size: 1.2rem; 24 | --base-font-line-height: 26px; 25 | --mobile-base-font-size: 1.0rem; 26 | --mobile-base-font-line-height: 22px; 27 | --small-font-size: 0.7em; 28 | --small-font-line-height: 14px; 29 | /* animations */ 30 | --move-in-offset: 20px; 31 | --move-in-animation: 1s both move-in; 32 | --move-in-base-delay: 80ms; 33 | /* spacing */ 34 | --small-space: 1em; 35 | --large-space: 2em; 36 | --text-block-spacing: 0.5em; 37 | } 38 | 39 | @media (prefers-color-scheme: dark) { 40 | :root { 41 | --primary-color: var(--dark-primary-color); 42 | --font-color: var(--dark-font-color); 43 | --svg-color: var(--dark-svg-color); 44 | --bg-color: var(--dark-bg-color); 45 | } 46 | } 47 | 48 | [data-theme="dark"] { 49 | --primary-color: var(--dark-primary-color); 50 | --font-color: var(--dark-font-color); 51 | --svg-color: var(--dark-svg-color); 52 | --bg-color: var(--dark-bg-color); 53 | } 54 | 55 | [data-theme="light"] { 56 | --primary-color: var(--light-primary-color); 57 | --font-color: var(--light-font-color); 58 | --svg-color: var(--light-svg-color); 59 | --bg-color: var(--light-bg-color); 60 | } 61 | 62 | @keyframes move-in { 63 | from { 64 | transform: translateY(var(--move-in-offset)); 65 | opacity: 0; 66 | } 67 | to { 68 | transform: translateY(0); 69 | opacity: 1; 70 | } 71 | } 72 | 73 | html { 74 | font-family: "HK Grotesk","HK Grotesk Legacy","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; 75 | } 76 | 77 | html, body { 78 | margin: 0; 79 | padding: 0; 80 | } 81 | 82 | body { 83 | height: 100vh; 84 | background-color: var(--bg-color); 85 | color:var(--font-color); 86 | font-size: var(--base-font-size); 87 | line-height: var(--base-font-line-height); 88 | -moz-osx-font-smoothing: grayscale; 89 | -webkit-font-smoothing: antialiased; 90 | transition: background-color var(--move-in-base-delay) ease-in; 91 | position: relative; 92 | } 93 | 94 | .parent { 95 | min-height: 460px; 96 | display: flex; 97 | justify-content: space-evenly; 98 | align-items: center; 99 | flex-direction: column; 100 | padding: 2rem 1rem; 101 | } 102 | 103 | main, 104 | #theme-toggle-container, 105 | footer { 106 | max-width: 768px; 107 | width: 100%; 108 | padding: 0 4rem; 109 | z-index: 1; 110 | background-color: var(--bg-color); 111 | } 112 | 113 | main { 114 | padding-top: 2rem; 115 | } 116 | 117 | #LogoType { 118 | fill: var(--font-color); 119 | } 120 | 121 | footer { 122 | padding-bottom: 2rem; 123 | font-size: var(--small-font-size); 124 | } 125 | 126 | p, 127 | h1, 128 | h3 { 129 | margin: 0; 130 | padding: var(--text-block-spacing) 0; 131 | } 132 | 133 | main h1 { 134 | font-size: var(--title-font-size); 135 | letter-spacing: -0.05em; 136 | font-weight: 800; 137 | animation: var(--move-in-animation); 138 | animation-delay: calc(var(--move-in-base-delay) * 4); 139 | text-transform: uppercase; 140 | margin: 0; 141 | line-height: 0.9; 142 | padding-top: 0; 143 | } 144 | 145 | @media screen and (min-width: 1280px) { 146 | main h1 { 147 | font-size: var(--title-max-font-size); 148 | } 149 | } 150 | 151 | @media only screen and (max-height: 600px) { 152 | main, 153 | #theme-toggle-container, 154 | footer { 155 | width: 49%; 156 | } 157 | } 158 | 159 | @media only screen and (max-width: 600px) { 160 | main, 161 | #theme-toggle-container, 162 | footer { 163 | width: 90%; 164 | padding: 0 2rem; 165 | } 166 | .logo-link { 167 | width: 4rem; 168 | height: 4rem; 169 | } 170 | body { 171 | font-size: var(--mobile-base-font-size); 172 | line-height: var(--mobile-base-font-line-height); 173 | } 174 | main h1 { 175 | font-size: var(--title-min-font-size); 176 | } 177 | } 178 | 179 | main h3 { 180 | font-size: 0.75em; 181 | margin: 2em 0 0.5em 0; 182 | padding: 0 0 0 3em; 183 | position: relative; 184 | color: var(--primary-color); 185 | animation: var(--move-in-animation); 186 | animation-delay: calc(var(--move-in-base-delay) * 4); 187 | } 188 | 189 | main h3::before { 190 | content: ''; 191 | position: absolute; 192 | height: 2px; 193 | width: 2.25em; 194 | left: 0; 195 | top: calc(50% - 1px); 196 | background: currentColor; 197 | } 198 | 199 | logo, 200 | main p, 201 | footer p { 202 | animation: var(--move-in-animation); 203 | } 204 | 205 | main p:nth-of-type(1) { 206 | animation-delay: calc(var(--move-in-base-delay) * 4); 207 | } 208 | 209 | main p:nth-of-type(2) { 210 | animation-delay: calc(var(--move-in-base-delay) * 6); 211 | } 212 | 213 | main p:nth-of-type(3) { 214 | animation-delay: calc(var(--move-in-base-delay) * 8); 215 | } 216 | 217 | footer p:nth-of-type(1) { 218 | animation-delay: calc(var(--move-in-base-delay) * 12); 219 | } 220 | 221 | footer #contributors { 222 | animation: var(--move-in-animation); 223 | animation-delay: calc(var(--move-in-base-delay) * 14); 224 | } 225 | 226 | a { 227 | color: var(--primary-color); 228 | -webkit-transition: all var(--move-in-base-delay) ease-in; 229 | -moz-transition: all var(--move-in-base-delay) ease-in; 230 | -ms-transition: all var(--move-in-base-delay) ease-in; 231 | -o-transition: all var(--move-in-base-delay) ease-in; 232 | transition: all var(--move-in-base-delay) ease-in; 233 | text-decoration: none; 234 | border-bottom: 1px solid transparent; 235 | } 236 | 237 | a:hover { 238 | color: var(--font-color); 239 | border-bottom: 1px solid var(--primary-color); 240 | } 241 | 242 | /* Toggle Styles */ 243 | .theme-toggle { 244 | margin-top: 20px; 245 | margin-bottom: 10px; 246 | animation: var(--move-in-animation); 247 | animation-delay: calc(var(--move-in-base-delay) * 10); 248 | display: inline-block; 249 | height: 24px; 250 | position: relative; 251 | width: 44px; 252 | } 253 | 254 | .theme-toggle input { 255 | display:none; 256 | } 257 | 258 | .slider { 259 | border: 1px solid var(--font-color); 260 | background: var(--font-color); 261 | cursor: pointer; 262 | position: absolute; 263 | top: 0; 264 | right: 0; 265 | bottom: 0; 266 | left: 0; 267 | transition: 80ms; 268 | border-radius: 30px; 269 | } 270 | 271 | .slider:before { 272 | background-color: var(--bg-color); 273 | content: ""; 274 | position: absolute; 275 | left: 3px; 276 | bottom: 3px; 277 | height: 16px; 278 | width: 16px; 279 | transition: 100ms; 280 | border-radius: 50%; 281 | } 282 | 283 | input:checked + .slider { 284 | border-color: var(--font-color); 285 | } 286 | 287 | input:checked + .slider:before { 288 | transform: translateX(19px); 289 | } 290 | 291 | .circuit-svg { 292 | height: 100%; 293 | min-height: 640px; 294 | overflow: hidden; 295 | position: absolute; 296 | top: 0; 297 | right: 0; 298 | bottom: 0; 299 | left: 0; 300 | color: #424242; 301 | background: rgb(255, 255, 255); 302 | background: linear-gradient(0deg, rgba(34, 34, 34, 1) 0%, rgba(0, 0, 0, 0) 50%); 303 | opacity: 0.25; 304 | } 305 | 306 | /* Circles */ 307 | 308 | .circles { 309 | animation: drawCircle 0.8s 2s both; 310 | } 311 | 312 | .st1 { 313 | transition: stroke 180ms ease-in; 314 | } 315 | 316 | @keyframes drawCircle { 317 | from { 318 | opacity: 0; 319 | } 320 | to { 321 | opacity: 1; 322 | } 323 | } 324 | 325 | 326 | /* Lines */ 327 | 328 | .st0 { 329 | animation: drawLine 6s 10s ease-out both; 330 | -webkit-animation: drawLine 6s 10s ease-out forwards; 331 | transition: stroke 900ms ease-in; 332 | } 333 | 334 | @keyframes drawLine { 335 | to { 336 | stroke-dashoffset: 0; 337 | } 338 | } 339 | 340 | /* 341 | * Safari Version 13.0.3 also seems to require the from keyword in order to 342 | * properly render the transition, similar to the chrome and firefox renditions. 343 | */ 344 | 345 | @-webkit-keyframes drawLine { 346 | from { 347 | stroke-dashoffset: 20%; 348 | } 349 | } 350 | -------------------------------------------------------------------------------- /static/js/lib/modernizr-2.6.2.min.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-mq-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function D(a){j.cssText=a}function E(a,b){return D(n.join(a+";")+(b||""))}function F(a,b){return typeof a===b}function G(a,b){return!!~(""+a).indexOf(b)}function H(a,b){for(var d in a){var e=a[d];if(!G(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function I(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:F(f,"function")?f.bind(d||b):f}return!1}function J(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+p.join(d+" ")+d).split(" ");return F(b,"string")||F(b,"undefined")?H(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),I(e,b,c))}function K(){e.input=function(c){for(var d=0,e=c.length;d',a,""].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},z=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return y("@media "+b+" { #"+h+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},A=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=F(e[d],"function"),F(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),B={}.hasOwnProperty,C;!F(B,"undefined")&&!F(B.call,"undefined")?C=function(a,b){return B.call(a,b)}:C=function(a,b){return b in a&&F(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.flexbox=function(){return J("flexWrap")},s.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},s.canvastext=function(){return!!e.canvas&&!!F(b.createElement("canvas").getContext("2d").fillText,"function")},s.webgl=function(){return!!a.WebGLRenderingContext},s.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:y(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},s.geolocation=function(){return"geolocation"in navigator},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!J("indexedDB",a)},s.hashchange=function(){return A("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},s.history=function(){return!!a.history&&!!history.pushState},s.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},s.websockets=function(){return"WebSocket"in a||"MozWebSocket"in a},s.rgba=function(){return D("background-color:rgba(150,255,150,.5)"),G(j.backgroundColor,"rgba")},s.hsla=function(){return D("background-color:hsla(120,40%,100%,.5)"),G(j.backgroundColor,"rgba")||G(j.backgroundColor,"hsla")},s.multiplebgs=function(){return D("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return J("backgroundSize")},s.borderimage=function(){return J("borderImage")},s.borderradius=function(){return J("borderRadius")},s.boxshadow=function(){return J("boxShadow")},s.textshadow=function(){return b.createElement("div").style.textShadow===""},s.opacity=function(){return E("opacity:.55"),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return J("animationName")},s.csscolumns=function(){return J("columnCount")},s.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return D((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),G(j.backgroundImage,"gradient")},s.cssreflections=function(){return J("boxReflect")},s.csstransforms=function(){return!!J("transform")},s.csstransforms3d=function(){var a=!!J("perspective");return a&&"webkitPerspective"in g.style&&y("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},s.csstransitions=function(){return J("transition")},s.fontface=function(){var a;return y('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},s.generatedcontent=function(){var a;return y(["#",h,"{font:0/0 a}#",h,':after{content:"',l,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a},s.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},s.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect},s.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="",(a.firstChild&&a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(m.call(b.createElementNS(r.svg,"animate")))},s.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(m.call(b.createElementNS(r.svg,"clipPath")))};for(var L in s)C(s,L)&&(x=L.toLowerCase(),e[x]=s[L](),v.push((e[x]?"":"no-")+x));return e.input||K(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)C(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},D(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.mq=z,e.hasEvent=A,e.testProp=function(a){return H([a])},e.testAllProps=J,e.testStyles=y,e.prefixed=function(a,b,c){return b?J(a,b,c):J(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | -------------------------------------------------------------------------------- /layouts/partials/circuit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 85 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 151 | 153 | 154 | 155 | 156 | 158 | 160 | 161 | 162 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 193 | 194 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 241 | 242 | 243 | 245 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 259 | 260 | 262 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 281 | 282 | 283 | 284 | 285 | 289 | 292 | 293 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 307 | 310 | 313 | 316 | 318 | 320 | 321 | 322 | 324 | 326 | 329 | 332 | 333 | 336 | 338 | 341 | 348 | 354 | 355 | 356 | 357 | 358 | 364 | 366 | 367 | 368 | 369 | 373 | 377 | 382 | 384 | 385 | 387 | 388 | 393 | 396 | 401 | 406 | 408 | 411 | 414 | 415 | 417 | 418 | 419 | 421 | 422 | 423 | 424 | 425 | 426 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 | 700 | 701 | 702 | 703 | 704 | 705 | 706 | 707 | 708 | 709 | 710 | 711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | 745 | 746 | 747 | 748 | 749 | 750 | 751 | 752 | 753 | 754 | 755 | 756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | 775 | 776 | 777 | 778 | 779 | 780 | 781 | 782 | 783 | 784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | 792 | 793 | 794 | 795 | 796 | 797 | 798 | 799 | 800 | 801 | 802 | 803 | 804 | 805 | 806 | 807 | 808 | 809 | 810 | 811 | --------------------------------------------------------------------------------