Skip to content

Commit

Permalink
Improve sponsorship button
Browse files Browse the repository at this point in the history
  • Loading branch information
nyamsprod committed May 26, 2020
1 parent 3fa0860 commit 44b7240
Show file tree
Hide file tree
Showing 5 changed files with 89 additions and 75 deletions.
6 changes: 3 additions & 3 deletions docs/_layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<link rel="icon" type="image/x-icon" href="//theme.thephpleague.com/img/favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="//theme.thephpleague.com/img/apple-touch-icon-precomposed.png">
<link rel="stylesheet" href="//theme.thephpleague.com/css/all.css?2">
<link rel="stylesheet" href="/custom.css?19">
<link rel="stylesheet" href="/custom.css?20">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.data.project.google_analytics_tracking_id }}"></script>
<script>
Expand Down Expand Up @@ -109,14 +109,14 @@ <h2>{{ section[0] }}</h2>
</main>

<aside class="sponsors hide">
<p><a class="close" title="hide this message">&#10799;</a> Love this package ? <a href="https://github.com/sponsors/{{ site.data.project.author.github_account }}">&#9829; Support</a> its development!</p>
<p>Love this package ? <a href="https://github.com/sponsors/{{ site.data.project.author.github_account }}">Support its development!</a></p>
</aside>

<footer>
<span>&copy; Copyright <a href="//thephpleague.com">The League of Extraordinary Packages</a>.</span>
<span>Site design by <a href="//reinink.ca">Jonathan Reinink</a> and <a href="//nyamsprod.com">Ignace Nyamagana Butera</a>.</span>
</footer>
<script src="/custom.js?5"></script>
<script src="/custom.js?6"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script> docsearch({
apiKey: '0b444a337a024ecded8e2da9367775fa',
Expand Down
7 changes: 3 additions & 4 deletions docs/_layouts/homepage.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<link rel="icon" type="image/x-icon" href="//theme.thephpleague.com/img/favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="//theme.thephpleague.com/img/apple-touch-icon-precomposed.png">
<link rel="stylesheet" href="//theme.thephpleague.com/css/all.css?2">
<link rel="stylesheet" href="/homepage.css?14">
<link rel="stylesheet" href="/homepage.css?15">
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.data.project.google_analytics_tracking_id }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
Expand All @@ -36,7 +36,7 @@ <h2>{{ site.data.project.tagline }}</h2>
</header>

<aside class="sponsors hide">
<p><a class="close" title="hide this message">&#10799;</a> Love this package ? <a href="https://github.com/sponsors/{{ site.data.project.author.github_account }}">&#9829; Support</a> its development!</p>
<p>Love this package ? <a href="https://github.com/sponsors/{{ site.data.project.author.github_account }}">Support its development!</a></p>
</aside>

<main>
Expand Down Expand Up @@ -76,7 +76,6 @@ <h1>Questions?</h1>
<span>&copy; Copyright <a href="//thephpleague.com">The League of Extraordinary Packages</a>.</span>
<span>Site design by <a href="//reinink.ca">Jonathan Reinink</a> and <a href="//nyamsprod.com">Ignace Nyamagana Butera</a>.</span>
</footer>
<script src="/custom.js?5"></script>

<script src="/custom.js?6"></script>
</body>
</html>
81 changes: 43 additions & 38 deletions docs/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,44 @@ table th {
background: #1672ce;
}


.sponsors {
background: #f68fc8;
border-bottom:none;
color: #ffffff;
font:normal 1em/1.5 "Museo 300";
text-align:center;
margin:0 auto;
padding:0;
}

.sponsors p {
margin:0 auto;
padding:.5em .3em;
}

.sponsors a {
display:inline-block;
padding:.4em;
background: #ea0a86;
color: #fff;
border-radius: .3em;
text-decoration: none;
cursor: pointer;
}

.sponsors a.close {
background: transparent;
color:#ea0a86;
text-decoration: underline;
padding:.2em;
font-size: .8em;
}

.hide {
display:none;
}

@media screen and (max-width: 400px) {
header .title {
display: none;
Expand Down Expand Up @@ -343,42 +381,9 @@ table th {
}
}


.sponsors {
background: #f68fc8;
border-bottom:none;
color: #ffffff;
font:normal 1em/1.5 "Museo 300";
text-align:center;
margin:0 auto;
padding:0;
}

.sponsors p {
margin:0 auto;
padding:.5em .3em;
}

.sponsors a {
display:inline-block;
background: #ea0a86;
color: #fff;
border-radius: .3em;
text-decoration: none;
padding:.4em;
}

.sponsors a.close {
color:#ea0a86;
background: transparent;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:2em;
cursor: pointer;
padding:0;
margin-right:0;
}

.hide {
display:none;
@media screen and (max-width: 520px) {
.sponsors p {
width: 250px;
margin: .3em auto 0;
}
}
51 changes: 28 additions & 23 deletions docs/custom.js
Original file line number Diff line number Diff line change
@@ -1,37 +1,42 @@
(() => {

const uri = new URL(location.href);

let headers = document.querySelector('header nav h2');
if (headers) {
headers.addEventListener('click', function () {
headers.addEventListener('click', () => {
this.parentNode.querySelector('ul').classList.toggle('show');
}, false);
}

let contentHeaders = document.querySelectorAll("main h2[id]");
if (contentHeaders && !document.querySelector('html').classList.contains('homepage')) {
contentHeaders.forEach((header) => {
uri.hash = header.id;
let link = document.createElement("a");
link.className = "header-permalink";
link.title = "Permalink";
link.href = uri.toString();
link.innerHTML = "&#182;";
header.appendChild(link);
});
if (!document.querySelector('html').classList.contains('homepage') && contentHeaders) {
const uri = new URL(location.href);
contentHeaders.forEach((header) => {
uri.hash = header.id;
let link = document.createElement("a");
link.classList.add("header-permalink");
link.title = "Permalink";
link.href = uri.toString();
link.innerHTML = "&#182;";
header.appendChild(link);
});
}

const sponsorDiv = document.querySelector('.sponsors');
if (sponsorDiv) {
let hideSponsorUntil = localStorage.getItem('hideSponsorUntil');
if (hideSponsorUntil === null || hideSponsorUntil < (new Date().getTime())) {
sponsorDiv.classList.remove('hide');
}
const sponsorBanner = document.querySelector('.sponsors');
if (sponsorBanner) {
let hideUntil = localStorage.getItem('hideSponsorUntil');
if (hideUntil === null || hideUntil < (new Date().getTime())) {
localStorage.removeItem('hideSponsorUntil');
sponsorBanner.classList.remove('hide');
}

let closeButton = document.createElement('a');
closeButton.classList.add('close');
closeButton.innerHTML = 'close me';
closeButton.addEventListener('click', () => {
localStorage.setItem('hideSponsorUntil', new Date().getTime() + (7 * 86400 * 1e4));
sponsorBanner.classList.add('hide');
}, false);

sponsorDiv.querySelector('a.close').addEventListener('click', function () {
sponsorDiv.classList.add('hide');
localStorage.setItem('hideSponsorUntil', new Date().getTime() + (7 * 86400 * 1e4));
}, false);
sponsorBanner.firstElementChild.appendChild(closeButton);
}
})();
19 changes: 12 additions & 7 deletions docs/homepage.css
Original file line number Diff line number Diff line change
Expand Up @@ -265,17 +265,15 @@ main div > code {
border-radius: .3em;
text-decoration: none;
padding:.4em;
cursor: pointer;
}

.sponsors a.close {
color:#ea0a86;
background: transparent;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:2em;
cursor: pointer;
padding:0;
margin-right:0;
color:#ea0a86;
text-decoration: underline;
padding:.2em;
font-size: .8em;
}

.hide {
Expand Down Expand Up @@ -352,3 +350,10 @@ main div > code {
margin:1%;
}
}

@media screen and (max-width: 520px) {
.sponsors p {
width: 250px;
margin: .3em auto 0;
}
}

0 comments on commit 44b7240

Please sign in to comment.