From 9ef9306814a3d2a1d79689a2ff580347debc9a78 Mon Sep 17 00:00:00 2001 From: Kristian Polso Date: Thu, 10 May 2018 16:07:54 +0300 Subject: [PATCH 1/4] Typos in README --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index cb5bfca..061f1ea 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ Visit [beta.LBRY.tech](https://beta.lbry.tech) for hosted version for this repos ## Running from Source -### Prequisities +### Prerequisities * [Node](https://nodejs.org/) (version >= 9) * [Yarn](https://yarnpkg.com/) @@ -61,4 +61,4 @@ We take security seriously. Please contact [security@lbry.io](mailto:security@lb ## Contact -The primary contact for this project is [@kauffj](https://github.com/kauffj) \ No newline at end of file +The primary contact for this project is [@kauffj](https://github.com/kauffj) From 6e161542b4a3f7d2c76cf882d0e635e6850b95c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?= =?UTF-8?q?=E3=83=96?= Date: Thu, 10 May 2018 14:13:25 -0500 Subject: [PATCH 2/4] Responsiveness, first pass --- .vuepress/scss/pages/_home.scss | 227 ++++++++++++++--------- .vuepress/scss/partials/_footer.scss | 33 +++- .vuepress/scss/partials/_navigation.scss | 38 +++- 3 files changed, 206 insertions(+), 92 deletions(-) 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/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; From abfe06265e2e80d3022715ed2e713ddcc63a3928 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?= =?UTF-8?q?=E3=83=96?= Date: Thu, 10 May 2018 14:23:14 -0500 Subject: [PATCH 3/4] Slight fix --- .vuepress/theme/Layout.vue | 1 - 1 file changed, 1 deletion(-) 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 @@