Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

doc: fix to show sponsors in narrow view #4793

Merged
merged 2 commits into from Feb 7, 2022
Merged

doc: fix to show sponsors in narrow view #4793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
47ce564
doc: move sponsorship logos into footer
outsideris Nov 30, 2021
bddc02e
doc: move sponsorship logos into bottom of content
outsideris Feb 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
46 changes: 13 additions & 33 deletions docs/_includes/default.liquid
View file
Open in desktop
Expand Up @@ -25,38 +25,14 @@

<main id="content">{{ content }}</main>

<aside class="sponsorship">
<a
href="https://matomo.org/"
rel="external noopener"
title="Mocha is sponsored by Matomo"
>
<img src="images/matomo-logo.png?trim" loading="lazy" alt="Matomo logo" />
<div class="sponsorship">
<a href="https://matomo.org/" rel="external noopener" title="Mocha is sponsored by Matomo">
<img src="images/matomo-logo.png?trim" loading="lazy" width="100" alt="Matomo logo">
</a>
<a
title="Mocha is an OpenJS Foundation Project"
href="https://openjsf.org"
rel="external noopener"
>
<img
src="/images/openjsf-logo.svg"
loading="lazy"
width="300"
height="94"
alt="OpenJS Foundation Logo"
/>
<a href="https://wallabyjs.com" rel="external noopener" title="Mocha is sponsored by Wallaby" id="wallaby-logo">
<img src="https://wallabyjs.com/assets/img/logoWithText.svg" loading="lazy" width="140" alt="Wallaby logo">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some logos are loaded out of the images folder, some by external links.
What's the difference? Performance?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there is no reason.
Whether we manage all assets on our side or not is only difference. Performance won't make much difference on mocha site.

</a>
<a
href="https://wallabyjs.com"
rel="external noopener"
title="Mocha is sponsored by Wallaby"
>
<figure id="wallaby-logo">
<img src="images/wallaby-logo.png" loading="lazy" alt="Wallaby logo" />
<figcaption>Wallaby</figcaption>
</figure>
</a>
</aside>
</div>

<footer>
<div id="copyright-notice">
Expand Down Expand Up @@ -100,6 +76,12 @@
</p>
</div>

<div class="openjsf-logo">
<a title="Mocha is an OpenJS Foundation Project" href="https://openjsf.org" rel="external noopener" >
<img src="/images/openjsf-logo.svg" loading="lazy" width="120" alt="OpenJS Foundation Logo">
</a>
</div>

<div id="external-links">
<ul id="openjsf-links">
<li>
Expand Down Expand Up @@ -148,9 +130,7 @@
</ul>
<div class="netlify-badge">
<a href="https://www.netlify.com">
<img
src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" loading="lazy"
/>
<img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" loading="lazy">
</a>
</div>
</div>
Expand Down
61 changes: 18 additions & 43 deletions docs/css/style.css
View file
Open in desktop
Expand Up @@ -45,7 +45,7 @@ header {
}

#content {
padding-bottom: 60px;
padding-bottom: 30px;
}

#_header h1 {
Expand Down Expand Up @@ -242,31 +242,6 @@ img.screenshot {
max-width: 100%;
}

.sponsorship a {
display: flex;
justify-content: center;
align-items: center;
}

.sponsorship a img {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
}

.sponsorship {
display: flex;
justify-content: center;
margin-bottom: 60px;
align-items: center;
}

.sponsorship a {
padding: 0 40px;
text-decoration: none;
}

footer {
background-color: #eee;
border-top: 1px solid #ddd;
Expand Down Expand Up @@ -309,12 +284,29 @@ footer {
content: ' | ';
}

.openjsf-logo {
margin-bottom: 10px;
}

#external-links .netlify-badge {
position: absolute;
right: 0;
bottom: 0;
}

.sponsorship {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
}

.sponsorship a {
display: inline-block;
margin-right: 15px;
margin-left: 15px;
}

.dl-inline dt,
.dl-inline dd {
display: inline;
Expand All @@ -335,23 +327,6 @@ blockquote {
padding: 10px;
}

figure#wallaby-logo {
vertical-align: top;
display: inline-block;
text-align: center;
}
figure#wallaby-logo figcaption {
margin-top: 10px;
display: block;
font-family: 'Open Sans', -apple-system, system-ui, 'Segoe UI', Oxygen, Ubuntu,
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
color: #2c2c2c;
-webkit-font-smoothing: antialiased;
}

table {
width: 100%;
}
Expand Down