mirror of
https://github.com/Rushilwiz/neurosecure.git
synced 2025-04-06 13:20:18 -04:00
115 lines
2.4 KiB
Sass
115 lines
2.4 KiB
Sass
@import "base"
|
|
|
|
|
|
.timeline
|
|
display: flex
|
|
flex-direction: column
|
|
height: auto
|
|
color: $light
|
|
align-items: center
|
|
justify-content: center
|
|
margin-bottom: 5%
|
|
margin-top: 8vh
|
|
|
|
.header
|
|
margin-bottom: 2%
|
|
font-family: $title-stack
|
|
font-size: 4em
|
|
|
|
|
|
#timeline
|
|
max-width: 800px
|
|
margin: 0 auto
|
|
margin-bottom: 2%
|
|
position: relative
|
|
|
|
ul
|
|
list-style: none
|
|
|
|
li
|
|
border: 8px solid $gray
|
|
padding: 20px
|
|
color: white
|
|
border-radius: 10px
|
|
margin-bottom: 20px
|
|
|
|
&:last-child
|
|
margin-bottom: 0
|
|
|
|
.content
|
|
|
|
h1
|
|
font-family: $subtitle-stack
|
|
font-weight: bold
|
|
font-size: 25px
|
|
line-height: 30px
|
|
margin-bottom: 10px
|
|
|
|
h2
|
|
font-family: $subtitle-stack
|
|
font-weight: bold
|
|
font-size: 20px
|
|
line-height: 30px
|
|
|
|
p
|
|
font-family: $body-stack
|
|
font-weight: normal
|
|
font-size: 16px
|
|
line-height: 30px
|
|
|
|
.date
|
|
font-family: monospace
|
|
font-weight: normal
|
|
font-size: 12px
|
|
margin-bottom: 10px
|
|
letter-spacing: 2px
|
|
|
|
@include desktop
|
|
&:before
|
|
content: ""
|
|
position: absolute
|
|
top: 0
|
|
left: 50%
|
|
transform: translateX(-50%)
|
|
width: 2px
|
|
height: 100%
|
|
background-color: $light
|
|
|
|
.date
|
|
position: absolute
|
|
top: -30px
|
|
|
|
ul li
|
|
width: 50%
|
|
position: relative
|
|
margin-bottom: 50px
|
|
|
|
&:nth-child(odd)
|
|
float: left
|
|
clear: right
|
|
transform: translateX(-30px)
|
|
border-radius: 20px 0px 20px 20px
|
|
|
|
&::before
|
|
transform: translate(50%, -50%)
|
|
right: -38px
|
|
|
|
&:nth-child(even)
|
|
float: right
|
|
clear: left
|
|
transform: translateX(30px)
|
|
border-radius: 0px 20px 20px 20px
|
|
|
|
&::before
|
|
transform: translate(-50%, -50%)
|
|
left: -38px
|
|
|
|
&::before
|
|
content: ""
|
|
position: absolute
|
|
height: 20px
|
|
width: 20px
|
|
border-radius: 50%
|
|
background-color: $gray
|
|
top: 0
|