Ned Zimmerman
7 years ago
committed by
GitHub
18 changed files with 1054 additions and 378 deletions
@ -1,10 +0,0 @@
|
||||
<?php |
||||
|
||||
namespace Aldine; |
||||
|
||||
use Sober\Controller\Controller; |
||||
|
||||
class About extends Controller |
||||
{ |
||||
|
||||
} |
||||
@ -0,0 +1,102 @@
|
||||
<?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', |
||||
], |
||||
], |
||||
]; |
||||
} |
||||
} |
||||
@ -1,3 +1,7 @@
|
||||
@function rem($pixels, $context: $base-font-size) { |
||||
@return #{$pixels / $context}rem; |
||||
} |
||||
|
||||
@function percent($target, $context) { |
||||
@return ($target / $context) * 100%; |
||||
} |
||||
|
||||
@ -1,354 +1,2 @@
|
||||
.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(--fg, $white); |
||||
background: var(--bg, $brand-accent); |
||||
|
||||
h3 { |
||||
color: var(--fg, $white); |
||||
|
||||
&::before { |
||||
background: var(--fg, $white); |
||||
} |
||||
} |
||||
|
||||
.button { |
||||
color: var(--fg, $white); |
||||
border-color: var(--fg, $white); |
||||
background: transparent; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: var(--bg, $brand-accent); |
||||
background: var(--fg, $white); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.widget_text:nth-child(3) { |
||||
margin-top: 2rem; |
||||
margin-right: 0.5rem; |
||||
margin-left: 0.5rem; |
||||
border: solid 2px var(--block-border, $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 50px; |
||||
|
||||
h3 { |
||||
margin-top: 4.375rem; |
||||
margin-bottom: 2.8125rem; |
||||
} |
||||
|
||||
.track { |
||||
max-width: 22.9375rem; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
margin-bottom: 2rem; |
||||
padding: 0 0.46875rem; |
||||
position: relative; |
||||
} |
||||
|
||||
.books { |
||||
padding: 0; |
||||
width: 100%; |
||||
} |
||||
|
||||
.book { |
||||
width: 100%; |
||||
max-width: 22.9375rem; |
||||
height: 24.125rem; |
||||
margin: 0 0 2rem; |
||||
padding: 1.5rem 1.85rem 2.1875rem; |
||||
border: solid 2px var(--bg, $brand-accent); |
||||
background: var(--bg, $brand-accent); |
||||
|
||||
a { |
||||
font-family: $font-family-sans-serif; |
||||
color: $white; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.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); |
||||
} |
||||
} |
||||
|
||||
.previous, |
||||
.next { |
||||
width: auto; |
||||
height: auto; |
||||
|
||||
svg { |
||||
path { |
||||
fill: var(--primary, $brand-primary); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@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 { |
||||
flex-wrap: 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 { |
||||
margin-left: 0.9375rem; |
||||
left: 0; |
||||
} |
||||
|
||||
.books { |
||||
width: auto; |
||||
min-width: 50rem; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.book { |
||||
width: 30%; |
||||
max-width: 19.54rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@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); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@import 'pages/front-page'; |
||||
@import 'pages/catalog'; |
||||
|
||||
@ -0,0 +1,364 @@
|
||||
.catalog { |
||||
.page-header { |
||||
margin-top: rem(-68); |
||||
padding-bottom: 2rem; |
||||
} |
||||
|
||||
.network-catalog { |
||||
width: 100%; |
||||
} |
||||
|
||||
.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(--link, $brand-primary); |
||||
} |
||||
} |
||||
|
||||
.has-active-child > a { |
||||
background: var(--link, $brand-primary); |
||||
color: $white; |
||||
|
||||
.arrow { |
||||
path { |
||||
fill: $white; |
||||
} |
||||
} |
||||
} |
||||
|
||||
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(--link, $brand-primary); |
||||
|
||||
.close { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.arrow { |
||||
path { |
||||
fill: var(--link, $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; |
||||
} |
||||
} |
||||
|
||||
.filter-list { |
||||
display: none; |
||||
} |
||||
|
||||
&.is-active { |
||||
.filter-groups { |
||||
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(--bg, $brand-accent); |
||||
background: var(--bg, $brand-accent); |
||||
|
||||
p { |
||||
margin: 0; |
||||
} |
||||
|
||||
a { |
||||
font-family: $font-family-sans-serif; |
||||
color: $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); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@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) { |
||||
// TODO |
||||
} |
||||
|
||||
@media (min-width: $large) { |
||||
// TODO |
||||
} |
||||
|
||||
@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); |
||||
|
||||
.filter-groups { |
||||
border-right: 0; |
||||
border-top: 0; |
||||
border-left: 0; |
||||
|
||||
.subjects, |
||||
.licenses { |
||||
border-bottom: solid 1px #ececec; |
||||
} |
||||
} |
||||
|
||||
&.is-active { |
||||
border-bottom: 0; |
||||
|
||||
.filter-groups { |
||||
border-top: solid 2px var(--accent, $brand-accent); |
||||
} |
||||
} |
||||
|
||||
ul li { |
||||
a { |
||||
padding-top: 0; |
||||
padding-bottom: 0; |
||||
line-height: 2; |
||||
} |
||||
|
||||
&:last-child a { |
||||
padding-bottom: 1rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.sort { |
||||
.sorts { |
||||
border-top: solid 2px 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); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,354 @@
|
||||
.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(--fg, $white); |
||||
background: var(--bg, $brand-accent); |
||||
|
||||
h3 { |
||||
color: var(--fg, $white); |
||||
|
||||
&::before { |
||||
background: var(--fg, $white); |
||||
} |
||||
} |
||||
|
||||
.button { |
||||
color: var(--fg, $white); |
||||
border-color: var(--fg, $white); |
||||
background: transparent; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: var(--bg, $brand-accent); |
||||
background: var(--fg, $white); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.widget_text:nth-child(3) { |
||||
margin-top: 2rem; |
||||
margin-right: 0.5rem; |
||||
margin-left: 0.5rem; |
||||
border: solid 2px var(--block-border, $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 50px; |
||||
|
||||
h3 { |
||||
margin-top: 4.375rem; |
||||
margin-bottom: 2.8125rem; |
||||
} |
||||
|
||||
.track { |
||||
max-width: 22.9375rem; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
margin-bottom: 2rem; |
||||
padding: 0 0.46875rem; |
||||
position: relative; |
||||
} |
||||
|
||||
.books { |
||||
padding: 0; |
||||
width: 100%; |
||||
} |
||||
|
||||
.book { |
||||
width: 100%; |
||||
max-width: 22.9375rem; |
||||
height: 24.125rem; |
||||
margin: 0 0 2rem; |
||||
padding: 1.5rem 1.85rem 2.1875rem; |
||||
border: solid 2px var(--bg, $brand-accent); |
||||
background: var(--bg, $brand-accent); |
||||
|
||||
a { |
||||
font-family: $font-family-sans-serif; |
||||
color: $white; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.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); |
||||
} |
||||
} |
||||
|
||||
.previous, |
||||
.next { |
||||
width: auto; |
||||
height: auto; |
||||
|
||||
svg { |
||||
path { |
||||
fill: var(--primary, $brand-primary); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@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 { |
||||
flex-wrap: 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 { |
||||
margin-left: 0.9375rem; |
||||
left: 0; |
||||
} |
||||
|
||||
.books { |
||||
width: auto; |
||||
min-width: 50rem; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.book { |
||||
width: 30%; |
||||
max-width: 19.54rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@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,50 @@
|
||||
@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 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> |
||||
<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 class="is-active" href="#title">{{ __('Title', 'aldine') }}</a></li> |
||||
<li><a href="#subject">{{ __('Subject', 'aldine') }}</a></li> |
||||
<li><a href="#latest">{{ __('Latest', 'aldine') }}</a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="books"> |
||||
@foreach(App::books(1, 9) as $book) |
||||
@include('partials.book', ['book' => $book]) |
||||
@endforeach |
||||
</div> |
||||
<nav class="catalog-navigation"> |
||||
</nav> |
||||
</section> |
||||
@endsection |
||||
@ -0,0 +1,17 @@
|
||||
<div class="book" |
||||
data-date-published="{{ @$book['metadata']['datePublished'] }}" |
||||
data-license="{{ (new \Pressbooks\Licensing())->getLicenseFromUrl($book['metadata']['license']) }}" |
||||
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> |
||||
Loading…
Reference in new issue