learning how to use HAML
more info can be found here https://github.com/haml/haml
A Pen by digital-doodle on CodePen.
learning how to use HAML
more info can be found here https://github.com/haml/haml
A Pen by digital-doodle on CodePen.
%header | |
%hgroup | |
%h1 Headline | |
%nav.main-nav | |
%ul | |
%li | |
%a{:href => '#'} ITEM | |
%li | |
%a{:href => '#'} ITEM | |
%li | |
%a{:href => '#'} ITEM | |
%li | |
%a{:href => '#'} ITEM | |
%li | |
%a{:href => '#'} ITEM | |
%li | |
%a{:href => '#'} ITEM | |
%li | |
%a{:href => '#'} ITEM | |
%section | |
%header | |
%h3 Lorem Ipsum | |
%article | |
%p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
%figure | |
%img{:src => 'http://placehold.it/500x200/3366cc/fefefe/&text=IMAGE'} | |
%figcption Lorem ipsum dolor sit amet | |
%footer | |
%small this is the end of the article | |
%header | |
%h3 Lorem Ipsum | |
%article | |
%p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
%figure | |
%img{:src => 'http://placehold.it/500x200/3366cc/fefefe/&text=IMAGE'} | |
%figcption Lorem ipsum dolor sit amet | |
%footer | |
%small this is the end of the article | |
%header | |
%h3 Lorem Ipsum | |
%article | |
%p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
%figure | |
%img{:src => 'http://placehold.it/500x200/3366cc/fefefe/&text=IMAGE'} | |
%figcption Lorem ipsum dolor sit amet | |
%footer | |
%small this is the end of the article | |
%header | |
%h3 Lorem Ipsum | |
%article | |
%p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
%figure | |
%img{:src => 'http://placehold.it/500x200/3366cc/fefefe/&text=IMAGE'} | |
%figcption Lorem ipsum dolor sit amet | |
%footer | |
%small this is the end of the article | |
$colour:#212121; | |
$white:#fefefe; | |
%center{ | |
max-width:100%; | |
width:100%; | |
display:block; | |
margin:0 auto; | |
text-align:justify; | |
} | |
body{ | |
height:100%; | |
min-height:100%; | |
width:50%; | |
max-width:500px; | |
@extend %center; | |
background-color:shade($colour, 100%); | |
color:tint($colour, 65%); | |
} | |
nav{ | |
background-color:$white; | |
ul{ | |
padding:0; | |
margin:4em auto 5em; | |
display:block; | |
background-color:tint($colour, 95%); | |
width:100%; | |
li{ | |
float:left; | |
width:calc(100% / 7); | |
color:tint($colour,45%); | |
list-style-type:none; | |
text-align:center; | |
a{ | |
text-decoration:none; | |
color:tint($colour, 25%); | |
} | |
&:hover{ | |
background-color:tint($colour, 85%); | |
a{ | |
color:shade($colour, 65%); | |
text-decoration:underline; | |
font-weight:bold; | |
} | |
} | |
} | |
} | |
} | |
article{ | |
figure{ | |
margin:1em 0; | |
padding:0; | |
img{ | |
width:100%; | |
height:auto; | |
margin:0; | |
padding:0; | |
} | |
figcaption{ | |
@extend %center; | |
} | |
} | |
} | |
article:nth-of-type(even){ | |
figure{ | |
margin:1em 0; | |
padding:0; | |
img{ | |
width:50%; | |
float:left; | |
height:auto; | |
margin-right:1em; | |
padding:0; | |
} | |
figcaption{ | |
float:left; | |
padding-left:2%; | |
} | |
} | |
} | |
/* Smartphones (portrait and landscape) ----------- */ | |
@media only screen | |
and (min-device-width : 320px) | |
and (max-device-width : 480px) { | |
/* Styles */ | |
body{ | |
width:95%; | |
margin:0 auto; | |
} | |
nav.main-nav{ | |
ul{ | |
display:block; | |
li{ | |
width:100%; | |
display:block; | |
clear:both; | |
float:none; | |
} | |
} | |
} | |
} |