MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 6,285: | Line 6,285: | ||
font-style: normal; | font-style: normal; | ||
font-weight: 300; | font-weight: 300; | ||
} | |||
/*Timeline*/ | |||
$container-shadow: 0.5rem 0.5rem 2rem 0 rgba(black, 0.2); | |||
$gutter: 30px; | |||
$border-width: 4px; | |||
$dot-diameter: 8px; | |||
body { | |||
background: linear-gradient(55deg,#4E75B9 30%,#5CBF98 90%); | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
min-height: 100vh; | |||
width: 100vw; | |||
margin: 0; | |||
padding: 12vh 100px; | |||
font-family: 'Source Sans Pro', arial, sans-serif; | |||
font-weight: 300; | |||
color: #333; | |||
box-sizing: border-box; | |||
* { | |||
box-sizing: border-box; | |||
} | |||
} | |||
.timeline { | |||
width:100%; | |||
max-width:800px; | |||
background:#fff; | |||
padding: 100px 50px; | |||
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; | |||
} | |||
} | |||
.entry { | |||
clear: both; | |||
text-align: left; | |||
position: relative; | |||
.title { | |||
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; | |||
} | |||
} | |||
} | |||
} | } | ||