diff --git a/content/setup/quickstart.md b/content/setup/quickstart.md index 18b7764f..a23a15c6 100644 --- a/content/setup/quickstart.md +++ b/content/setup/quickstart.md @@ -16,7 +16,7 @@ Seeing the dolphin means it's working: ![start_ocean.sh](images/dolphin.png) -One everything is up and running, you can interact with the components. For example, to interact with Pleuston, go to: +Once everything is up and running, you can interact with the components. For example, to interact with Pleuston, go to: [http://localhost:3000/](http://localhost:3000/) diff --git a/src/components/DocHeader.module.scss b/src/components/DocHeader.module.scss index 6f981bc8..f8795722 100644 --- a/src/components/DocHeader.module.scss +++ b/src/components/DocHeader.module.scss @@ -1,14 +1,23 @@ @import 'variables'; .header { - padding-top: $spacer * $line-height; - margin-bottom: $spacer * $line-height; + padding-top: $spacer; + margin-bottom: $spacer; + + @media screen and (min-width: $break-point--small) { + padding-top: $spacer * $line-height; + margin-bottom: $spacer * $line-height; + } } .title { - font-size: $font-size-h1; + font-size: $font-size-h1 / 1.3; margin-top: 0; margin-bottom: $spacer / $line-height; + + @media screen and (min-width: $break-point--small) { + font-size: $font-size-h1; + } } .lead { diff --git a/src/components/DocToc.module.scss b/src/components/DocToc.module.scss index 64ed1aa2..ce1afdbc 100644 --- a/src/components/DocToc.module.scss +++ b/src/components/DocToc.module.scss @@ -2,10 +2,14 @@ .toc { background: darken($brand-white, 2%); - padding: $spacer; + padding: $spacer / 2; margin-bottom: $spacer * 2; + @media screen and (min-width: $break-point--small) { + padding: $spacer / $line-height $spacer; + } + ul { - margin: 0; + margin-bottom: 0; } } diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss index f3393590..16dbd985 100644 --- a/src/components/Footer.module.scss +++ b/src/components/Footer.module.scss @@ -49,6 +49,7 @@ a { margin: 0 $spacer / 2; + display: inline-block; &:last-child { margin-right: 0; diff --git a/src/components/Header.module.scss b/src/components/Header.module.scss index d0c8b763..187098b5 100644 --- a/src/components/Header.module.scss +++ b/src/components/Header.module.scss @@ -12,7 +12,6 @@ .headerContent { composes: content from './Content.module.scss'; display: flex; - justify-content: space-between; align-items: center; } @@ -41,13 +40,37 @@ margin-left: $spacer / 2; display: none; - @media (min-width: $break-point--small) { + @media (min-width: $break-point--medium) { display: inline-block; } } .headerMenu { + flex: 1; justify-self: flex-end; + text-align: right; + white-space: nowrap; + overflow-y: hidden; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + margin-right: -($spacer / 2); + padding-right: $spacer; + + @media (min-width: $break-point--medium) { + padding-right: 0; + margin-right: 0; + } + + &::-webkit-scrollbar, + &::-moz-scrollbar { + display: none; + } + + &::-webkit-scrollbar { + width: 3px; + height: 3px; + transition: opacity .2s ease-out; + } } .section { diff --git a/src/components/Repositories/RepositoryList.module.scss b/src/components/Repositories/RepositoryList.module.scss index bd72d9bb..49c709ca 100644 --- a/src/components/Repositories/RepositoryList.module.scss +++ b/src/components/Repositories/RepositoryList.module.scss @@ -7,6 +7,7 @@ -webkit-overflow-scrolling: touch; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); + padding-right: $spacer; display: flex; @media (min-width: $break-point--medium) { @@ -18,7 +19,8 @@ article { white-space: normal; - flex: 0 0 25rem; + flex: 0 0 90vw; + max-width: 25rem; margin-left: $spacer; margin-bottom: $spacer / 4; @@ -67,7 +69,7 @@ .repositoryCategoryTitle { width: 100%; - font-size: $font-size-h3; + font-size: $font-size-h4; color: $brand-grey-light; margin-bottom: $spacer / 2; } diff --git a/src/styles/global.scss b/src/styles/global.scss index fe43f75d..c75a171b 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -103,10 +103,15 @@ ol { user-select: none; } + + li { + margin-top: $spacer / 8; + } + ul, ol, p { margin-bottom: 0; + margin-top: $spacer / 8; } } } @@ -205,11 +210,17 @@ cite { blockquote, blockquote > p { font-style: italic; + color: lighten($brand-grey, 15%); } blockquote { margin: 0 0 $spacer; - padding-left: $spacer; + padding-left: $spacer / 2; + border-left: .2rem solid $brand-grey-lighter; + + @media screen and (min-width: $break-point--small) { + padding-left: $spacer / $line-height; + } } // Tables diff --git a/src/templates/Doc.module.scss b/src/templates/Doc.module.scss index bbda7488..47300dcb 100644 --- a/src/templates/Doc.module.scss +++ b/src/templates/Doc.module.scss @@ -1,19 +1,20 @@ @import 'variables'; .wrapper { - @media (min-width: $break-point--medium) { - display: flex; - } + display: flex; + flex-wrap: wrap; } .sidebar { margin-top: $spacer / 2; margin-bottom: $spacer / 2; top: $spacer; + order: 2; @media (min-width: $break-point--medium) { width: 27%; margin-bottom: 0; + order: 1; + .main { width: 73%; @@ -22,13 +23,22 @@ } .main { + width: 100%; background: $brand-white; - padding: 0 $spacer; + padding: 0 $spacer / 2; border: 1px solid $brand-grey-lighter; + border-top: 0; + order: 1; + + @media (min-width: $break-point--small) { + padding-left: $spacer; + padding-right: $spacer; + } @media (min-width: $break-point--medium) { - padding: 0 $spacer * 2; - border-top: 0; + padding-left: $spacer * 2; + padding-right: $spacer * 2; + order: 2; } }