Earlier today I saw a discussion on twitter about this topic. :P "If a snake was responsive how would it be?"
So I decided that it was good idea to make a pen about it.
A Pen by Angela Velasquez on CodePen.
.container | |
h2 This snake is... | |
form | |
p.form__answer | |
input(type="radio" name="type" id="responsive" value="responsive" checked) | |
label(for="responsive") Responsive | |
p or | |
p.form__answer | |
input(type="radio" name="type" id="adaptive" value="adaptive") | |
label(for="adaptive") Adaptive | |
ul.snake | |
li | |
li | |
li | |
li | |
li | |
p Psst! Resize your browser window to see the result. | |
footer | |
h2.footer__title About this pen | |
h3.footer__subtitle Snake | |
p.footer__parragraph Earlier today I saw a discussion on twitter about this topic. :P "If a snake was responsive how would it be?" | |
p.footer__parragraph So I decided that it was good idea to make a pen about it. | |
p.copyright Awesome pen by | |
a(target="_blank" href="https://codepen.io/AngelaVelasquez") Angela | |
</footer> | |
//Crappy Jquery begins here | |
$("#responsive").click( function(){ | |
if( $(this).is(':checked') ) { | |
$(".snake").addClass("responsive"); | |
$(".snake").removeClass("adaptive"); | |
} | |
}); | |
$("#adaptive").click( function(){ | |
if( $(this).is(':checked') ) { | |
$(".snake").addClass("adaptive"); | |
$(".snake").removeClass("responsive"); | |
} | |
}); | |
//It is my first time using JS. If you have any recommendation I would really appreciate it. Feel free to comment! |
Earlier today I saw a discussion on twitter about this topic. :P "If a snake was responsive how would it be?"
So I decided that it was good idea to make a pen about it.
A Pen by Angela Velasquez on CodePen.
/* Imported Font from google fonts */ | |
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600'); | |
/* Color palette */ | |
$snake: #85FFD5; | |
$snake--darker: #3BA99C; | |
$gray: #C3C5C5; | |
$white: #FAFAFA; | |
body, html { | |
font-family: 'Fira Sans', sans-serif; | |
background-color: $white; | |
} | |
h2 { | |
color: $snake--darker; | |
font-size: 35px; | |
} | |
p { | |
color: $gray; | |
} | |
form { | |
display: flex; | |
margin: 20px auto 40px; | |
justify-content: center; | |
p { | |
margin: 0 10px; | |
font-size: 22px; | |
} | |
} | |
.form__answer { | |
input { | |
visibility: hidden; | |
width: 0; | |
} | |
label { | |
cursor: pointer; | |
display: inline-block; | |
position: relative; | |
&:hover { | |
color: rgba($snake--darker,.5); | |
} | |
&:after { | |
display: block; | |
content: ''; | |
position: absolute; | |
margin: auto; | |
height: 8px; | |
width: 8px; | |
background-color: transparent; | |
border-radius: 4px; | |
left: 0; | |
right: 0; | |
transition: background .4s ease-in-out; | |
} | |
} | |
} | |
input[type="radio"]:checked ~ label { | |
color: $snake--darker; | |
&:after { | |
background-color: $snake--darker; | |
} | |
} | |
.container { | |
width: 80%; | |
margin: 20vh auto; | |
text-align: center; | |
} | |
/* Snake styles */ | |
.snake { | |
display: flex; | |
flex-direction: row; | |
justify-content: space-between; | |
max-width: 960px; | |
margin: 0 auto; | |
padding: 20px 0; | |
list-style: none; | |
} | |
li { | |
display: inline-flex; | |
width: auto; | |
flex: 1; | |
height: 20px; | |
position: relative; | |
} | |
li:before { | |
display: block; | |
position: absolute; | |
content: ''; | |
background: $snake; | |
width: 100%; | |
height: 20px; | |
bottom: 0; | |
border-bottom: 4px solid $snake--darker; | |
} | |
li:first-child:before { | |
border-radius: 20px 0 0 20px; | |
} | |
li:nth-child(5):before { | |
border-radius: 0 20px 20px 0; | |
} | |
li:nth-child(5):after { | |
@extend li:before; | |
background: $snake--darker; | |
height: 6px; | |
width: 10px; | |
border-radius: 10px; | |
right: 20px; | |
bottom: 8px; | |
border-color: transparent; | |
} | |
/* Snake styles for adaptivee behavior*/ | |
@media only screen and (max-width: 667px) { | |
.snake.adaptive { | |
flex-direction: column; | |
li:first-child:before { | |
border-radius: 20px 20px 0 20px; | |
} | |
li:nth-child(2):before { | |
height: 100%; | |
width: 20px; | |
bottom: 0; | |
right: 0; | |
} | |
li:nth-child(3):before { | |
border-radius: 20px 0 20px 0; | |
} | |
li:nth-child(4):before { | |
@extend li:nth-child(2):before; | |
right: auto; | |
left: 0; | |
} | |
li:nth-child(5):before { | |
border-radius: 0 20px 20px 20px; | |
} | |
li:nth-child(5):after { | |
border-radius: 10px; | |
} | |
} | |
} | |
/* Footer Styles */ | |
footer { | |
background-color: $snake--darker; | |
position: relative; | |
padding: 20px; | |
h2, h3, p, ul { | |
max-width: 610px; | |
margin: 20px auto; | |
} | |
} | |
.footer__title { | |
font-size: 30px; | |
margin-top: 40px; | |
color: rgba($white,.5); | |
} | |
.footer__subtitle { | |
font-size: 22px; | |
color: $white; | |
} | |
.footer__parragraph { | |
line-height: 1.5em; | |
font-size: 22px; | |
color: $white; | |
a { | |
color: $snake; | |
padding: 6px; | |
} | |
} | |
.footer__list { | |
@extend .footer__parragraph; | |
} | |
.copyright { | |
@extend .footer__parragraph; | |
text-align: center; | |
border-top: 1px dashed rgba($white,.45); | |
padding: 10px 0; | |
margin: 40px auto; | |
} |