From a822b49025145d40f23685daa56ed0d4512d31f3 Mon Sep 17 00:00:00 2001 From: Cade Scroggins Date: Mon, 13 Jun 2016 19:14:50 -0700 Subject: [PATCH] modularize / add weather --- README.md | 2 +- index.html | 255 ++++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 196 insertions(+), 61 deletions(-) diff --git a/README.md b/README.md index 715fdb5..54f9dca 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Inspired by [/r/startpages](https://www.reddit.com/r/startpages)—the idea is t ## Usage -To go to a site, enter the corresponding key. To view the available commands, enter a `?`. If your input doesn't match any of the commands, a generic google search will be triggered. +To go to a site, enter the corresponding key. To view the available commands, enter a `?`. If your input doesn't match any of the commands, a generic google search will be triggered. Enter nothing to toggle the weather. ## Examples diff --git a/index.html b/index.html index 9957bf1..2be591f 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,10 @@ -~ - - + + +~ @@ -18,43 +18,76 @@ height: 100%; margin: 0; padding: 0; - background-color: #fff; color: #222; font-family: 'Lato', sans-serif; + font-weight: 300; } main { position: absolute; top: 50%; - width: 100%; + right: 0; + left: 0; + width: 90%; + max-width: 310px; + margin: 0 auto; transform: translateY(-98px); text-align: center; } time { + display: block; + margin-bottom: 20px; font-size: 5rem; + line-height: 6rem; letter-spacing: 6px; } + input, + input:focus { + margin: 0; + border: 0; + outline: 0; + -webkit-appearance: none; + -moz-appearance: none; + } + input { box-sizing: border-box; - width: 90%; - max-width: 310px; - margin-top: 20px; + width: 100%; padding: 12px; - background-color: #222; + transition: 0.5s; + transform: translateY(-21px); border-radius: 2px; + background-color: #222; color: #fff; font-family: 'Lato', sans-serif; font-size: 1.1rem; } - input, - input:focus { - border: 0; - outline: 0; - -webkit-appearance: none; - -moz-appearance: none; + input[data-weather="true"] { + border-radius: 0 0 2px 2px; + transform: translateY(0); + } + + .weather { + box-sizing: border-box; + width: 100%; + height: 21px; + padding: 9px 12px 0; + transition: 0.5s; + border-radius: 2px 2px 0 0; + background-color: #222; + color: #fff; + font-size: 0.6rem; + line-height: 0.6rem; + text-transform: capitalize; + opacity: 0; + overflow: auto; + } + + .weather[data-toggled="true"] { + opacity: 1; } aside { @@ -99,21 +132,33 @@ text-decoration: none; } - a:hover span:last-of-type { + a:hover .help-name { text-decoration: underline; } - span:first-of-type { + .help-key { font-family: 'Courier New', monospace; } - span:last-of-type { + .help-name { font-size: 0.9rem; } + + .float-left { + float: left; + } + + .float-right { + float: right; + }
+
+
+
+
@@ -125,8 +170,53 @@