Created
October 10, 2017 13:46
-
-
Save anonymous/35d49a61f7c69da95c661ebf89e2e738 to your computer and use it in GitHub Desktop.
// source http://jsbin.com/hizapepixi
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style id="jsbin-css"> | |
main > .tab:last-of-type { | |
order: 0; | |
} | |
main > article:last-of-type { | |
display: flex; | |
} | |
main > article:target ~ article { | |
display: none; | |
} | |
main > article:target ~ .tab { | |
background-color: #506C64; | |
font-weight: normal; | |
} | |
main > .tab:last-of-type { | |
background-color: #75B8C8; | |
font-weight: bold; | |
} | |
main > article { | |
display: none; | |
} | |
main > article:target { | |
display: flex; | |
} | |
main > article:target + .tab { | |
background-color: #75B8C8; | |
font-weight: bold; | |
} | |
main { | |
display: flex; | |
flex-wrap: wrap; | |
} | |
main > .tab { | |
order: 1; | |
} | |
main > article { | |
order: 3; | |
} | |
body { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
body { | |
padding-top: 1vh; | |
min-height: 100vh; | |
box-sizing: border-box; | |
margin: 0; | |
background-color: #CDD3D5; | |
color: #220C10; | |
} | |
article { | |
min-width: 100%; | |
background-color: #75B8C8; | |
padding: 0.7rem; | |
box-sizing: border-box; | |
} | |
main { | |
width: 90%; | |
min-width: 90%; | |
} | |
main > .tab { | |
padding: 0.7em; | |
background-color: #506C64; | |
border: solid #220C10; | |
border-width: 1px 1px 0 1px; | |
border-radius: 8px 8px 0 0; | |
margin: 0 0.7em; | |
color: white; | |
} | |
</style> | |
<body> | |
<main> | |
<article id="about"> | |
About Content | |
</article> | |
<a href="#about" class="tab">About</a> | |
<article id="contact"> | |
Contact Content | |
</article> | |
<a href="#contact" class="tab">Contact</a> | |
<article id="home"> | |
Home Content | |
</article> | |
<a href="#home" class="tab">Home</a> | |
</main> | |
<script id="jsbin-source-css" type="text/css">// Show the last tab first ////////// | |
main > .tab:last-of-type { | |
order: 0; | |
} | |
// When initially loaded, show the last tab as selected | |
main { | |
& > article { | |
&:last-of-type { | |
display: flex; | |
} | |
&:target { | |
& ~ article { | |
display: none; | |
} | |
& ~ .tab { | |
background-color: #506C64; | |
font-weight: normal; | |
} | |
} | |
} | |
& > .tab { | |
&:last-of-type { | |
background-color: #75B8C8; | |
font-weight: bold; | |
} | |
} | |
} | |
// Hide all tabs, style selected //// | |
main > article { | |
display: none; | |
&:target { | |
display: flex; | |
& + .tab { | |
background-color: #75B8C8; | |
font-weight: bold; | |
} | |
} | |
} | |
// Make tabs preceed content //////// | |
main { | |
display: flex; | |
flex-wrap: wrap; | |
& > .tab { | |
order: 1; | |
} | |
& > article { | |
order: 3; | |
} | |
} | |
body { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
// Purely styling /////////////////// | |
body { | |
padding-top: 1vh; | |
min-height: 100vh; | |
box-sizing: border-box; | |
margin: 0; | |
background-color: #CDD3D5; | |
color: #220C10; | |
} | |
article { | |
min-width: 100%; | |
background-color: #75B8C8; | |
padding: 0.7rem; | |
box-sizing: border-box; | |
} | |
main { | |
width: 90%; | |
min-width: 90%; | |
& > .tab { | |
padding: 0.7em; | |
background-color: #506C64; | |
border: solid #220C10; | |
border-width: 1px 1px 0 1px; | |
border-radius: 8px 8px 0 0; | |
margin: 0 0.7em; | |
color: white; | |
} | |
} | |
</script> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
main > .tab:last-of-type { | |
order: 0; | |
} | |
main > article:last-of-type { | |
display: flex; | |
} | |
main > article:target ~ article { | |
display: none; | |
} | |
main > article:target ~ .tab { | |
background-color: #506C64; | |
font-weight: normal; | |
} | |
main > .tab:last-of-type { | |
background-color: #75B8C8; | |
font-weight: bold; | |
} | |
main > article { | |
display: none; | |
} | |
main > article:target { | |
display: flex; | |
} | |
main > article:target + .tab { | |
background-color: #75B8C8; | |
font-weight: bold; | |
} | |
main { | |
display: flex; | |
flex-wrap: wrap; | |
} | |
main > .tab { | |
order: 1; | |
} | |
main > article { | |
order: 3; | |
} | |
body { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
body { | |
padding-top: 1vh; | |
min-height: 100vh; | |
box-sizing: border-box; | |
margin: 0; | |
background-color: #CDD3D5; | |
color: #220C10; | |
} | |
article { | |
min-width: 100%; | |
background-color: #75B8C8; | |
padding: 0.7rem; | |
box-sizing: border-box; | |
} | |
main { | |
width: 90%; | |
min-width: 90%; | |
} | |
main > .tab { | |
padding: 0.7em; | |
background-color: #506C64; | |
border: solid #220C10; | |
border-width: 1px 1px 0 1px; | |
border-radius: 8px 8px 0 0; | |
margin: 0 0.7em; | |
color: white; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment