Skip to content

Commit

Permalink
[Feat] Add sponsors' logo in index page
Browse files Browse the repository at this point in the history 
* include _inlcudes/sponsors.html in index.html
* Add new sponsors.html
* Update popup card border, close icon style, link-to-website btn style
* Add grid style to sponsors logos
  • Loading branch information
@josix
josix committed Jul 19, 2020
1 parent 7b9f2cd commit 0344fe5
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 114 deletions.
4 changes: 2 additions & 2 deletions src/static/pycontw-2020/styles/_button.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@mixin button($angle, $color1, $color2) {
@mixin button($angle, $color1, $color2, $base-color:$white, $hover-color:$white) {
@include gradient-hover($angle, $color1, $color2);
@include link($white, $white);
@include link($base-color, $hover-color);
@include no-underline;
font-weight: 500;
margin: auto;
Expand Down
145 changes: 46 additions & 99 deletions src/static/pycontw-2020/styles/_index-partners.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,113 +2,60 @@

.index-partners {
@include index-section();
@include circle-background-section();

> .container {
@include container(904px);
padding-bottom: 8px;
}

h3 {
text-transform: capitalize;
}

.partners {
$item-spacing: 32px;

display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 32px 0;
padding: 0;
border-bottom: 2px solid $white;
list-style: none inside;

&::after {
content: '';
width: 100%;
height: 48px;
border-bottom: 1px solid #dad0ea;
}

@include on-desktop() {
margin: 32px #{0 - $item-spacing};
}

> li {
flex: 1;
text-align: center;
margin: $item-spacing / 2;

@include on-desktop() {
flex: 0 1 calc(33.3333% - #{$item-spacing});
> .grid-layout {
display: grid;
grid-template-columns: repeat(3, 220px);
@media (max-width: 760px) {
grid-template-columns: repeat(1, 220px);
}

> a {
img, > span {
position: relative;
z-index: $background-deco-index + 1;
min-width: 120px;
max-width: 320px;
height: 64px;
line-height: 64px;
vertical-align: middle;
font-size: 175%;

@include on-desktop() {
max-width: 100%;

column-gap: 40px;
row-gap: 40px;
margin: 40px;
> .partner-container {
background-color: white;
border: 1px solid white;
display: flex;
height: 200px;
flex-direction: column;
padding: 10px;
> span.platinum {
color: black;
}
> span.gold {
color: $imperial;
}
> span.silver {
color: #262727;
}
> span.bronze {
color: #502526;
}
> span.special {
color: #502526;
}
> a {
img, > span {
margin: 40px 0px;
position: relative;
z-index: $background-deco-index + 1;
min-width: 120px;
max-width: 200px;
height: 64px;
line-height: 64px;
vertical-align: middle;
font-size: 175%;

@include on-desktop() {
max-width: 100%;
}
}
}
}
}
}

&::before {
@include grass-python-logo('../assets/grass-blue.svg', 200px);
position: absolute;
top: 0;
right: 0;
transform: rotate(-135deg);
}

}

.sponsorship {
@include bgimg-hover-button($elf-green, url('../assets/button-hover-bg.svg'));
font-size: 1.75rem;
}

.sponsor-form-block {
position: relative;
padding: 0px 0px 50px 0px;
.sponsor-container{
@include index-section;
@include container(960px);
background: #e7f5ef;
border-radius: 12px;
padding-top: 40px;
padding-bottom: 50px;
}
&::after {
@include grass-python-logo('../assets/grass-blue.svg', 200px);
position: absolute;
bottom: 0;
left: 0;
transform: rotate(45deg);
z-index: -10;
}
}


@media (max-width: 760px) {
.index-partners {
&::before{
display: none;
}
}
.sponsor-form-block {
&::after {
display: none;
}
}
}
36 changes: 23 additions & 13 deletions src/static/pycontw-2020/styles/_popup.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@
position: fixed;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 0 14px 0 rgba(39, 39, 39, 1);
border: solid 1px $imperial;

@include on-desktop() {
@include card(48px);
Expand All @@ -37,27 +38,28 @@
position: absolute;
top: 16px;
right: 16px;
width: 24px;
height: 24px;
width: 30px;
height: 30px;
max-width: 10vmin;
max-height: 10vmin;
margin: 0;
padding: 0;
padding: 5px;
border: none;
background: none;
background: $imperial;
border-radius: 50%;

&:hover {
cursor: pointer;

> span {
border-color: #a8a8a8;
border-color: #535353;
}
}

> span {
display: block;
width: 100%;
border: 1px solid #cacaca;
border: 1px solid #fdfbfb;
transform-origin: center;

&:first-child {
Expand All @@ -71,16 +73,18 @@
}

@mixin link-to-website($button-color) {
@include button(0,$button-color, $button-color);
@include button(0, $button-color, $button-color, $white, $imperial);
@include on-desktop{
max-width: 225px;
}
border-radius: 10px;
padding: 12px;
border-radius: 30px;
padding: 12px 45px;
margin: 0px;
font-weight: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
margin-left: auto;
}

.popup .card-content {
Expand Down Expand Up @@ -109,9 +113,14 @@
.name {
@include header(1.5rem);
@include header-geometry(0, 16px);
color: $imperial;
}
.name, .description .description * {
text-align: left;
text-align: center;
}
.horizontal-rule {
border: 1px solid $imperial;
width: 15%;
}

@include on-desktop() {
Expand Down Expand Up @@ -154,10 +163,11 @@
}

.link-to-website {
@include link-to-website($elf-green);
@include link-to-website($imperial);

&:hover{
@include link-to-website($portica);
@include link-to-website(transparent);
border: 1px solid $imperial;
}
}
}
Expand Down
66 changes: 66 additions & 0 deletions src/templates/pycontw-2020/_includes/sponsors.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
{% load i18n %}

<section class="index-partners" data-controller="mediaPopup">

<article class="container">

{% for name, section in sponsor_sections %}
<div class="grid-layout">
{% for sponsor in section %}
<div class="partner-container">
<span class={{sponsor.level_en_name}}>{{ name }}</span>
<a href="{{ sponsor.website_url|default:'#' }}" target="_blank" rel="noopener"
data-target="mediaPopup.presenter" data-action="mediaPopup#open">
{% if sponsor.logo %}
<img src="{{ sponsor.logo.url }}" alt="{{ sponsor.name }}">
{% else %}
<span>{{ sponsor.name }}</span>
{% endif %}
</a>
<div class="popup" data-target="mediaPopup.popup">
<div class="click-to-close" style="height:100%;width:100%" data-action="click->mediaPopup#close"></div>
<div class="card">
<button class="popup-close" data-action="mediaPopup#close">
<span></span>
<span></span>
</button>
<div class="card-content">
{% if sponsor.website_url %}
<a href="{{ sponsor.website_url }}" target="_blank" rel="noopener" class="logo">
{% if sponsor.logo %}
<img src="{{ sponsor.logo.url }}" alt="{{ sponsor.name }}">
{% else %}
<span>{{ sponsor.name }}</span>
{% endif %}
</a>
{% elif sponsor.logo %}
<span class="logo">
<img src="{{ sponsor.logo.url }}" alt="{{ sponsor.name }}">
</span>
{% endif %}
<div class="text">
<article>
<h4 class="name">
<span>{{ sponsor.name }}</span>
</h4>
<hr class="horizontal-rule"/>
<section class="description">{{ sponsor.intro|linebreaks }}</section>
{% if sponsor.website_url %}
<a class="link-to-website" href="{{ sponsor.website_url }}" target="_blank" rel="noopener">
<span>{%trans 'Redirect to official website' %}</span>
</a>
{% endif %}
</article>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>

{% endfor %}

</article>
</section>

2 changes: 2 additions & 0 deletions src/templates/pycontw-2020/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,4 +64,6 @@ <h2>{% trans 'What is PyCon Taiwan' %}</h2>
<img class="deco-a-3" src="{% static 'pycontw-2020/assets/deco-a-3.svg' %}" />
</div>

{% include '_includes/sponsors.html' %}

{% endblock content_full %}

0 comments on commit 0344fe5

Please sign in to comment.