diff --git a/app/assets/stylesheets/kluk.css b/app/assets/stylesheets/kluk.css index 5bd9495..938f01c 100644 --- a/app/assets/stylesheets/kluk.css +++ b/app/assets/stylesheets/kluk.css @@ -16,21 +16,6 @@ body { font-style: normal; } -.mode { - grid-area: mode; - height: 50vh; -} - -.tracker { - grid-area: tracker; -} - -.title { - grid-area: title; - margin: 30px; - font-size: 2rem; -} - .bar-afond { background: black; width: 10px; @@ -75,91 +60,7 @@ body { align-items: center; } -main { - display: block; - grid-template-rows: 1fr 1fr; - grid-template-areas: - "mode" - "tracker"; - align-items: center; - justify-content: center; -} - -.mode img { - height: 100%; - width: 100%; - object-fit: contain; -} - -.tracker { - grid-area: tracker; -} - -.title h1 { - font-weight: 350; -} - -@media (min-width: 1000px) { - main { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; - grid-template-areas: "mode tracker"; - align-items: center; - justify-content: center; - } - - .mode { - height: 100vh; - grid-area: mode; - } - - .tracker { - grid-area: tracker; - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 2fr 1fr 6fr 1fr; - grid-template-areas: - "title title" - "info-day info-day" - "moods moods" - ". legend"; - background-color: lightgoldenrodyellow; - align-items: center; - justify-content: center; - height: 100vh; - width: 100%; - gap: 45px; - } - - .title { - grid-area: title; - margin: 30px; - } - - .info-day { - grid-area: info-day; - margin: 30px; - font-size: 1.8rem; - } - - .info { - grid-area: info; - } - - .mode img { - height: 100%; - width: 100%; - object-fit: contain; - } - - .title h1 { - font-weight: 350; - } -} - .moods { - grid-area: moods; margin: 30px; max-height: 100%; display: flex; @@ -167,17 +68,6 @@ main { overflow: hidden; } -.legend { - grid-area: legend; - margin: 4px; - font-size: 0.8rem; - display: flex; - flex-direction: row; - align-items: flex-end; - justify-content: flex-end; - margin: 30px; -} - .log { align-self: flex-end; display: flex;