add star icon to empty star section
update signin button redo cta arrow change some color values to variables
This commit is contained in:
lislis
parent
cd323bf912
commit
7434806254
|
|
@ -23,13 +23,18 @@
|
|||
margin-bottom: 4rem
|
||||
|
||||
.starred-empty
|
||||
border: dotted 1px $pebble-grey
|
||||
border: dotted 1px rgba($cement-grey, 0.2)
|
||||
border-radius: 2px
|
||||
text-align: center
|
||||
padding: 2rem 0
|
||||
font-size: 20px
|
||||
font-size: 18px
|
||||
color: $cement-grey
|
||||
|
||||
span
|
||||
@extend %icon-star
|
||||
padding-left: 2em
|
||||
background-size: 24px 24px
|
||||
background-repeat: no-repeat
|
||||
|
||||
.dash-star
|
||||
&:hover,
|
||||
&:active
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.top .cta
|
||||
border-bottom: 2px solid #E4E4E4
|
||||
border-top: 2px solid #E4E4E4
|
||||
border-bottom: 2px solid rgba($cement-grey, 0.2)
|
||||
border-top: 2px solid rgba($cement-grey, 0.2)
|
||||
line-height: 2.7em
|
||||
font-size: 16px
|
||||
color: #71AE76
|
||||
color: $turf-green
|
||||
text-align: right
|
||||
padding-right: 1rem
|
||||
background-color: #fff
|
||||
|
|
@ -13,16 +13,24 @@
|
|||
position: relative
|
||||
margin: auto
|
||||
padding: 0
|
||||
|
||||
.arrow
|
||||
display: block
|
||||
position: absolute
|
||||
top: -11px
|
||||
right: 66px
|
||||
background-image: inline-image('cta-arrow.svg')
|
||||
background-repeat: no-repeat
|
||||
width: 20px
|
||||
height: 12px
|
||||
&:after,
|
||||
&:before
|
||||
content: ""
|
||||
display: block
|
||||
width: 13px
|
||||
position: absolute
|
||||
transform: rotate(45deg)
|
||||
&:after
|
||||
height: 13px
|
||||
background: rgba($cement-grey, 0.1)
|
||||
top: -0.4rem
|
||||
right: 4rem
|
||||
&:before
|
||||
height: 15px
|
||||
background: white
|
||||
top: -0.3rem
|
||||
right: 57px
|
||||
z-index: 1
|
||||
|
||||
@media #{$medium-up}
|
||||
display: block
|
||||
|
|
@ -32,10 +40,10 @@
|
|||
display: none !important
|
||||
|
||||
.landing-pro .top
|
||||
border-bottom: 1px solid #f1f1f1
|
||||
border-bottom: 1px solid $pebble-grey
|
||||
|
||||
.top
|
||||
background-color: #f1f1f1
|
||||
background-color: $pebble-grey
|
||||
|
||||
.topbar
|
||||
height: $top-height
|
||||
|
|
|
|||
|
|
@ -1,26 +1,30 @@
|
|||
$button-border-color: #d4d4d4
|
||||
%button
|
||||
font-family: $font-family-sans-serif
|
||||
display: inline-block
|
||||
cursor: pointer
|
||||
white-space: nowrap
|
||||
border-radius: 2px
|
||||
border: none
|
||||
vertical-align: middle
|
||||
padding: 0.8rem
|
||||
line-height: 1
|
||||
text-decoration: none
|
||||
|
||||
.button,
|
||||
.btn
|
||||
font-family: $font-family-sans-serif
|
||||
@extend %button
|
||||
position: relative
|
||||
overflow: visible
|
||||
display: inline-block
|
||||
padding: 5px 10px
|
||||
cursor: pointer
|
||||
outline: none
|
||||
text-decoration: none
|
||||
text-align: center
|
||||
color: white
|
||||
white-space: nowrap
|
||||
border-radius: 2px
|
||||
background-color: $pebble-grey
|
||||
|
||||
.button:hover,
|
||||
.button:focus,
|
||||
.button:active,
|
||||
.button.active
|
||||
border-color: $button-border-color
|
||||
border-color: $pebble-grey
|
||||
background-color: $cement-grey
|
||||
text-decoration: none
|
||||
color: #fff
|
||||
|
|
@ -31,37 +35,30 @@ $button-border-color: #d4d4d4
|
|||
border-bottom-color: #2356c4
|
||||
background-color: #40454f
|
||||
|
||||
.button--signin,
|
||||
.button--signingin
|
||||
display: inline-block
|
||||
.button-signin,
|
||||
.button-signingin
|
||||
@extend %button
|
||||
height: 36px
|
||||
color: #fff
|
||||
font-size: $font-size-s
|
||||
line-height: 1
|
||||
text-decoration: none
|
||||
border-radius: 4px
|
||||
border: none
|
||||
vertical-align: middle
|
||||
background:
|
||||
color: $turf-green
|
||||
font-size: 14px
|
||||
background-color: $turf-green
|
||||
.loading-indicator
|
||||
vertical-align: top
|
||||
margin-left: .3em
|
||||
i
|
||||
background-color: white
|
||||
width: 6px
|
||||
height: 6px
|
||||
|
||||
.button--signin
|
||||
padding: 0.6em 2em 0.55em 0.6em
|
||||
cursor: pointer
|
||||
.button-signin
|
||||
@extend %icon-github-white
|
||||
padding-right: 2.2em
|
||||
background:
|
||||
image: inline-image('ui/github-signin.svg')
|
||||
size: 16px
|
||||
position: 95%
|
||||
repeat: no-repeat
|
||||
position: 95.5% 45%
|
||||
&:hover
|
||||
background-color: #73c78d
|
||||
text-decoration: none
|
||||
|
||||
.button--signingin
|
||||
padding: 0.6em 0.6em 0.45em
|
||||
span
|
||||
display: inline-block
|
||||
padding: 0 .2em
|
||||
position: relative
|
||||
top: -0.15em
|
||||
background-color: rgba($turf-green, 0.8)
|
||||
|
||||
.button--green
|
||||
border: none
|
||||
|
|
@ -86,8 +83,8 @@ $button-border-color: #d4d4d4
|
|||
&:hover
|
||||
background-color: darken(#39a85b, 10)
|
||||
|
||||
#auth #navigation .button--signin,
|
||||
#auth #navigation .button--signingin
|
||||
#auth #navigation .button-signin,
|
||||
#auth #navigation .button-signingin
|
||||
display: none
|
||||
|
||||
.button--grey
|
||||
|
|
|
|||
|
|
@ -92,12 +92,14 @@
|
|||
@extend %icon
|
||||
background-image: inline-image('stroke-icons/icon-builds.svg')
|
||||
|
||||
%icon-line-commit,
|
||||
%icon-github
|
||||
background-image: inline-image('stroke-icons/icon-github.svg')
|
||||
%icon-github-white
|
||||
background-image: inline-image('stroke-icons/icon-github-white.svg')
|
||||
|
||||
.icon-line-commit
|
||||
@extend %icon
|
||||
@extend %icon-line-commit
|
||||
@extend %icon-github
|
||||
|
||||
%icon-line-eye
|
||||
background-image:inline-image('stroke-icons/icon-seemore.svg')
|
||||
|
|
@ -117,7 +119,7 @@
|
|||
position: 3px 3px
|
||||
size: auto 10px
|
||||
display: inline-block
|
||||
border: solid 1px #E4E6E6
|
||||
border: solid 1px $pebble-grey
|
||||
border-radius: 50%
|
||||
@extend %icon-line-question
|
||||
&:hover
|
||||
|
|
@ -211,6 +213,9 @@
|
|||
text-indent: 999px
|
||||
overflow: hidden
|
||||
|
||||
%icon-star
|
||||
background-image: inline-image('stroke-icons/icon-star.svg')
|
||||
|
||||
.icon-star
|
||||
@extend %icon
|
||||
width: 18px
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
|
||||
<li class="{{classProfile}}">
|
||||
{{#if auth.signedOut}}
|
||||
<button class="signed-out button--signin" {{action "signIn" target="auth"}}>Sign in with GitHub</button>
|
||||
<button class="signed-out button-signin" {{action "signIn" target="auth"}}>Sign in with GitHub</button>
|
||||
{{/if}}
|
||||
{{#if auth.signedIn}}
|
||||
{{#link-to "profile" class="navigation-anchor signed-in"}}
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
{{/link-to}}
|
||||
{{/if}}
|
||||
{{#if auth.signingIn}}
|
||||
<button class="signing-in button--signingin">Signing In <span class="loading-indicator--white"><i></i><i></i><i></i></span></button>
|
||||
<button class="signing-in button-signingin">Signing In {{loading-indicator inline=true}}</button>
|
||||
{{/if}}
|
||||
{{#if auth.signedIn}}
|
||||
<ul class="navigation-nested">
|
||||
|
|
@ -103,7 +103,6 @@
|
|||
{{#if showCta}}
|
||||
<div class="cta">
|
||||
<p class="row">
|
||||
<span class="arrow"></span>
|
||||
Help make Open Source a better place and start building better software today!
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="20" height="12" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(10, 1), rotate(45)" fill="white">
|
||||
<rect x="0" y="0" width="20" height="20"
|
||||
style="fill: white; stroke-width: 2; stroke: #E4E4E4;" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 320 B |
24
public/images/stroke-icons/icon-github-white.svg
Executable file
24
public/images/stroke-icons/icon-github-white.svg
Executable file
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="icon-github" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
|
||||
</style>
|
||||
<path id="github" class="st0" d="M10.384,11.324c0-0.408-0.06-0.807-0.243-1.179c-0.085-0.173-0.186-0.335-0.33-0.467
|
||||
C9.805,9.672,9.799,9.664,9.787,9.65c0.099-0.011,0.191-0.021,0.283-0.031c0.753-0.082,1.451-0.324,2.098-0.716
|
||||
c0.318-0.193,0.618-0.409,0.848-0.706c0.275-0.355,0.456-0.757,0.58-1.188c0.124-0.43,0.186-0.87,0.221-1.315
|
||||
c0.021-0.265,0.031-0.529,0.002-0.795c-0.083-0.743-0.35-1.405-0.853-1.964c-0.034-0.038-0.042-0.066-0.02-0.115
|
||||
c0.08-0.175,0.095-0.366,0.126-0.553c0.1-0.597-0.039-1.162-0.229-1.72c-0.013-0.038-0.039-0.046-0.071-0.045
|
||||
c-0.131,0.008-0.263,0.015-0.394,0.026c-0.326,0.029-0.628,0.14-0.912,0.293c-0.352,0.19-0.696,0.397-1.044,0.595
|
||||
c-0.022,0.012-0.055,0.017-0.079,0.011c-0.494-0.13-0.995-0.213-1.504-0.254C8.43,1.14,7.317,1.138,6.908,1.164
|
||||
C6.36,1.198,5.82,1.284,5.289,1.428c-0.038,0.01-0.064,0.003-0.096-0.017c-0.405-0.262-0.824-0.5-1.264-0.699
|
||||
c-0.33-0.15-0.679-0.195-1.035-0.211c-0.092-0.004-0.095,0-0.124,0.085C2.648,0.951,2.55,1.32,2.525,1.706
|
||||
C2.507,1.999,2.55,2.286,2.608,2.571c0.018,0.092,0.05,0.183,0.082,0.271c0.013,0.034,0.004,0.051-0.015,0.076
|
||||
C2.571,3.05,2.462,3.18,2.366,3.318C2.072,3.737,1.918,4.21,1.832,4.71c-0.07,0.409-0.043,0.819-0.001,1.228
|
||||
c0.044,0.431,0.121,0.854,0.258,1.266c0.129,0.39,0.312,0.751,0.576,1.067c0.201,0.24,0.45,0.424,0.714,0.59
|
||||
c0.526,0.332,1.094,0.563,1.704,0.683c0.226,0.044,0.752,0.105,0.752,0.105s-0.186,1.31-0.674,1.589
|
||||
c-0.538,0.307-1.365,0.371-1.929-0.192C3.03,10.844,2.536,9.892,1.847,9.635c-0.879-0.327-1.044,0.816-0.628,1.399
|
||||
c0.261,0.367,0.625,0.761,0.77,1.078c0.404,0.886,1.056,1.281,1.521,1.416c0.619,0.18,1.688-0.016,1.688-0.016l0.06,0.989
|
||||
l5.112-0.006C10.368,14.494,10.384,12.127,10.384,11.324z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -2,7 +2,7 @@
|
|||
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="icon-star" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
|
||||
<path id="star" class="st0" d="M7.159,1.035c0.188-0.38,0.495-0.38,0.683,0l1.596,3.234c0.188,0.38,0.685,0.741,1.105,0.802
|
||||
<path id="star" fill="none" stroke="#9d9d9d" class="st0" d="M7.159,1.035c0.188-0.38,0.495-0.38,0.683,0l1.596,3.234c0.188,0.38,0.685,0.741,1.105,0.802
|
||||
l3.569,0.519c0.42,0.061,0.515,0.353,0.211,0.649l-2.583,2.517c-0.304,0.296-0.494,0.88-0.422,1.298l0.61,3.555
|
||||
c0.072,0.418-0.177,0.599-0.552,0.401l-3.192-1.678c-0.375-0.197-0.99-0.197-1.365,0l-3.192,1.678
|
||||
c-0.375,0.197-0.624,0.017-0.552-0.401l0.61-3.555c0.072-0.418-0.118-1.002-0.422-1.298L0.678,6.24
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 878 B After Width: | Height: | Size: 907 B |
Loading…
Reference in New Issue
Block a user