123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226 |
- :root {
- --color-brand--1: #ffb545;
- --color-brand--2: #00c46a;
- --color-dark--1: #2d3439;
- --color-dark--2: #42484d;
- --color-light--1: #aaa;
- --color-light--2: #ececec;
- --color-light--3: rgb(214, 222, 224);
- }
- * {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
- }
- html {
- font-size: 62.5%;
- box-sizing: border-box;
- }
- body {
- font-family: 'Manrope', sans-serif;
- color: var(--color-light--2);
- font-weight: 400;
- line-height: 1.6;
- height: 100vh;
- overscroll-behavior-y: none;
- background-color: #fff;
- padding: 2.5rem;
- display: flex;
- }
- /* GENERAL */
- a:link,
- a:visited {
- color: var(--color-brand--1);
- }
- /* SIDEBAR */
- .sidebar {
- flex-basis: 50rem;
- background-color: var(--color-dark--1);
- padding: 3rem 5rem 4rem 5rem;
- display: flex;
- flex-direction: column;
- }
- .logo {
- height: 5.2rem;
- align-self: center;
- margin-bottom: 4rem;
- }
- .workouts {
- list-style: none;
- height: 77vh;
- overflow-y: scroll;
- overflow-x: hidden;
- }
- .workouts::-webkit-scrollbar {
- width: 0;
- }
- .workout {
- background-color: var(--color-dark--2);
- border-radius: 5px;
- padding: 1.5rem 2.25rem;
- margin-bottom: 1.75rem;
- cursor: pointer;
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr;
- gap: 0.75rem 1.5rem;
- }
- .workout--running {
- border-left: 5px solid var(--color-brand--2);
- }
- .workout--cycling {
- border-left: 5px solid var(--color-brand--1);
- }
- .workout__title {
- font-size: 1.7rem;
- font-weight: 600;
- grid-column: 1 / -1;
- }
- .workout__details {
- display: flex;
- align-items: baseline;
- }
- .workout__icon {
- font-size: 1.8rem;
- margin-right: 0.2rem;
- height: 0.28rem;
- }
- .workout__value {
- font-size: 1.5rem;
- margin-right: 0.5rem;
- }
- .workout__unit {
- font-size: 1.1rem;
- color: var(--color-light--1);
- text-transform: uppercase;
- font-weight: 800;
- }
- .form {
- background-color: var(--color-dark--2);
- border-radius: 5px;
- padding: 1.5rem 2.75rem;
- margin-bottom: 1.75rem;
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 0.5rem 2.5rem;
- /* Match height and activity boxes */
- height: 9.25rem;
- transition: all 0.5s, transform 1ms;
- }
- .form.hidden {
- transform: translateY(-30rem);
- height: 0;
- padding: 0 2.25rem;
- margin-bottom: 0;
- opacity: 0;
- }
- .form__row {
- display: flex;
- align-items: center;
- }
- .form__row--hidden {
- display: none;
- }
- .form__label {
- flex: 0 0 50%;
- font-size: 1.5rem;
- font-weight: 600;
- }
- .form__input {
- width: 100%;
- padding: 0.3rem 1.1rem;
- font-family: inherit;
- font-size: 1.4rem;
- border: none;
- border-radius: 3px;
- background-color: var(--color-light--3);
- transition: all 0.2s;
- }
- .form__input:focus {
- outline: none;
- background-color: #fff;
- }
- .form__btn {
- display: none;
- }
- .copyright {
- margin-top: auto;
- font-size: 1.3rem;
- text-align: center;
- color: var(--color-light--1);
- }
- .twitter-link:link,
- .twitter-link:visited {
- color: var(--color-light--1);
- transition: all 0.2s;
- }
- .twitter-link:hover,
- .twitter-link:active {
- color: var(--color-light--2);
- }
- /* Buttonds */
- .btn--hidden {
- display: none;
- }
- /* MAP */
- #map {
- flex: 1;
- height: 100%;
- background-color: var(--color-light--1);
- }
- /* Popup width is defined in JS using options */
- .leaflet-popup .leaflet-popup-content-wrapper {
- background-color: var(--color-dark--1);
- color: var(--color-light--2);
- border-radius: 5px;
- padding-right: 0.6rem;
- }
- .leaflet-popup .leaflet-popup-content {
- font-size: 1.5rem;
- }
- .leaflet-popup .leaflet-popup-tip {
- background-color: var(--color-dark--1);
- }
- .running-popup .leaflet-popup-content-wrapper {
- border-left: 5px solid var(--color-brand--2);
- }
- .cycling-popup .leaflet-popup-content-wrapper {
- border-left: 5px solid var(--color-brand--1);
- }
|