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

Spacing css

Browse source
This commit is contained in:
Thomas Smith 2022-10-17 23:04:57 -04:00
parent 7fe3b4cd9a
commit ca44cd3aad
2 changed files with 88 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/layouts/partials/clipboard-modal.html
View file

@ -8,7 +8,7 @@
</div> </div>
<div class="col-lg-9 col-md-9 col-sm-12 col-12 modal-message"> <div class="col-lg-9 col-md-9 col-sm-12 col-12 modal-message">
<h4 class="modal-head"><i class="icon-tea-checkmark"></i><br id="mobile-break"> Copied to clipboard, enjoy!</h4> <h4 class="modal-head"><i class="icon-tea-checkmark"></i> <br id="mobile-break"> Copied to clipboard, enjoy!</h4>
<p class="lead">But wait... using tea without authenticating is like buying a video game without the DLC.</p> <p class="lead">But wait... using tea without authenticating is like buying a video game without the DLC.</p>
<p class="modal-text">By authenticating your GitHub, you'll be eligible for a variety of exciting rewards, including minted NFT certificates. Your authentication number is directly tied to the rarity of your certificate, so be sure to take a sip while it's hot!</p> <p class="modal-text">By authenticating your GitHub, you'll be eligible for a variety of exciting rewards, including minted NFT certificates. Your authentication number is directly tied to the rarity of your certificate, so be sure to take a sip while it's hot!</p>
<button class="detail-btn-large" id="modal-cta"><i class="icon-enter-arrow"></i>AUTHENTICATE WITH TEA</button> <button class="detail-btn-large" id="modal-cta"><i class="icon-enter-arrow"></i>AUTHENTICATE WITH TEA</button>

90
src/static/css/spacing.css
View file

@ -2,19 +2,97 @@
/* Height spacers */ /* Height spacers */
@media only screen and (min-width: 1200px) {
.three-boxes{
.three-boxes{
padding-top: 12.556vw; padding-top: 12.556vw;
padding-bottom: 12.556vw; padding-bottom: 12.556vw;
} }
.two-boxes{ .two-boxes{
padding-top: 8.371vw; padding-top: 8.371vw;
padding-bottom: 8.371vw; padding-bottom: 8.371vw;
} }
.one-box{ .one-box{
padding-top: 4.185vw; padding-top: 4.185vw;
padding-bottom: 4.185vw; padding-bottom: 4.185vw;
}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.three-boxes{
padding-top: 15vw;
padding-bottom: 15vw;
}
.two-boxes{
padding-top: 10vw;
padding-bottom: 10vw;
}
.one-box{
padding-top: 5vw;
padding-bottom: 5vw;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.three-boxes{
padding-top: 15.423vw;
padding-bottom: 15.423vw;
}
.two-boxes{
padding-top: 10.282vw;
padding-bottom: 10.282vw;
}
.one-box{
padding-top: 5.141vw;
padding-bottom: 5.141vw;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
.three-boxes{
padding-top: 20.313vw;
padding-bottom: 20.313vw;
}
.two-boxes{
padding-top: 13.542vw;
padding-bottom: 13.542vw;
}
.one-box{
padding-top: 6.771vw;
padding-bottom: 6.771vw;
}
}
@media only screen and (max-width: 576px) {
.three-boxes{
padding-top: 29.167vw;
padding-bottom: 29.167vw;
}
.two-boxes{
padding-top: 19.444vw;
padding-bottom: 19.444vw;
}
.one-box{
padding-top: 9.722vw;
padding-bottom: 9.722vw;
}
} }