LBRYFoundation/lbry.com
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry.com.git synced 2025-08-31 09:21:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix responsive issues for splash pages

Browse source
This commit is contained in:
ポール ウェッブ 2019-02-04 12:39:23 -06:00
parent 912dbdc1ec
commit 9a63d7c7cf
1 changed files with 54 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
web/scss/_soon.scss
View file

@ -7,12 +7,20 @@
font-size: 1rem;
font-weight: 300;
justify-content: center;
padding-top: 2rem;
padding-bottom: 2rem;
padding: 2rem;
text-align: center;
h1 {
font-weight: normal;
line-height: 1.33;
@media (min-width: 501px) {
font-size: 2rem;
}
@media (max-width: 500px) {
font-size: 1.5rem;
}
}
p {
@ -20,6 +28,12 @@
margin-bottom: 1rem;
}
section {
@media (max-width: 500px) {
width: 100%;
}
}
strong {
font-weight: bold;
}
@ -30,6 +44,10 @@
justify-content: center;
margin: 0;
@media (max-width: 500px) {
flex-direction: column;
}
button,
input {
height: 2.5rem;
@ -39,24 +57,49 @@
margin: 0;
outline: none;
@media (max-width: 500px) {
width: 100%;
}
&:not([type="button"]):not([type="submit"]) {
flex: 1;
padding-right: 1rem;
padding-left: 1rem;
transition: border 0.2s;
@media (min-width: 501px) {
flex: 1;
}
&:not(:focus) {
border-top-color: black;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
@media (min-width: 501px) {
border-top-color: black;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
}
@media (max-width: 500px) {
border-top-color: black;
border-right-color: black;
border-bottom-color: transparent;
border-left-color: black;
}
}
&:focus {
border-top-color: #2f9176;
border-right-color: transparent;
border-bottom-color: #2f9176;
border-left-color: #2f9176;
@media (min-width: 501px) {
border-top-color: #2f9176;
border-right-color: transparent;
border-bottom-color: #2f9176;
border-left-color: #2f9176;
}
@media (max-width: 500px) {
border-top-color: #2f9176;
border-right-color: #2f9176;
border-bottom-color: transparent;
border-left-color: #2f9176;
}
}
}