5641d7e51a
ALSO: Remove fading on dropdown menu click. This is also a bug on the actual upstream, when the cursor leaves the screen the menu disappears but the fading doesn't. This causes things like the menu saying it's open when it's not and closed when open. I'm not dealing with an upstream bug.
463 lines
7.5 KiB
SCSS
463 lines
7.5 KiB
SCSS
/* ==========================================================================
|
|
ARCHIVE
|
|
========================================================================== */
|
|
|
|
.archive {
|
|
margin-top: 1em;
|
|
margin-bottom: 2em;
|
|
|
|
@include breakpoint($large) {
|
|
float: right;
|
|
width: calc(100% - #{$right-sidebar-width-narrow});
|
|
padding-right: $right-sidebar-width-narrow;
|
|
}
|
|
|
|
@include breakpoint($x-large) {
|
|
width: calc(100% - #{$right-sidebar-width});
|
|
padding-right: $right-sidebar-width;
|
|
}
|
|
}
|
|
|
|
.archive__item {
|
|
position: relative;
|
|
|
|
a {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
a[rel="permalink"] {
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
.archive__subtitle {
|
|
margin: 1.414em 0 0.5em;
|
|
padding-bottom: 0.5em;
|
|
font-size: $type-size-5;
|
|
color: $muted-text-color;
|
|
border-bottom: 1px solid $border-color;
|
|
|
|
+ .list__item .archive__item-title {
|
|
margin-top: 0.5em;
|
|
}
|
|
}
|
|
|
|
.archive__item-title {
|
|
margin-bottom: 0.25em;
|
|
font-family: $sans-serif-narrow;
|
|
line-height: initial;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
a[rel="permalink"]::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
a + a {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
/* remove border*/
|
|
.page__content {
|
|
.archive__item-title {
|
|
margin-top: 1em;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.archive__item-excerpt {
|
|
margin-top: 0;
|
|
font-size: $type-size-6;
|
|
|
|
& + p {
|
|
text-indent: 0;
|
|
}
|
|
|
|
a {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.archive__item-teaser {
|
|
position: relative;
|
|
border-radius: $border-radius;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.archive__item-caption {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
padding: 2px 5px;
|
|
color: #fff;
|
|
font-family: $caption-font-family;
|
|
font-size: $type-size-8;
|
|
background: #000;
|
|
text-align: right;
|
|
z-index: 5;
|
|
opacity: 0.5;
|
|
border-radius: $border-radius 0 0 0;
|
|
|
|
@include breakpoint($large) {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
/*
|
|
List view
|
|
========================================================================== */
|
|
|
|
.list__item {
|
|
.page__meta {
|
|
margin: 0 0 4px;
|
|
font-size: 0.6em;
|
|
}
|
|
}
|
|
|
|
/*
|
|
Grid view
|
|
========================================================================== */
|
|
|
|
.archive {
|
|
.grid__wrapper {
|
|
/* extend grid elements to the right */
|
|
|
|
@include breakpoint($large) {
|
|
margin-right: -1 * $right-sidebar-width-narrow;
|
|
}
|
|
|
|
@include breakpoint($x-large) {
|
|
margin-right: -1 * $right-sidebar-width;
|
|
}
|
|
}
|
|
}
|
|
|
|
.grid__item {
|
|
margin-bottom: 2em;
|
|
|
|
@include breakpoint($small) {
|
|
float: left;
|
|
width: span(5 of 10);
|
|
|
|
&:nth-child(2n + 1) {
|
|
clear: both;
|
|
margin-left: 0;
|
|
}
|
|
|
|
&:nth-child(2n + 2) {
|
|
clear: none;
|
|
margin-left: gutter(of 10);
|
|
}
|
|
}
|
|
|
|
@include breakpoint($medium) {
|
|
margin-left: 0; /* override margin*/
|
|
margin-right: 0; /* override margin*/
|
|
width: span(3 of 12);
|
|
|
|
&:nth-child(2n + 1) {
|
|
clear: none;
|
|
}
|
|
|
|
&:nth-child(4n + 1) {
|
|
clear: both;
|
|
}
|
|
|
|
&:nth-child(4n + 2) {
|
|
clear: none;
|
|
margin-left: gutter(1 of 12);
|
|
}
|
|
|
|
&:nth-child(4n + 3) {
|
|
clear: none;
|
|
margin-left: gutter(1 of 12);
|
|
}
|
|
|
|
&:nth-child(4n + 4) {
|
|
clear: none;
|
|
margin-left: gutter(1 of 12);
|
|
}
|
|
}
|
|
|
|
.page__meta {
|
|
margin: 0 0 4px;
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
.page__meta-sep {
|
|
display: block;
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.archive__item-title {
|
|
margin-top: 0.5em;
|
|
font-size: $type-size-5;
|
|
}
|
|
|
|
.archive__item-excerpt {
|
|
display: none;
|
|
|
|
@include breakpoint($medium) {
|
|
display: block;
|
|
font-size: $type-size-6;
|
|
}
|
|
}
|
|
|
|
.archive__item-teaser {
|
|
@include breakpoint($small) {
|
|
max-height: 200px;
|
|
}
|
|
|
|
@include breakpoint($medium) {
|
|
max-height: 120px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
Features
|
|
========================================================================== */
|
|
|
|
.feature__wrapper {
|
|
@include clearfix();
|
|
margin-bottom: 2em;
|
|
border-bottom: 1px solid $border-color;
|
|
|
|
.archive__item-title {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.feature__item {
|
|
position: relative;
|
|
margin-bottom: 2em;
|
|
font-size: 1.125em;
|
|
|
|
@include breakpoint($small) {
|
|
float: left;
|
|
margin-bottom: 0;
|
|
width: span(4 of 12);
|
|
|
|
&:nth-child(3n + 1) {
|
|
clear: both;
|
|
margin-left: 0;
|
|
}
|
|
|
|
&:nth-child(3n + 2) {
|
|
clear: none;
|
|
margin-left: gutter(of 12);
|
|
}
|
|
|
|
&:nth-child(3n + 3) {
|
|
clear: none;
|
|
margin-left: gutter(of 12);
|
|
}
|
|
|
|
.feature__item-teaser {
|
|
max-height: 200px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.archive__item-body {
|
|
padding-left: gutter(1 of 12);
|
|
padding-right: gutter(1 of 12);
|
|
}
|
|
|
|
a.btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
&--left {
|
|
position: relative;
|
|
float: left;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
width: 100%;
|
|
clear: both;
|
|
font-size: 1.125em;
|
|
|
|
.archive__item {
|
|
float: left;
|
|
}
|
|
|
|
.archive__item-teaser {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
a.btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
@include breakpoint($small) {
|
|
.archive__item-teaser {
|
|
float: left;
|
|
width: span(5 of 12);
|
|
}
|
|
|
|
.archive__item-body {
|
|
float: right;
|
|
padding-left: gutter(0.5 of 12);
|
|
padding-right: gutter(1 of 12);
|
|
width: span(7 of 12);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--right {
|
|
position: relative;
|
|
float: left;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
width: 100%;
|
|
clear: both;
|
|
font-size: 1.125em;
|
|
|
|
.archive__item {
|
|
float: left;
|
|
}
|
|
|
|
.archive__item-teaser {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
a.btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
@include breakpoint($small) {
|
|
text-align: right;
|
|
|
|
.archive__item-teaser {
|
|
float: right;
|
|
width: span(5 of 12);
|
|
}
|
|
|
|
.archive__item-body {
|
|
float: left;
|
|
width: span(7 of 12);
|
|
padding-left: gutter(0.5 of 12);
|
|
padding-right: gutter(1 of 12);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--center {
|
|
position: relative;
|
|
float: left;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
width: 100%;
|
|
clear: both;
|
|
font-size: 1.125em;
|
|
|
|
.archive__item {
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
|
|
.archive__item-teaser {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
a.btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
@include breakpoint($small) {
|
|
text-align: center;
|
|
|
|
.archive__item-teaser {
|
|
margin: 0 auto;
|
|
width: span(5 of 12);
|
|
}
|
|
|
|
.archive__item-body {
|
|
margin: 0 auto;
|
|
width: span(7 of 12);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Place inside an archive layout */
|
|
|
|
.archive {
|
|
.feature__wrapper {
|
|
.archive__item-title {
|
|
margin-top: 0.25em;
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
|
|
.feature__item,
|
|
.feature__item--left,
|
|
.feature__item--center,
|
|
.feature__item--right {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
|
|
/*
|
|
Wide Pages
|
|
========================================================================== */
|
|
|
|
.wide {
|
|
.archive {
|
|
@include breakpoint($large) {
|
|
padding-right: 0;
|
|
}
|
|
|
|
@include breakpoint($x-large) {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Place inside a single layout */
|
|
|
|
.layout--single {
|
|
.feature__wrapper {
|
|
display: inline-block;
|
|
}
|
|
}
|