diff --git a/src/app/app.component.scss b/src/app/app.component.scss index ca61478..75eb7d3 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -41,9 +41,9 @@ app-header { .content { display: flex; justify-content: center; - width: 100vw; + width: calc(100vw - 64px); height: calc(100vh - 210px); - padding: 32px 0 0 0; + padding: 32px; } app-sidebar { display: none; @@ -52,3 +52,13 @@ app-header { display: unset; } } + +@media screen and (max-width: 450px) { + .content { + display: flex; + justify-content: center; + width: calc(100vw - 32px); + height: calc(100vh - 210px); + padding: 32px 16px; + } +} diff --git a/src/app/components/board/board.component.scss b/src/app/components/board/board.component.scss index 68a7049..b9e32fd 100644 --- a/src/app/components/board/board.component.scss +++ b/src/app/components/board/board.component.scss @@ -36,16 +36,15 @@ section { background-repeat: no-repeat; background-size: 24px; } -} - -.line { - position: absolute; - top: 8px; - right: 250px; - height: 18px; - width: 1px; - background-color: var(--gray); - margin: 0 6px; + .line { + position: absolute; + top: 8px; + right: 250px; + height: 18px; + width: 1px; + background-color: var(--gray); + margin: 0 6px; + } } .btn-inside { @@ -140,3 +139,71 @@ section { color: var(--gray); margin: 15.5px 0; } + +/*------------- RESPONSIVE -------------*/ + +@media screen and (max-width: 1100px) { + .search { + input { + width: 220px; + } + } +} + +@media screen and (max-width: 1020px) { + .search { + input { + width: 150px; + } + } + + .title { + font-size: 50px; + } +} + +@media screen and (max-width: 910px) { + .search { + input { + width: 220px; + } + } + .status { + justify-content: center; + padding-left: 16px; + } +} + +@media screen and (max-width: 750px) { + .header { + flex-direction: column; + align-items: flex-start; + margin: 16px; + } + + .title { + margin-bottom: 24px; + } + + .search { + padding-right: 0; + input { + width: calc(100vw - 120px); + } + .line { + right: 35px; + } + } + + .btn { + position: absolute; + top: -75px; + right: 0px; + width: 40px; + height: 40px; + padding: 3px; + span { + display: none; + } + } +} diff --git a/src/app/components/summary/summary.component.scss b/src/app/components/summary/summary.component.scss index 05db6e1..1c1b7c2 100644 --- a/src/app/components/summary/summary.component.scss +++ b/src/app/components/summary/summary.component.scss @@ -155,6 +155,8 @@ } } +/*------------- RESPONSIVE -------------*/ + @media screen and (max-width: 1250px) { .right-container { display: none;