Last active
April 5, 2021 17:27
-
-
Save michaelneu/11547cba132ebb41f1a6542c8db01959 to your computer and use it in GitHub Desktop.
A blank page with quotes for Safari's new dark mode
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Untitled</title> | |
| <style type="text/css"> | |
| @keyframes fade-white { | |
| 0% { | |
| background-color: #1e1e1e; | |
| } | |
| 100% { | |
| background-color: white; | |
| } | |
| } | |
| html { | |
| animation: fade-white 1.5s ease-in; | |
| } | |
| body { | |
| display: block; | |
| width: 100vw; | |
| height: 100vh; | |
| position: relative; | |
| margin: 0; | |
| font-family: -apple-system; | |
| } | |
| @keyframes fade-opacity { | |
| 0%, | |
| 75%{ | |
| opacity: 0; | |
| top: 51%; | |
| } | |
| 100% { | |
| opacity: 1; | |
| top: 50%; | |
| } | |
| } | |
| h1 { | |
| display: inline-block; | |
| max-width: 80vw; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-weight: normal; | |
| line-height: 3.5rem; | |
| animation: fade-opacity 1.5s ease-in-out; | |
| } | |
| b { | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 3px; | |
| background-color: #333; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1 id="text"></h1> | |
| <script type="text/javascript"> | |
| const element = document.querySelector("#text"); | |
| const quotes = [ | |
| "Absoluter <b>No-Brainer</b>", | |
| "Da müssen wir <b>proaktiv</b> ran", | |
| "Lass uns lieber <b>face2face</b> schnacken", | |
| "Mach gerne mal ne <b>v1</b>", | |
| "Nimm dazu mal den <b>TPM ins Sparring</b>", | |
| "Das <b>skaliert</b> nicht", | |
| "Ich brauch das <b>ASAP</b>", | |
| "Dazu müssten wir uns <b>committen</b>", | |
| "Halt mich da mal <b>im Loop</b> bitte", | |
| "Ist das <b>cash-relevant</b>", | |
| "Ganz gute <b>Insights</b>", | |
| "Das hier <b>brennt</b> und hat <b>Prio</b>", | |
| "Das ist der <b>Trade-Off</b> der Sache", | |
| "Das ist halt dein <b>Personal Itch</b>", | |
| "Was sind unsere <b>Learnings</b>", | |
| "Aus meiner Sicht ne <b>Low Hanging Fruit</b>", | |
| "First things <b>first</b>", | |
| "Kurzes <b>Standup</b> als <b>Kick-Off</b>", | |
| "Das ist schon in der <b>Pipeline</b>", | |
| "Kannst da mal einen <b>Mockup</b> machen", | |
| "Hab ich auf dem <b>Radar</b>", | |
| "Ist für mich kein <b>Show-Stopper</b>", | |
| "Das müssen wir jetzt endlich mal <b>tacklen</b>", | |
| "Mach mal nen <b>Slack-Channel</b> dazu auf", | |
| ]; | |
| function randomArrayElement(array) { | |
| return array[Math.floor(array.length * Math.random())]; | |
| } | |
| element.innerHTML = randomArrayElement(quotes); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment