Skip to content

Commit

Permalink
feat: improve RWD
Browse files Browse the repository at this point in the history
  • Loading branch information
trustedtomato committed Feb 7, 2022
1 parent 148cdae commit 242c8f0
Show file tree
Hide file tree
Showing 7 changed files with 176 additions and 59 deletions.
165 changes: 135 additions & 30 deletions examples/project-website/public/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,53 +16,45 @@ a {
}

.sidenote__sup {
user-select: none;
vertical-align: super;
font-size: .6em;
line-height: 0;
border: 0;
padding: 0;
font-family: inherit;
}

.sidenote {
float: right;
clear: both;
margin-right: -27rem;
margin-top: 0.7rem;
margin-top: 0.6rem;
width: 24rem;
line-height: 2rem;
font-size: 1.4rem;
margin-bottom: 2.5rem;
}

.full-text {
width: 84rem;
max-width: 84rem;
}

.body-text {
width: 57rem;
max-width: 57rem;
}

/* general rules for the alignment to the baseline grid */
h1 {
line-height: 9rem;
padding-top: .4rem;
padding-bottom: .1rem;
.hidden {
display: none !important;
}

/* general rules for the alignment to the baseline grid */
h2 {
padding-top: .6rem;
padding-bottom: 3.4rem;
padding-top: 0.7rem;
padding-bottom: calc(2.3rem - 1px);
line-height: 4rem;
font-size: 3.4rem;
position: relative;
}

h2::after {
content: '';
display: block;
position: absolute;
width: 100%;
bottom: 1rem;
background-color: #B6C4C7;
height: 1px;
border-bottom: #B6C4C7 solid 1px;
}

h3 {
Expand Down Expand Up @@ -91,6 +83,17 @@ p {
padding-bottom: .2rem;
}

ul {
margin: 0;
padding-top: .8rem;
padding-bottom: .2rem;
}

/* We already configured the parent list according to the baseline grid. */
li > ul {
padding: 0;
}

.arrow {
height: 12.2rem;
padding-bottom: .8rem;
Expand All @@ -104,11 +107,16 @@ p {
/* welcome screen, introduction */
header h1 {
margin-top: 23rem;
font-size: 9rem;
display: flex;
justify-content: center;
text-align: center;
margin-bottom: 0;
}

header svg {
height: 9rem;
}

header p {
margin: 0;
text-align: center;
Expand All @@ -126,17 +134,33 @@ section {
margin: auto;
display: block;
margin-top: 17rem;
margin-bottom: 11rem;
margin-bottom: 10rem;
}

/* documentation */
.docs {
.footer {
padding-top: calc(1.6rem - 1px);
padding-bottom: 1.3rem;
margin: auto;
width: 114rem;
max-width: 116rem;
border-top: 1px solid #B6C4C7;
}

.footer__content, .docs {
margin: auto;
max-width: 114rem;
}

.docs {
margin-bottom: 3rem;
display: flex;
flex-direction: row-reverse;
}

.docs__content {
width: 84rem;
}

.docs__table-of-contents {
position: sticky;
top: 0rem;
Expand All @@ -146,7 +170,6 @@ section {
}

.docs__table-of-contents ul {
margin: 0;
font-size: 1.4rem;
padding-left: 2rem;
line-height: 2rem;
Expand Down Expand Up @@ -185,18 +208,18 @@ h4 a:focus {
}

h2 {
margin-top: 3rem;
margin-top: 4rem;
margin-bottom: 1rem;
}

h3 {
margin-top: 3rem;
margin-bottom: 2rem;
margin-bottom: 1rem;
}

h4 {
margin-top: 3rem;
margin-bottom: 2rem;
margin-bottom: 1rem;
}

code {
Expand All @@ -219,8 +242,9 @@ code {
background: #f1f4f5;
font-size: 1.4rem;
box-sizing: border-box;
max-width: 100%;

white-space: pre;
white-space: pre-wrap;
word-spacing: normal;
word-break: normal;
word-wrap: break-word;
Expand All @@ -238,6 +262,7 @@ pre {
}

pre code {
white-space: pre;
display: block;
line-height: 2rem;
padding: 1.5rem 1.5rem;
Expand Down Expand Up @@ -323,4 +348,84 @@ pre code {

.token.entity {
cursor: help;
}

@media screen and (max-width: 1200px) {
html {
font-size: 8.8888px; /* This will make the body font 16px. */
}
}

@media screen and (max-width: 1080px) {
.footer {
max-width: 84rem;
}
.docs {
flex-direction: column;
align-items: center;
width: auto;
}
.docs__table-of-contents {
position: relative;
width: 100%;
margin: 0;
height: auto;
}
}

@media screen and (max-width: 810px) {
.docs {
width: 100%;
}

.full-text, .docs {
max-width: 54rem;
}

.docs__content {
width: auto;
}

.sidenote {
float: left;
width: 100%;
margin: .6rem 0 .4rem 0;
display: none;
}

.sidenote__sup--button {
position: relative;
cursor: pointer;
}

.sidenote__sup--button::after {
content: '';
border: 1px solid #5E514655;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 3rem;
height: 3rem;
border-radius: 50%;
}

.sidenote__show:checked ~ .sidenote {
display: block;
}

pre {
width: auto;
}
}

@media screen and (max-width: 520px) {
body {
margin: 0 2rem;
position: relative;
}

.full-text, .docs {
max-width: 100%;
}
}
2 changes: 1 addition & 1 deletion examples/project-website/src/components/DechargeBanner.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export default () => <svg width="421" height="85" viewBox="0 0 421 85" role="img">
export default () => <svg viewBox="0 0 421 85" role="img">
<title>Banner of decharge</title>
<path d="M40.088 60.0234H43.6915C44.6876 60.0234 45.3907 60.2578 45.8008 60.7266C46.2403 61.166 46.46 61.9277 46.46 63.0117C46.46 64.0957 46.2403 64.8721 45.8008 65.3408C45.3907 65.7803 44.6876 66 43.6915 66H36.7042C35.7081 66 34.9903 65.7803 34.5508 65.3408C34.1407 64.8721 33.9356 64.0957 33.9356 63.0117V59.4961C32.0899 61.8984 29.9512 63.7441 27.5196 65.0332C25.088 66.3223 22.4366 66.9668 19.5655 66.9668C15.9327 66.9668 12.6807 66.1172 9.80963 64.418C6.93854 62.6894 4.68268 60.2285 3.04206 57.0351C1.80328 54.6018 1.03218 51.868 0.72876 48.8H7.72366C7.94918 50.4683 8.36618 51.9863 8.97467 53.3877C9.97077 55.6142 11.4063 57.3574 13.2813 58.6172C15.1563 59.8476 17.3975 60.4629 20.0049 60.4629C22.6124 60.4629 24.9268 59.8769 26.9483 58.7051C28.9991 57.5332 30.5958 55.834 31.7383 53.6074C32.4924 52.1747 33.0038 50.5723 33.2727 48.8H40.088V60.0234Z" fill="black" />
<path d="M389.981 57.2549C392.383 59.4814 395.767 60.5947 400.132 60.5947C402.827 60.5947 405.493 60.2578 408.13 59.584C410.767 58.8808 413.081 57.958 415.073 56.8154C415.571 56.5517 416.025 56.4199 416.436 56.4199C417.461 56.4199 418.296 57.1963 418.94 58.749C419.204 59.3642 419.336 59.9209 419.336 60.4189C419.336 61.5908 418.691 62.499 417.402 63.1435C415.147 64.2861 412.481 65.209 409.404 65.9121C406.328 66.6152 403.237 66.9668 400.132 66.9668C395.708 66.9668 391.929 66.1172 388.794 64.418C385.659 62.7187 383.272 60.2724 381.631 57.0791C380.39 54.6631 379.618 51.9034 379.316 48.8H386.228C386.632 52.4424 387.883 55.2607 389.981 57.2549Z" fill="black" />
Expand Down
9 changes: 4 additions & 5 deletions examples/project-website/src/components/Sidenote.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,17 @@ import type { ComponentChildren, JSX } from 'preact'

interface Props {
index: number
id: string
children: ComponentChildren
}

export default ({ index, children, id }: Props): JSX.Element => <>{
export default ({ index, children }: Props): JSX.Element => <>{
!children
? null
: <>
<span class="sidenote" id={id}>
<label class="sidenote__sup">{index}</label>
<small class="sidenote">
<span class="sidenote__sup">{index}</span>
{ ' ' }
{ children }
</span>
</small>
</>
}</>
2 changes: 1 addition & 1 deletion examples/project-website/src/components/SidenoteFull.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ interface Props {
}

export default ({ index, children, id }: Props): JSX.Element => <>
<SidenoteRef targetIndex={index} targetId={id} /><Sidenote index={index} id={id}>
<SidenoteRef targetIndex={index} targetId={id} /><Sidenote index={index}>
{children}
</Sidenote>
</>
13 changes: 11 additions & 2 deletions examples/project-website/src/components/SidenoteRef.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,16 @@ interface Props {
}

export default ({ targetIndex, targetId }: Props) => <>
<label class="sidenote__sup" for={targetId}>
{ targetIndex }
<label class="sidenote__sup sidenote__sup--button" for={targetId}>
{ targetIndex }
</label>
<input
id={targetId}
type="checkbox"
class="sidenote__show hidden"
// Disable keyboard focus
// and screenreader accessing the input.
aria-hidden="true"
tabIndex={-1}
/>
</>
11 changes: 11 additions & 0 deletions examples/project-website/src/documentation.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
## Getting started
### Prerequisites
- [Node.js](https://nodejs.org/en/) and npm
- [pnpm](https://pnpm.io/)

### Creating a project
Make a new directory, `cd` into it, then run:
```bash
pnpm init decharge
```

## Usage
By default, your static files live in `public/`
and everything else in `src/`. Your routes should
Expand Down
Loading

0 comments on commit 242c8f0

Please sign in to comment.