Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Oceans: latest responsive work #32120

Merged
merged 1 commit into from
Nov 25, 2019
Merged

Oceans: latest responsive work #32120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 6 additions & 2 deletions apps/src/fish/FishView.jsx
View file
Open in desktop
Expand Up @@ -21,8 +21,12 @@ const styles = {
margin: '0 auto',
userSelect: 'none',
fontFamily: '"Gotham 4r", arial, sans-serif',
fontSize: '18px',
color: 'rgb(30,30,30)'
color: 'rgb(30,30,30)',
lineHeight: 1.3
// Note that fontSize has been removed from here and is set using CSS
// (in fish/style.scss) instead. That way, CSS-based media queries in the
// same file can successfully override the font-size throughout the
// inheritance chain.
},
backgroundCanvas: {
position: 'absolute',
Expand Down
77 changes: 19 additions & 58 deletions apps/style/fish/style.scss
View file
Open in desktop
Expand Up @@ -8,69 +8,30 @@ button {
border-radius: 5px;
border: none;
width: 17%;
padding: 16px 30px;
}
button:focus {
outline: white auto 5px;
}
@media screen and (max-width: 970px) {
.words-button {
font-size: 70%;
padding: 10px 20px;
}
}
@media screen and (max-width: 830px) {
.words-button {
font-size: 60%;
}
}
padding: 1.5% 3%;

@media screen and (max-height: 1350px) {
#container {
max-width: 2050px;
}
}
@media screen and (max-height: 1260px) {
#container {
max-width: 1890px;
}
}
@media screen and (max-height: 1170px) {
#container {
max-width: 1730px;
&:focus {
outline: white auto 5px;
}
}
@media screen and (max-height: 1080px) {
#container {
max-width: 1570px;
}
}
@media screen and (max-height: 990px) {
#container {
max-width: 1410px;
}

#container-react {
font-size: 18px;
}
@media screen and (max-height: 900px) {
#container {
max-width: 1250px;
}

@media screen {
#container { max-width: 770px; }
#container-react { font-size: calc(18px * 770 / 930); }
}
@media screen and (max-height: 810px) {
#container {
max-width: 1090px;
}
@media screen and (min-width: 1024px) and (min-height: 576px) {
#container { max-width: 930px; }
#container-react { font-size: calc(18px * 930 / 930); }
}
@media screen and (max-height: 720px) {
#container {
max-width: 930px;
}
@media screen and (min-width: 1280px) and (min-height: 720px) {
#container { max-width: 1024px; }
#container-react { font-size: calc(18px * 1024 / 930); }
}
@media screen and (max-height: 630px) {
#container {
max-width: 770px;
}
.words-button {
font-size: 70%;
padding: 10px 20px;
}
@media screen and (min-width: 1440px) and (min-height: 810px) {
#container { max-width: 1280px; }
#container-react { font-size: calc(18px * 1280 / 930); }
}