|
|
Line 1: |
Line 1: |
− | __NOTOC__
| + | <ul class="timeline"> |
− | {{#css:
| + | <!-- Item 1 --> |
− | /* Timeline CSS */
| + | <li> |
− | /* Media Queries */
| + | <div class="direction-r"> |
− | | + | <div class="flag-wrapper"> |
− | @mixin mq-xs {
| + | <span class="hexa"></span> |
− | @media (min-width: 320px) {
| + | <span class="flag">Lorem ipsum.</span> |
− | @content;
| + | <span class="time-wrapper"><span class="time">Feb 2015</span></span> |
− | }
| + | </div> |
− | }
| + | <div class="desc">Lorem ipsum Nisi labore aute do aute culpa magna nulla voluptate exercitation deserunt proident.</div> |
− | | + | </div> |
− | @mixin mq-sm {
| + | </li> |
− | @media (min-width: 480px) {
| + | |
− | @content;
| + | <!-- Item 2 --> |
− | }
| + | <li> |
− | }
| + | <div class="direction-l"> |
− | | + | <div class="flag-wrapper"> |
− | @mixin mq-md {
| + | <span class="hexa"></span> |
− | @media (min-width: 720px) {
| + | <span class="flag">Lorem ipsum Anim.</span> |
− | @content;
| + | <span class="time-wrapper"><span class="time">Dec 2014</span></span> |
− | }
| + | </div> |
− | }
| + | <div class="desc">xxx.</div> |
− | | + | </div> |
− | @mixin mq-lg {
| + | </li> |
− | @media (min-width: 1000px) {
| + | |
− | @content;
| + | <!-- Item 3 --> |
− | }
| + | <li> |
− | }
| + | <div class="direction-r"> |
− | | + | <div class="flag-wrapper"> |
− | $background: #f7f7f7;
| + | <span class="hexa"></span> |
− | $box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
| + | <span class="flag">Lorem Occaecat.</span> |
− | $border: 1px solid rgba(191, 191, 191, 0.4);
| + | <span class="time-wrapper"><span class="time">July 2014</span></span> |
− | $items: 5;
| + | </div> |
− | $rows: ceil($items/2);
| + | <div class="desc">Lorem ipsum Minim labore Ut cupidatat quis qui deserunt proident fugiat pariatur cillum cupidatat reprehenderit sit id dolor consectetur ut.</div> |
− | | + | </div> |
− | /* Card sizing */
| + | </li> |
− | | + | </ul> |
− | $card-height: 400px;
| |
− | $card-width: 450px;
| |
− | $inner-margin: 15px;
| |
− | $number-size: 35px;
| |
− | $stagger: 180px;
| |
− | $outer-margin: 90px;
| |
− | $marker-size: 9px;
| |
− | | |
− | /* Colors */
| |
− | | |
− | $steps: #46b8e9;
| |
− | $colors: #46b8e9,
| |
− | #3ee9d1,
| |
− | #ce43eb,
| |
− | #4d92eb;
| |
− | $timeline: #bdbdbd;
| |
− | | |
− | /* Calculations */
| |
− | | |
− | $container-height: $rows * ($card-height + $outer-margin) + $stagger;
| |
− | $container-width: $card-width*2 + $outer-margin*3;
| |
− | $head-height: $number-size + 50;
| |
− | $body-height: $card-height - $head-height;
| |
− | $marker-dist: $card-width + $outer-margin/2 - $marker-size/2;
| |
− | | |
− | /* Placeholders */
| |
− | | |
− | @include mq-lg {
| |
− | %arrow {
| |
− | position: absolute;
| |
− | content: "";
| |
− | width: 0;
| |
− | height: 0;
| |
− | border-top: 15px solid transparent;
| |
− | border-bottom: 15px solid transparent;
| |
− | }
| |
− | %marker {
| |
− | position: absolute;
| |
− | content: "";
| |
− | width: $marker-size;
| |
− | height: $marker-size;
| |
− | background-color: $timeline;
| |
− | border-radius: $marker-size;
| |
− | box-shadow: 0px 0px 2px 8px $background;
| |
− | }
| |
− | }
| |
− | | |
− | | |
− | /* Some Cool Stuff */
| |
− | | |
− | $counter: $items - $rows + 2;
| |
− | @for $i from 1 through $rows {
| |
− | .demo-card:nth-child(#{$i*2-1}) { order: $i }
| |
− | .demo-card:nth-child(#{$i*2}) { order: $counter }
| |
− | $counter: $counter + 1;
| |
− | }
| |
− | | |
− | /* Border Box */
| |
− | | |
− | * {
| |
− | box-sizing: border-box;
| |
− | }
| |
− | | |
− | #timeline {
| |
− | padding: 100px 0;
| |
− | background: $background;
| |
− | border-top: $border;
| |
− | border-bottom: $border;
| |
− | h1 {
| |
− | text-align: center;
| |
− | font-size: 3rem;
| |
− | font-weight: 200;
| |
− | margin-bottom: 20px;
| |
− | }
| |
− | p.leader {
| |
− | text-align: center;
| |
− | max-width: 90%;
| |
− | margin: auto;
| |
− | margin-bottom: 45px;
| |
− | }
| |
− | .demo-card-wrapper {
| |
− | position: relative;
| |
− | margin: auto;
| |
− | @include mq-lg {
| |
− | display: flex;
| |
− | flex-flow: column wrap;
| |
− | width: $container-width;
| |
− | height: $container-height;
| |
− | margin: 0 auto;
| |
− | }
| |
− | &::after {
| |
− | z-index: 1;
| |
− | content: "";
| |
− | position: absolute;
| |
− | top: 0;
| |
− | bottom: 0;
| |
− | left: 50%;
| |
− | border-left: $border;
| |
− | @include mq-lg {
| |
− | border-left: 1px solid $timeline;
| |
− | }
| |
− | }
| |
− | }
| |
− | .demo-card {
| |
− | position: relative;
| |
− | display: block;
| |
− | margin: 10px auto 80px;
| |
− | max-width: 94%;
| |
− | z-index: 2;
| |
− | @include mq-sm {
| |
− | max-width: 60%;
| |
− | box-shadow: $box-shadow;
| |
− | }
| |
− | @include mq-md {
| |
− | max-width: 40%;
| |
− | }
| |
− | @include mq-lg {
| |
− | max-width: $card-width;
| |
− | height: $card-height;
| |
− | margin: $outer-margin;
| |
− | margin-top: $outer-margin/2;
| |
− | margin-bottom: $outer-margin/2;
| |
− | &:nth-child(odd) {
| |
− | margin-right: $outer-margin/2;
| |
− | .head::after {
| |
− | @extend %arrow;
| |
− | border-left-width: 15px;
| |
− | border-left-style: solid;
| |
− | left: 100%;
| |
− | }
| |
− | .head::before {
| |
− | @extend %marker;
| |
− | left: $marker-dist + 1;
| |
− | }
| |
− | }
| |
− | &:nth-child(even) {
| |
− | margin-left: $outer-margin/2;
| |
− | .head::after {
| |
− | @extend %arrow;
| |
− | border-right-width: 15px;
| |
− | border-right-style: solid;
| |
− | right: 100%;
| |
− | }
| |
− | .head::before {
| |
− | @extend %marker;
| |
− | right: $marker-dist - 1;
| |
− | }
| |
− | }
| |
− | &:nth-child(2) {
| |
− | margin-top: $stagger;
| |
− | }
| |
− | }
| |
− | .head {
| |
− | position: relative;
| |
− | display: flex;
| |
− | align-items: center;
| |
− | color: #fff;
| |
− | font-weight: 400;
| |
− | .number-box {
| |
− | display: inline;
| |
− | float: left;
| |
− | margin: $inner-margin;
| |
− | padding: 10px;
| |
− | font-size: $number-size;
| |
− | line-height: $number-size;
| |
− | font-weight: 600;
| |
− | background: rgba(0, 0, 0, 0.17);
| |
− | }
| |
− | h2 {
| |
− | text-transform: uppercase;
| |
− | font-size: 1.3rem;
| |
− | font-weight: inherit;
| |
− | letter-spacing: 2px;
| |
− | margin: 0;
| |
− | padding-bottom: 6px;
| |
− | line-height: 1rem;
| |
− | @include mq-sm {
| |
− | font-size: 165%;
| |
− | line-height: 1.2rem;
| |
− | }
| |
− | span {
| |
− | display: block;
| |
− | font-size: 0.6rem;
| |
− | margin: 0;
| |
− | @include mq-sm {
| |
− | font-size: 0.8rem; | |
− | }
| |
− | }
| |
− | }
| |
− | }
| |
− | .body {
| |
− | background: #fff;
| |
− | border: $border;
| |
− | border-top: 0;
| |
− | padding: $inner-margin;
| |
− | @include mq-lg {
| |
− | height: $body-height;
| |
− | }
| |
− | p {
| |
− | font-size: 14px;
| |
− | line-height: 18px;
| |
− | margin-bottom: $inner-margin;
| |
− | }
| |
− | img {
| |
− | display: block;
| |
− | width: 100%;
| |
− | }
| |
− | }
| |
− | @for $i from 1 through $items {
| |
− | &--step#{$i} {
| |
− | $color: nth($colors, ((($i - 1) % 4) + 1));
| |
− | background-color: $color;
| |
− | .head::after {
| |
− | border-color: $color;
| |
− | }
| |
− | }
| |
− | }
| |
− | }
| |
− | }
| |
− | }}
| |
− | <div id="timeline">
| |
− | <h1>A Flexbox Timeline</h1>
| |
− | <p class="leader">All cards must be the same height and width for space calculations on large screens.</p>
| |
− | <div class="demo-card-wrapper">
| |
− | <div class="demo-card demo-card--step1">
| |
− | <div class="head">
| |
− | <div class="number-box">
| |
− | <span>01</span>
| |
− | </div>
| |
− | <h2><span class="small">Subtitle</span> Technology</h2>
| |
− | </div>
| |
− | <div class="body">
| |
− | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
| |
− | <img src="http://placehold.it/1000x500" alt="Graphic">
| |
− | </div>
| |
− | </div>
| |
− | | |
− | <div class="demo-card demo-card--step2">
| |
− | <div class="head">
| |
− | <div class="number-box">
| |
− | <span>02</span>
| |
− | </div>
| |
− | <h2><span class="small">Subtitle</span> Confidence</h2>
| |
− | </div>
| |
− | <div class="body">
| |
− | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
| |
− | <img src="http://placehold.it/1000x500" alt="Graphic">
| |
− | </div>
| |
− | </div>
| |
− | | |
− | <div class="demo-card demo-card--step3">
| |
− | <div class="head">
| |
− | <div class="number-box">
| |
− | <span>03</span>
| |
− | </div>
| |
− | <h2><span class="small">Subtitle</span> Adaptation</h2>
| |
− | </div>
| |
− | <div class="body">
| |
− | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
| |
− | <img src="http://placehold.it/1000x500" alt="Graphic">
| |
− | </div>
| |
− | </div>
| |
− | | |
− | <div class="demo-card demo-card--step4">
| |
− | <div class="head">
| |
− | <div class="number-box">
| |
− | <span>04</span>
| |
− | </div>
| |
− | <h2><span class="small">Subtitle</span> Consistency</h2>
| |
− | </div>
| |
− | <div class="body">
| |
− | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
| |
− | <img src="http://placehold.it/1000x500" alt="Graphic">
| |
− | </div>
| |
− | </div>
| |
− | | |
− | <div class="demo-card demo-card--step5">
| |
− | <div class="head">
| |
− | <div class="number-box">
| |
− | <span>05</span>
| |
− | </div>
| |
− | <h2><span class="small">Subtitle</span> Conversion</h2>
| |
− | </div>
| |
− | <div class="body">
| |
− | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
| |
− | <img src="http://placehold.it/1000x500" alt="Graphic">
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | </div>
| |
− | </div> | |