improve responsiveness

This commit is contained in:
Lorin Werthen 2017-04-23 12:46:47 +02:00
parent 79fcae29c3
commit 98dcc26a11
No known key found for this signature in database
GPG key ID: F11FFC921E0E08E0
6 changed files with 43 additions and 19 deletions

View file

@ -20,13 +20,6 @@
}
}
}
.main-text {
// Larger text when on tablet
@include tablet {
font-size: $size-medium;
}
}
}
$sel: '';

View file

@ -20,18 +20,18 @@
}
}
.event-attributes {
font-size: 1.3em;
}
.event-social-icons {
margin-left: 10px;
line-height: 0.60em;
font-size: 0.60em;
.fa {
margin-right: 5px;
font-size: 0.60em;
@include tablet {
vertical-align: baseline;
}
}
}
.header-text {
@ -47,3 +47,11 @@
display: flex;
align-items: center;
}
.event-title {
display: flex;
@include mobile {
flex-direction: column;
}
}

View file

@ -123,3 +123,26 @@ footer.footer {
.heart {
color: $red;
}
.is-medium-responsive {
// Larger text when on tablet
@include tablet {
font-size: $size-medium;
}
}
.title-responsive {
@include mobile {
font-size: $size-1 - 0.5rem;
}
}
@for $i from 1 through 6 {
.is-#{$i}-responsive {
font-size: nth($sizes, $i);
@include mobile {
font-size: nth($sizes, $i) * 0.75;
}
}
}

View file

@ -31,4 +31,4 @@ $cammie-controls-color: rgba(0, 0, 0, 0.60);
$event-padding: 10px;
// Default font size
$size-6: 15px;
$size-normal: 15px;

View file

@ -15,7 +15,7 @@
</div>
<% end %>
<div class="main-text content" markdown="1">
<div class="content is-medium-responsive" markdown="1">
<%= yield %>
</div>
</article>

View file

@ -27,7 +27,7 @@
<div class="columns">
<div class="column has-vertical-center">
<div class="header-text <%= item[:header_text_background] ? 'light-background' : '' %>">
<p class="title is-1">
<p class="title is-1-responsive event-title">
<b>
<%= item[:title] %>
</b>
@ -42,10 +42,10 @@
</a>
</span>
</p>
<p class="subtitle is-3">
<p class="subtitle is-3-responsive">
<%= item[:description] %>
</p>
<ul class="fa-ul event-attributes">
<ul class="fa-ul is-4-responsive">
<li><%= fa 'clock-o', li: true %><%= item[:time].strftime '%A %d %B %Y %H:%M' %></li>
<li><%= fa 'map-marker', li: true %><%= item[:location] %></li>
</ul>
@ -65,7 +65,7 @@
<section class="section">
<div class="columns">
<div class="column is-8 is-offset-2">
<div class="content has-text-justified is-medium">
<div class="content has-text-justified is-medium-responsive">
<%= yield %>
</div>
</div>