Team:Newcastle/Notebook/Diary
// Responsive Timeline
// Timeline for a personal project
// Github: http://github.com/itbruno/responsive-timeline
@import "http://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700";
// Variables
$bg-body: #f9f9f9;
$red: #ee4d4d;
$blue: #2b2e48;
$primary-color: $red;
$secondary-color: $blue;
// Typography
$base-font: helvetica, arial, tahoma, verdana;
$base-font-title: "Dosis", arial, tahoma, verdana;
$base-font-color: #726f77;
// Timeline
$timeline-color: $primary-color;
// Mixins and Placeholders
%clearfix {
&:after, &:before {
content: '';
display: block;
width: 100%;
clear: both;
}
}
@mixin prefix($prop, $val) {
@each $prefix in '-webkit-', '-moz-', '-ms-', '' {
#{$prefix}#{$prop}: $val;
}
}
*, *:before, *:after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body, html {
height: 100%;
}
body {
background: $bg-body;
background-size: cover;
margin: 0;
padding: 0;
font-family: $base-font;
line-height: 20px;
font-size: 14px;
color: $base-font-color;
}
img {max-width: 100%;}
a {
text-decoration: none;
}
.container {
max-width: 1100px;
margin: 0 auto;
}
h1, h2, h3, h4 {
font:{
family: $base-font-title;
weight: 500;
}
}
.project-name {
text-align: center;
padding: 10px 0;
}
// Header
header {
background: $secondary-color;
padding: 10px;
@include prefix(box-shadow, 0 3px 3px rgba(0,0,0,0.05));
@extend %clearfix;
.logo {
color: $primary-color;
float: left;
font:{
family: $base-font-title;
size: 22px;
weight: 500;
}
> span {
color: lighten($primary-color, 20%);
font-weight: 300;
}
}
.social {
float: right;
.btn {
font-family: "Dosis";
font-size: 14px;
margin: 10px 5px;
}
}
}
// Timeline
#timeline {
width: 100%;
margin: 30px auto;
position: relative;
padding: 0 10px;
@include prefix(transition, all .4s ease);
&:before {
content:"";
width: 3px;
height: 100%;
background: $timeline-color;
left: 50%;
top: 0;
position: absolute;
}
&:after {
content: "";
clear: both;
display: table;
width: 100%;
}
.timeline-item {
margin-bottom: 50px;
position: relative;
@extend %clearfix;
.timeline-icon {
background: $timeline-color;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 50%;
overflow: hidden;
margin-left: -23px;
@include prefix(border-radius, 50%);
svg {
position: relative;
top: 14px;
left: 14px;
}
}
.timeline-content {
width: 45%;
background: #fff;
padding: 20px;
@include prefix(box-shadow, 0 3px 0 rgba(0,0,0,0.1));
@include prefix(border-radius, 5px);
@include prefix(transition, all .3s ease);
h2 {
padding: 15px;
background: $timeline-color;
color: #fff;
margin: -20px -20px 0 -20px;
font-weight: 300;
@include prefix(border-radius, 3px 3px 0 0);
}
&:before {
content: '';
position: absolute;
left: 45%;
top: 20px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left:7px solid $timeline-color;
}
&.right {
float: right;
&:before {
content: '';
right: 45%;
left: inherit;
border-left: 0;
border-right: 7px solid $timeline-color;
}
}
}
}
}
// Buttons
.btn {
padding: 5px 15px;
text-decoration: none;
background: transparent;
border: 2px solid lighten($primary-color, 10%);
color: lighten($primary-color, 10%);
display: inline-block;
position: relative;
text-transform: uppercase;
font-size: 12px;
@include prefix(border-radius, 5px);
@include prefix(transition, background .3s ease);
@include prefix(box-shadow, 2px 2px 0 lighten($primary-color, 10%));
&:hover {
box-shadow: none ;
top: 2px;
left: 2px;
@include prefix(box-shadow, 2px 2px 0 transparent);
}
}
@media screen and (max-width: 768px) {
#timeline {
margin: 30px;
padding: 0px;
width: 90%;
&:before {
left: 0;
}
.timeline-item {
.timeline-content {
width: 90%;
float: right;
&:before, &.right:before {
left: 10%;
margin-left: -6px;
border-left: 0;
border-right: 7px solid $timeline-color;
}
}
.timeline-icon {
left: 0;
}
}
}
}
BRUNORODRIGUES
RESPONSIVE TIMELINE
LOREM IPSUM DOLOR
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo maiores magnam modi ab libero praesentium blanditiis.
buttonLOREM IPSUM DOLOR
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo. Maiores magnam modi ab libero praesentium blanditiis consequatur aspernatur accusantium maxime molestiae sunt ipsa.
buttonLOREM IPSUM DOLOR
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo. Maiores magnam modi ab libero praesentium blanditiis consequatur aspernatur accusantium maxime molestiae sunt ipsa.
button