91 lines
1.2 KiB
SCSS
91 lines
1.2 KiB
SCSS
.timeline{
|
|
min-width: 400px;
|
|
position: relative;
|
|
display: block;
|
|
width: 75%;
|
|
margin: 0 auto 50px;
|
|
}
|
|
|
|
.timeline-record{
|
|
position: relative;
|
|
|
|
.body {
|
|
margin: 0 0 50px;
|
|
|
|
img{
|
|
margin: 0 auto;
|
|
display: block;
|
|
min-height: 500px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-device-width: 400px) {
|
|
.timeline {
|
|
min-width: 0;
|
|
position: relative;
|
|
margin: 0 0 50px;
|
|
|
|
.head{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.body{
|
|
margin: 0 0 40px;
|
|
padding: 0;
|
|
}
|
|
|
|
.body p{
|
|
text-align: left;
|
|
margin: 0 0 2px;
|
|
padding: 0;
|
|
}
|
|
|
|
.timeline-record {
|
|
position: relative;
|
|
display: flex;
|
|
|
|
.head, .body {
|
|
position: relative;
|
|
width: 90%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.head {
|
|
padding: 5px 20px;
|
|
}
|
|
|
|
.body {
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.timeline-end{
|
|
width: 50%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
|
|
button.more{
|
|
position: relative;
|
|
top: -2px;
|
|
|
|
width: 100px;
|
|
height: 40px;
|
|
border: 2px solid black;
|
|
padding: 0 10px;
|
|
background: none;
|
|
|
|
font-size: 14pt;
|
|
|
|
&:hover{
|
|
background: gainsboro;
|
|
}
|
|
|
|
&:active{
|
|
top: 0;
|
|
}
|
|
}
|
|
} |