Ned Zimmerman
7 years ago
46 changed files with 3492 additions and 1543 deletions
@ -1,10 +0,0 @@ |
|||||||
<?php |
|
||||||
|
|
||||||
namespace Aldine; |
|
||||||
|
|
||||||
use Sober\Controller\Controller; |
|
||||||
|
|
||||||
class About extends Controller |
|
||||||
{ |
|
||||||
|
|
||||||
} |
|
||||||
@ -0,0 +1,111 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
namespace Aldine; |
||||||
|
|
||||||
|
use Sober\Controller\Controller; |
||||||
|
|
||||||
|
class PageCatalog extends Controller |
||||||
|
{ |
||||||
|
public function licenses() |
||||||
|
{ |
||||||
|
$licenses = (new \Pressbooks\Licensing())->getSupportedTypes(); |
||||||
|
foreach ($licenses as $key => $value) { |
||||||
|
$licenses[$key] = preg_replace("/\([^)]+\)/", '', $value['desc']); |
||||||
|
} |
||||||
|
return $licenses; |
||||||
|
} |
||||||
|
|
||||||
|
public function subjectGroups() |
||||||
|
{ |
||||||
|
return [ |
||||||
|
'business-finance' => [ |
||||||
|
'title' => __('Business and Finance', 'aldine'), |
||||||
|
'subjects' => [ |
||||||
|
'accounting' => 'Accounting', |
||||||
|
'finance' => 'Finance', |
||||||
|
'information-systems' => 'Information Systems', |
||||||
|
'management' => 'Management', |
||||||
|
'marketing' => 'Marketing', |
||||||
|
'economics' => 'Economics', |
||||||
|
], |
||||||
|
], |
||||||
|
'engineering-technology' => [ |
||||||
|
'title' => __('Engineering & Technology', 'aldine'), |
||||||
|
'subjects' => [ |
||||||
|
'architecture' => 'Architecture', |
||||||
|
'bioengineering' => 'Bioengineering', |
||||||
|
'chemical' => 'Chemical', |
||||||
|
'civil' => 'Civil', |
||||||
|
'electrical' => 'Electrical', |
||||||
|
'mechanical' => 'Mechanical', |
||||||
|
'mining-and-materials' => 'Mining and Materials', |
||||||
|
'urban-planning' => 'Urban Planning', |
||||||
|
'computer-science' => 'Computer Science', |
||||||
|
], |
||||||
|
], |
||||||
|
'health-sciences' => [ |
||||||
|
'title' => __('Health Sciences', 'aldine'), |
||||||
|
'subjects' => [ |
||||||
|
'nursing' => 'Nursing', |
||||||
|
'dentistry' => 'Dentistry', |
||||||
|
'medicine' => 'Medicine', |
||||||
|
], |
||||||
|
], |
||||||
|
'humanities-arts' => [ |
||||||
|
'title' => __('Humanities & Arts', 'aldine'), |
||||||
|
'subjects' => [ |
||||||
|
'archaeology' => 'Archaeology', |
||||||
|
'art' => 'Art', |
||||||
|
'classics' => 'Classics', |
||||||
|
'literature' => 'Literature', |
||||||
|
'history' => 'History', |
||||||
|
'media' => 'Media', |
||||||
|
'music' => 'Music', |
||||||
|
'philosophy' => 'Philosophy', |
||||||
|
'religion' => 'Religion', |
||||||
|
'language' => 'Language', |
||||||
|
], |
||||||
|
], |
||||||
|
'reference' => [ |
||||||
|
'title' => __('Reference', 'aldine'), |
||||||
|
'subjects' => [ |
||||||
|
'student-guides' => 'Student Guides', |
||||||
|
'teaching-guides' => 'Teaching Guides', |
||||||
|
], |
||||||
|
], |
||||||
|
'science' => [ |
||||||
|
'title' => __('Sciences', 'aldine'), |
||||||
|
'subjects' => [ |
||||||
|
'biology' => 'Biology', |
||||||
|
'chemistry' => 'Chemistry', |
||||||
|
'environent-and-earth-sciences' => 'Environment and Earth Sciences', |
||||||
|
'geography' => 'Geography', |
||||||
|
'mathematics' => 'Mathematics', |
||||||
|
'physics' => 'Physics', |
||||||
|
], |
||||||
|
], |
||||||
|
'social-sciences' => [ |
||||||
|
'title' => __('Social Sciences', 'aldine'), |
||||||
|
'subjects' => [ |
||||||
|
'anthropology' => 'Anthropology', |
||||||
|
'gender-studies' => 'Gender Studies', |
||||||
|
'linguistics' => 'Linguistics', |
||||||
|
'museums-libraries-and-information-sciences' => 'Museums, Libraries, and Information Sciences', |
||||||
|
'political-science' => 'Political Science', |
||||||
|
'psychology' => 'Psychology', |
||||||
|
'social-work' => 'Social Work', |
||||||
|
'sociology' => 'Sociology', |
||||||
|
], |
||||||
|
], |
||||||
|
]; |
||||||
|
} |
||||||
|
|
||||||
|
public function catalogData() |
||||||
|
{ |
||||||
|
$page = (get_query_var('paged')) ? get_query_var('paged') : 1; |
||||||
|
$orderby = (get_query_var('orderby')) ? get_query_var('orderby') : 'title'; |
||||||
|
$subject = (get_query_var('subject')) ? get_query_var('subject') : ''; |
||||||
|
$license = (get_query_var('license')) ? get_query_var('license') : ''; |
||||||
|
return App::catalogData($page, 9, $orderby, $license, $subject); |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 530 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 178 KiB After Width: | Height: | Size: 176 KiB |
|
Before Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 11 KiB |
@ -1,5 +0,0 @@ |
|||||||
export default { |
|
||||||
init() { |
|
||||||
// JavaScript to be fired on the about us page
|
|
||||||
}, |
|
||||||
}; |
|
||||||
@ -0,0 +1,101 @@ |
|||||||
|
const jQueryBridget = require('jquery-bridget'); |
||||||
|
const Isotope = require('isotope-layout'); |
||||||
|
|
||||||
|
export default { |
||||||
|
init() { |
||||||
|
// JavaScript to be fired on the catalog page
|
||||||
|
jQueryBridget('isotope', Isotope, $); |
||||||
|
let $grid = $('.books'); |
||||||
|
$grid.isotope({ |
||||||
|
itemSelector: '.book', |
||||||
|
getSortData: { |
||||||
|
title: '.title a', |
||||||
|
subject: '[data-subject]', |
||||||
|
latest: '[data-date-published]', |
||||||
|
}, |
||||||
|
sortAscending: { |
||||||
|
title: true, |
||||||
|
subject: true, |
||||||
|
latest: false, |
||||||
|
}, |
||||||
|
}); |
||||||
|
$('.filters > a').click((e) => { |
||||||
|
e.preventDefault(); |
||||||
|
$('.filters').toggleClass('is-active'); |
||||||
|
$('.filter-groups > div').removeClass('is-active'); |
||||||
|
}) |
||||||
|
$('.filter-groups .subjects > a').click((e) => { |
||||||
|
e.preventDefault(); |
||||||
|
let id = $(e.currentTarget).attr('href'); |
||||||
|
$(`.filter-groups .subjects:not(${id})`).removeClass('is-active'); |
||||||
|
$(`.filter-groups ${id}`).toggleClass('is-active'); |
||||||
|
}) |
||||||
|
$('.licenses > a').click((e) => { |
||||||
|
e.preventDefault(); |
||||||
|
let id = $(e.currentTarget).attr('href'); |
||||||
|
$(id).toggleClass('is-active'); |
||||||
|
}) |
||||||
|
$('.subjects .filter-list a').click((e) => { |
||||||
|
e.preventDefault(); |
||||||
|
if ($(e.currentTarget).hasClass('is-active')) { |
||||||
|
$('.subjects .filter-list a').removeClass('is-active'); |
||||||
|
$('.subjects').removeClass('has-active-child'); |
||||||
|
} else { |
||||||
|
$('.subjects .filter-list a').removeClass('is-active'); |
||||||
|
$(e.currentTarget).addClass('is-active'); |
||||||
|
$('.subjects').removeClass('has-active-child'); |
||||||
|
$(e.currentTarget).parent().parent().parent('.subjects').addClass('has-active-child'); |
||||||
|
} |
||||||
|
let subjectValue = $('.subjects .filter-list a.is-active').attr('data-filter'); |
||||||
|
let licenseValue = $('.licenses .filter-list a.is-active').attr('data-filter'); |
||||||
|
if(typeof licenseValue === "undefined") { |
||||||
|
licenseValue = ''; |
||||||
|
} else { |
||||||
|
licenseValue = `[data-license="${licenseValue}"]`; |
||||||
|
} |
||||||
|
if(typeof subjectValue === "undefined") { |
||||||
|
subjectValue = ''; |
||||||
|
} else { |
||||||
|
subjectValue = `[data-subject="${subjectValue}"]`; |
||||||
|
} |
||||||
|
$grid.isotope({ filter: `${subjectValue}${licenseValue}` }); |
||||||
|
}); |
||||||
|
$('.licenses .filter-list a').click((e) => { |
||||||
|
e.preventDefault(); |
||||||
|
if ($(e.currentTarget).hasClass('is-active')) { |
||||||
|
$('.licenses .filter-list a').removeClass('is-active'); |
||||||
|
$('.licenses').removeClass('has-active-child'); |
||||||
|
} else { |
||||||
|
$('.licenses .filter-list a').removeClass('is-active'); |
||||||
|
$(e.currentTarget).addClass('is-active'); |
||||||
|
$('.licenses').addClass('has-active-child'); |
||||||
|
} |
||||||
|
let subjectValue = $('.subjects .filter-list a.is-active').attr('data-filter'); |
||||||
|
let licenseValue = $('.licenses .filter-list a.is-active').attr('data-filter'); |
||||||
|
if(typeof licenseValue === "undefined") { |
||||||
|
licenseValue = ''; |
||||||
|
} else { |
||||||
|
licenseValue = `[data-license="${licenseValue}"]`; |
||||||
|
} |
||||||
|
if(typeof subjectValue === "undefined") { |
||||||
|
subjectValue = ''; |
||||||
|
} else { |
||||||
|
subjectValue = `[data-subject="${subjectValue}"]`; |
||||||
|
} |
||||||
|
$grid.isotope({ filter: `${subjectValue}${licenseValue}` }); |
||||||
|
}); |
||||||
|
$('.sort > a').click((e) => { |
||||||
|
e.preventDefault(); |
||||||
|
$('.sort').toggleClass('is-active'); |
||||||
|
}) |
||||||
|
$('.sorts a').click((e) => { |
||||||
|
e.preventDefault(); |
||||||
|
let sortBy = $(e.currentTarget).attr('data-sort'); |
||||||
|
$('.sorts a').removeClass('is-active'); |
||||||
|
$(e.currentTarget).addClass('is-active'); |
||||||
|
$grid.isotope({sortBy: sortBy}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
finalize() { |
||||||
|
}, |
||||||
|
}; |
||||||
@ -1,4 +0,0 @@ |
|||||||
// `sage preset` installed this file automatically. |
|
||||||
// Running `sage preset` again could result in automatic deletion of this file. |
|
||||||
// Because of this, we do not recommend editing this file. |
|
||||||
@import "~tachyons-sass/tachyons"; |
|
||||||
@ -1,3 +1,7 @@ |
|||||||
@function em($pixels, $context: $base-font-size) { |
@function rem($pixels, $context: $base-font-size) { |
||||||
@return #{$pixels / $context}em; |
@return #{$pixels / $context}rem; |
||||||
|
} |
||||||
|
|
||||||
|
@function percent($target, $context) { |
||||||
|
@return ($target / $context) * 100%; |
||||||
} |
} |
||||||
|
|||||||
@ -1,226 +1,2 @@ |
|||||||
.home { |
@import 'pages/front-page'; |
||||||
.block, |
@import 'pages/catalog'; |
||||||
.latest-books { |
|
||||||
height: 445px; |
|
||||||
background-color: $white; |
|
||||||
text-align: center; |
|
||||||
|
|
||||||
h3 { |
|
||||||
font-size: em(30); |
|
||||||
font-weight: 600; |
|
||||||
letter-spacing: 2px; |
|
||||||
line-height: (36/30); |
|
||||||
margin: 0; |
|
||||||
|
|
||||||
&::before { |
|
||||||
content: ""; |
|
||||||
display: block; |
|
||||||
margin: 0 auto 1em; |
|
||||||
width: 46px; |
|
||||||
height: 5px; |
|
||||||
background-color: var(--brand-secondary, $brand-secondary); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
p { |
|
||||||
font-size: em(16); |
|
||||||
line-height: (32/16); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.block { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.blocks.blocks-2 { |
|
||||||
.widget_text:nth-child(2) { |
|
||||||
border: solid 2px var(--brand-primary, $brand-primary); |
|
||||||
box-shadow: unset; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.blocks.blocks-4 { |
|
||||||
.widget_text:nth-child(2) { |
|
||||||
color: $white; |
|
||||||
background: var(--brand-secondary, $brand-secondary); |
|
||||||
|
|
||||||
h3::before { |
|
||||||
background-color: $white; |
|
||||||
} |
|
||||||
|
|
||||||
.button { |
|
||||||
border-color: $white; |
|
||||||
background: transparent; |
|
||||||
|
|
||||||
&:hover, |
|
||||||
&:focus { |
|
||||||
color: var(--brand-secondary, $brand-secondary); |
|
||||||
background: $white; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.widget_text:nth-child(3) { |
|
||||||
border: solid 2px var(--brand-primary, $brand-primary); |
|
||||||
box-shadow: unset; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.latest-books { |
|
||||||
box-shadow: unset; |
|
||||||
height: auto; |
|
||||||
padding-bottom: 0 0 50px; |
|
||||||
|
|
||||||
h3 { |
|
||||||
margin-top: 70px; |
|
||||||
} |
|
||||||
|
|
||||||
.book, |
|
||||||
.slick-slide { |
|
||||||
width: 100vw; |
|
||||||
height: 386px; |
|
||||||
margin: 45px 0 0; |
|
||||||
padding: 0 29.5px; |
|
||||||
border: solid 2px; |
|
||||||
|
|
||||||
a { |
|
||||||
font-family: $font-family-sans-serif; |
|
||||||
color: $white; |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
|
|
||||||
.subject { |
|
||||||
height: 91px; |
|
||||||
margin-top: 24px; |
|
||||||
font-size: em(24); |
|
||||||
} |
|
||||||
|
|
||||||
.title { |
|
||||||
height: 329px - 115px; |
|
||||||
font-size: em(30); |
|
||||||
font-weight: 500; |
|
||||||
} |
|
||||||
|
|
||||||
.read-more { |
|
||||||
font-size: em(18); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.navigation { |
|
||||||
a { |
|
||||||
&.slick-disabled { |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (min-width: $medium) { |
|
||||||
.home { |
|
||||||
.wrap { |
|
||||||
margin-top: -366px; |
|
||||||
} |
|
||||||
|
|
||||||
.block { |
|
||||||
width: 775px; |
|
||||||
margin-bottom: 119px; |
|
||||||
padding: 0 90px; |
|
||||||
box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09); |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
margin-bottom: 4.0625rem; |
|
||||||
} |
|
||||||
|
|
||||||
h3 { |
|
||||||
font-size: em(48); |
|
||||||
line-height: (56/48); |
|
||||||
|
|
||||||
&::before { |
|
||||||
width: 74px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
p { |
|
||||||
font-size: em(18); |
|
||||||
line-height: (32/18); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.latest-books { |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
.books { |
|
||||||
flex-direction: row; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
.book, |
|
||||||
.slick-slide { |
|
||||||
width: 300px; |
|
||||||
margin-right: 30px; |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
margin-right: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (min-width: $large) { |
|
||||||
.home { |
|
||||||
.block { |
|
||||||
width: 1115px; |
|
||||||
height: 494px; |
|
||||||
} |
|
||||||
|
|
||||||
.latest-books { |
|
||||||
width: 1200px; |
|
||||||
margin-bottom: 0; |
|
||||||
|
|
||||||
.book, |
|
||||||
.slick-slide { |
|
||||||
width: 367px; |
|
||||||
margin-right: 50px; |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
margin-right: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (min-width: $extra-large) { |
|
||||||
.home { |
|
||||||
.block { |
|
||||||
width: 1115px; |
|
||||||
box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09); |
|
||||||
} |
|
||||||
|
|
||||||
.blocks.blocks-4 { |
|
||||||
display: flex; |
|
||||||
flex-flow: row wrap; |
|
||||||
width: 1615px; |
|
||||||
|
|
||||||
.widget_text { |
|
||||||
width: 1115px; |
|
||||||
margin-right: auto; |
|
||||||
margin-left: auto; |
|
||||||
} |
|
||||||
|
|
||||||
.widget_text:nth-child(1), |
|
||||||
.widget_text:nth-child(2) { |
|
||||||
width: 775px; |
|
||||||
} |
|
||||||
|
|
||||||
.widget_text:nth-child(1) { |
|
||||||
margin-right: 65px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|||||||
@ -0,0 +1,514 @@ |
|||||||
|
.catalog { |
||||||
|
.banner .container { |
||||||
|
height: rem(381); |
||||||
|
} |
||||||
|
|
||||||
|
.banner .primary-navigation { |
||||||
|
height: rem(381); |
||||||
|
} |
||||||
|
|
||||||
|
.page-header { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
height: rem(381); |
||||||
|
margin-top: rem(-381); |
||||||
|
|
||||||
|
h1 { |
||||||
|
color: var(--primary, $brand-primary); |
||||||
|
margin-bottom: 2rem; |
||||||
|
font-size: rem(36); |
||||||
|
line-height: 0.55556; |
||||||
|
letter-spacing: 0.1125rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.network-catalog { |
||||||
|
width: 100%; |
||||||
|
padding-bottom: rem(152); |
||||||
|
} |
||||||
|
|
||||||
|
.controls { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.filters, |
||||||
|
.search, |
||||||
|
.sort { |
||||||
|
width: 100%; |
||||||
|
border-top: solid 2px var(--accent, $brand-accent); |
||||||
|
background: $white; |
||||||
|
|
||||||
|
a { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
width: 100%; |
||||||
|
padding: rem(16) rem(19); |
||||||
|
font-size: rem(16); |
||||||
|
font-weight: 600; |
||||||
|
font-family: $font-family-sans-serif; |
||||||
|
letter-spacing: rem(0.67); |
||||||
|
color: $black; |
||||||
|
|
||||||
|
&:hover, |
||||||
|
&:focus { |
||||||
|
background: #fafdff; |
||||||
|
color: var(--primary, $brand-primary); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.has-active-child > a { |
||||||
|
color: var(--primary, $brand-primary); |
||||||
|
} |
||||||
|
|
||||||
|
ul { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
list-style: none; |
||||||
|
|
||||||
|
li { |
||||||
|
font-size: rem(16); |
||||||
|
font-family: $font-family-sans-serif; |
||||||
|
letter-spacing: rem(0.67); |
||||||
|
|
||||||
|
a { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
font-weight: normal; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
.close { |
||||||
|
display: inline-block; |
||||||
|
float: right; |
||||||
|
margin-top: rem(-2); |
||||||
|
font-size: rem(20); |
||||||
|
opacity: 0; |
||||||
|
transition: opacity 0.5s; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
a.is-active { |
||||||
|
font-weight: 600; |
||||||
|
color: var(--primary, $brand-primary); |
||||||
|
|
||||||
|
.close { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.arrow { |
||||||
|
path { |
||||||
|
fill: var(--primary, $brand-primary); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.is-active > a .arrow { |
||||||
|
transform: rotate(180deg); |
||||||
|
} |
||||||
|
|
||||||
|
.filters { |
||||||
|
.filter-groups { |
||||||
|
display: none; |
||||||
|
border-top: solid 2px var(--accent, $brand-accent); |
||||||
|
|
||||||
|
h3 { |
||||||
|
margin: 0; |
||||||
|
border-top: solid 1px $light-gray; |
||||||
|
} |
||||||
|
|
||||||
|
h3:first-of-type { |
||||||
|
border-top: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.licenses { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.filter-list { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
&.is-active { |
||||||
|
.filter-groups, |
||||||
|
.licenses { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.is-active ul { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.search { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.sort { |
||||||
|
border-bottom: solid 2px var(--accent, $brand-accent); |
||||||
|
|
||||||
|
.sorts { |
||||||
|
display: none; |
||||||
|
border-top: solid 2px var(--accent, $brand-accent); |
||||||
|
} |
||||||
|
|
||||||
|
&.is-active { |
||||||
|
.sorts { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.books { |
||||||
|
align-self: flex-start; |
||||||
|
width: percent(358, 360); |
||||||
|
margin: rem(32) 0 0 percent(10.5, 360); |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.book { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: flex-end; |
||||||
|
width: percent(165, 358); |
||||||
|
margin: 0 percent(9, 358) rem(8) 0; |
||||||
|
height: rem(230); |
||||||
|
float: left; |
||||||
|
padding: 1.5rem rem(8) rem(26); |
||||||
|
border: solid 2px var(--accent, $brand-accent); |
||||||
|
background: var(--accent, $brand-accent); |
||||||
|
|
||||||
|
p { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
font-family: $font-family-sans-serif; |
||||||
|
color: var(--accent-fg, $white); |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.subject { |
||||||
|
height: rem(44); |
||||||
|
font-size: rem(14); |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
height: rem(118); |
||||||
|
font-size: rem(16); |
||||||
|
font-weight: 600; |
||||||
|
line-height: (20/16); |
||||||
|
} |
||||||
|
|
||||||
|
.read-more { |
||||||
|
font-size: rem(14); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.catalog-navigation { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: center; |
||||||
|
width: 100%; |
||||||
|
margin-top: rem(83); |
||||||
|
align-items: baseline; |
||||||
|
font-family: $font-family-sans-serif; |
||||||
|
|
||||||
|
a { |
||||||
|
color: $black; |
||||||
|
|
||||||
|
&:hover, |
||||||
|
&:focus { |
||||||
|
color: var(--primary, $brand-primary); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.previous, |
||||||
|
.next { |
||||||
|
display: block; |
||||||
|
margin: 0 rem(26); |
||||||
|
font-family: $font-family-sans-serif; |
||||||
|
font-size: rem(16); |
||||||
|
|
||||||
|
svg { |
||||||
|
width: rem(16.2); |
||||||
|
height: rem(12.5); |
||||||
|
margin: 0 rem(6); |
||||||
|
|
||||||
|
path { |
||||||
|
fill: var(--primary, $brand-primary); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.pages { |
||||||
|
display: inline-block; |
||||||
|
border-bottom: solid 2px #ececec; |
||||||
|
|
||||||
|
a, |
||||||
|
span { |
||||||
|
display: inline-block; |
||||||
|
width: rem(41); |
||||||
|
padding: rem(8) 0; |
||||||
|
font-size: rem(24); |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.current { |
||||||
|
border-bottom: solid rem(6) var(--primary, $brand-primary); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 768px) { |
||||||
|
.catalog { |
||||||
|
.controls { |
||||||
|
width: percent(706, 768); |
||||||
|
height: rem(52); |
||||||
|
margin: rem(60) percent(29, 768) rem(20) percent(33, 768); |
||||||
|
|
||||||
|
.filters, |
||||||
|
.search, |
||||||
|
.sort { |
||||||
|
position: relative; |
||||||
|
border-top: 0; |
||||||
|
border-bottom: solid 2px var(--accent, $brand-accent); |
||||||
|
z-index: 99; |
||||||
|
} |
||||||
|
|
||||||
|
.filters { |
||||||
|
float: left; |
||||||
|
width: rem(360); |
||||||
|
|
||||||
|
.filter-groups { |
||||||
|
border-right: solid 1px #ececec; |
||||||
|
border-left: solid 1px #ececec; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.sort { |
||||||
|
float: right; |
||||||
|
width: rem(160); |
||||||
|
|
||||||
|
.sorts { |
||||||
|
border-right: solid 1px #ececec; |
||||||
|
border-bottom: solid 1px #ececec; |
||||||
|
border-left: solid 1px #ececec; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.books { |
||||||
|
align-self: flex-start; |
||||||
|
width: percent(735, 768); |
||||||
|
margin-bottom: rem(15); |
||||||
|
margin-left: percent(24, 768); |
||||||
|
} |
||||||
|
|
||||||
|
.book { |
||||||
|
width: percent(230, 735); |
||||||
|
height: rem(260); |
||||||
|
margin: 0 percent(15, 735) 2rem 0; |
||||||
|
padding: 0 rem(14) rem(21.35); |
||||||
|
|
||||||
|
.subject { |
||||||
|
height: rem(45.85); |
||||||
|
font-size: rem(18); |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
height: rem(147.65); |
||||||
|
font-size: rem(22); |
||||||
|
font-weight: 600; |
||||||
|
line-height: (40/30); |
||||||
|
} |
||||||
|
|
||||||
|
.read-more { |
||||||
|
font-size: rem(16); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: $medium) { |
||||||
|
.catalog { |
||||||
|
.page-header { |
||||||
|
h1 { |
||||||
|
font-size: rem(72); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media #{$breakpoint-large} { |
||||||
|
.catalog { |
||||||
|
.banner { |
||||||
|
.container { |
||||||
|
height: rem(450); |
||||||
|
} |
||||||
|
|
||||||
|
.primary-navigation { |
||||||
|
height: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.brand { |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
img { |
||||||
|
max-height: rem(60); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.page-header { |
||||||
|
height: rem(360); |
||||||
|
margin-top: rem(-360); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: $extra-large) { |
||||||
|
.catalog { |
||||||
|
.main { |
||||||
|
width: rem(1535); |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
.network-catalog { |
||||||
|
margin-top: rem(205); |
||||||
|
} |
||||||
|
|
||||||
|
.controls { |
||||||
|
width: 100%; |
||||||
|
margin: 0 0 rem(64); |
||||||
|
|
||||||
|
.filters { |
||||||
|
width: rem(286); |
||||||
|
border-bottom: 0; |
||||||
|
|
||||||
|
> a { |
||||||
|
border-bottom: solid 3px var(--accent, $brand-accent); |
||||||
|
|
||||||
|
&:hover, |
||||||
|
&:focus { |
||||||
|
color: $black; |
||||||
|
background: $white; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.arrow { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.filter-groups { |
||||||
|
display: block; |
||||||
|
border-right: 0; |
||||||
|
border-top: 0; |
||||||
|
border-left: 0; |
||||||
|
|
||||||
|
.subjects { |
||||||
|
border-bottom: solid 1px #ececec; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.licenses { |
||||||
|
display: block; |
||||||
|
margin-top: rem(60); |
||||||
|
|
||||||
|
> a { |
||||||
|
background: var(--primary, $brand-primary); |
||||||
|
color: var(--primary-fg, $white); |
||||||
|
|
||||||
|
.arrow { |
||||||
|
path { |
||||||
|
fill: var(--primary-fg, $white); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
ul li { |
||||||
|
a { |
||||||
|
padding-top: 0; |
||||||
|
padding-bottom: 0; |
||||||
|
line-height: 2; |
||||||
|
} |
||||||
|
|
||||||
|
&:last-child a { |
||||||
|
padding-bottom: 1rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.sort { |
||||||
|
.sorts { |
||||||
|
border-top: solid 3px var(--accent, $brand-accent); |
||||||
|
border-right: 0; |
||||||
|
border-left: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.books { |
||||||
|
width: percent(1221.5, 1535); |
||||||
|
margin: 0 0 0 percent(316, 1535); |
||||||
|
} |
||||||
|
|
||||||
|
.book { |
||||||
|
width: percent(367, 1221.5); |
||||||
|
height: rem(386); |
||||||
|
margin: 0 0 2rem percent(39.5, 1221.5); |
||||||
|
padding: 1.5rem 1.85rem 2.1875rem; |
||||||
|
|
||||||
|
.subject { |
||||||
|
height: 4.625rem; |
||||||
|
font-size: rem(24); |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
height: 13rem; |
||||||
|
font-size: rem(30); |
||||||
|
font-weight: 500; |
||||||
|
line-height: (40/30); |
||||||
|
} |
||||||
|
|
||||||
|
.read-more { |
||||||
|
font-size: rem(18); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.catalog.no-js { |
||||||
|
.filters { |
||||||
|
.arrow { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.filter-groups, |
||||||
|
.licenses, |
||||||
|
.filter-list { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.sort { |
||||||
|
.arrow { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.sorts { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,404 @@ |
|||||||
|
.home { |
||||||
|
.block { |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
padding: 0 0.78125rem; |
||||||
|
display: flex; |
||||||
|
height: rem(445); |
||||||
|
background-color: $white; |
||||||
|
margin-left: auto; |
||||||
|
margin-right: auto; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
p { |
||||||
|
font-size: rem(18); |
||||||
|
line-height: (32/16); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.blocks.blocks-2, |
||||||
|
.blocks.blocks-3 { |
||||||
|
.widget_text:nth-child(2) { |
||||||
|
margin-right: 0.5rem; |
||||||
|
margin-left: 0.5rem; |
||||||
|
border: solid 2px var(--primary, $brand-primary); |
||||||
|
box-shadow: unset; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.blocks.blocks-4 { |
||||||
|
.widget_text:nth-child(2) { |
||||||
|
color: var(--accent-fg, $white); |
||||||
|
background: var(--accent, $brand-accent); |
||||||
|
|
||||||
|
h3 { |
||||||
|
color: var(--accent-fg, $white); |
||||||
|
|
||||||
|
&::before { |
||||||
|
background: var(--accent-fg, $white); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.button { |
||||||
|
color: var(--accent-fg, $white); |
||||||
|
border-color: var(--accent-fg, $white); |
||||||
|
background: transparent; |
||||||
|
|
||||||
|
&:hover, |
||||||
|
&:focus { |
||||||
|
color: var(--accent, $brand-accent); |
||||||
|
background: var(--accent-fg, $white); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.widget_text:nth-child(3) { |
||||||
|
margin-top: 2rem; |
||||||
|
margin-right: 0.5rem; |
||||||
|
margin-left: 0.5rem; |
||||||
|
border: solid 2px var(--primary, $brand-primary); |
||||||
|
box-shadow: unset; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.blocks.blocks-2 .widget_text:nth-child(2), |
||||||
|
.blocks.blocks-3 .widget_text:nth-child(2), |
||||||
|
.blocks.blocks-4 .widget_text:nth-child(3) { |
||||||
|
background: transparent; |
||||||
|
margin-bottom: rem(400); |
||||||
|
|
||||||
|
&::after { |
||||||
|
z-index: -1; |
||||||
|
content: ""; |
||||||
|
display: block; |
||||||
|
width: 100vw; |
||||||
|
height: rem(444); |
||||||
|
background-image: url('../images/banner.jpg'); |
||||||
|
background-position: center; |
||||||
|
background-size: cover; |
||||||
|
position: absolute; |
||||||
|
top: rem(1410); |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.blocks.blocks-4 .widget_text:nth-child(3) { |
||||||
|
&::after { |
||||||
|
top: rem(1880); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.block, |
||||||
|
.latest-books { |
||||||
|
h3 { |
||||||
|
font-size: rem(30); |
||||||
|
font-weight: 600; |
||||||
|
color: var(--primary, $brand-primary); |
||||||
|
letter-spacing: 2px; |
||||||
|
line-height: (36/30); |
||||||
|
margin: 0; |
||||||
|
|
||||||
|
&::before { |
||||||
|
content: ""; |
||||||
|
display: block; |
||||||
|
margin: 0 auto 1em; |
||||||
|
width: 46px; |
||||||
|
height: 5px; |
||||||
|
background: var(--accent, $brand-accent); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.latest-books { |
||||||
|
height: auto; |
||||||
|
padding: 0 0 rem(154); |
||||||
|
|
||||||
|
h3 { |
||||||
|
text-align: center; |
||||||
|
text-transform: uppercase; |
||||||
|
margin-top: 4.375rem; |
||||||
|
margin-bottom: 2.8125rem; |
||||||
|
} |
||||||
|
|
||||||
|
.track { |
||||||
|
display: flex; |
||||||
|
flex-flow: row wrap; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
max-width: 22.9375rem; |
||||||
|
margin-left: auto; |
||||||
|
margin-right: auto; |
||||||
|
margin-bottom: 2rem; |
||||||
|
padding: 0 0.46875rem; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.books { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
order: 0; |
||||||
|
padding: 0; |
||||||
|
width: 100%; |
||||||
|
margin-bottom: rem(34); |
||||||
|
} |
||||||
|
|
||||||
|
.book { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: flex-end; |
||||||
|
width: 100%; |
||||||
|
max-width: 22.9375rem; |
||||||
|
height: 24.125rem; |
||||||
|
margin: 0 0 2rem; |
||||||
|
padding: 1.5rem 1.85rem 2.1875rem; |
||||||
|
border: solid 2px var(--accent, $brand-accent); |
||||||
|
background: var(--accent, $brand-accent); |
||||||
|
|
||||||
|
a { |
||||||
|
margin: 0; |
||||||
|
font-family: $font-family-sans-serif; |
||||||
|
color: var(--accent-fg, $white); |
||||||
|
text-decoration: none; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.subject { |
||||||
|
height: 4.625rem; |
||||||
|
margin: 0; |
||||||
|
font-size: rem(24); |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
height: 13rem; |
||||||
|
margin: 0; |
||||||
|
font-size: rem(30); |
||||||
|
font-weight: 500; |
||||||
|
line-height: (40/30); |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.read-more { |
||||||
|
margin: 0; |
||||||
|
font-size: rem(18); |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.previous, |
||||||
|
.next { |
||||||
|
display: block; |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
|
||||||
|
svg { |
||||||
|
path { |
||||||
|
fill: var(--primary, $brand-primary); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.previous { |
||||||
|
order: 1; |
||||||
|
margin-right: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.next { |
||||||
|
order: 2; |
||||||
|
margin-left: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.catalog-link { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: $medium) { |
||||||
|
.home { |
||||||
|
.wrap { |
||||||
|
margin-top: rem(-366); |
||||||
|
} |
||||||
|
|
||||||
|
.block { |
||||||
|
width: rem(775); |
||||||
|
height: rem(494); |
||||||
|
margin-bottom: rem(119); |
||||||
|
padding: 0 90px; |
||||||
|
box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09); |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
margin-bottom: 4.0625rem; |
||||||
|
} |
||||||
|
|
||||||
|
h3 { |
||||||
|
font-size: rem(48); |
||||||
|
line-height: (56/48); |
||||||
|
|
||||||
|
&::before { |
||||||
|
width: 74px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
font-size: rem(18); |
||||||
|
line-height: (32/18); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.blocks.blocks-2 .widget_text:nth-child(2), |
||||||
|
.blocks.blocks-3 .widget_text:nth-child(2), |
||||||
|
.blocks.blocks-4 .widget_text:nth-child(3) { |
||||||
|
margin-left: auto; |
||||||
|
margin-right: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.blocks.blocks-2 .widget_text:nth-child(2), |
||||||
|
.blocks.blocks-3 .widget_text:nth-child(2), |
||||||
|
.blocks.blocks-4 .widget_text:nth-child(3) { |
||||||
|
margin-bottom: rem(119); |
||||||
|
|
||||||
|
&::after { |
||||||
|
height: rem(600); |
||||||
|
top: rem(1547); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.blocks.blocks-4 .widget_text:nth-child(3) { |
||||||
|
&::after { |
||||||
|
top: rem(2177); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.latest-books { |
||||||
|
width: 100%; |
||||||
|
margin-left: auto; |
||||||
|
margin-right: auto; |
||||||
|
|
||||||
|
h3 { |
||||||
|
margin-bottom: 4.375rem; |
||||||
|
} |
||||||
|
|
||||||
|
.track { |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
width: 100%; |
||||||
|
max-width: 100%; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.next, |
||||||
|
.previous { |
||||||
|
position: absolute; |
||||||
|
top: rem(165.5); |
||||||
|
|
||||||
|
svg { |
||||||
|
width: 2.4375rem; |
||||||
|
height: 1.875rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.next { |
||||||
|
margin-right: 0.9375rem; |
||||||
|
right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.previous { |
||||||
|
order: 0; |
||||||
|
margin-left: 0.9375rem; |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.books { |
||||||
|
width: auto; |
||||||
|
min-width: 50rem; |
||||||
|
flex-direction: row; |
||||||
|
order: 1; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 2rem; |
||||||
|
} |
||||||
|
|
||||||
|
.book { |
||||||
|
width: 30%; |
||||||
|
max-width: 19.54rem; |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
margin-bottom: 2rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: $large) { |
||||||
|
.home { |
||||||
|
.block { |
||||||
|
width: rem(1115); |
||||||
|
} |
||||||
|
|
||||||
|
.latest-books { |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 0; |
||||||
|
|
||||||
|
.track { |
||||||
|
width: 100%; |
||||||
|
margin: 0 auto; |
||||||
|
max-width: 87rem; |
||||||
|
} |
||||||
|
|
||||||
|
.books { |
||||||
|
width: 100%; |
||||||
|
max-width: 75rem; |
||||||
|
} |
||||||
|
|
||||||
|
.book { |
||||||
|
min-width: 19.54rem; |
||||||
|
max-width: 22.9375rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: $extra-large) { |
||||||
|
.home { |
||||||
|
.block { |
||||||
|
width: 1115px; |
||||||
|
box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09); |
||||||
|
} |
||||||
|
|
||||||
|
.blocks.blocks-4 { |
||||||
|
display: flex; |
||||||
|
flex-flow: row wrap; |
||||||
|
width: 1615px; |
||||||
|
|
||||||
|
.widget_text { |
||||||
|
width: 1115px; |
||||||
|
margin-right: auto; |
||||||
|
margin-left: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.widget_text:nth-child(1), |
||||||
|
.widget_text:nth-child(2) { |
||||||
|
width: 775px; |
||||||
|
} |
||||||
|
|
||||||
|
.widget_text:nth-child(1) { |
||||||
|
margin-right: 65px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.blocks.blocks-4 .widget_text:nth-child(3) { |
||||||
|
&::after { |
||||||
|
top: rem(1596); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,67 @@ |
|||||||
|
{{-- |
||||||
|
Template Name: Catalog |
||||||
|
--}} |
||||||
|
|
||||||
|
@extends('layouts.app') |
||||||
|
|
||||||
|
@section('content') |
||||||
|
@include('partials.page-header') |
||||||
|
<section class="network-catalog"> |
||||||
|
<div class="controls"> |
||||||
|
<div class="search"> |
||||||
|
<h2><a href="#search">{{ __('Search by titles or keyword', 'aldine') }} <svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a></h2> |
||||||
|
</div> |
||||||
|
<div class="filters"> |
||||||
|
<a href="#filter">{{ __('Filter by', 'aldine') }} <svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a> |
||||||
|
<div id="filter" class="filter-groups"> |
||||||
|
@foreach($subject_groups as $key => $val) |
||||||
|
<div class="{{ $key }} subjects" id="{{ $key }}"> |
||||||
|
<a href="#{{ $key }}">{{ $val['title'] }} <svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a> |
||||||
|
<ul class="filter-list"> |
||||||
|
@foreach($val['subjects'] as $k => $v) |
||||||
|
<li><a data-filter="{{ $k }}">{{ $v }}<span class="close">×</span></a></li> |
||||||
|
@endforeach |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
@endforeach |
||||||
|
</div> |
||||||
|
<div class="licenses" id="licenses"> |
||||||
|
<a href="#licenses">{{ __('Licenses', 'aldine' ) }}<svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a> |
||||||
|
<ul class="filter-list"> |
||||||
|
@foreach($licenses as $key => $value) |
||||||
|
<li><a data-filter="{{ $key }}">{{ $value }}<span class="close">×</span></a></li> |
||||||
|
@endforeach |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="sort"> |
||||||
|
<a href="#sort">{{ __('Sort by', 'aldine') }} <svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a> |
||||||
|
<ul id="sort" class="sorts"> |
||||||
|
<li><a data-sort="title" href="{{ "/catalog/page/$current_page/?orderby=title" }}">{{ __('Title', 'aldine') }}</a></li> |
||||||
|
<li><a data-sort="subject" href="{{ "/catalog/page/$current_page/?orderby=subject" }}">{{ __('Subject', 'aldine') }}</a></li> |
||||||
|
<li><a data-sort="latest" href="{{ "/catalog/page/$current_page/?orderby=latest" }}">{{ __('Latest', 'aldine') }}</a></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="books"> |
||||||
|
@foreach($catalog_data['books'] as $book) |
||||||
|
@include('partials.book', ['book' => $book]) |
||||||
|
@endforeach |
||||||
|
</div> |
||||||
|
@if($catalog_data['pages'] > 1) |
||||||
|
<nav class="catalog-navigation"> |
||||||
|
@if($previous_page)<a class="previous" data-page="{{ $previous_page }}" href="{{ network_home_url("/catalog/page/$previous_page/") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\asset_dir('images/left-arrow.svg')) {{ __('Previous', 'aldine') }}</a>@endif |
||||||
|
<div class="pages"> |
||||||
|
@for($i = 1; $i <= $catalog_data['pages']; $i++) |
||||||
|
@if($i === $current_page) |
||||||
|
<span class="current">{{ $i }}</span> |
||||||
|
@else |
||||||
|
<a href="{{ network_home_url("/catalog/page/$i/") }}">{{ $i }}</a> |
||||||
|
@endif |
||||||
|
@endfor |
||||||
|
</div> |
||||||
|
@if($next_page <= $catalog_data['pages'])<a class="next" data-page="{{ $next_page }}" href="{{ network_home_url("/catalog/page/$next_page/") }}">{{ __('Next', 'aldine') }} @php(include get_theme_file_path() . '/dist/' . Aldine\asset_dir('images/right-arrow.svg'))</a>@endif |
||||||
|
</nav> |
||||||
|
@endif |
||||||
|
</section> |
||||||
|
@endsection |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
<div class="book" |
||||||
|
data-date-published="{{ str_replace('-', '', @$book['metadata']['datePublished']) }}" |
||||||
|
data-license="{{ (new \Pressbooks\Licensing())->getLicenseFromUrl($book['metadata']['license']['url']) }}" |
||||||
|
data-subject="{{ sanitize_title(@$book['metadata']['keywords']) }}" |
||||||
|
> |
||||||
|
@if(isset($book['metadata']['keywords'])) |
||||||
|
<p class="subject"> |
||||||
|
<a href="{{ network_home_url('/catalog/#') . $book['metadata']['keywords'] }}">{{ $book['metadata']['keywords'] }}</a> |
||||||
|
</p> |
||||||
|
@endif |
||||||
|
<p class="title"> |
||||||
|
<a href="{{ $book['link'] }}">{{ $book['metadata']['name'] }}</a> |
||||||
|
</p> |
||||||
|
<p class="read-more"> |
||||||
|
<a href="{{ $book['link'] }}">{{ __('About this book →', 'aldine') }}</a> |
||||||
|
</p> |
||||||
|
</div> |
||||||
@ -1,11 +1,22 @@ |
|||||||
<section class="contact flex flex-column justify-center items-center w-100" id="contact"> |
<section class="contact flex flex-column justify-center items-center w-100" id="contact"> |
||||||
<h3 class="tc ttu">{{ $contact_form_title }}</h3> |
<h3 class="tc ttu">{{ $contact_form_title }}</h3> |
||||||
<form action="<?php the_permalink(); ?>" method="post">
|
<form action="{{ network_home_url('/#contact') }}" method="post"> |
||||||
|
@if($contact_form_response) |
||||||
|
<p class="tl mb4 w-100 {{ $contact_form_response['status'] }}">{{ $contact_form_response['message'] }}</p> |
||||||
|
@endif |
||||||
<input type="hidden" name="submitted" value="1"> |
<input type="hidden" name="submitted" value="1"> |
||||||
<p class="flex flex-row items-center"><label class="clip" for="name">{{ __('Your name*', 'aldine' ) }}</label><input class="input-reset" type="text" placeholder="{{ __('Your name*', 'aldine' ) }}" name="name" value="{{ @esc_attr($_POST['name']) }}"></p> |
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_name'){{ 'error' }}@endif"> |
||||||
<p class="flex flex-row items-center"><label class="clip" for="email">{{ __('Your email*', 'aldine' ) }}</label><input class="input-reset" type="email" placeholder="{{ __('Your email*', 'aldine' ) }}" name="email" value="{{ @esc_attr($_POST['email']) }}"></p> |
<label class="clip" for="visitor_name">{{ __('Your name*', 'aldine' ) }}</label> |
||||||
<p class="flex flex-row items-center"><label class="clip" for="institution">{{ __('Your institution*', 'aldine' ) }}</label><input class="input-reset" type="text" placeholder="{{ __('Your institution*', 'aldine' ) }}" name="institution" value="{{ @esc_attr($_POST['institution']) }}"></p> |
<input class="input-reset" type="text" placeholder="{{ __('Your name*', 'aldine' ) }}" name="visitor_name" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_name']) }}@endif"></p> |
||||||
<p class="flex flex-row items-center"><label class="clip" for="content">{{ __('Your message here', 'aldine' ) }}</label><textarea class="input-reset" type="text" placeholder="{{ __('Your message here', 'aldine' ) }}" name="content">{{ @esc_textarea($_POST['content']) }}</textarea></p> |
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_email'){{ 'error' }}@endif"> |
||||||
<p class="tc"><input class="button-reset button button-small button-secondary button-outline input-reset pointer" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p> |
<label class="clip" for="visitor_email">{{ __('Your email*', 'aldine' ) }}</label> |
||||||
|
<input class="input-reset" type="email" placeholder="{{ __('Your email*', 'aldine' ) }}" name="visitor_email" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_email']) }}@endif"></p> |
||||||
|
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_institution'){{ 'error' }}@endif"> |
||||||
|
<label class="clip" for="visitor_institution">{{ __('Your institution*', 'aldine' ) }}</label> |
||||||
|
<input class="input-reset" type="text" placeholder="{{ __('Your institution*', 'aldine' ) }}" name="visitor_institution" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_institution']) }}@endif"></p> |
||||||
|
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'message'){{ 'error' }}@endif"> |
||||||
|
<label class="clip" for="message">{{ __('Your message here', 'aldine' ) }}</label> |
||||||
|
<textarea class="input-reset" type="text" placeholder="{{ __('Your message here', 'aldine' ) }}" name="message">@if($contact_form_response['status'] === 'error'){{ @esc_textarea($_POST['message']) }}@endif</textarea></p> |
||||||
|
<p class="tc"><input class="button-reset button button--small button--outline input-reset pointer" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p> |
||||||
</form> |
</form> |
||||||
</section> |
</section> |
||||||
|
|||||||
@ -1,7 +1,7 @@ |
|||||||
<div class="block flex flex-column items-center justify-center p-0 w-100"> |
<div class="block flex flex-column items-center justify-center p-0 w-100"> |
||||||
<div class="inside tc"> |
<div class="inside tc"> |
||||||
<h3 class="tc ttu primary">{{ $title }}</h3> |
<h3 class="tc ttu">{{ $title }}</h3> |
||||||
{{ $slot }} |
{{ $slot }} |
||||||
<a class="button button-primary" href="{{ $button_url }}">{{ $button_title }}</a> |
<a class="button" href="{{ $button_url }}">{{ $button_title }}</a> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
|
|||||||
@ -1,27 +0,0 @@ |
|||||||
<div class="block latest-books w-100"> |
|
||||||
<div class="inside"> |
|
||||||
<h3 class="tc ttu">{{ $latest_books_title }}</h3> |
|
||||||
<div class="books flex flex-column justify-center flex-row-m justify-between-m" data-total-pages="{{ $total_pages }}" data-next-page="2"> |
|
||||||
@foreach(FrontPage::latestBooks( $current_page, 3 ) as $book) |
|
||||||
<div class="book w-100 bg-secondary b--secondary"> |
|
||||||
<p class="subject tc ma0"> |
|
||||||
<a href="">Fiction</a> |
|
||||||
</p> |
|
||||||
<p class="title tc ma0"> |
|
||||||
<a href="{{ $book['link'] }}">{{ $book['metadata']['name'] }}</a> |
|
||||||
</p> |
|
||||||
<p class="read-more tl ma0"> |
|
||||||
<a href="{{ $book['link'] }}">{{ __('About this book →', 'aldine') }}</a> |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
@endforeach |
|
||||||
</div> |
|
||||||
<nav class="navigation flex flex-row justify-between mt2 tr" data-total="{{ $total_pages }}"> |
|
||||||
<a class="secondary previous f1 @if(!$previous_page) slick-disabled @endif" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/") }}">←</a> |
|
||||||
<a class="secondary next f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/") }}">→</a> |
|
||||||
</nav> |
|
||||||
<div class="catalog-link tc"> |
|
||||||
<a class="button button-primary button-outline button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -0,0 +1,73 @@ |
|||||||
|
let mix = require('laravel-mix'); |
||||||
|
|
||||||
|
/* |
||||||
|
|-------------------------------------------------------------------------- |
||||||
|
| Mix Asset Management |
||||||
|
|-------------------------------------------------------------------------- |
||||||
|
| |
||||||
|
| Mix provides a clean, fluent API for defining some Webpack build steps |
||||||
|
| for your Laravel application. By default, we are compiling the Sass |
||||||
|
| file for your application, as well as bundling up your JS files. |
||||||
|
| |
||||||
|
*/ |
||||||
|
|
||||||
|
const app = 'app'; |
||||||
|
const resources = 'resources'; |
||||||
|
const assets = `${resources}/assets`; |
||||||
|
const dist = 'dist'; |
||||||
|
|
||||||
|
mix.setPublicPath(dist); |
||||||
|
mix.setResourceRoot('../'); |
||||||
|
|
||||||
|
// BrowserSync
|
||||||
|
mix.browserSync({ |
||||||
|
host: 'localhost', |
||||||
|
proxy: 'http://pressbooks.dev', |
||||||
|
port: 3000, |
||||||
|
files: [ |
||||||
|
`${app}/**/*.php`, |
||||||
|
`${resources}/**/*.php`, |
||||||
|
`${dist}/**/*.css`, |
||||||
|
`${dist}/**/*.js`, |
||||||
|
], |
||||||
|
}); |
||||||
|
|
||||||
|
// Sass
|
||||||
|
mix.sass(`${assets}/styles/main.scss`, `${dist}/styles/main.css`); |
||||||
|
|
||||||
|
// Javascript
|
||||||
|
mix.autoload({ |
||||||
|
jquery: ['$', 'window.jQuery', 'jQuery'], |
||||||
|
}); |
||||||
|
|
||||||
|
mix.js(`${assets}/scripts/main.js`, `${dist}/scripts`) |
||||||
|
.js(`${assets}/scripts/customizer.js`, `${dist}/scripts`); |
||||||
|
|
||||||
|
// Assets
|
||||||
|
mix.copy(`${assets}/fonts`, `${dist}/fonts`, false) |
||||||
|
.copy(`${assets}/images`, `${dist}/images`, false); |
||||||
|
|
||||||
|
// Options
|
||||||
|
mix.options({ |
||||||
|
processCssUrls: false, |
||||||
|
}); |
||||||
|
|
||||||
|
// Source maps when not in production.
|
||||||
|
if (!mix.inProduction()) { |
||||||
|
mix.sourceMaps(); |
||||||
|
} |
||||||
|
|
||||||
|
// Hash and version files in production.
|
||||||
|
if (mix.inProduction()) { |
||||||
|
mix.version(); |
||||||
|
} |
||||||
|
|
||||||
|
// Add Isotope support.
|
||||||
|
mix.webpackConfig({ |
||||||
|
resolve: { |
||||||
|
alias: { |
||||||
|
'masonry': 'masonry-layout', |
||||||
|
'isotope': 'isotope-layout', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
Loading…
Reference in new issue