Line 87: |
Line 87: |
| } | | } |
| | | |
| + | /* Remove extra left and right margins, due to padding in columns */ |
| + | .row { |
| + | margin: 0 -5px; |
| + | clear: both; |
| + | display: flex; |
| + | flex-flow: row wrap; |
| + | } |
| + | |
| + | .column { |
| + | flex: 0 0 25%; |
| + | display: flex; |
| + | padding: 10px; |
| + | |
| + | } |
| + | /* Clear floats after the columns */ |
| + | .row:after { |
| + | content: ""; |
| + | display: table; |
| + | clear: both; |
| + | } |
| + | |
| + | /* Style the counter cards */ |
| + | .card { |
| + | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */ |
| + | padding: 16px; |
| + | text-align: center; |
| + | } |
| + | |
| + | .cards { |
| + | height: 100px; |
| + | max-width: 100px; |
| + | max-height: 150px; |
| + | } |
| + | |
| + | .infobox |
| + | { |
| + | border-radius: 10px; |
| + | border: 2px solid #00A196; |
| + | padding-top: 10px; |
| + | padding-bottom: 10px; |
| + | padding-left: 20px; |
| + | padding-right: 20px; |
| + | margin-bottom: 15px; |
| + | margin-top: 10px; |
| + | } |
| + | |
| + | .infoboxcontent { |
| + | width: 95%; |
| + | float: right; |
| + | height: auto; |
| + | } |
| + | |
| + | .infobox:after { |
| + | content: ""; |
| + | visibility: hidden; |
| + | display: block; |
| + | height: 0; |
| + | clear: both; |
| + | } |
| + | /* Style for projects */ |
| + | .thumbnail img { |
| + | display: block; |
| + | margin-left: auto; |
| + | margin-right: auto; |
| + | } |
| + | |
| + | .thumbRow { |
| + | margin: 0 -5px; |
| + | clear: both; |
| + | display: flex; |
| + | flex-flow: row wrap; |
| + | } |
| + | .thumbRow:after { |
| + | content: ""; |
| + | display: table; |
| + | clear: both; |
| + | } |
| + | |
| + | *{ |
| + | box-sizing: border-box; |
| + | } |
| + | |
| + | .thumbnail h4 |
| + | { |
| + | background-color: #52C765; |
| + | margin: auto; |
| + | padding: 20px; |
| + | text-align: center; |
| + | color: black; |
| + | font-size: 20px; |
| + | text-decoration: underline; |
| + | } |
| + | |
| + | .thumbnail h4 a |
| + | { |
| + | color: black; |
| + | } |
| + | |
| + | .thumbnail h4 a:hover |
| + | { |
| + | color: white; |
| + | } |
| + | .thumbnail h4 a:focus |
| + | { |
| + | color: white; |
| + | } |
| + | |
| + | .thumbcontent |
| + | { |
| + | padding: 20px; |
| + | } |
| + | .thumbcolumn { |
| + | flex-basis: 25%; |
| + | padding: 10px; |
| + | display: flex; |
| + | align-items: stretch; |
| + | justify-items: stretch; |
| + | justify-content: stretch; |
| + | } |
| + | |
| + | .thumbnail { |
| + | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); |
| + | width: 100%; |
| + | } |
| + | .txtPhase { |
| + | text-align: center; |
| + | font-weight: bold; |
| + | padding-bottom: 10px; |
| + | color: #000000; |
| + | border-bottom: solid 2px #75DE86; |
| + | } |
| | | |
| /* For smaller screen sizes */ | | /* For smaller screen sizes */ |
| @media (min-width: 100px) and (max-width: 950px) | | @media (min-width: 100px) and (max-width: 950px) |
| { | | { |
| + | .thumbcolumn { |
| + | flex: 0 0 95% !important; |
| + | display:inline-block; |
| + | width: 100%; |
| + | padding: 10px; /* gutter width */ |
| + | } |
| + | |
| + | .column { |
| + | flex: 0 0 95%; |
| + | display:inline-block; |
| + | width: 100%; |
| + | padding: 10px; /* gutter width */ |
| | | |
| + | } |
| } | | } |
| }} | | }} |