Skip to content

Instantly share code, notes, and snippets.

@CapWebSolutions
Created April 23, 2018 12:58
Show Gist options
  • Select an option

  • Save CapWebSolutions/3212a341b98271c162589f44b46ff292 to your computer and use it in GitHub Desktop.

Select an option

Save CapWebSolutions/3212a341b98271c162589f44b46ff292 to your computer and use it in GitHub Desktop.
Excerpt of styles from day 22 of JavaScript30 by Wes Bos
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
margin: 0; /* Important! */
font-family: sans-serif;
}
.wrapper {
margin:0 auto;
max-width:500px;
font-size: 20px;
line-height: 2;
position: relative;
}
a {
text-decoration: none;
color:black;
background:rgba(0,0,0,0.05);
border-radius: 20px;
}
/*
* Styling to create animated oval hightlight graphic around selected link - <a> tag
*/
.highlight {
transition: all 0.2s;
border-bottom:2px solid white;
position: absolute;
top:0;
background:white;
left:0;
z-index: -1;
border-radius:20px;
display: block;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.menu {
padding: 0;
display: flex;
list-style: none;
justify-content: center;
margin:100px 0;
}
.menu a {
display: inline-block;
padding:5px;
margin:0 20px;
color:black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment