Browse Source

Replace ems with rems, first pass.

pull/13/head
Ned Zimmerman 7 years ago
parent
commit
2fa3350494
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
  1. 4
      resources/assets/styles/common/_functions.scss
  2. 8
      resources/assets/styles/common/_global.scss
  3. 2
      resources/assets/styles/common/_variables.scss
  4. 14
      resources/assets/styles/components/_buttons.scss
  5. 10
      resources/assets/styles/layouts/_footer.scss
  6. 12
      resources/assets/styles/layouts/_header.scss
  7. 22
      resources/assets/styles/layouts/_pages.scss
  8. 8
      resources/views/partials/front-page-catalog.blade.php

4
resources/assets/styles/common/_functions.scss

@ -1,3 +1,3 @@
@function em($pixels, $context: $base-font-size) {
@return #{$pixels / $context}em;
@function rem($pixels, $context: $base-font-size) {
@return #{$pixels / $context}rem;
}

8
resources/assets/styles/common/_global.scss

@ -5,7 +5,7 @@
body {
margin: 0;
font-family: $font-family-serif;
font-size: #{$base-font-size}px;
font-size: rem(18);
}
h1,
@ -18,15 +18,15 @@ h6 {
}
h1 {
font-size: em(30);
font-size: rem(30);
font-weight: 600;
letter-spacing: em(2);
letter-spacing: rem(2);
line-height: (36/30);
margin: 0;
}
h2 {
font-size: em(16);
font-size: rem(16);
font-weight: normal;
line-height: (30/16);
margin: 0;

2
resources/assets/styles/common/_variables.scss

@ -17,4 +17,4 @@ $extra-large: 1650px;
/** Fonts */
$font-family-sans-serif: 'Karla', sans-serif;
$font-family-serif: 'Spectral', serif;
$base-font-size: 18;
$base-font-size: 16;

14
resources/assets/styles/components/_buttons.scss

@ -1,9 +1,9 @@
.button {
display: inline-block;
width: 15.625rem;
height: 3.75rem;
width: rem(250);
height: rem(65);
margin-top: 2em;
padding: 1.2rem;
padding: rem(20);
border: 2px solid $black;
border-radius: 3px;
background: $black;
@ -12,7 +12,7 @@
font-weight: 600;
color: $white;
line-height: normal;
letter-spacing: 2px;
letter-spacing: rem(2);
text-align: center;
text-decoration: none;
text-transform: uppercase;
@ -26,9 +26,9 @@
}
&.button-small {
width: (150/16) * 1rem;
height: (40/16) * 1rem;
padding: 0.5em;
width: rem(150);
height: rem(40);
padding: rem(6.5);
}
&.button-wide {

10
resources/assets/styles/layouts/_footer.scss

@ -3,7 +3,7 @@
margin-bottom: 0;
padding: 60px 42.5px 40px;
font-family: $font-family-sans-serif;
font-size: em(16);
font-size: rem(16);
color: $white;
ul {
@ -75,7 +75,7 @@
margin-top: 1em;
a {
font-size: em(32);
font-size: rem(32);
margin: 0 0.25em;
transition: all 0.4s;
}
@ -102,7 +102,7 @@
}
h1 {
font-size: em(16);
font-size: rem(16);
font-weight: normal;
margin-bottom: 0;
@ -124,7 +124,7 @@
ul {
display: none;
margin: 0;
font-size: em(14);
font-size: rem(14);
}
.pressbooks-icon {
@ -174,7 +174,7 @@
.social-media {
a {
font-size: em(24);
font-size: rem(24);
margin: 0 0.5em 0 0;
}
}

12
resources/assets/styles/layouts/_header.scss

@ -71,7 +71,7 @@
a {
display: none;
font-family: $font-family-sans-serif;
font-size: em(24);
font-size: rem(24);
line-height: (80/24);
color: $white;
letter-spacing: 0;
@ -133,7 +133,7 @@
a {
display: inline-block;
font-size: em(18);
font-size: rem(18);
color: $black;
line-height: normal;
@ -161,17 +161,17 @@
height: 576px;
p {
font-size: em(30);
font-size: rem(30);
letter-spacing: 0.75px;
line-height: (40/30);
}
}
h1 {
margin-bottom: 0.5em;
font-size: em(72);
margin-bottom: rem(32);
font-size: rem(72);
line-height: (40/72);
letter-spacing: 1.8px;
letter-spacing: rem(1.8);
}
}
}

22
resources/assets/styles/layouts/_pages.scss

@ -12,7 +12,7 @@
text-align: center;
p {
font-size: em(16);
font-size: rem(18);
line-height: (32/16);
}
}
@ -64,7 +64,7 @@
.block,
.latest-books {
h3 {
font-size: em(30);
font-size: rem(30);
font-weight: 600;
color: var(--brand-primary, $brand-primary);
letter-spacing: 2px;
@ -96,6 +96,7 @@
margin-left: auto;
margin-right: auto;
padding: 0 0.46875rem;
position: relative;
}
.books {
@ -120,18 +121,18 @@
.subject {
height: 4.625rem;
font-size: em(24);
font-size: rem(24);
}
.title {
height: 13rem;
font-size: em(30);
font-size: rem(30);
font-weight: 500;
line-height: (40/30);
}
.read-more {
font-size: em(18);
font-size: rem(18);
}
}
@ -166,7 +167,7 @@
}
h3 {
font-size: em(48);
font-size: rem(48);
line-height: (56/48);
&::before {
@ -175,7 +176,7 @@
}
p {
font-size: em(18);
font-size: rem(18);
line-height: (32/18);
}
}
@ -206,7 +207,8 @@
.next,
.previous {
flex: 0 0 2.4375rem;
position: absolute;
top: rem(165.5);
svg {
width: 2.4375rem;
@ -215,13 +217,13 @@
}
.next {
margin-left: 2.625rem;
margin-right: 0.9375rem;
right: 0;
}
.previous {
margin-left: 0.9375rem;
margin-right: 2.625rem;
left: 0;
}
.books {

8
resources/views/partials/front-page-catalog.blade.php

@ -1,7 +1,7 @@
<div class="latest-books w-100">
<div id="latest-titles" class="latest-books w-100">
<h3 class="tc ttu">{{ $latest_books_title }}</h3>
<div class="track flex flex-row flex-wrap justify-center items-center">
<div class="books flex flex-column justify-center items-center order-0 order-1-l flex-row-l justify-between-l @if($current_page === 1){{ 'ml-auto' }}@elseif(!$next_page){{ 'mr-auto' }}@endif" data-total-pages="{{ $total_pages }}" data-next-page="2">
<div class="books flex flex-column justify-center items-center order-0 order-1-l flex-row-l justify-between-l" data-total-pages="{{ $total_pages }}" data-next-page="2">
@foreach(FrontPage::latestBooks( $current_page, 3 ) as $book)
<div class="book flex flex-column justify-end w-100 bg-secondary b--secondary">
@if(isset($book['metadata']['keywords']))
@ -18,8 +18,8 @@
</div>
@endforeach
</div>
@if($previous_page)<a class="secondary previous db mr-auto f1 order-1 order-0-l" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg'))</a>@endif
@if($next_page)<a class="secondary next ml-auto order-2 db f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif
@if($previous_page)<a class="secondary previous db mr-auto f1 order-1 order-0-l" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg'))</a>@endif
@if($next_page)<a class="secondary next ml-auto order-2 db f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif
</div>
<div class="catalog-link tc">
<a class="button button-primary button-outline button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a>

Loading…
Cancel
Save