Skip to content

Commit

Permalink
doc: fix to show sponsors in narrow view (#4793)
Browse files Browse the repository at this point in the history
* doc: move sponsorship logos into footer
* doc: move sponsorship logos into bottom of content

Signed-off-by: Outsider <outsideris@gmail.com>
  • Loading branch information
outsideris authored Feb 7, 2022
1 parent cc51b8f commit 509938d
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 76 deletions.
46 changes: 13 additions & 33 deletions docs/_includes/default.liquid
Original file line number Diff line number Diff line change
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">
</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
Original file line number Diff line number Diff line change
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

0 comments on commit 509938d

Please sign in to comment.