LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

First page of hook made responsive

Browse source
This commit is contained in:
ポール ウェッブ 2018-05-11 14:06:43 -05:00
parent fb368e423c
commit fa043f0c84
3 changed files with 51 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.vuepress/components/Hook.vue
View file

@ -86,6 +86,7 @@ export default {
@import "../scss/init/colors"; @import "../scss/init/colors";
@import "../scss/init/extends"; @import "../scss/init/extends";
@import "../scss/init/mixins"; @import "../scss/init/mixins";
@import "../scss/partials/animation";
@import "../scss/pages/page"; @import "../scss/pages/page";
@import "../scss/pages/hook"; @import "../scss/pages/hook";
</style> </style>

66
.vuepress/scss/pages/_hook.scss
View file

@ -11,10 +11,7 @@
} }
} }
@keyframes spin {
0% { transform: rotate(0deg); }
to { transform: rotate(1turn); }
}
.hook__navigation { .hook__navigation {
background-color: $black; background-color: $black;
@ -26,8 +23,36 @@
} }
.hook__navigation__step { .hook__navigation__step {
display: inline-block; @media (min-width: 501px) {
text-align: center; display: inline-block;
&:not(:last-of-type) {
margin-right: 1rem;
}
span {
width: 3rem; height: 3rem;
display: block;
font-size: 1.25rem;
line-height: 3rem;
}
}
@media (max-width: 500px) {
display: block;
span {
width: 1rem; height: 1rem;
display: inline-block;
font-size: 0.7rem;
line-height: 0.9rem;
position: relative;
top: 2px;
vertical-align: top;
}
}
&:not(.active) { &:not(.active) {
span { span {
@ -43,18 +68,9 @@
} }
} }
&:not(:last-of-type) {
margin-right: 1rem;
}
span { span {
width: 3rem; height: 3rem;
border: 1px solid; border: 1px solid;
border-radius: 50%; border-radius: 50%;
display: block;
font-size: 1.25rem;
line-height: 3rem;
margin: 0 auto 0.5rem; margin: 0 auto 0.5rem;
} }
} }
@ -78,10 +94,13 @@
background-color: $white; background-color: $white;
border: 1px solid rgba($gray, 0.7); border: 1px solid rgba($gray, 0.7);
font-size: 1rem; font-size: 1rem;
margin-right: auto;
margin-left: auto;
padding-left: 1rem; padding-left: 1rem;
width: 80%;
@media (min-width: 501px) {
margin-right: auto;
margin-left: auto;
width: 80%;
}
&::after { &::after {
@include clearfix; @include clearfix;
@ -151,6 +170,13 @@
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
float: left; @media (min-width: 501px) {
width: 50%; float: left;
vertical-align: top;
width: 50%;
}
@media (max-width: 500px) {
width: 100%;
}
} }

4
.vuepress/scss/partials/_animation.scss Normal file
View file

@ -0,0 +1,4 @@
@keyframes spin {
0% { transform: rotate(0deg); }
to { transform: rotate(1turn); }
}