|
|
| Line 6,289: |
Line 6,289: |
|
| |
|
| /*Timeline*/ | | /*Timeline*/ |
| $container-shadow: 0.5rem 0.5rem 2rem 0 rgba(black, 0.2);
| |
|
| |
|
| $gutter: 30px;
| | |
| $border-width: 4px;
| |
| $dot-diameter: 8px;
| |
|
| |
|
| body { | | body { |
| Line 6,308: |
Line 6,305: |
| color: #333; | | color: #333; |
| box-sizing: border-box; | | box-sizing: border-box; |
| * {
| | |
| box-sizing: border-box;
| |
| }
| |
| } | | } |
|
| |
|
| Line 6,319: |
Line 6,314: |
| padding: 100px 50px; | | padding: 100px 50px; |
| position: relative; | | position: relative; |
| box-shadow: $container-shadow;
| | |
| &:before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 0px;
| |
| left:calc(33% + 15px); //$gutter/2
| |
| bottom: 0px;
| |
| width: $border-width;
| |
| background: #ddd;
| |
| }
| |
| &:after {
| |
| content: "";
| |
| display: table;
| |
| clear: both;
| |
| }
| |
| } | | } |
|
| |
|
| Line 6,340: |
Line 6,321: |
| text-align: left; | | text-align: left; |
| position: relative; | | position: relative; |
| .timetitle {
| | |
| margin-bottom: .5em;
| |
| float: left;
| |
| width: 33%;
| |
| padding-right: $gutter;
| |
| text-align: right;
| |
| position: relative;
| |
| &:before {
| |
| content: '';
| |
| position: absolute;
| |
| width: $dot-diameter;
| |
| height: $dot-diameter;
| |
| border: $border-width solid salmon;
| |
| background-color:#fff;
| |
| border-radius:100%;
| |
| top: 15%;
| |
| right: -$dot-diameter;
| |
| z-index: 99;
| |
| }
| |
| h3 {
| |
| margin: 0;
| |
| font-size: 120%;
| |
| }
| |
| p {
| |
| margin: 0;
| |
| font-size: 100%;
| |
| }
| |
| }
| |
| .body {
| |
| margin: 0 0 3em;
| |
| float: right;
| |
| width: 66%;
| |
| padding-left: $gutter;
| |
| p {
| |
| line-height: 1.4em;
| |
| &:first-child {
| |
| margin-top: 0;
| |
| font-weight: 400;
| |
| }
| |
| }
| |
| ul {
| |
| color:#aaa;
| |
| padding-left: 0;
| |
| list-style-type: none;
| |
| li:before {
| |
| content: "–";
| |
| margin-right: .5em;
| |
| }
| |
| }
| |
| }
| |
| } | | } |