Add index sponsor

This commit is contained in:
Jeremy Thomas
2018-04-10 12:04:10 +01:00
parent 79888359d2
commit b61f9d15dc
7 changed files with 130 additions and 96 deletions

View File

@@ -1,44 +1,51 @@
<div class="intro-partners">
<div class="intro-sponsor">
<div class="bd-sponsor">
<p class="bd-sponsor-title">Sponsors</p>
<div class="bd-sponsor-list">
<a href="https://themeisle.com/" target="_blank" rel="nofollow">
<img src="{{ site.url }}/images/sponsors/themeisle.png" alt="themeisle logo">
</a>
<a href="https://chainaxe.io/" target="_blank" rel="nofollow">
{%
include elements/responsive-image.html
path="sponsors/chainaxe"
extension="png"
alt="chainaxe logo"
width="99"
height="70"
%}
</a>
<a href="https://www.keycdn.com/" target="_blank" rel="nofollow">
{%
include elements/responsive-image.html
path="sponsors/keycdn"
extension="png"
alt="keycdn logo"
width="200"
height="58"
%}
</a>
<a href="http://tooltwist.com/" target="_blank" rel="nofollow">
{%
include elements/responsive-image.html
path="sponsors/tooltwist"
extension="png"
alt="tooltwist logo"
width="200"
height="64"
%}
</a>
<div class="section bd-partners">
<div class="container">
<div class="bd-partners-list">
<div class="bd-partner bd-is-sponsor">
<p class="bd-partner-title">Sponsors</p>
<div class="bd-partner-sponsors">
<a href="https://themeisle.com/" target="_blank" rel="nofollow">
<img src="{{ site.url }}/images/sponsors/themeisle.png" alt="themeisle logo" width="160" height="40">
</a>
<a href="https://chainaxe.io/" target="_blank" rel="nofollow">
{%
include elements/responsive-image.html
path="sponsors/chainaxe"
extension="png"
alt="chainaxe logo"
width="85"
height="60"
%}
</a>
<a href="https://www.keycdn.com/" target="_blank" rel="nofollow">
{%
include elements/responsive-image.html
path="sponsors/keycdn"
extension="png"
alt="keycdn logo"
width="150"
height="43.5"
%}
</a>
<a href="http://tooltwist.com/" target="_blank" rel="nofollow">
{%
include elements/responsive-image.html
path="sponsors/tooltwist"
extension="png"
alt="tooltwist logo"
width="160"
height="51"
%}
</a>
</div>
</div>
<div class="bd-partner bd-is-carbon">
<p class="bd-partner-title">Ads via Carbon</p>
<div class="bd-partner-carbon">
{% include elements/carbon.html %}
</div>
</div>
</div>
</div>
<div class="intro-carbon">
{% include elements/carbon.html %}
</div>
</div>

View File

@@ -4,7 +4,6 @@ svg
$carbon-spacing: 1rem
$carbon-shadow-size: 0.75rem
$carbon-height: 100px
$carbon-image-height: 100px
$carbon-image-width: 130px
$carbon-poweredby-height: 20px

View File

@@ -1,6 +1,6 @@
.bd-focus
margin: 6rem auto 0
max-width: 1080px
max-width: $intro-width
.bd-focus-item
.subtitle
@@ -174,12 +174,6 @@
&:hover
opacity: 1
.intro-partners
margin-top: 6rem
.intro-carbon
margin-top: 0.5rem
+mobile
.intro-buttons
.button

View File

@@ -8,28 +8,44 @@
margin-right: 3rem
width: 150px
.bd-sponsor
margin-left: auto
margin-right: auto
text-align: center
.bd-sponsor-title
font-size: $size-small
margin-bottom: 1em
opacity: 0.5
.bd-sponsor-list
.bd-partner-sponsors
align-items: center
display: flex
flex-wrap: wrap
justify-content: center
justify-content: space-between
margin-bottom: -1rem
a
align-items: center
display: flex
justify-content: center
margin: 1rem
width: 160px
img
max-height: 60px
width: auto
margin: 0 1rem 1rem 0
min-height: $carbon-height
.bd-partners
background-color: $white-bis
.container
max-width: $intro-width
#carbonads
.carbon-text
padding-bottom: 0
.carbon-poweredby
display: none
.bd-partner-title
color: $grey-light
font-size: 0.875rem
margin-bottom: 1rem
+tablet
.bd-partners-list
align-items: flex-start
display: flex
.bd-partner
&.bd-is-sponsor
flex-grow: 1
flex-shrink: 1
&.bd-is-carbon
flex-grow: 0
flex-shrink: 0
margin-left: ($main-spacing * 2)
width: $carbon-width

View File

@@ -13,7 +13,9 @@ $star: #FFD257
$rss: #f26522
$carbon-width: 300px
$carbon-height: 100px
$main-spacing: 3rem
$intro-width: 1130px
=selection($current-selector: false)
@if $current-selector

View File

@@ -10091,7 +10091,7 @@ svg {
.bd-focus {
margin: 6rem auto 0;
max-width: 1080px;
max-width: 1130px;
}
.bd-focus-item .subtitle {
@@ -10324,14 +10324,6 @@ svg {
opacity: 1;
}
.intro-partners {
margin-top: 6rem;
}
.intro-carbon {
margin-top: 0.5rem;
}
@media screen and (max-width: 768px) {
.intro-buttons .button {
display: flex;
@@ -12164,36 +12156,59 @@ html.route-index .hero.is-primary a.column:hover .title strong {
width: 150px;
}
.bd-sponsor {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.bd-sponsor-title {
font-size: 0.75rem;
margin-bottom: 1em;
opacity: 0.5;
}
.bd-sponsor-list {
.bd-partner-sponsors {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
justify-content: space-between;
margin-bottom: -1rem;
}
.bd-sponsor-list a {
.bd-partner-sponsors a {
align-items: center;
display: flex;
justify-content: center;
margin: 1rem;
width: 160px;
margin: 0 1rem 1rem 0;
min-height: 100px;
}
.bd-sponsor-list a img {
max-height: 60px;
width: auto;
.bd-partners {
background-color: #fafafa;
}
.bd-partners .container {
max-width: 1130px;
}
.bd-partners #carbonads .carbon-text {
padding-bottom: 0;
}
.bd-partners #carbonads .carbon-poweredby {
display: none;
}
.bd-partner-title {
color: #b5b5b5;
font-size: 0.875rem;
margin-bottom: 1rem;
}
@media screen and (min-width: 769px), print {
.bd-partners-list {
align-items: flex-start;
display: flex;
}
.bd-partner.bd-is-sponsor {
flex-grow: 1;
flex-shrink: 1;
}
.bd-partner.bd-is-carbon {
flex-grow: 0;
flex-shrink: 0;
margin-left: 6rem;
width: 300px;
}
}
@keyframes fadeIn {

View File

@@ -6,8 +6,9 @@ fixed_navbar: true
{% include global/navbar.html id="Index" %}
{% include index/intro.html %}
{% include index/tws.html %}
{% include index/sponsor.html %}
{% include index/columns.html %}
{% include index/tws.html %}
<!-- {% include index/tiles.html %} -->
{% include index/level.html %}
{% include index/media-object.html %}