From d376e8adee850c4976a0d55ba17a6b8f17ccc302 Mon Sep 17 00:00:00 2001 From: CaptainArk Date: Sun, 13 Mar 2016 20:43:07 +0100 Subject: [PATCH] moving all style to css file --- css/homepage.css | 141 ------------------------------------------- css/homepage.sass | 144 -------------------------------------------- css/mystartpage.css | 91 ++++++++++++++++++++++++++++ index.html | 26 +------- 4 files changed, 92 insertions(+), 310 deletions(-) delete mode 100644 css/homepage.css delete mode 100644 css/homepage.sass create mode 100644 css/mystartpage.css diff --git a/css/homepage.css b/css/homepage.css deleted file mode 100644 index 9393d93..0000000 --- a/css/homepage.css +++ /dev/null @@ -1,141 +0,0 @@ -@import url(/home/mike/scripts/START/js/weather.js); -@import url(http://fonts.googleapis.com/css?family=Roboto:400,200); -* { - margin: 0; - padding: 0; } - -form { - width: 100%; - margin: auto; - padding: 0px; - text-align: center; - background: #2D2D2D; - position: relative; - top: 60px; } - -.search { - width: 440px; - height: 20px; - margin-right: 0px; - padding: 5px; - background: #2D2D2D; - font-family: "Roboto", "Consolas", "Helvetica", sans-serif; - font-size: 12px; - letter-spacing: 0.5px; - color: #7d7d7d; - opacity: .5; - border: 2.5px solid #7d7d7d; } - .search:hover { - border: 2.5px solid #8f8f8f; } - .search:focus { - outline: none; - border: 2.5px solid #8f8f8f; } - -@font-face { - font-family: 'weather'; - src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot'); - src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'), - url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'), - url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'), - url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg'); - font-weight: normal; - font-style: normal; -} - -/* TODO figure out how to make this to work */ - -#weather { - width: 500px; - height: 40px; - margin: 0px auto; - padding: 45px 0; - font: "Roboto", "Consolas", "Helvetica", sans-serif; - text-align: center; - text-transform: uppercase; -} - -i { - color: #7d7d7d; - font-family: weather; - font-size: 150px; - font-weight: normal; - font-style: normal; - line-height: 0.0; - opacity: 0.5; -} - -.icon-0:before { content: ":"; } -.icon-1:before { content: "p"; } -.icon-2:before { content: "S"; } -.icon-3:before { content: "Q"; } -.icon-4:before { content: "S"; } -.icon-5:before { content: "W"; } -.icon-6:before { content: "W"; } -.icon-7:before { content: "W"; } -.icon-8:before { content: "W"; } -.icon-9:before { content: "I"; } -.icon-10:before { content: "W"; } -.icon-11:before { content: "I"; } -.icon-12:before { content: "I"; } -.icon-13:before { content: "I"; } -.icon-14:before { content: "I"; } -.icon-15:before { content: "W"; } -.icon-16:before { content: "I"; } -.icon-17:before { content: "W"; } -.icon-18:before { content: "U"; } -.icon-19:before { content: "Z"; } -.icon-20:before { content: "Z"; } -.icon-21:before { content: "Z"; } -.icon-22:before { content: "Z"; } -.icon-23:before { content: "Z"; } -.icon-24:before { content: "E"; } -.icon-25:before { content: "E"; } -.icon-26:before { content: "3"; } -.icon-27:before { content: "a"; } -.icon-28:before { content: "A"; } -.icon-29:before { content: "a"; } -.icon-30:before { content: "A"; } -.icon-31:before { content: "6"; } -.icon-32:before { content: "1"; } -.icon-33:before { content: "6"; } -.icon-34:before { content: "1"; } -.icon-35:before { content: "W"; } -.icon-36:before { content: "1"; } -.icon-37:before { content: "S"; } -.icon-38:before { content: "S"; } -.icon-39:before { content: "S"; } -.icon-40:before { content: "M"; } -.icon-41:before { content: "W"; } -.icon-42:before { content: "I"; } -.icon-43:before { content: "W"; } -.icon-44:before { content: "a"; } -.icon-45:before { content: "S"; } -.icon-46:before { content: "U"; } -.icon-47:before { content: "S"; } - -#weather h2 { - margin: 0 0 8px; - color: #7d7d7d; - font-size: 55px; - font-weight: 300; - text-align: center; - opacity: 0.5; - text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15); -} - -#weather ul { - margin: 0; - padding: 0; -} - -#weather li { - background: #7d7d7d; - background: rgba(255,255,255,0.90); - padding: 20px; - display: inline-block; - border-radius: 5px; -} - -#weather .currently { - margin: 0 20px; -} \ No newline at end of file diff --git a/css/homepage.sass b/css/homepage.sass deleted file mode 100644 index f2f8b51..0000000 --- a/css/homepage.sass +++ /dev/null @@ -1,144 +0,0 @@ -// -// fonts -// -@import url(http://fonts.googleapis.com/css?family=Roboto:400,200) - - -// -// vars -// -$primary: #2980b9 -$background: #fff -$background-img: url(../img/background.jpg) -$search-border: $primary -$search-hover: #6BB9F0 -$font: 'Roboto', 'Consolas', 'Helvetica', sans-serif - - -// -// page setup -// -* - margin: 0 - padding: 0 - -html - background: $background-img center center no-repeat - background-size: cover - -*::-webkit-input-placeholder - opacity: 0.3 - -.total-container - height: 100vh - width: 100% - background: $background - opacity: 0.8 - font-size: 11px - -webkit-font-smoothing: antialiased - -moz-font-smoothing: antialiased - -ms-font-smoothing: antialiased - -o-font-smoothing: antialiased - font-smoothing: antialiased - -p, li, a - color: $primary - font-family: $font - font-weight: 400 - letter-spacing: 2px - -.container - height: 340px - width: 90% - position: absolute - margin: auto - top: 0 - left: 0 - right: 0 - bottom: 0 - -// -// favorites -// -.favorites - width: 90% - margin: 10px auto 0 auto - text-align: center - -.favorites p - border-bottom: 1px solid $primary - padding-right: 100% - -.list - display: inline-block - width: 20% - margin: 0 15px - vertical-align: text-top - -.list ul - list-style-type: none - -a - text-decoration: none - display: block - padding: 3px - &:hover - color: $background - background: $primary - - -// -// google pages -// -.googles - width: 90% - margin: 25px auto - text-align: center - -.googles p - display: inline-block - width: 25% - margin: 10px 10px - border: 1px solid $primary - - -// -// search bars -// -form - width: 90% - margin: auto - padding: 5px - text-align: center - position: relative - -.search - width: 400px - height: 15px - margin-right: -4px - padding: 5px - background: $background - font-family: $font - font-size: 12px - letter-spacing: 0.5px - color: $primary - border: 1px solid $search-border - &:hover - border: 1px solid $search-hover - &:focus - outline: none - border: 1px solid $search-hover - -.go - height: 27px - width: 40px - background: $background - color: $primary - border: 1px solid $primary - &:hover - background: $primary - color: $background - cursor: pointer - &:focus - outline: none - diff --git a/css/mystartpage.css b/css/mystartpage.css new file mode 100644 index 0000000..dc23383 --- /dev/null +++ b/css/mystartpage.css @@ -0,0 +1,91 @@ +@import url(http://fonts.googleapis.com/css?family=Roboto:400,200); +* { + margin: 0; + padding: 0; } + +html, body { + margin: 0; + padding: 0; + background: #fdf6e3; } + +.row { + text-align:center; margin-top: 250px; } + +.row .column { + display: inline; letter-spacing:0.5em; } + +.row .column a { + font-size: 250%; color:rgba(0,0,0,0) } + +.row .column a:not(:hover) + { opacity:.5; transition: opacity .5s; } + +form { + width: 100%; + margin: auto; + padding: 0px; + text-align: center; + background: #fdf6e3; + position: relative; + top: 60px; } + +.search { + width: 440px; + height: 20px; + margin-right: 0px; + padding: 5px; + background: #eee8d5; + font-family: "Roboto", "Consolas", "Helvetica", sans-serif; + font-size: 12px; + letter-spacing: 0.5px; + color: #657b83; + opacity: .5; + border: 2.5px solid #657b83; } + .search:hover { + border: 2.5px solid #657b83; } + .search:focus { + outline: none; + border: 2.5px solid #657b83; } + +icons { + width: 500px; + height: 40px; + margin: 0px auto; + padding: 45px 0; + font: "Roboto", "Consolas", "Helvetica", sans-serif; + text-align: center; + text-transform: uppercase; +} + +i { + color: #002b36; + font-family: icons; + font-size: 150px; + font-weight: normal; + font-style: normal; + line-height: 0.0; + opacity: 0.7; +} + +icons h2 { + margin: 0 0 8px; + color: #002b36; + font-size: 55px; + font-weight: 300; + text-align: center; + opacity: 0.5; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15); +} + +icons ul { + margin: 0; + padding: 0; +} + +icons li { + background: #002b36; + background: rgba(255,255,255,0.90); + padding: 20px; + display: inline-block; + border-radius: 5px; +} diff --git a/index.html b/index.html index 5eb80ea..2bfb64a 100644 --- a/index.html +++ b/index.html @@ -4,33 +4,9 @@ Start Page - + -