add project form

This commit is contained in:
Radek Stepan 2014-08-29 20:06:18 -07:00
parent 1590f9e1f4
commit df828cfa1f
6 changed files with 144 additions and 19 deletions

View File

@ -421,7 +421,7 @@ table {
.icon.down-open:before{content:'\e807'}
body{color:#3e4457;font-family:'MuseoSans500Regular',sans-serif}
a{color:#aaa;text-decoration:none}
a{color:#b1b6c4;text-decoration:none}
h1,h2,h3,p{margin:0}
ul{list-style-type:none;margin:0;padding:0;}
ul li{display:inline-block}
@ -434,25 +434,25 @@ ul li{display:inline-block}
#head .q .icon{position:absolute;color:#303d4a;}
#head .q .icon.search{top:8px;left:12px}
#head .q .icon.down-open{top:8px;right:12px}
#head .q input{background:rgba(0,0,0,0.3);border:0;padding:10px 12px 10px 36px;font-family:'MuseoSlab500Regular',serif;font-size:14px;-webkit-border-radius:2px;border-radius:2px;color:rgba(255,255,255,0.5);width:220px}
#head .q input{background:rgba(0,0,0,0.3);border:0;padding:10px 12px 10px 36px;font-size:14px;-webkit-border-radius:2px;border-radius:2px;color:rgba(255,255,255,0.5);width:220px}
#head ul{display:inline-block;}
#head ul li{margin-left:30px}
#head a{font-weight:bold;}
#head a.active,#head a:hover{color:#dde1ed}
#head .right{float:right;margin-right:20px;line-height:64px;}
#head .right a{-webkit-border-radius:2px;border-radius:2px;background:#fff;color:#00b361;padding:10px 20px}
#head .right a{-webkit-border-radius:2px;border-radius:2px;background:#fff;color:#00b361;padding:11px 20px}
#title{border-bottom:3px solid #f3f4f8;}
#title h2{border-bottom:3px solid #aaafbf;margin:30px 0 -3px 0;display:inline-block;padding-bottom:20px}
#title .milestone{font-size:16px;font-weight:bold;margin:0 20px}
#title .description{display:inline-block;font-family:'MuseoSlab500Regular',serif;color:#aaa}
#title .description{display:inline-block;font-family:'MuseoSlab500Regular',serif;color:#b1b6c4}
#content{padding:20px;margin-top:20px;}
#content #hero{background:url("img/hires/2.jpg") center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;-webkit-border-radius:2px;border-radius:2px;margin-bottom:30px;}
#content #hero .content{-webkit-border-radius:2px;border-radius:2px;color:#fff;padding:30px;background:rgba(0,0,0,0.3);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);}
#content #hero .content h2{margin-bottom:20px;margin-left:140px}
#content #hero .content p{font-family:'MuseoSlab500Regular',serif;font-size:18px;line-height:24px;margin-left:140px}
#content #hero .content p{font-family:'MuseoSlab500Regular',serif;font-size:18px;line-height:24px;margin-left:140px;text-align:justify;text-justify:inter-word}
#content #hero .content .address{font-size:120px;float:left}
#content #hero .content .cta{text-align:center;margin-top:10px;}
#content #hero .content .cta a{font-family:'MuseoSlab500Regular',serif;padding:10px 20px;-webkit-border-radius:2px;border-radius:2px;display:inline-block;margin:0 4px;}
#content #hero .content .cta a{font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:2px;border-radius:2px;display:inline-block;margin:0 4px;}
#content #hero .content .cta a.primary{font-weight:bold;background:#00b361;color:#fff}
#content #hero .content .cta a.secondary{background:#fff;color:#00b361}
#content #repos{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;}
@ -479,4 +479,18 @@ ul li{display:inline-block}
#content #repos .header a{font-family:'MuseoSlab500Regular',serif}
#content #repos .footer{background:#f9fafb;color:#aaafbf;-webkit-box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);border-top:1px solid #dde1ed;text-align:right;font-family:'MuseoSlab500Regular',serif;}
#content #repos .footer .icon{color:#aaafbf}
#content #add{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;width:400px;margin-top:30px;}
#content #add h2{color:#3e4457}
#content #add p{font-family:'MuseoSlab500Regular',serif;color:#b1b6c4;margin-top:10px;line-height:20px;text-align:justify;text-justify:inter-word;}
#content #add p a{color:#3e4457}
#content #add .form{padding:20px;}
#content #add .form table{width:100%;}
#content #add .form table tr td:first-child{width:100%}
#content #add .form input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;width:100%;-webkit-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px;border:1px solid #dde1ed;border-right:0;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2)}
#content #add .form a{margin-left:-2px;font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;display:inline-block;font-weight:bold;background:#00b361;color:#fff}
#content #add .header,#content #add .footer{padding:20px 30px}
#content #add .header{-webkit-box-shadow:0 1px 2px rgba(221,225,237,0.5);box-shadow:0 1px 2px rgba(221,225,237,0.5);margin-bottom:2px;border-bottom:1px solid #dde1ed;}
#content #add .header a{font-family:'MuseoSlab500Regular',serif}
#content #add .footer{background:#f9fafb;color:#aaafbf;-webkit-box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);border-top:1px solid #dde1ed;text-align:center;font-family:'MuseoSlab500Regular',serif;}
#content #add .footer .icon{color:#aaafbf}
#footer{border-top:1px solid #f3f4f8;text-align:center;padding:30px;margin-top:30px;font-family:'MuseoSlab500Regular',serif}

File diff suppressed because one or more lines are too long

View File

@ -14,7 +14,7 @@
.icon.down-open:before{content:'\e807'}
body{color:#3e4457;font-family:'MuseoSans500Regular',sans-serif}
a{color:#aaa;text-decoration:none}
a{color:#b1b6c4;text-decoration:none}
h1,h2,h3,p{margin:0}
ul{list-style-type:none;margin:0;padding:0;}
ul li{display:inline-block}
@ -27,25 +27,25 @@ ul li{display:inline-block}
#head .q .icon{position:absolute;color:#303d4a;}
#head .q .icon.search{top:8px;left:12px}
#head .q .icon.down-open{top:8px;right:12px}
#head .q input{background:rgba(0,0,0,0.3);border:0;padding:10px 12px 10px 36px;font-family:'MuseoSlab500Regular',serif;font-size:14px;-webkit-border-radius:2px;border-radius:2px;color:rgba(255,255,255,0.5);width:220px}
#head .q input{background:rgba(0,0,0,0.3);border:0;padding:10px 12px 10px 36px;font-size:14px;-webkit-border-radius:2px;border-radius:2px;color:rgba(255,255,255,0.5);width:220px}
#head ul{display:inline-block;}
#head ul li{margin-left:30px}
#head a{font-weight:bold;}
#head a.active,#head a:hover{color:#dde1ed}
#head .right{float:right;margin-right:20px;line-height:64px;}
#head .right a{-webkit-border-radius:2px;border-radius:2px;background:#fff;color:#00b361;padding:10px 20px}
#head .right a{-webkit-border-radius:2px;border-radius:2px;background:#fff;color:#00b361;padding:11px 20px}
#title{border-bottom:3px solid #f3f4f8;}
#title h2{border-bottom:3px solid #aaafbf;margin:30px 0 -3px 0;display:inline-block;padding-bottom:20px}
#title .milestone{font-size:16px;font-weight:bold;margin:0 20px}
#title .description{display:inline-block;font-family:'MuseoSlab500Regular',serif;color:#aaa}
#title .description{display:inline-block;font-family:'MuseoSlab500Regular',serif;color:#b1b6c4}
#content{padding:20px;margin-top:20px;}
#content #hero{background:url("img/hires/2.jpg") center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;-webkit-border-radius:2px;border-radius:2px;margin-bottom:30px;}
#content #hero .content{-webkit-border-radius:2px;border-radius:2px;color:#fff;padding:30px;background:rgba(0,0,0,0.3);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);}
#content #hero .content h2{margin-bottom:20px;margin-left:140px}
#content #hero .content p{font-family:'MuseoSlab500Regular',serif;font-size:18px;line-height:24px;margin-left:140px}
#content #hero .content p{font-family:'MuseoSlab500Regular',serif;font-size:18px;line-height:24px;margin-left:140px;text-align:justify;text-justify:inter-word}
#content #hero .content .address{font-size:120px;float:left}
#content #hero .content .cta{text-align:center;margin-top:10px;}
#content #hero .content .cta a{font-family:'MuseoSlab500Regular',serif;padding:10px 20px;-webkit-border-radius:2px;border-radius:2px;display:inline-block;margin:0 4px;}
#content #hero .content .cta a{font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:2px;border-radius:2px;display:inline-block;margin:0 4px;}
#content #hero .content .cta a.primary{font-weight:bold;background:#00b361;color:#fff}
#content #hero .content .cta a.secondary{background:#fff;color:#00b361}
#content #repos{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;}
@ -72,4 +72,18 @@ ul li{display:inline-block}
#content #repos .header a{font-family:'MuseoSlab500Regular',serif}
#content #repos .footer{background:#f9fafb;color:#aaafbf;-webkit-box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);border-top:1px solid #dde1ed;text-align:right;font-family:'MuseoSlab500Regular',serif;}
#content #repos .footer .icon{color:#aaafbf}
#content #add{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;width:400px;margin-top:30px;}
#content #add h2{color:#3e4457}
#content #add p{font-family:'MuseoSlab500Regular',serif;color:#b1b6c4;margin-top:10px;line-height:20px;text-align:justify;text-justify:inter-word;}
#content #add p a{color:#3e4457}
#content #add .form{padding:20px;}
#content #add .form table{width:100%;}
#content #add .form table tr td:first-child{width:100%}
#content #add .form input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;width:100%;-webkit-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px;border:1px solid #dde1ed;border-right:0;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2)}
#content #add .form a{margin-left:-2px;font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;display:inline-block;font-weight:bold;background:#00b361;color:#fff}
#content #add .header,#content #add .footer{padding:20px 30px}
#content #add .header{-webkit-box-shadow:0 1px 2px rgba(221,225,237,0.5);box-shadow:0 1px 2px rgba(221,225,237,0.5);margin-bottom:2px;border-bottom:1px solid #dde1ed;}
#content #add .header a{font-family:'MuseoSlab500Regular',serif}
#content #add .footer{background:#f9fafb;color:#aaafbf;-webkit-box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);border-top:1px solid #dde1ed;text-align:center;font-family:'MuseoSlab500Regular',serif;}
#content #add .footer .icon{color:#aaafbf}
#footer{border-top:1px solid #f3f4f8;text-align:center;padding:30px;margin-top:30px;font-family:'MuseoSlab500Regular',serif}

File diff suppressed because one or more lines are too long

View File

@ -8,7 +8,7 @@ body
font-family: $sans_serif_font
a
color: #AAAAAA
color: #B1B6C4
text-decoration: none
h1, h2, h3, p
@ -68,7 +68,6 @@ ul
background: rgba(#000, 30%)
border: 0
padding: 10px 12px 10px 36px
font-family: $serif_font
font-size: 14px
border-radius: 2px
color: rgba(#FFF, 50%)
@ -95,7 +94,7 @@ ul
border-radius: 2px
background: #FFF
color: #00B361
padding: 10px 20px
padding: 11px 20px
#title
border-bottom: 3px solid #F3F4F8
@ -114,7 +113,7 @@ ul
.description
display: inline-block
font-family: $serif_font
color: #AAAAAA
color: #B1B6C4
#content
padding: 20px
@ -142,6 +141,8 @@ ul
font-size: 18px
line-height: 24px
margin-left: 140px
text-align: justify
text-justify: inter-word
.address
font-size: 120px
@ -153,7 +154,7 @@ ul
a
font-family: $serif_font
padding: 10px 20px
padding: 11px 20px
border-radius: 2px
display: inline-block
margin: 0 4px
@ -265,6 +266,78 @@ ul
.icon
color: #AAAFBF
#add
border: 1px solid #CDCECF
border-radius: 2px
width: 400px
margin-top: 30px
h2
color: #3E4457
p
font-family: $serif_font
color: #B1B6C4
margin-top: 10px
line-height: 20px
text-align: justify
text-justify: inter-word
a
color: #3E4457
.form
padding: 20px
table
width: 100%
tr
td
&:first-child
width: 100%
input
box-sizing: border-box
padding: 10px
width: 100%
border-radius: 2px 0 0 2px
border: 1px solid #DDE1ED
border-right: 0
box-shadow: inset 0 1px 2px rgba(#000, 20%)
a
margin-left: -2px
font-family: $serif_font
padding: 11px 20px
border-radius: 0 2px 2px 0
display: inline-block
font-weight: bold
background: #00B361
color: #FFF
.header, .footer
padding: 20px 30px
.header
box-shadow: 0 1px 2px rgba(#DDE1ED, 50%)
margin-bottom: 2px
border-bottom: 1px solid #DDE1ED
a
font-family: $serif_font
.footer
background: #F9FAFB
color: #AAAFBF
box-shadow: inset 0 1px 2px rgba(#DDE1ED, 20%)
border-top: 1px solid #DDE1ED
text-align: center
font-family: $serif_font
.icon
color: #AAAFBF
#footer
border-top: 1px solid #F3F4F8
text-align: center

View File

@ -103,6 +103,30 @@
<a href="#"><span class="icon cog"></span> Edit</a>
</div>
</div>
<div id="add">
<div class="header">
<h2>Add a Project</h2>
<p>Type in the name of the repository as you would normally. If you'd like to add a private GitHub project, <a href="#">Sign In</a> first.</p>
</div>
<div class="form">
<table>
<tr>
<td>
<input type="text" placeholder="user/repo" autocomplete="off">
</td>
<td>
<a href="#">Add</a>
</td>
</tr>
</table>
</div>
<div class="footer">
<span class="icon loading"></span> Connecting to your repo.
</div>
</div>
</div>
<div id="footer">