Difference between revisions of "Roadmapnew"
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>
 

Revision as of 12:47, 1 March 2020

  •                        
                       Lorem ipsum.
                       Feb 2015
    Lorem ipsum Nisi labore aute do aute culpa magna nulla voluptate exercitation deserunt proident.
  •                        
                       Lorem ipsum Anim.
                       Dec 2014
    xxx.
  •                        
                       Lorem Occaecat.
                       July 2014
    Lorem ipsum Minim labore Ut cupidatat quis qui deserunt proident fugiat pariatur cillum cupidatat reprehenderit sit id dolor consectetur ut.
Retrieved from "https://wiki.art-decor.org/index.php?title=Roadmapnew&oldid=7037"