diff --git a/src/styles/components.scss b/src/styles/components.scss index 0ac64b6..05277a0 100644 --- a/src/styles/components.scss +++ b/src/styles/components.scss @@ -586,6 +586,18 @@ text-decoration: underline solid 3px; } } + + @media screen and (max-width: $screen-desktop-min) { + padding: 0.8rem; + + &.large { + padding: 1.25rem; + + & > .title { + font-size: 32px; + } + } + } } // diff --git a/src/styles/main.scss b/src/styles/main.scss index 3450dd8..ea87e54 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -44,10 +44,10 @@ $screen-desktop-min: 1024px; color: #222; } - html { - scroll-snap-type: y mandatory; - scroll-padding-top: 4rem; - } + // html { + // scroll-snap-type: y mandatory; + // scroll-padding-top: 4rem; + // } img { display: block; @@ -221,6 +221,8 @@ body { font-family: 'Source Sans Pro', sans-serif; font-size: 20px; + scroll-snap-align: end; + @media screen and (max-width: $screen-desktop-min) { min-height: 5rem; font-size: 18px; diff --git a/src/styles/pages.scss b/src/styles/pages.scss index cf656a5..d2f8ca3 100644 --- a/src/styles/pages.scss +++ b/src/styles/pages.scss @@ -176,7 +176,7 @@ .project-list { width: calc(20rem * 3 + 1.5rem * 2 + 6rem * 2); - max-width: 100vw; + max-width: calc(100vw - 2rem); // HACK: capire come si propagano le width per bene display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); @@ -211,6 +211,10 @@ .title { font-size: 32px; + + @media screen and (max-width: $screen-desktop-min) { + font-size: 24px; + } } .image { @@ -261,6 +265,10 @@ padding: 0 1rem; grid-template-columns: 1fr; + + .project { + padding: 0.8rem; + } } } }