mirror of
https://github.com/captainark/mystartpage.git
synced 2024-11-21 16:21:44 +01:00
moving all style to css file
This commit is contained in:
parent
2a7ad5fa17
commit
d376e8adee
141
css/homepage.css
141
css/homepage.css
@ -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;
|
|
||||||
}
|
|
||||||
@ -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
|
|
||||||
|
|
||||||
91
css/mystartpage.css
Normal file
91
css/mystartpage.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
26
index.html
26
index.html
@ -4,33 +4,9 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Start Page</title>
|
<title>Start Page</title>
|
||||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
||||||
<link rel="stylesheet" type="text/css" href="css/homepage.css"/>
|
<link rel="stylesheet" type="text/css" href="css/mystartpage.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<style type="text/css" media="all">
|
|
||||||
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
|
|
||||||
html, body
|
|
||||||
{ margin:0; padding:0; }
|
|
||||||
html, body
|
|
||||||
{ background:#2D2D2D; }
|
|
||||||
.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; }
|
|
||||||
|
|
||||||
.envelope i{color:#78C5D7;}
|
|
||||||
.youtube-play i{color:#459BA8;}
|
|
||||||
.github i{color:#79C268;}
|
|
||||||
.usd i{color:#C5D747;}
|
|
||||||
.reddit-alien i{color:#F5D63D;}
|
|
||||||
.leaf i{color:#F48C33;}
|
|
||||||
.lastfm i{color:#E868A3;}
|
|
||||||
.envelope1 i{color:#BF63A6;}
|
|
||||||
</style>
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<a href="https://mail.google.com/mail/u/1/#inbox" class="envelope">
|
<a href="https://mail.google.com/mail/u/1/#inbox" class="envelope">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user