diff --git a/components/01_Atoms/pagination/_pagination.scss b/components/01_Atoms/pagination/_pagination.scss index a543a46..6fe10bb 100644 --- a/components/01_Atoms/pagination/_pagination.scss +++ b/components/01_Atoms/pagination/_pagination.scss @@ -8,12 +8,14 @@ .LP-Pagination__List{ list-style-type: none; display: flex; - flex-direction: row; + flex-direction: row; + padding-left: 0; + padding-right: 0; } .LP-Pagination__Item{ margin: 0 4px; - + &--disabled{ color: rgb(182, 182, 182); } @@ -22,7 +24,6 @@ .LP-Link{ background-color: $-beige; - border-radius: 2px; &:hover{ background-color: $-beige; @@ -30,48 +31,54 @@ } } } - } + } + + .LP-Link{ + padding: 15px 20px; + vertical-align: sub; + border-radius: 2px; - .LP-Link{ - padding: 15px 25px; - vertical-align: sub; + &:active, &:hover{ + background-color: $-beige; + color: $-grey; + } + } - &:active, &:hover{ - background-color: $-beige; - border-radius: 2px; - color: $-grey; - } - } + .LP-Icon{ + font-size: larger; + } +} - .LP-Pagination__First{ - &:before{ - content: "⟪"; - padding-right: 1em; - font-size: larger; - } - } +@media(max-width: $-viewport-normal){ + .LP-Pagination{ + .LP-Link{ + padding: 10px 15px; + } + .LP-Pagination__Item--other{ + .LP-Text{ + display: none; + } + } + } +} - .LP-Pagination__Previous{ - &:before{ - content: "⟨"; - padding-right: 1em; - font-size: larger; - } - } +@media(max-width: $-viewport-small){ + .LP-Pagination{ + .LP-Pagination__Item{ + margin: 0 1px; + .LP-Link{ + padding: 13px 16px; + } + } + } +} - .LP-Pagination__Next{ - &:after{ - content: "⟩"; - padding-left: 1em; - font-size: larger; - } - } - - .LP-Pagination__Last{ - &:after{ - content: "⟫"; - padding-left: 1em; - font-size: larger; - } - } +@media(max-width: $-viewport-extra-small){ + .LP-Pagination{ + .LP-Pagination__Item{ + .LP-Link{ + padding: 8px 11px; + } + } + } } \ No newline at end of file diff --git a/components/01_Atoms/pagination/pagination.hbs b/components/01_Atoms/pagination/pagination.hbs index 594891d..31bd80c 100644 --- a/components/01_Atoms/pagination/pagination.hbs +++ b/components/01_Atoms/pagination/pagination.hbs @@ -1,43 +1,54 @@
- +
\ No newline at end of file diff --git a/components/03_Organisms/placeList/_placeList.scss b/components/03_Organisms/placeList/_placeList.scss index bac8408..0b6044f 100644 --- a/components/03_Organisms/placeList/_placeList.scss +++ b/components/03_Organisms/placeList/_placeList.scss @@ -21,7 +21,7 @@ .LP-PlaceList__Item{ max-width: 900px; - min-width: 450px; + //min-width: 450px; margin: 18px 0; } } diff --git a/components/main.scss b/components/main.scss index 759217e..7b4452a 100644 --- a/components/main.scss +++ b/components/main.scss @@ -26,8 +26,8 @@ $-primary-sans-serif-font: Montserrat, Helvetica, sans-serif; $-primary-serif-font: Crimson, Times, serif; $-primary-sans-serif-accent-font: Roboto, Arial, sans-serif; -$-viewport-small: 650px; $-viewport-extra-small: 450px; +$-viewport-small: 650px; $-viewport-medium: 750px; $-viewport-normal: 1000px; @@ -99,6 +99,12 @@ body{ } } +@media(max-width: $-viewport-extra-small){ + .LP-Main__Sidebar{ + max-width: 100vw; + } +} + @media(max-width: $-viewport-toggle-sidebar){ .LP-Wrapper__Site{ grid-template-columns: 0 1fr; @@ -125,7 +131,7 @@ body{ } #toggle_sidebar ~ .LP-Main__Sidebar{ - left: -1 * $-sidebar-width; + left: -1 * $-sidebar-width - 1; } .LP-Menu__TriggerLabel{ diff --git a/public/main.css b/public/main.css index e3c67e4..b991427 100644 --- a/public/main.css +++ b/public/main.css @@ -1,4 +1,3 @@ -@charset "UTF-8"; @font-face { font-family: Crimson; src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); } @@ -56,17 +55,11 @@ body { .LP-Section .LP-Headline { margin: 0; } } +@media (max-width: 450px) { + .LP-Main__Sidebar { + max-width: 100vw; } } + @media (max-width: 650px) { - @keyframes slide_out_siedebar { - from { - left: -250px; } - to { - left: 0; } } - @keyframes slide_in_siedebar { - from { - left: 0; } - to { - left: -250px; } } .LP-Wrapper__Site { grid-template-columns: 0 1fr; } .LP-Main__Sidebar { @@ -77,16 +70,14 @@ body { left: -251px; height: 100vh; top: 60px; - border-right: 1px solid #C09F80; } + border-right: 1px solid #C09F80; + transition: left 0.3s; } .LP-Main__Sidebar--hidden { visibility: hidden; } #toggle_sidebar:checked ~ .LP-Main__Sidebar { - animation-name: slide_out_siedebar; - animation-duration: .3s; left: 0; } #toggle_sidebar ~ .LP-Main__Sidebar { - animation-name: slide_in_siedebar; - animation-duration: .3s; } + left: -251px; } .LP-Menu__TriggerLabel { z-index: 20; height: 60px; @@ -315,41 +306,44 @@ body { .LP-Pagination .LP-Pagination__List { list-style-type: none; display: flex; - flex-direction: row; } + flex-direction: row; + padding-left: 0; + padding-right: 0; } .LP-Pagination .LP-Pagination__Item { margin: 0 4px; } .LP-Pagination .LP-Pagination__Item--disabled { color: #b6b6b6; } .LP-Pagination .LP-Pagination__Item--current .LP-Link { - background-color: #D7CEC7; - border-radius: 2px; } + background-color: #D7CEC7; } .LP-Pagination .LP-Pagination__Item--current .LP-Link:hover { background-color: #D7CEC7; color: #565656; } .LP-Pagination .LP-Link { - padding: 15px 25px; - vertical-align: sub; } + padding: 15px 20px; + vertical-align: sub; + border-radius: 2px; } .LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover { background-color: #D7CEC7; - border-radius: 2px; color: #565656; } - .LP-Pagination .LP-Pagination__First:before { - content: "⟪"; - padding-right: 1em; - font-size: larger; } - .LP-Pagination .LP-Pagination__Previous:before { - content: "⟨"; - padding-right: 1em; - font-size: larger; } - .LP-Pagination .LP-Pagination__Next:after { - content: "⟩"; - padding-left: 1em; - font-size: larger; } - .LP-Pagination .LP-Pagination__Last:after { - content: "⟫"; - padding-left: 1em; + .LP-Pagination .LP-Icon { font-size: larger; } +@media (max-width: 1000px) { + .LP-Pagination .LP-Link { + padding: 10px 15px; } + .LP-Pagination .LP-Pagination__Item--other .LP-Text { + display: none; } } + +@media (max-width: 650px) { + .LP-Pagination .LP-Pagination__Item { + margin: 0 1px; } + .LP-Pagination .LP-Pagination__Item .LP-Link { + padding: 13px 16px; } } + +@media (max-width: 450px) { + .LP-Pagination .LP-Pagination__Item .LP-Link { + padding: 8px 11px; } } + .LP-Content { padding: 35px; } @@ -578,7 +572,6 @@ body { border-left: 2px #565656 solid; } .LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item { max-width: 900px; - min-width: 450px; margin: 18px 0; } .LP-PlaceList .LP-Pagination {