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;
} }

48
views/home.handlebars
View file

@ -164,30 +164,32 @@
<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 first"> <div class="row-wrapper">
<div class="team-helpers-cards"> <div class="row first">
{{#each specialThanksPeople.first}} <div class="team-helpers-cards">
<a {{#if github}}href="{{ github }}" target="_blank"{{/if}} class="helper-card{{#if special}} special{{/if}}"> {{#each specialThanksPeople.first}}
<div class="img-wrapper"> <a {{#if github}}href="{{ github }}" target="_blank"{{/if}} class="helper-card{{#if special}} special{{/if}}">
<img src="{{ picture }}" class="pfp"> <div class="img-wrapper">
</div> <img src="{{ picture }}" class="pfp">
<span>{{ name }}</span> </div>
<p>{{ caption }}</p> <span>{{ name }}</span>
</a> <p>{{ caption }}</p>
{{/each}} </a>
{{/each}}
</div>
</div> </div>
</div> <div class="row second">
<div class="row second"> <div class="team-helpers-cards">
<div class="team-helpers-cards"> {{#each specialThanksPeople.second}}
{{#each specialThanksPeople.second}} <a {{#if github}}href="{{ github }}"{{/if}} class="helper-card{{#if special}} special{{/if}}">
<a {{#if github}}href="{{ github }}"{{/if}} class="helper-card{{#if special}} special{{/if}}"> <div class="img-wrapper">
<div class="img-wrapper"> <img src="{{ picture }}" class="pfp">
<img src="{{ picture }}" class="pfp"> </div>
</div> <span>{{ name }}</span>
<span>{{ name }}</span> <p>{{ caption }}</p>
<p>{{ caption }}</p> </a>
</a> {{/each}}
{{/each}} </div>
</div> </div>
</div> </div>
</div> </div>