microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

UI polish for the home page

Browse Source
This commit is contained in:
Mike Wheaton
2019-02-25 14:06:41 -08:00
parent 2922fd3eb3
commit 28444f3d31
2 changed files with 91 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
assets/shared.css
View File

@@ -9,11 +9,24 @@ html {
body {
background-color: #f3f2f1;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjxzdmcgIHdpZHRoPSI2MDAiICBoZWlnaHQ9IjYwMCIgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCwzMDApIj4gICAgPHBhdGggZD0iTTEyMi42LC0xMTQuOEMxNzAuMywtNzUsMjI4LjEsLTM3LjUsMjM0LjQsNi4yQzI0MC42LDUwLDE5NS4zLDk5LjksMTQ3LjYsMTI5LjZDOTkuOSwxNTkuMyw1MCwxNjguNiw0LjcsMTYzLjlDLTQwLjUsMTU5LjIsLTgxLjEsMTQwLjQsLTExNS43LDExMC43Qy0xNTAuNCw4MS4xLC0xNzkuMiw0MC41LC0xOTMuOCwtMTQuNkMtMjA4LjQsLTY5LjgsLTIwOC45LC0xMzkuNSwtMTc0LjIsLTE3OS40Qy0xMzkuNSwtMjE5LjIsLTY5LjgsLTIyOS4xLC0xNi4xLC0yMTNDMzcuNSwtMTk2LjgsNzUsLTE1NC42LDEyMi42LC0xMTQuOFoiIGZpbGw9IiMzZDk3ZTMiIC8+ICA8L2c+PC9zdmc+);
background-attachment: fixed;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 900px 740px;
}
a {
color: #0078d4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
margin: 0;
}
h1 a {
font-size: 16px;
font-weight: 400;
}
.Container {
@@ -30,6 +43,7 @@ body {
list-style-type: none;
margin: 0;
padding: 0;
counter-reset: steps;
}
.Tile {
@@ -38,6 +52,9 @@ body {
box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
opacity: 0.96;
transition: all 0.15s linear;
position: relative;
overflow: hidden;
padding: 12px;
}
.Tile:not(.Tile--intro):hover {
@@ -45,15 +62,39 @@ body {
opacity: 1;
}
.Tile.Tile--numbered::after {
counter-increment: steps;
content: counter(steps);
position: absolute;
left: -20px;
bottom: -20px;
font-size: 220px;
line-height: 188px;
color: #f3f2f1;
z-index: 1;
}
.Tile-link {
align-items: center;
text-align: center;
color: #323130;
display: flex;
flex-direction: column;
height: 148px;
justify-content: center;
text-align: center;
text-decoration: none;
position: relative;
font-size: 24px;
font-weight: 200;
z-index: 2;
}
a.Tile-link {
color: #0078d7;
}
a.Tile-link:hover {
text-decoration: underline;
}
.Tile-link i {
@@ -62,6 +103,20 @@ body {
color: #605e5c;
}
.Tile-links {
font-size: 16px;
color: #605e5c;
}
.Tile-links a {
text-decoration: none;
color: #0078d4;
}
.Tile-links a:hover {
text-decoration: underline;
}
.Tile--intro {
grid-column: span 2;
padding: 20px;