diff --git a/.vuepress/scss/pages/_home.scss b/.vuepress/scss/pages/_home.scss index 7e6f5aa..4b67b77 100644 --- a/.vuepress/scss/pages/_home.scss +++ b/.vuepress/scss/pages/_home.scss @@ -10,13 +10,16 @@ } h2 { - font-size: 1.75rem; font-weight: 400; margin-bottom: 4rem; - } - h3 { - font-size: 1.5rem; + @media (min-width: 851px) { + font-size: 1.75rem; + } + + @media (max-width: 850px) { + font-size: 1.25rem; + } } hr { @@ -37,6 +40,10 @@ height: calc(50vh - 4rem); justify-content: center; + @media (max-width: 850px) { + background-size: cover; + } + h2 { background-color: $white; border: 1px solid rgba($black, 0.1); @@ -49,12 +56,19 @@ &.alert { background-color: $yellow; - font-size: 1rem; line-height: 1.33; padding-top: 1rem; padding-bottom: 1rem; text-align: center; + @media (min-width: 901px) { + font-size: 1rem; + } + + @media (max-width: 900px) { + font-size: 0.8rem; + } + a { font-weight: 600; } @@ -75,7 +89,22 @@ position: relative; text-align: center; vertical-align: top; - width: 50%; + + @media (min-width: 651px) { + width: 50%; + } + + @media (max-width: 650px) { + width: 100%; + + &:first-of-type { + padding-bottom: 1rem; + } + + &:last-of-type { + padding-top: 1rem; + } + } } @@ -114,22 +143,46 @@ } h3 { - top: -0.85rem; left: -2rem; - - color: rgba($black, 0.045); - font-size: 4rem; letter-spacing: 0.1rem; line-height: 1; - position: absolute; text-transform: uppercase; + + @media (min-width: 1301px) { + top: -0.85rem; left: -2rem; + + color: rgba($black, 0.045); + font-size: 4rem; + position: absolute; + } + + @media (max-width: 1300px) { + color: $black; + } + + @media (min-width: 901px) and (max-width: 1300px) { + font-size: 3rem; + } + + @media (max-width: 900px) { + font-size: 2rem; + margin-bottom: 1rem; + } } p { - font-size: 1.5rem; - line-height: 1.55; margin-bottom: 1.5rem; max-width: 1000px; + @media (min-width: 901px) { + font-size: 1.5rem; + line-height: 1.55; + } + + @media (max-width: 900px) { + font-size: 1.25rem; + line-height: 1.33; + } + &:first-of-type { padding-top: 0.5rem; } @@ -148,11 +201,14 @@ border-bottom: 1px solid rgba($black, 0.05); } - &.community { + &.community, + &.contribute { p { - margin-right: auto; - margin-left: auto; - text-align: center; + @media (min-width: 1301px) { + margin-right: auto; + margin-left: auto; + text-align: center; + } } ul { @@ -163,30 +219,44 @@ @include clearfix; } + @media (min-width: 901px) { + font-size: 1.5rem; + } + + @media (min-width: 751px) and (max-width: 900px) { + font-size: 1.25rem; + } + + @media (max-width: 750px) { + font-size: 1rem; + } + li { float: left; - font-size: 1.5rem; - padding-top: 5rem; position: relative; text-align: center; - width: calc(100% / 3); - &::before { - width: 100%; height: 100%; - top: 0; left: 0; - - background-position: center 0; - background-repeat: no-repeat; - background-size: 5rem; - content: ""; - position: absolute; + @media (max-width: 750px) { + margin-bottom: 2rem; + min-width: 8rem; } a { display: block; position: relative; + padding-top: 4rem; transition: color 0.2s; + &::before { + width: 100%; height: 100%; + + background-position: center 0; + background-repeat: no-repeat; + content: ""; + left: 0; + position: absolute; + } + &:not(:hover) { color: inherit; } @@ -195,90 +265,79 @@ color: $teal; } } - - &:nth-child(1)::before { - background-image: url("../media/svg/discord.svg"); - } - - &:nth-child(2)::before { - background-image: url("../media/svg/reddit.svg"); - } - - &:nth-child(3)::before { - background-image: url("../media/svg/slack.svg"); - } } } } &.contribute { - p { - margin-right: auto; - margin-left: auto; - text-align: center; - } - ul { - list-style-type: none; - padding-top: 1rem; - - &::after { - @include clearfix; - } - li { - float: left; - font-size: 1.5rem; - padding-top: 4rem; - position: relative; - text-align: center; width: calc(100% / 5); - &::before { - width: 100%; height: 100%; - top: 0; left: 0; - - background-position: center 0; - background-repeat: no-repeat; - background-size: 3rem; - content: ""; - position: absolute; - } - - a { - display: block; - position: relative; - transition: color 0.2s; - - &:not(:hover) { - color: inherit; + a::before { + @media (min-width: 901px) { + background-size: 4rem; + top: -1rem; } - &:hover { - color: $teal; + @media (max-width: 900px) { + background-size: 3rem; + top: 0; } } - &:nth-child(1)::before { + &:nth-child(1) a::before { background-image: url("../media/svg/flag.svg"); } - &:nth-child(2)::before { + &:nth-child(2) a::before { background-image: url("../media/svg/keyboard.svg"); } - &:nth-child(3)::before { + &:nth-child(3) a::before { background-image: url("../media/svg/anchor.svg"); } - &:nth-child(4)::before { + &:nth-child(4) a::before { background-image: url("../media/svg/chat.svg"); } - &:nth-child(5)::before { + &:nth-child(5) a::before { background-image: url("../media/svg/monitor.svg"); } } } } + + &.community { + ul { + li { + width: calc(100% / 3); + + a::before { + @media (min-width: 901px) { + background-size: 6rem; + top: -2rem; + } + + @media (max-width: 900px) { + background-size: 4rem; + top: -0.5rem; + } + } + + &:nth-child(1) a::before { + background-image: url("../media/svg/discord.svg"); + } + + &:nth-child(2) a::before { + background-image: url("../media/svg/reddit.svg"); + } + + &:nth-child(3) a::before { + background-image: url("../media/svg/slack.svg"); + } + } + } + } } diff --git a/.vuepress/scss/pages/_page.scss b/.vuepress/scss/pages/_page.scss index fdeff93..cfcbe0b 100644 --- a/.vuepress/scss/pages/_page.scss +++ b/.vuepress/scss/pages/_page.scss @@ -12,21 +12,27 @@ .page__header { @include center; - width: 100%; height: 100px; - background-image: url("../media/images/background-a.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; color: $white; position: relative; + width: 100%; } .page__header__title { - font-size: 3rem; font-weight: 300; line-height: 6.5rem; text-shadow: 1px 1px 2px rgba($black, 0.3); + + @media (min-width: 901px) { + font-size: 3rem; + } + + @media (max-width: 900px) { + font-size: 2rem; + } } @@ -62,12 +68,7 @@ text-transform: uppercase; } - p, ol, ul { - font-size: 1.25rem; - line-height: 1.5; - margin-bottom: 2rem; - position: relative; - + p, ol, ul, table { code { background-color: $black; border-radius: 3px; @@ -79,7 +80,26 @@ } } - ol, ul { + p, ol, ul { + line-height: 1.33; + margin-bottom: 2rem; + position: relative; + + @media (min-width: 901px) { + font-size: 1.25rem; + } + + @media (max-width: 900px) { + font-size: 1.05rem; + } + } + + ol { + list-style-type: lower-roman; + padding-left: 1.6rem; + } + + ul { padding-left: 1.25rem; } diff --git a/.vuepress/scss/partials/_footer.scss b/.vuepress/scss/partials/_footer.scss index ef3bd53..6d528b5 100644 --- a/.vuepress/scss/partials/_footer.scss +++ b/.vuepress/scss/partials/_footer.scss @@ -2,18 +2,41 @@ background-color: $black; color: rgba($white, 0.15); font-size: 1rem; - padding-top: 2rem; - padding-bottom: 2rem; + + > div:first-of-type { + @media (max-width: 900px) { + overflow: auto; + overflow-scrolling: touch; + white-space: nowrap; + width: 102%; + } + } ul { - align-items: stretch; - display: flex; - flex-flow: row wrap; list-style-type: none; + padding-top: 2rem; + padding-bottom: 2rem; + + @media (min-width: 901px) { + align-items: stretch; + display: flex; + flex-flow: row wrap; + } li { padding-right: 0.5rem; padding-left: 0.5rem; + vertical-align: bottom; + + @media (max-width: 900px) { + display: inline-block; + transform: translate3d(0, 0, 0); + transition: opacity 0.2s 0.2s ease, transform 0.4s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); + + &:last-of-type { + margin-right: 3rem; + } + } &:first-of-type { flex: 1; diff --git a/.vuepress/scss/partials/_navigation.scss b/.vuepress/scss/partials/_navigation.scss index ba488ea..0f2f460 100644 --- a/.vuepress/scss/partials/_navigation.scss +++ b/.vuepress/scss/partials/_navigation.scss @@ -8,9 +8,30 @@ z-index: 10; > div:first-of-type { - align-items: stretch; - display: flex; - flex-flow: row wrap; + position: relative; + + @media (min-width: 701px) { + align-items: stretch; + display: flex; + flex-flow: row wrap; + } + + @media (max-width: 700px) { + overflow: auto; + overflow-scrolling: touch; + white-space: nowrap; + width: 102%; + + &::before { + width: 2rem; height: 4rem; + top: 0; right: 0; + + background-image: linear-gradient(90deg, rgba($white, 0), $white 50%, $white); // iOS Safari cannot handle `transparent` + content: ""; + position: fixed; + z-index: 2; + } + } } } @@ -20,6 +41,17 @@ padding-left: 0.5rem; position: relative; + @media (max-width: 700px) { + display: inline-block; + transform: translate3d(0, 0, 0); + transition: opacity 0.2s 0.2s ease, transform 0.4s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); + vertical-align: top; + + &:last-of-type { + margin-right: 3rem; + } + } + &:first-of-type { @include hide-text; width: 10rem; height: 3rem; diff --git a/.vuepress/theme/Layout.vue b/.vuepress/theme/Layout.vue index e5c8e97..e437d98 100644 --- a/.vuepress/theme/Layout.vue +++ b/.vuepress/theme/Layout.vue @@ -104,7 +104,6 @@