blog/css/timeline.min.css

1 line
6.4 KiB (Stored with Git LFS)
CSS

html *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.social p{text-align:center}.social ul{text-align:left;border-radius:5px;padding:10px;transition:0.3s ease-in-out;-webkit-transition:0.3s ease-in-out}.cd-container{width:90%;max-width:1170px;margin:0 auto}.cd-container::after{content:"";display:table;clear:both}#cd-timeline{position:relative;padding:2em 0;margin-top:2em;margin-bottom:2em}#cd-timeline::before{content:"";position:absolute;top:0;left:18px;height:100%;width:4px;background:#d4d6d4}@media only screen and (min-width: 1170px){#cd-timeline{margin-top:3em;margin-bottom:3em}#cd-timeline::before{left:50%;margin-left:-2px}}.cd-timeline-block{position:relative;margin:2em 0}.cd-timeline-block:after{content:"";display:table;clear:both}.cd-timeline-block:first-child{margin-top:0}.cd-timeline-block:last-child{margin-bottom:0}@media only screen and (min-width: 1170px){.cd-timeline-block{margin:4em 0}.cd-timeline-block:first-child{margin-top:0}.cd-timeline-block:last-child{margin-bottom:0}}.cd-timeline-img{position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;background:white;border:1px solid #d4d6d4}.cd-timeline-img img{display:block;width:24px;height:24px;position:relative;left:50%;top:50%;margin-left:-12px;margin-top:-12px}@media only screen and (min-width: 1170px){.cd-timeline-img{width:60px;height:60px;left:50%;margin-left:-30px;-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden}.cssanimations .cd-timeline-img.is-hidden{visibility:hidden}.cssanimations .cd-timeline-img.bounce-in{visibility:visible;-webkit-animation:cd-bounce-1 0.6s;-moz-animation:cd-bounce-1 0.6s;animation:cd-bounce-1 0.6s}}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-webkit-transform:scale(0.5)}60%{opacity:1;-webkit-transform:scale(1.2)}100%{-webkit-transform:scale(1)}}@-moz-keyframes cd-bounce-1{0%{opacity:0;-moz-transform:scale(0.5)}60%{opacity:1;-moz-transform:scale(1.2)}100%{-moz-transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5)}60%{opacity:1;-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.cd-timeline-content{position:relative;margin-left:60px;background:#D3D3D3;border-radius:0.25em;padding:1em;text-align:left;transition:0.3s ease-in-out;-webkit-transition:0.3s ease-in-out}.cd-timeline-content:focus,.cd-timeline-content:hover,.social ul:active,.social ul:hover{box-shadow:5px 5px 10px #545454}.cd-timeline-content:after{content:"";display:table;clear:both}.cd-timeline-content h3,.cd-timeline-content p,.cd-timeline-content ul li{margin-top:inherit;margin-bottom:inherit}.cd-timeline-content ul{margin-left:1em;list-style-position:inside}.cd-timeline-content ul li{font-size:90%;margin-left:15px}.cd-timeline-content ul li::before{content:"•";padding-right:3px}.cd-timeline-content .cd-date,.cd-timeline-content .cd-read-more{display:inline-block}.cd-timeline-content p{margin:1em 0;line-height:1.6;font-size:95%}.cd-timeline-content .cd-read-more{float:right;padding:0.8em 1em;background:#acb7c0;border-radius:0.25em}.no-touch .cd-timeline-content .cd-read-more:hover{background-color:#bac4cb}.cd-timeline-content .cd-date{float:left;padding:0.8em 0;opacity:0.7}.cd-date::before{content:"\f073" " ";font-family:"Font Awesome\ 5 Free";font-weight:900}@media only screen and (min-width: 1170px){.cd-timeline-content{margin-left:0;padding:1.6em;width:45%}.cd-timeline-content .cd-read-more{float:left}.cd-timeline-content .cd-date{position:absolute;width:100%;left:122%;top:6px}.cd-date::before{display:none}.cd-timeline-block:nth-child(even) .cd-timeline-content{float:right}.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more{float:right}.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date{left:auto;right:122%;text-align:right}.cssanimations .cd-timeline-content.is-hidden{visibility:hidden}.cssanimations .cd-timeline-content.bounce-in{visibility:visible;-webkit-animation:cd-bounce-2 0.6s;-moz-animation:cd-bounce-2 0.6s;animation:cd-bounce-2 0.6s}}@media only screen and (min-width: 1170px){.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in{-webkit-animation:cd-bounce-2-inverse 0.6s;-moz-animation:cd-bounce-2-inverse 0.6s;animation:cd-bounce-2-inverse 0.6s}}@-webkit-keyframes cd-bounce-2{0%{opacity:0;-webkit-transform:translateX(-100px)}60%{opacity:1;-webkit-transform:translateX(20px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes cd-bounce-2{0%{opacity:0;-moz-transform:translateX(-100px)}60%{opacity:1;-moz-transform:translateX(20px)}100%{-moz-transform:translateX(0)}}@keyframes cd-bounce-2{0%{opacity:0;-webkit-transform:translateX(-100px);-moz-transform:translateX(-100px);-ms-transform:translateX(-100px);-o-transform:translateX(-100px);transform:translateX(-100px)}60%{opacity:1;-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);-o-transform:translateX(20px);transform:translateX(20px)}100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes cd-bounce-2-inverse{0%{opacity:0;-webkit-transform:translateX(100px)}60%{opacity:1;-webkit-transform:translateX(-20px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes cd-bounce-2-inverse{0%{opacity:0;-moz-transform:translateX(100px)}60%{opacity:1;-moz-transform:translateX(-20px)}100%{-moz-transform:translateX(0)}}@keyframes cd-bounce-2-inverse{0%{opacity:0;-webkit-transform:translateX(100px);-moz-transform:translateX(100px);-ms-transform:translateX(100px);-o-transform:translateX(100px);transform:translateX(100px)}60%{opacity:1;-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);-o-transform:translateX(-20px);transform:translateX(-20px)}100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}}@media (prefers-color-scheme: dark){.cd-timeline-content{background-color:#2c2c2c}.social ul{background-color:#2c2c2c}.cd-timeline-content:focus,.cd-timeline-content:hover,.social ul:focus,.social ul:hover{box-shadow:5px 5px 10px #2c2c2c}}