Update to guide icons and landing page
This commit is contained in:
Alex Wolfe
parent
79d0a5022e
commit
01a0745dfd
|
|
@ -0,0 +1,8 @@
|
|||
a(class="hover-card is-button has-icon" href="#{url}" md-button)
|
||||
span(class="hover-card-icon #{classes}")
|
||||
h3 #{name}
|
||||
|
||||
if cta
|
||||
p #{cta}
|
||||
else
|
||||
p View #{name} Docs
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
},
|
||||
|
||||
"guide": {
|
||||
"icon": "play-circle-fill",
|
||||
"icon": "list",
|
||||
"title": "Guide",
|
||||
"banner": "Angular 2 is currently in Alpha Preview. For <a href='https://docs.angularjs.org/guide'>Angular 1.X Resources</a> please visit <a href='https://angularjs.org/'>Angularjs.org</a>."
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
number = 0;
|
||||
ul
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]].guide._data
|
||||
name = page.menuTitle || page.title
|
||||
selected = current.path[4] == slug ? 'is-selected':''
|
||||
if slug != '_listtype'
|
||||
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>
|
||||
url = "/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html"
|
||||
num = number++
|
||||
name = number + ' ' + page.title
|
||||
|
||||
li.c8
|
||||
!= partial("../../../_includes/_hover-card", { classes: 'icon', name: name, url: url })
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@ div.c4
|
|||
div.c4
|
||||
md-card.card
|
||||
md-card-content
|
||||
h3.text-headline.text-uppercase <span class="icon-play-circle-outline"></span> Guide
|
||||
h3.text-headline.text-uppercase <span class="icon-list"></span> Guide
|
||||
p.text-body Step by Step Guide
|
||||
|
||||
footer
|
||||
a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Resources
|
||||
a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide.html" class="button button-primary" md-button) View Guide
|
||||
|
||||
|
||||
div.c4
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
@import 'module/alert';
|
||||
@import 'module/callout';
|
||||
@import 'module/card';
|
||||
@import 'module/hover-card';
|
||||
@import 'module/modal';
|
||||
@import 'module/shadow';
|
||||
@import 'module/showcase';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,161 @@
|
|||
.hover-card {
|
||||
position: relative;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 2px 2px rgba($coal, 0.24), 0px 0px 2px rgba($coal, 0.12);
|
||||
border-radius: 2px;
|
||||
background: $snow;
|
||||
transition: all .3s;
|
||||
padding: ($unit * 2) - 1;
|
||||
margin: 0px 0px ($unit * 2) 0px;
|
||||
border: $snow solid 1px;
|
||||
text-decoration: none;
|
||||
|
||||
@media handheld and (max-width: $phone-breakpoint),
|
||||
screen and (max-device-width: $phone-breakpoint),
|
||||
screen and (max-width: $tablet-breakpoint) {
|
||||
margin: ($unit * 2) 0px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hover Transitions
|
||||
*
|
||||
*/
|
||||
|
||||
&:hover {
|
||||
transform: translate3d(0,-2px,0);
|
||||
box-shadow: 0px 4px 4px rgba($coal, 0.24), 0px 0px 4px rgba($coal, 0.12), 0px 6px 18px rgba($blueberry, 0.12);
|
||||
border: rgba($blueberry, 0.56) solid 1px;
|
||||
|
||||
.hover-card-icon {
|
||||
color: rgba($blueberry, .87);
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $silver;
|
||||
}
|
||||
|
||||
.icon-ruby {
|
||||
background: url('/resources/images/icons/languages/ruby-icon-large-hover.png') 0px 0px no-repeat;
|
||||
}
|
||||
.icon-go {
|
||||
background: url('/resources/images/icons/languages/go-icon-large-hover.png') 0px 0px no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Icon Styles
|
||||
*
|
||||
*/
|
||||
|
||||
&.has-icon {
|
||||
padding-left: ($unit * 9) - 1;
|
||||
}
|
||||
|
||||
.hover-card-icon {
|
||||
transition: all .4s;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 18px;
|
||||
z-index: $layer-1;
|
||||
font-size: 36px;
|
||||
color: rgba($cloud, .56);
|
||||
}
|
||||
|
||||
.icon-Java {
|
||||
top: 16px;
|
||||
left: 20px;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.icon-python {
|
||||
top: 22px;
|
||||
left: 20px;
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.icon-Nodejs {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
.icon-go {
|
||||
background: url('/resources/images/icons/languages/go-icon-large.png') 0px 0px no-repeat;
|
||||
height: 32px;
|
||||
width: 24px;
|
||||
left: 23px;
|
||||
top: 21px;
|
||||
}
|
||||
|
||||
.icon-ruby {
|
||||
background: url('/resources/images/icons/languages/ruby-icon-large.png') 0px 0px no-repeat;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
left: 21px;
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
.icon-php {
|
||||
top: 26px;
|
||||
left: 14px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.icon-C {
|
||||
top: 26px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.icon-connection {
|
||||
top: 24px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Text Styles
|
||||
*
|
||||
*/
|
||||
|
||||
h3,
|
||||
p {
|
||||
transition: all .4s;
|
||||
line-height: 24px;
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $metal;
|
||||
text-transform: none;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
color: $blueberry;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Material Button Overrides
|
||||
*
|
||||
*/
|
||||
|
||||
.md-ripple-container {
|
||||
opacity: .48;
|
||||
}
|
||||
|
||||
&.md-button.md-default-theme:not([disabled]):hover,
|
||||
&.md-button.md-default-theme:not([disabled]):focus {
|
||||
background-color: $snow;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue