香料 example

by rulin shyu

HTML

<main role="main">
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/alfalfa-seeds.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/allspice-ground.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/applepiespice.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/basil.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/bay-leaves.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/blackpepper.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/cardamom.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/celery-salt.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/chicken-flavor-broth-powder.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/chile-peppers-birdseye.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/chives.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/cider-mate-mulling.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/cumin.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/dill-seed.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/lavender-flowers.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/nutmeg-whole.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/oregano-leaf.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/peppermill.jpg"></figure>
    <figure><img src="http://labs.jensimmons.com/examples/images/spices/pizza-seasoning.jpg"></figure>
    <figure><img...

SCSS

figure {
    float: left;
    width: 100%;

    // 這邊是寫到 10 而已，不能無限 Orz
    @for $n from 2 through 10 {
        @media (min-width: #{$n * 100px}) { width: (100% / $n); }
    }
}



// 以下是一些初始化

body,
figure {
    margin: 0;
}

img {
    display: block;
    width: 100%;
}