Make contact page fancier
This commit is contained in:
Wout Schellaert
parent
bac1448046
commit
8112067014
4 changed files with 115 additions and 3 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
narrow_page: true
|
narrow_page: true
|
||||||
---
|
---
|
||||||
|
<% @icon_size = '2x' %>
|
||||||
<%= render '/partials/_about_sub_navbar.*', selected: 'contact' %>
|
<%= render '/partials/_about_sub_navbar.*', selected: 'contact' %>
|
||||||
<h1 class="title is-1 has-text-centered">Contact</h1>
|
<h1 class="title is-1 has-text-centered">Contact</h1>
|
||||||
|
|
||||||
|
|
@ -11,7 +11,49 @@ narrow_page: true
|
||||||
Zeus WPI is located in the basement of the S9 building on Campus Sterre, by it's members often named “de kelder”.
|
Zeus WPI is located in the basement of the S9 building on Campus Sterre, by it's members often named “de kelder”.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>Reach us:</p>
|
<%# TODO: Put in a loop for all entries %>
|
||||||
|
<ul id='contact-icons' class='columns'>
|
||||||
|
|
||||||
|
<li class='column contact-circle-option'>
|
||||||
|
<a href="_" class='contact-circle-wrapper'>
|
||||||
|
<div class='contact-circle is-centered'>
|
||||||
|
<div class='contact-circle-pulse grow'></div>
|
||||||
|
<%= fa :envelope, size: @icon_size, class: 'grow-large' %>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<h4 class="contact-description">EMAIL</h3>
|
||||||
|
<p class="has-text-centered">
|
||||||
|
<a href="_" class="contact-text-link is-link">Mail us</a>
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class='column contact-circle-option'>
|
||||||
|
<a href="_" class='contact-circle-wrapper'>
|
||||||
|
<div class='contact-circle is-centered'>
|
||||||
|
<div class='contact-circle-pulse grow'></div>
|
||||||
|
<%= fa :facebook, size: @icon_size, class: 'grow-large' %>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<h4 class="contact-description">FACEBOOK</h3>
|
||||||
|
<p class="has-text-centered">
|
||||||
|
<a href="_" class="contact-text-link is-link">Like us</a>
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class='column contact-circle-option'>
|
||||||
|
<a href="_" class='contact-circle-wrapper'>
|
||||||
|
<div class='contact-circle is-centered'>
|
||||||
|
<div class='contact-circle-pulse grow'></div>
|
||||||
|
<%= fa :twitter, size: @icon_size, class: 'grow-large' %>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<h4 class="contact-description">TWITTER</h3>
|
||||||
|
<p class="has-text-centered">
|
||||||
|
<a href="_" class="contact-text-link is-link">Follow us</a>
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
|
|
|
||||||
69
content/assets/stylesheets/includes/about.scss
Normal file
69
content/assets/stylesheets/includes/about.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
#contact-icons {
|
||||||
|
.contact-circle-option {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
.contact-circle-wrapper {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 60%;
|
||||||
|
padding-bottom: 60%;
|
||||||
|
height: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.contact-circle-pulse {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid $tertiary;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-circle {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: $tertiary;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
color: $highlighted-text-colour;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-circle-wrapper:hover, .contact-circle-wrapper:focus {
|
||||||
|
|
||||||
|
.grow {
|
||||||
|
transition: all .2s ease-in-out;
|
||||||
|
-moz-transform: scale(1.2);
|
||||||
|
-webkit-transform: scale(1.2);
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-description {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-text-link {
|
||||||
|
color: $text;
|
||||||
|
border-bottom: 1px solid $secondary;
|
||||||
|
margin-top: 7px;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-text-link:hover {
|
||||||
|
color: $secondary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -24,7 +24,7 @@ a.box {
|
||||||
filter: grayscale(30%);
|
filter: grayscale(30%);
|
||||||
|
|
||||||
.event-content {
|
.event-content {
|
||||||
color: #4a4a4a;
|
color: $text;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: rgba($tertiary, 0.2);
|
background: rgba($tertiary, 0.2);
|
||||||
|
|
|
||||||
|
|
@ -34,3 +34,4 @@ body.site {
|
||||||
@import "includes/projects";
|
@import "includes/projects";
|
||||||
@import "includes/navbar";
|
@import "includes/navbar";
|
||||||
@import "includes/search";
|
@import "includes/search";
|
||||||
|
@import "includes/about"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue