Emulation/website-PretendoNetwork
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2025-04-02 11:11:50 -04:00
Code Issues Projects Releases Packages Wiki Activity

fix(styles): overflow-x: hidden not working correctly on some browsers on the special thanks section

Browse source 
Firefox: https://i.imgur.com/TpM0CEB.png
WebKit: https://i.imgur.com/290nYsb.png
This commit is contained in:
Ash Monty 2022-01-23 20:33:36 +01:00
parent fd70cf6a6c
commit 98bb586cab
No known key found for this signature in database
GPG key ID: 61F589C2778CE60D
2 changed files with 57 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
public/assets/css/main.css
View file

@ -520,7 +520,6 @@ section.team-helpers .row.second {
} }
section.team-helpers .animation-wrapper { section.team-helpers .animation-wrapper {
transform: rotate(-5deg); transform: rotate(-5deg);
overflow-x: hidden;
position:relative; position:relative;
top: -90px; top: -90px;
padding: 20px; /* Needed for the star not to get cut off */ padding: 20px; /* Needed for the star not to get cut off */
@ -536,6 +535,38 @@ section.team-helpers .animation-wrapper::after {
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
} }
/* This fixes overflow-x: hidden; not working correctly on Firefox (https://i.imgur.com/TpM0CEB.png)
* and WebKit (https://i.imgur.com/290nYsb.png) */
section.team-helpers .animation-wrapper .row-wrapper {
position: relative;
padding: 20px;
width: 100%;
height: 100%;
}
section.team-helpers .animation-wrapper .row-wrapper::before {
content: "";
position: absolute;
top: 0;
width: 100%;
left: calc(-100% - 20px);
height: 100%;
background: var(--background);
z-index: 2;
pointer-events: none;
}
section.team-helpers .animation-wrapper .row-wrapper::after {
content: "";
position: absolute;
top: 0;
width: 100%;
left: calc(100% - 20px);
height: 100%;
background: var(--background);
z-index: 2;
pointer-events: none;
}
section.team-helpers .animation-wrapper .row { section.team-helpers .animation-wrapper .row {
white-space: nowrap; white-space: nowrap;
} }

2
views/home.handlebars
View file

@ -164,6 +164,7 @@
<p class="text">{{ localeHelper locale "specialThanks" "text" }}</p> <p class="text">{{ localeHelper locale "specialThanks" "text" }}</p>
</div> </div>
<div class="animation-wrapper"> <div class="animation-wrapper">
<div class="row-wrapper">
<div class="row first"> <div class="row first">
<div class="team-helpers-cards"> <div class="team-helpers-cards">
{{#each specialThanksPeople.first}} {{#each specialThanksPeople.first}}
@ -191,6 +192,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
<section class="update-signup"> <section class="update-signup">