mirror of
https://github.com/captainark/mystartpage.git
synced 2024-11-13 05:27:39 +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" />
|
||||
<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 rel="stylesheet" type="text/css" href="css/homepage.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/mystartpage.css"/>
|
||||
</head>
|
||||
<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="column">
|
||||
<a href="https://mail.google.com/mail/u/1/#inbox" class="envelope">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user