diff --git a/src/styles/components.scss b/src/styles/components.scss index 5e6e5b5..cb40504 100644 --- a/src/styles/components.scss +++ b/src/styles/components.scss @@ -360,7 +360,7 @@ padding: 2rem 1rem; @media screen and (max-width: $screen-desktop-min) { - padding: 1rem 2rem 1rem 0; + padding: 1rem 1rem 1rem 0; } display: grid; @@ -605,6 +605,10 @@ & > .card { max-width: 25rem; } + + @media screen and (max-width: $screen-desktop-min) { + grid-template-columns: 1fr; + } } .show-more { diff --git a/src/styles/controls.scss b/src/styles/controls.scss index ca59531..b8a3b10 100644 --- a/src/styles/controls.scss +++ b/src/styles/controls.scss @@ -55,14 +55,14 @@ } &.flat { - background: #0002; + background: transparent; color: #222; border: none; box-shadow: none; &:hover { - background: #0004; + background: #0002; } } } diff --git a/src/styles/main.scss b/src/styles/main.scss index 25bdc47..ae464e2 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -164,13 +164,27 @@ body { display: none; } } + + @media screen and (max-width: $screen-desktop-min) { + height: 5rem; + padding: 0 0.5rem; + + .logo { + padding-left: 0; + + img { + height: 3rem; + } + } + } } main { width: 100%; @media screen and (max-width: $screen-desktop-min) { - padding: 0.5rem; + padding: 3rem 1rem; + gap: 3rem; } } @@ -190,6 +204,11 @@ body { font-family: 'Source Sans Pro', sans-serif; font-size: 20px; + + @media screen and (max-width: $screen-desktop-min) { + min-height: 5rem; + font-size: 18px; + } } } diff --git a/src/styles/typography.scss b/src/styles/typography.scss index bbda636..9fcc5cb 100644 --- a/src/styles/typography.scss +++ b/src/styles/typography.scss @@ -34,6 +34,9 @@ @include geometric-headings; .text { + // text-align: justify; + // hyphens: auto; + &.center { text-align: center; } @@ -80,6 +83,11 @@ code { padding: 0; } + + @media screen and (max-width: $screen-desktop-min) { + width: calc(100vw - 2rem); + max-width: none; + } } p {