From a047dc2bd9e6a783871e33523df9808a9c24ebd0 Mon Sep 17 00:00:00 2001 From: xj9 Date: Wed, 1 Mar 2017 22:39:44 -0700 Subject: [PATCH] landing page --- index.html | 34 +++++ normalize.css | 461 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ skyline.png | Bin 0 -> 6157 bytes tokyo.css | 134 +++++++++++++++++ 4 files changed, 629 insertions(+) create mode 100644 index.html create mode 100644 normalize.css create mode 100644 skyline.png create mode 100644 tokyo.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..368cf58 --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + gnu.tokyo + + + + +
+
+
+ + /n(j)uː/ + + tokyo +
+
+ + source + +
+
+ + chat + +
+
+ + discuss + +
+
+
+ diff --git a/normalize.css b/normalize.css new file mode 100644 index 0000000..9b77e0e --- /dev/null +++ b/normalize.css @@ -0,0 +1,461 @@ +/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +/* Document + ========================================================================== */ + +html { + font-family: sans-serif; /* 1 */ + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 3 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/skyline.png b/skyline.png new file mode 100644 index 0000000000000000000000000000000000000000..b7781d39f32c07d06aad1e7a2509ceab8bda1af4 GIT binary patch literal 6157 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 DuZZ+1 literal 0 HcmV?d00001 diff --git a/tokyo.css b/tokyo.css new file mode 100644 index 0000000..5f2e4a3 --- /dev/null +++ b/tokyo.css @@ -0,0 +1,134 @@ +html, +body, +article { + font-family: 'Geostar Fill', sans-serif; + background-color: #000082; +} + +.glitch { + position: relative; + line-height: 1; + font-weight: 700; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + text-decoration: none; + color: #fff; + width: 150%; +} + +.glitch:before, .glitch:after { + display: block; + content: '/n(j)uː/ tokyo'; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + opacity: .8; +} + +.glitch:after { + color: #f0f; + z-index: -2; +} + +.glitch:before { + color: #0ff; + z-index: -1; +} + +.glitch:not(:hover):before { + -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; + animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; +} + +.glitch:not(:hover):after { + -webkit-animation: glitch 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite; + animation: glitch 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite; +} + +@-webkit-keyframes glitch { + 0% { + -webkit-transform: translate(0); + transform: translate(0); + } + 20% { + -webkit-transform: translate(-5px, 5px); + transform: translate(-5px, 5px); + } + 40% { + -webkit-transform: translate(-5px, -5px); + transform: translate(-5px, -5px); + } + 60% { + -webkit-transform: translate(5px, 5px); + transform: translate(5px, 5px); + } + 80% { + -webkit-transform: translate(5px, -5px); + transform: translate(5px, -5px); + } + to { + -webkit-transform: translate(0); + transform: translate(0); + } +} + +@keyframes glitch { + 0% { + -webkit-transform: translate(0); + transform: translate(0); + } + 20% { + -webkit-transform: translate(-5px, 5px); + transform: translate(-5px, 5px); + } + 40% { + -webkit-transform: translate(-5px, -5px); + transform: translate(-5px, -5px); + } + 60% { + -webkit-transform: translate(5px, 5px); + transform: translate(5px, 5px); + } + 80% { + -webkit-transform: translate(5px, -5px); + transform: translate(5px, -5px); + } + to { + -webkit-transform: translate(0); + transform: translate(0); + } +} + +article { + font-size: 28px; + color: #fff; + width: 100vw; + height: 100vh; + background-image: url(skyline.png); + background-position: 50% 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +dt { + cursor: default; + margin-bottom: 1em; +} + +dd::before { + content: "*"; + opacity: 0; + color: #349EFF; +} + +dd:hover::before { + opacity: 1; +} + +article a { + color: inherit; +}