(2 intermediate revisions by the same user not shown) | |||
Line 23: | Line 23: | ||
font-weight: 300; | font-weight: 300; | ||
font-size: 100%; | font-size: 100%; | ||
− | margin-top: | + | margin-top: 0em; |
margin-bottom: 2em; | margin-bottom: 2em; | ||
} | } | ||
Line 38: | Line 38: | ||
.progressbar { | .progressbar { | ||
display: none; | display: none; | ||
− | margin: | + | margin: 2em 0; |
} | } | ||
@media only screen and (min-width: 650px) { | @media only screen and (min-width: 650px) { | ||
Line 121: | Line 121: | ||
transition: color 150ms ease-in, top 100ms ease-out; | transition: color 150ms ease-in, top 100ms ease-out; | ||
font-style: normal; | font-style: normal; | ||
+ | font-weight: 700; | ||
+ | font-size: 18px; | ||
+ | font-family: alegreya, serif !important; | ||
} | } | ||
.progressbar .holder .labels i:hover::before, .progressbar .holder .labels i:focus::before { | .progressbar .holder .labels i:hover::before, .progressbar .holder .labels i:focus::before { |
Latest revision as of 21:45, 21 October 2019
- , *:before, *:after {
box-sizing: border-box;
}
.clearfix:before, .clearfix:after {
content: " "; display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
.progressbar p {
font-family: 'Merriweather'; font-weight: 300; font-size: 100%; margin-top: 0em; margin-bottom: 2em;
}
.progressbar a {
color: #2d2f30; text-decoration: underline; transition: color 100ms ease-in;
} .progressbar a:hover, a:focus {
color: #DB5B33;
}
.progressbar {
display: none; margin: 2em 0;
} @media only screen and (min-width: 650px) {
.progressbar { display: block; }
} .progressbar .shim {
display: none; width: 100%;
} .progressbar .holder {
position: relative; font-size: 85%; padding: 1.8em 0 0 0; background-color: #badbe4; box-shadow: 1em 1em 1.5em #badbe4;
} @media only screen and (min-width: 750px) {
.progressbar .holder { font-size: 90%; }
} @media only screen and (min-width: 900px) {
.progressbar .holder { font-size: 95%; }
} .progressbar .holder .bar {
position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #B6D1DA;
} .progressbar .holder .bar .indicator {
position: absolute; top: 0; left: 0; height: 100%; background-color: #4598B5;
} .progressbar .holder .labels {
max-width: 1600px; margin: 0 auto; padding: 0 2em; text-align: center;
} .progressbar .holder .labels i {
display: block; position: relative; float: left; cursor: pointer;
} .progressbar .holder .labels i::before {
position: absolute; bottom: 0; left: 50%; display: block; content: ; width: .9em; height: .9em; border-radius: 50%; border: solid 3px #B6D1DA; background-color: #D6E1E5; -webkit-transform: translateX(-50%) translateY(50%); transform: translateX(-50%) translateY(50%); transition: border-color 100ms ease-in, background-color 150ms ease-in;
} .progressbar .holder .labels i::after {
display: block; content: attr(data-label); position: relative; top: 0; padding-bottom: 1.8em; font-family: alegreya; font-weight: bold; /*font-family: 'Open Sans';*/ /*font-weight: 400;*/ color: #4598B5; transition: color 150ms ease-in, top 100ms ease-out; font-style: normal; font-weight: 700; font-size: 18px; font-family: alegreya, serif !important;
} .progressbar .holder .labels i:hover::before, .progressbar .holder .labels i:focus::before {
background-color: #B6D1DA;
} .progressbar .holder .labels i:hover::after, .progressbar .holder .labels i:focus::after {
top: -.2em;
} .progressbar .holder .labels i.read::before {
border-color: #4598B5;
} .progressbar .holder .labels i.read:hover::before, .progressbar .holder .labels i.read:focus::before {
background-color: #bbdce5;
} .progressbar .holder .labels i.reading::after {
color: #222;
} .progressbar .holder .labels i.reading:hover::after, .progressbar .holder .labels i.reading:focus::after {
top: 0;
} .progressbar.fixed .holder {
position: fixed; top: 0; left: 0; width: 100%; z-index: 1;
} .progressbar.fixed .shim {
display: block;
}