Code
/
pressbooks-aldine
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Replace ems with rems, first pass.

pull/13/head
Ned Zimmerman 7 years ago
parent
cf8fa8a6d7
commit
2fa3350494
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
8 changed files with 41 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

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

8
resources/assets/styles/common/_global.scss
Unescape View File

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

2
resources/assets/styles/common/_variables.scss
Unescape View File

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

14
resources/assets/styles/components/_buttons.scss
Unescape View File

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

10
resources/assets/styles/layouts/_footer.scss
Unescape View File

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

12
resources/assets/styles/layouts/_header.scss
Unescape View File

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

22
resources/assets/styles/layouts/_pages.scss
Unescape View File

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

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

@ -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> <h3 class="tc ttu">{{ $latest_books_title }}</h3>
<div class="track flex flex-row flex-wrap justify-center items-center"> <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) @foreach(FrontPage::latestBooks( $current_page, 3 ) as $book)
<div class="book flex flex-column justify-end w-100 bg-secondary b--secondary"> <div class="book flex flex-column justify-end w-100 bg-secondary b--secondary">
@if(isset($book['metadata']['keywords'])) @if(isset($book['metadata']['keywords']))
@ -18,8 +18,8 @@
</div> </div>
@endforeach @endforeach
</div> </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($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/") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-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>
<div class="catalog-link tc"> <div class="catalog-link tc">
<a class="button button-primary button-outline button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a> <a class="button button-primary button-outline button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a>

Write Preview
Loading…
Cancel
Save