diff --git a/style.min.css b/style.min.css new file mode 100644 index 0000000..ab5aac2 --- /dev/null +++ b/style.min.css @@ -0,0 +1,228 @@ +* { + font-family: 'Roboto Slab'; + margin:0 auto +} + +a { + text-decoration:none +} + +section.header { + text-align: center; + height: calc(100vh - 3.7em); + width:100% +} + +section.header > .container { + padding-top: 40vh; + padding-bottom:10vh +} + +#readMoreBtn { + bottom: 5vh; + position: fixed; + padding-left:calc(50% - 25px) +} + +section.content { + padding-left: 5vw; + padding-right: 5vw; + min-height:calc(100vh - 3.7em - 10vh) +} + +section.footers { + text-align: center; + padding-top: 2em; + font-size: .7em; + padding-bottom: 1em; + color:#888 +} + +section.content h1 { + text-align: center; + color: #7d7d7d; + border-width: 0 2px 0 2px; + border-color: #7d7d7d; + border-style: solid; + width: 10em; + margin-bottom:2em +} + +section.content .des { + text-align: center; + color: #7d7d7d; + margin-bottom: 2em; + display: block; + font-size:.8em +} + +section.content .des span { + vertical-align: super; + padding: 0 5px; + font-size: 10px; + font-weight:700 +} + +.point { + min-width: 20px; + height: 20px; + background-color: #fff; + border-radius: 100%; + z-index: 2; + border: 3px #7d7d7d solid; + position: relative; + margin-top:10px +} + +.timeline { + position: relative; + margin: 0 auto; + width:90vw +} + +.timeline ul { + padding:0 +} + +.timeline ul li { + margin-bottom: 50px; + list-style-type: none; + display: flex; + flex-direction:row +} + +.timeline ul li .content { + width:45vw +} + +.timeline ul li:nth-child(odd) .content { + padding-left:0 +} + +.timeline ul li:nth-child(odd) .date { + padding-right:0 +} + +.timeline ul li:nth-child(even) .content { + padding-right:0 +} + +.timeline ul li:nth-child(even) .date { + padding-left:0 +} + +.timeline ul li .date { + width: 45vw; + font-weight:400 +} + +.timeline ul li .date h4 { + color: #f5f5f5; + font-size:.8em +} + +.timeline ul li .content h3 { + padding: 10px 20px; + background-color: #7d7d7d; + margin-bottom: 0; + text-align: center; + color:#fff +} + +.timeline ul li .content h3 a { + color:#f5f5f5 +} + +.timeline ul li .content h3 a span { + vertical-align: super; + padding-left: 5px; + font-size:.5em +} + +.timeline ul li .content p { + padding: 10px 10px; + background-color: #fff; + margin-top: 0; + text-align: left; + border-style: solid; + border-color:#7d7d7d +} + +.timeline ul li .content p span.todo { + margin-right: 5px; + border-width: 2px; + border-radius: 100%; + border-color: #7d7d7d; + border-style: dotted; + width: calc(1em - 4px); + display: inline-block; + height: calc(1em - 4px); + vertical-align:sub +} + +.timeline ul li .content p span.update { + border-radius: 100%; + width: 1em; + display: inline-block; + height: 1em; + vertical-align: sub; + margin-right: 5px; + background-color:#7d7d7d +} + +.timeline ul li .content p span.attention { + display: inline-block; + border-left: .5em solid transparent; + border-right: .5em solid transparent; + border-bottom: 1em solid #7d7d7d; + margin-right:5px +} + +.timeline ul li:nth-child(even) { + flex-direction:row-reverse +} + +.timeline ul li:nth-child(odd) .content p { + margin-right: -12px; + border-width:0 0 2px 2px +} + +.timeline ul li:nth-child(even) .content p { + margin-left: -12px; + border-width:0 2px 2px 0 +} + +.timeline ul li:nth-child(odd) .content h3 { + margin-right: -135px; + border-top-left-radius: 10px; + border-bottom-right-radius: 45px; + border-top-right-radius: 45px; + padding-right:145px +} + +.timeline ul li:nth-child(even) .content h3 { + margin-left: -135px; + border-top-right-radius: 10px; + border-bottom-left-radius: 45px; + border-top-left-radius: 45px; + padding-left:145px +} + +.timeline ul li:nth-child(odd) .date h4 { + float: left; + padding:14px 20px 0 13px +} + +.timeline ul li:nth-child(even) .date h4 { + float: right; + padding:14px 13px 0 20px +} + +.timeline::before { + content: ""; + position: absolute; + height: 100%; + width: 2px; + left: calc(45vw - 1px); + background-color: #7d7d7d +}