ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-10 12:05:16 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixed height on 'show-more' button

Browse source
This commit is contained in:
Thomas Smith 2023-01-27 12:57:08 -05:00
parent d33711a618
commit adc31edd18
2 changed files with 89 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/layouts/index.html
View file

@ -944,6 +944,17 @@
</div> </div>
</section> </section>
<hr>
<div class="row button-container flex">
<a href="https://github.com/teaxyz/cli/graphs/contributors" class="ps-0 pe-0 btn-div" id="btn-div-top" >
<button class="sbtn sb-fill-top">VIEW ALL CONTRIBUTORS</button>
</a>
<a href="https://github.com/teaxyz/cli#contributing" class="ps-0 pe-0 btn-div" id="btn-div" >
<button class="sbtn sb-fill-top">LEARN HOW TO CONTRIBUTE</button>
</a>
</div>
<hr>
<script> <script>
$.getJSON("https://api.github.com/repos/teaxyz/cli/contributors", function(contributors) { $.getJSON("https://api.github.com/repos/teaxyz/cli/contributors", function(contributors) {

70
src/layouts/partials/package-grid.html
View file

@ -18,7 +18,7 @@
{{- partial "no-results-found.html" }} {{- partial "no-results-found.html" }}
</div> </div>
</div> </div>
<hr>
<div id="loadMoreSection" class="container small"> <div id="loadMoreSection" class="container small">
<div id="loadMorePackagesBtn"><i class="icon-enter-arrow"></i> SHOW MORE</div> <div id="loadMorePackagesBtn"><i class="icon-enter-arrow"></i> SHOW MORE</div>
</div> </div>
@ -33,9 +33,15 @@
display: grid; display: grid;
grid-template-columns: auto; grid-template-columns: auto;
} }
@media only screen and (min-width: 1200px) {
#loadMorePackagesBtn { #loadMorePackagesBtn {
display: flex;
align-items: center;
justify-content: flex-start;
cursor: pointer; cursor: pointer;
font-size: 2rem; font-size: 2rem;
height: 4.185vw !important;
font-family: "pp-neue-machina", sans-serif; font-family: "pp-neue-machina", sans-serif;
background-color: #1a1a1a; background-color: #1a1a1a;
color: #fff; color: #fff;
@ -44,14 +50,74 @@
text-transform: uppercase; text-transform: uppercase;
transition: 0.1s linear; transition: 0.1s linear;
} }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
#loadMorePackagesBtn {
display: flex;
align-items: center;
justify-content: flex-start;
cursor: pointer;
font-size: 2rem;
height: 5vw !important;
font-family: "pp-neue-machina", sans-serif;
background-color: #1a1a1a;
color: #fff;
padding-top: 0.279vw;
text-decoration: none;
text-transform: uppercase;
transition: 0.1s linear;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
#loadMorePackagesBtn {
display: flex;
align-items: center;
justify-content: flex-start;
cursor: pointer;
font-size: 2rem;
height: 5.141vw !important;
font-family: "pp-neue-machina", sans-serif;
background-color: #1a1a1a;
color: #fff;
padding-top: 0.279vw;
text-decoration: none;
text-transform: uppercase;
transition: 0.1s linear;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
#loadMorePackagesBtn {
display: flex;
align-items: center;
justify-content: flex-start;
cursor: pointer;
font-size: 2rem;
height: 6.771vw!important;
font-family: "pp-neue-machina", sans-serif;
background-color: #1a1a1a;
color: #fff;
padding-top: 0.279vw;
text-decoration: none;
text-transform: uppercase;
transition: 0.1s linear;
}
}
@media only screen and (max-width: 576px) {
}
#loadMorePackagesBtn .icon-enter-arrow { #loadMorePackagesBtn .icon-enter-arrow {
display: inline-block; display: inline-block;
position: relaitve; position: relaitve;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
margin-right:20px;
} }
#loadMorePackagesBtn:hover .icon-enter-arrow{ #loadMorePackagesBtn:hover .icon-enter-arrow{
display: inline-block; display: inline-block;
transform: rotate(-45deg) !important; transform: rotate(90deg) !important;
} }
#loadMoreSection.hidden { #loadMoreSection.hidden {
display: none; display: none;