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 {
transform: rotate(-5deg);
overflow-x: hidden;
position:relative;
top: -90px;
padding: 20px; /* Needed for the star not to get cut off */
@ -536,6 +535,38 @@ section.team-helpers .animation-wrapper::after {
z-index: 1;
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 {
white-space: nowrap;
}

48
views/home.handlebars
View file

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