diff --git a/src/style/molecules/_globe.scss b/src/style/molecules/_globe.scss index 4d23647..99cfd74 100644 --- a/src/style/molecules/_globe.scss +++ b/src/style/molecules/_globe.scss @@ -3,19 +3,21 @@ position: relative; z-index: 2; width: 100vw; - height: 800px; + height: 180vw; + min-height: 700px; + max-height: 1536px; overflow: hidden; cursor: grab; user-select: none; @include breakpoint (sm) { - height: 1280px; + height: 130vw; } @include breakpoint (md) { - height: 1340px; + height: 112vw; } @include breakpoint (xl) { - height: 1670px; + height: 100vw; } // DEBUG // diff --git a/src/style/molecules/_photo.scss b/src/style/molecules/_photo.scss index d104954..7da16be 100644 --- a/src/style/molecules/_photo.scss +++ b/src/style/molecules/_photo.scss @@ -59,7 +59,10 @@ margin: 0; padding: 0; - @media (min-aspect-ratio: 16/9) { + @media (min-aspect-ratio: 16/8) { + max-width: 944px; + } + @media (min-aspect-ratio: 16/10) { max-width: 1000px; } } diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss index 037161d..3911212 100644 --- a/src/style/organisms/_carousel.scss +++ b/src/style/organisms/_carousel.scss @@ -12,13 +12,13 @@ padding: 0; @include breakpoint (sm) { - max-width: 85%; + max-width: 80%; } @include breakpoint (1680px) { max-width: 1424px; } - @media (min-aspect-ratio: 16/9) { - max-width: 1200px; + @media (min-aspect-ratio: 16/10) { + max-width: 68%; } } diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss index f7edb47..fdb6210 100644 --- a/src/style/pages/_homepage.scss +++ b/src/style/pages/_homepage.scss @@ -60,6 +60,9 @@ @include breakpoint (xxl) { height: 820px; } + @media (min-aspect-ratio: 16/10) { + height: 36vw; + } } // Photos diff --git a/src/style/pages/_viewer.scss b/src/style/pages/_viewer.scss index 4fb8103..65f1011 100644 --- a/src/style/pages/_viewer.scss +++ b/src/style/pages/_viewer.scss @@ -29,6 +29,9 @@ @include breakpoint (sm) { justify-content: center; + margin-bottom: 24px; + } + @include breakpoint (lg) { margin-top: 24px; margin-bottom: 48px; }