diff --git a/src/App.css b/src/App.css index ae5318f716e5d4adcb6d6090da144501c63d11f1..c7fe86bcf814bda397c0ded16a243e49a8573a2e 100644 --- a/src/App.css +++ b/src/App.css @@ -48,11 +48,26 @@ } .title { - font-size: 2.2em; + font-size: 30px; margin-top: 25px; - margin-bottom: 10%; + width: 100%; + color: #002F43; font-weight: bold; + padding-left: 70px; + padding-right: 70px; + font-family: 'AvenirNext'; +} + +.page-title { + font-size: 30px; + margin-top: 25px; + margin-bottom: 50px; width: 100%; + color: #002F43; + font-weight: bold; + padding-left: 70px; + padding-right: 70px; + font-family: 'AvenirNext'; } .newUserButton { @@ -69,9 +84,19 @@ text-align: center; } +.main-content { + padding: 100px 38% 4% 38%; + margin-left: -10%; +} + +.content { + padding: 100px 20% 4% 20%; + margin-left: -10%; +} + .submitButton { width: 150px; - margin-top: 15px; + margin-top: 40px; } .input { @@ -122,23 +147,101 @@ .buildingButton { padding: 3%; cursor: pointer; + font-size: 14px; + font-weight: bold; + color: #002F43; } + .selectedButton { - background: #EEEEEE; cursor: pointer; padding: 10%; height: 100%; - border: 1px solid #999999; + border: 3px solid #002F43; font-weight: bold; + font-size: 14px; + color: #002F43; +} + +.selectedButton img{ + width: 60%; +} + +@media (max-width: 1367px) { + .main-content { + padding: 300px 20% 4% 10%; + margin-left: 0%; + } + + .content { + padding: 200px 20% 4% 20%; + + } +} + +@media (max-width: 1200px) { + .selectedButton { + font-size: 12px; + } +} + +@media (max-width: 992px) { + .selectedButton { + font-size: 20px; + } + + .content { + padding: 130px 20% 4% 20%; + } + + .main-content { + padding: 100px 20% 4% 10%; + margin-left: 0%; + } +} + +@media (max-width: 576px) { + .content { + padding: 0 20% 4% 20%; + margin-left: 0%; + } + + .main-content { + padding: 0 10% 0 10%; +} + + .title { + font-size: 30px; + margin-top: 25px; + width: 100%; + color: #002F43; + font-weight: bold; + padding-left: 0; + padding-right: 0; + font-family: 'AvenirNext'; + } + + .page-title { + font-size: 30px; + margin-top: 25px; + margin-bottom: 50px; + width: 100%; + color: #002F43; + font-weight: bold; + padding-left: 0; + padding-right: 0; + font-family: 'AvenirNext'; +} } .selectedBuildingButton { - background: #EEEEEE !important; + /* background: #EEEEEE !important; */ cursor: pointer; padding: 3%; height: 100%; - border: 4px solid #999999 !important; + font-size: 14px; + font-weight: bold; + border: 3px solid #002F43 !important; } .completedButton { @@ -184,9 +287,7 @@ margin-bottom: 15px; } -.content { - padding: 4% 20% 4% 20%; -} + .logo { width: '75%', diff --git a/src/App.js b/src/App.js index 47cff36756135563c6c378645c2857c47fabd849..fec412aae785bdb5772936d589a2cd7e01e82031 100644 --- a/src/App.js +++ b/src/App.js @@ -631,11 +631,11 @@ class App extends React.Component { const incompletedIcon = (