diff --git a/assets/style/timeline-content.scss b/assets/style/timeline-content.scss index d4b7c4fb..ec2dc361 100644 --- a/assets/style/timeline-content.scss +++ b/assets/style/timeline-content.scss @@ -22,12 +22,6 @@ } .body{ - padding: 20px 20px 50px; -// padding: 12px 0 0; -// h2{ -// -// } - a{ border-bottom: none; } diff --git a/assets/style/timeline.scss b/assets/style/timeline.scss index a798400c..95e72b7f 100644 --- a/assets/style/timeline.scss +++ b/assets/style/timeline.scss @@ -1,103 +1,21 @@ .timeline{ min-width: 400px; position: relative; - margin: 0 0 50px; - - &:before{ - content: ''; - width: 10px; - height: 10px; - position: absolute; - background-color: black; - top: 0; - left: calc(50% - 6px); - border-radius: 50%; - z-index: 1; - } + display: block; + width: 75%; + margin: 0 auto 50px; } .timeline-record{ position: relative; - display: flex; - - .head, .body{ - position: relative; - width: 50%; - box-sizing: border-box; - } - - .head { - padding: 25px 20px; - } .body { - padding: 0 20px; - } + margin: 0 0 50px; - &.left{ - flex-flow: row-reverse; - - .body{ - text-align: right; - } - - .head{ - text-align: left; - } - - .body:after{ - content: ''; - position: absolute; - width: 12px; - height: calc(100% - 98px); - top: 98px; - right: 0; - background: url(/graphics/timeline-line.png) no-repeat right; - background-size: 2px 100%; - } - - .head:after{ - content: ''; - position: absolute; - width: 12px; - height: 98px; - top: 0; - left: -12px; - background: url(/graphics/timeline-arrow-left.png) no-repeat; - } - } - - &.right{ - flex-flow: row; - - .body{ - text-align: left; - } - - .head{ - text-align: right; - margin: 0 10px; - } - - .body:after{ - content: ''; - position: absolute; - width: 100px; - height: calc(100% - 98px); - top: 98px; - left: -12px; - background: url(/graphics/timeline-line.png) no-repeat; - background-size: 2px 100%; - } - - .head:after{ - content: ''; - position: absolute; - width: 12px; - height: 98px; - top: 0; - left: calc(100% - 2px); - background: url(/graphics/timeline-arrow-right.png) no-repeat; + img{ + margin: 0 auto; + display: block; + min-height: 500px; } } } @@ -134,30 +52,6 @@ box-sizing: border-box; } - &.left { - display: block; - - .body:after, .head:after { - background: none; - } - } - - &.right { - display: block; - - .body:after, .head:after { - background: none; - } - } - - &.left .head { - text-align: left; - } - - &.right .head { - text-align: left; - } - .head { padding: 5px 20px; }