secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Tweaking font sizes and grid BEM

Browse Source
This commit is contained in:
James Barnsley
2018-12-05 17:00:52 +13:00
parent 3d714eda7f
commit 55ad003e36
11 changed files with 141 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
mopidy_iris/static/app.css
View File

@ -4950,13 +4950,13 @@ aside {
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
font-family: "Overpass"; font-family: "Overpass";
font-weight: 500; font-weight: 600;
font-size: 14px; font-size: 14px;
color: #FFFFFF; color: #FFFFFF;
text-decoration: none; text-decoration: none;
display: block; display: block;
padding: 10px 10px 8px; padding: 12px 10px 10px;
margin: 0 16px; margin: 0 18px;
border-radius: 3px; } border-radius: 3px; }
aside nav a:before { aside nav a:before {
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
@ -5056,45 +5056,45 @@ aside {
aside nav section title { aside nav section title {
padding-bottom: 2px; } } padding-bottom: 2px; } }
.grid .grid-item-wrapper { .grid__item {
display: inline-block; }
.grid .grid-item {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
border-bottom: 0; border-bottom: 0;
position: relative; } position: relative; }
.grid .grid-item .thumbnail { .grid__item__wrapper {
display: inline-block; }
.grid__item__thumbnail {
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
max-width: 100%; } max-width: 100%; }
.grid .grid-item .name { .grid__item__name {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-top: 8px; } padding-top: 12px;
.grid .grid-item .secondary { font-size: 15px; }
.grid__item__secondary {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-top: 2px; padding-top: 2px;
color: #888888; } color: #888888; }
.grid .grid-item .secondary .source { .grid__item__secondary .source {
padding-right: 6px; } padding-right: 6px; }
.grid .grid-item:hover { .grid__item:hover {
cursor: pointer; } cursor: pointer; }
.grid .grid-item:hover .thumbnail { .grid__item:hover__thumbnail {
opacity: 0.75; } opacity: 0.75; }
.grid .grid-item:active, .grid .grid-item:focus { .grid__item:active, .grid__item:focus {
-moz-transform: scale(0.98); -moz-transform: scale(0.98);
-webkit-transform: scale(0.98); -webkit-transform: scale(0.98);
transform: scale(0.98); } transform: scale(0.98); }
.grid.category-grid .grid-item { .grid--categories .grid__item {
position: relative; } position: relative; }
.grid.category-grid .grid-item .name { .grid--categories .grid__item__name {
position: absolute; position: absolute;
bottom: 15%; bottom: 15%;
left: 0; left: 0;
@ -5105,157 +5105,157 @@ aside {
color: #FFFFFF; } color: #FFFFFF; }
@media (min-width: 1000px) { @media (min-width: 1000px) {
.grid.category-grid .grid-item .name { .grid--categories .grid__item__name {
font-size: 16px; } } font-size: 16px; } }
@media (min-width: 1900px) { @media (min-width: 1900px) {
.grid.mini .grid-item { .grid--mini .grid__item {
width: 30.66667%; width: 30.66667%;
box-sizing: border-box; box-sizing: border-box;
margin: 0 2% 3%; } margin: 0 2% 3%; }
.grid.mini .grid-item:nth-child(3n-3) { .grid--mini .grid__item:nth-child(3n-3) {
margin-right: 0; } margin-right: 0; }
.grid.mini .grid-item:nth-child(3n-3)::after { .grid--mini .grid__item:nth-child(3n-3)::after {
content: ''; content: '';
clear: both; clear: both;
display: block; } display: block; }
.grid.mini .grid-item:nth-child(3n-2) { .grid--mini .grid__item:nth-child(3n-2) {
margin-left: 0; } margin-left: 0; }
.grid.mini.single-row .grid-item:nth-child(1n+4) { .grid--mini--single-row .grid-item:nth-child(1n+4) {
display: none; } display: none; }
.grid:not(.mini) .grid-item { .grid:not(.grid--mini) .grid__item {
width: 16.8%; width: 16.8%;
box-sizing: border-box; box-sizing: border-box;
margin: 0 2% 3%; } margin: 0 2% 3%; }
.grid:not(.mini) .grid-item:nth-child(5n-5) { .grid:not(.grid--mini) .grid__item:nth-child(5n-5) {
margin-right: 0; } margin-right: 0; }
.grid:not(.mini) .grid-item:nth-child(5n-5)::after { .grid:not(.grid--mini) .grid__item:nth-child(5n-5)::after {
content: ''; content: '';
clear: both; clear: both;
display: block; } display: block; }
.grid:not(.mini) .grid-item:nth-child(5n-4) { .grid:not(.grid--mini) .grid__item:nth-child(5n-4) {
margin-left: 0; } margin-left: 0; }
.grid:not(.mini).single-row .grid-item:nth-child(1n+6) { .grid:not(.grid--mini)\--single-row .grid-item:nth-child(1n+6) {
display: none; } } display: none; } }
@media (max-width: 1899px) and (min-width: 1200px) { @media (max-width: 1899px) and (min-width: 1200px) {
.grid.mini .grid-item { .grid--mini .grid__item {
width: 48%; width: 48%;
box-sizing: border-box; box-sizing: border-box;
margin: 0 2% 3%; } margin: 0 2% 3%; }
.grid.mini .grid-item:nth-child(2n-2) { .grid--mini .grid__item:nth-child(2n-2) {
margin-right: 0; } margin-right: 0; }
.grid.mini .grid-item:nth-child(2n-2)::after { .grid--mini .grid__item:nth-child(2n-2)::after {
content: ''; content: '';
clear: both; clear: both;
display: block; } display: block; }
.grid.mini .grid-item:nth-child(2n-1) { .grid--mini .grid__item:nth-child(2n-1) {
margin-left: 0; } margin-left: 0; }
.grid.mini.single-row .grid-item:nth-child(1n+3) { .grid--mini--single-row .grid-item:nth-child(1n+3) {
display: none; } display: none; }
.grid:not(.mini) .grid-item { .grid:not(.grid--mini) .grid__item {
width: 22%; width: 22%;
box-sizing: border-box; box-sizing: border-box;
margin: 0 2% 3%; } margin: 0 2% 3%; }
.grid:not(.mini) .grid-item:nth-child(4n-4) { .grid:not(.grid--mini) .grid__item:nth-child(4n-4) {
margin-right: 0; } margin-right: 0; }
.grid:not(.mini) .grid-item:nth-child(4n-4)::after { .grid:not(.grid--mini) .grid__item:nth-child(4n-4)::after {
content: ''; content: '';
clear: both; clear: both;
display: block; } display: block; }
.grid:not(.mini) .grid-item:nth-child(4n-3) { .grid:not(.grid--mini) .grid__item:nth-child(4n-3) {
margin-left: 0; } margin-left: 0; }
.grid:not(.mini).single-row .grid-item:nth-child(1n+5) { .grid:not(.grid--mini)\--single-row .grid-item:nth-child(1n+5) {
display: none; } } display: none; } }
@media (max-width: 1199px) and (min-width: 800px) { @media (max-width: 1199px) and (min-width: 800px) {
.grid.mini .grid-item { .grid--mini .grid__item {
width: 48%; width: 48%;
box-sizing: border-box; box-sizing: border-box;
margin: 0 2% 3%; } margin: 0 2% 3%; }
.grid.mini .grid-item:nth-child(2n-2) { .grid--mini .grid__item:nth-child(2n-2) {
margin-right: 0; } margin-right: 0; }
.grid.mini .grid-item:nth-child(2n-2)::after { .grid--mini .grid__item:nth-child(2n-2)::after {
content: ''; content: '';
clear: both; clear: both;
display: block; } display: block; }
.grid.mini .grid-item:nth-child(2n-1) { .grid--mini .grid__item:nth-child(2n-1) {
margin-left: 0; } margin-left: 0; }
.grid.mini.single-row .grid-item:nth-child(1n+3) { .grid--mini--single-row .grid-item:nth-child(1n+3) {
display: none; } display: none; }
.grid:not(.mini) .grid-item { .grid:not(.grid--mini) .grid__item {
width: 22%; width: 22%;
box-sizing: border-box; box-sizing: border-box;
margin: 0 2% 3%; } margin: 0 2% 3%; }
.grid:not(.mini) .grid-item:nth-child(4n-4) { .grid:not(.grid--mini) .grid__item:nth-child(4n-4) {
margin-right: 0; } margin-right: 0; }
.grid:not(.mini) .grid-item:nth-child(4n-4)::after { .grid:not(.grid--mini) .grid__item:nth-child(4n-4)::after {
content: ''; content: '';
clear: both; clear: both;
display: block; } display: block; }
.grid:not(.mini) .grid-item:nth-child(4n-3) { .grid:not(.grid--mini) .grid__item:nth-child(4n-3) {
margin-left: 0; } margin-left: 0; }
.grid:not(.mini).single-row .grid-item:nth-child(1n+5) { .grid:not(.grid--mini)\--single-row .grid-item:nth-child(1n+5) {
display: none; } } display: none; } }
@media (max-width: 799px) and (min-width: 500px) { @media (max-width: 799px) and (min-width: 500px) {
.grid.mini .grid-item { .grid--mini .grid__item {
width: 13.33333%; width: 13.33333%;
box-sizing: border-box; box-sizing: border-box;
margin: 0 2% 4%; } margin: 0 2% 4%; }
.grid.mini .grid-item:nth-child(6n-6) { .grid--mini .grid__item:nth-child(6n-6) {
margin-right: 0; } margin-right: 0; }
.grid.mini .grid-item:nth-child(6n-6)::after { .grid--mini .grid__item:nth-child(6n-6)::after {
content: ''; content: '';
clear: both; clear: both;
display: block; } display: block; }
.grid.mini .grid-item:nth-child(6n-5) { .grid--mini .grid__item:nth-child(6n-5) {
margin-left: 0; } margin-left: 0; }
.grid.mini.single-row .grid-item:nth-child(1n+7) { .grid--mini--single-row .grid-item:nth-child(1n+7) {
display: none; } display: none; }
.grid:not(.mini) .grid-item { .grid:not(.grid--mini) .grid__item {
width: 30.66667%; width: 30.66667%;
box-sizing: border-box; box-sizing: border-box;
margin: 0 2% 4%; } margin: 0 2% 4%; }
.grid:not(.mini) .grid-item:nth-child(3n-3) { .grid:not(.grid--mini) .grid__item:nth-child(3n-3) {
margin-right: 0; } margin-right: 0; }
.grid:not(.mini) .grid-item:nth-child(3n-3)::after { .grid:not(.grid--mini) .grid__item:nth-child(3n-3)::after {
content: ''; content: '';
clear: both; clear: both;
display: block; } display: block; }
.grid:not(.mini) .grid-item:nth-child(3n-2) { .grid:not(.grid--mini) .grid__item:nth-child(3n-2) {
margin-left: 0; } margin-left: 0; }
.grid:not(.mini).single-row .grid-item:nth-child(1n+4) { .grid:not(.grid--mini)\--single-row .grid-item:nth-child(1n+4) {
display: none; } } display: none; } }
@media (max-width: 499px) { @media (max-width: 499px) {
.grid.mini .grid-item { .grid--mini .grid__item {
width: 30.66667%; width: 30.66667%;
box-sizing: border-box; box-sizing: border-box;
margin: 0 2% 4%; } margin: 0 2% 4%; }
.grid.mini .grid-item:nth-child(3n-3) { .grid--mini .grid__item:nth-child(3n-3) {
margin-right: 0; } margin-right: 0; }
.grid.mini .grid-item:nth-child(3n-3)::after { .grid--mini .grid__item:nth-child(3n-3)::after {
content: ''; content: '';
clear: both; clear: both;
display: block; } display: block; }
.grid.mini .grid-item:nth-child(3n-2) { .grid--mini .grid__item:nth-child(3n-2) {
margin-left: 0; } margin-left: 0; }
.grid.mini.single-row .grid-item:nth-child(1n+4) { .grid--mini--single-row .grid-item:nth-child(1n+4) {
display: none; } display: none; }
.grid:not(.mini) .grid-item { .grid:not(.grid--mini) .grid__item {
width: 48%; width: 48%;
box-sizing: border-box; box-sizing: border-box;
margin: 0 2% 4%; } margin: 0 2% 4%; }
.grid:not(.mini) .grid-item:nth-child(2n-2) { .grid:not(.grid--mini) .grid__item:nth-child(2n-2) {
margin-right: 0; } margin-right: 0; }
.grid:not(.mini) .grid-item:nth-child(2n-2)::after { .grid:not(.grid--mini) .grid__item:nth-child(2n-2)::after {
content: ''; content: '';
clear: both; clear: both;
display: block; } display: block; }
.grid:not(.mini) .grid-item:nth-child(2n-1) { .grid:not(.grid--mini) .grid__item:nth-child(2n-1) {
margin-left: 0; } margin-left: 0; }
.grid:not(.mini).single-row .grid-item:nth-child(1n+5) { .grid:not(.grid--mini)\--single-row .grid-item:nth-child(1n+5) {
display: none; } } display: none; } }
.tiles { .tiles {

22
mopidy_iris/static/app.js
View File

@ -20887,9 +20887,9 @@ var ArtistGrid = function (_React$Component) {
var _this2 = this; var _this2 = this;
if (this.props.artists) { if (this.props.artists) {
var className = "grid artist-grid"; var className = "grid grid--artists";
if (this.props.className) className += ' ' + this.props.className; if (this.props.className) className += ' ' + this.props.className;
if (this.props.single_row) className += ' single-row'; if (this.props.single_row) className += ' grid--single-row';
return _react2.default.createElement( return _react2.default.createElement(
'div', 'div',
@ -21133,15 +21133,15 @@ var GridItem = function (_React$Component) {
return _react2.default.createElement( return _react2.default.createElement(
'div', 'div',
{ className: "grid-item " + this.props.type + "-grid-item", onClick: function onClick(e) { { className: "grid__item grid__item--" + this.props.type, onClick: function onClick(e) {
return _this2.handleClick(e); return _this2.handleClick(e);
}, onContextMenu: function onContextMenu(e) { }, onContextMenu: function onContextMenu(e) {
return _this2.handleContextMenu(e); return _this2.handleContextMenu(e);
} }, } },
_react2.default.createElement(_Thumbnail2.default, { size: 'medium', images: images }), _react2.default.createElement(_Thumbnail2.default, { size: 'medium', className: 'grid__item__thumbnail', images: images }),
_react2.default.createElement( _react2.default.createElement(
'div', 'div',
{ className: 'name' }, { className: 'grid__item__name' },
item.name ? item.name : _react2.default.createElement( item.name ? item.name : _react2.default.createElement(
'span', 'span',
{ className: 'opaque-text' }, { className: 'opaque-text' },
@ -21150,7 +21150,7 @@ var GridItem = function (_React$Component) {
), ),
_react2.default.createElement( _react2.default.createElement(
'div', 'div',
{ className: 'secondary' }, { className: 'grid__item__secondary' },
this.props.show_source_icon ? _react2.default.createElement(_Icon2.default, { name: helpers.sourceIcon(item.uri), type: 'fontawesome', className: 'source' }) : null, this.props.show_source_icon ? _react2.default.createElement(_Icon2.default, { name: helpers.sourceIcon(item.uri), type: 'fontawesome', className: 'source' }) : null,
this.renderSecondary(item) this.renderSecondary(item)
) )
@ -21363,9 +21363,9 @@ var AlbumGrid = function (_React$Component) {
var _this2 = this; var _this2 = this;
if (this.props.albums) { if (this.props.albums) {
var className = "grid album-grid"; var className = "grid grid--albums";
if (this.props.className) className += ' ' + this.props.className; if (this.props.className) className += ' ' + this.props.className;
if (this.props.single_row) className += ' single-row'; if (this.props.single_row) className += ' grid--single-row';
return _react2.default.createElement( return _react2.default.createElement(
'div', 'div',
@ -21483,9 +21483,9 @@ var PlaylistGrid = function (_React$Component) {
if (!this.props.playlists) return null; if (!this.props.playlists) return null;
var className = "grid playlist-grid"; var className = "grid grid--playlists";
if (this.props.className) className += ' ' + this.props.className; if (this.props.className) className += ' ' + this.props.className;
if (this.props.single_row) className += ' single-row'; if (this.props.single_row) className += ' grid--single-row';
return _react2.default.createElement( return _react2.default.createElement(
'div', 'div',
{ className: className }, { className: className },
@ -81180,7 +81180,7 @@ var CategoryGrid = function (_React$Component) {
value: function render() { value: function render() {
if (!this.props.categories) return null; if (!this.props.categories) return null;
var className = "grid category-grid"; var className = "grid grid--categories";
if (this.props.className) className += ' ' + this.props.className; if (this.props.className) className += ' ' + this.props.className;
return _react2.default.createElement( return _react2.default.createElement(
'div', 'div',

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -98,7 +98,7 @@
// Release details // Release details
// These are automatically injected to built HTML // These are automatically injected to built HTML
var build = "1543456773"; var build = "1543962408";
var version = "3.31.2"; var version = "3.31.2";
// Construct the script tag // Construct the script tag

4
src/js/components/AlbumGrid.js
View File

@ -28,9 +28,9 @@ class AlbumGrid extends React.Component{
render(){ render(){
if (this.props.albums){ if (this.props.albums){
var className = "grid album-grid" var className = "grid grid--albums"
if (this.props.className) className += ' '+this.props.className if (this.props.className) className += ' '+this.props.className
if (this.props.single_row) className += ' single-row' if (this.props.single_row) className += ' grid--single-row'
return ( return (
<div className={className}> <div className={className}>

4
src/js/components/ArtistGrid.js
View File

@ -36,9 +36,9 @@ class ArtistGrid extends React.Component{
render(){ render(){
if (this.props.artists){ if (this.props.artists){
var className = "grid artist-grid" var className = "grid grid--artists"
if (this.props.className) className += ' '+this.props.className if (this.props.className) className += ' '+this.props.className
if (this.props.single_row) className += ' single-row' if (this.props.single_row) className += ' grid--single-row'
return ( return (
<div className={className}> <div className={className}>

2
src/js/components/CategoryGrid.js
View File

@ -13,7 +13,7 @@ export default class CategoryGrid extends React.Component{
render(){ render(){
if (!this.props.categories ) return null if (!this.props.categories ) return null
var className = "grid category-grid" var className = "grid grid--categories"
if (this.props.className ) className += ' '+this.props.className if (this.props.className ) className += ' '+this.props.className
return ( return (
<div className={className}> <div className={className}>

8
src/js/components/GridItem.js
View File

@ -108,12 +108,12 @@ export default class GridItem extends React.Component{
} }
return ( return (
<div className={"grid-item "+this.props.type+"-grid-item"} onClick={e => this.handleClick(e)} onContextMenu={e => this.handleContextMenu(e)}> <div className={"grid__item grid__item--"+this.props.type} onClick={e => this.handleClick(e)} onContextMenu={e => this.handleContextMenu(e)}>
<Thumbnail size="medium" images={images} /> <Thumbnail size="medium" className="grid__item__thumbnail" images={images} />
<div className="name"> <div className="grid__item__name">
{item.name ? item.name : <span className="opaque-text">{item.uri}</span>} {item.name ? item.name : <span className="opaque-text">{item.uri}</span>}
</div> </div>
<div className="secondary"> <div className="grid__item__secondary">
{this.props.show_source_icon ? <Icon name={helpers.sourceIcon(item.uri)} type="fontawesome" className="source" /> : null} {this.props.show_source_icon ? <Icon name={helpers.sourceIcon(item.uri)} type="fontawesome" className="source" /> : null}
{this.renderSecondary(item)} {this.renderSecondary(item)}
</div> </div>

4
src/js/components/PlaylistGrid.js
View File

@ -29,9 +29,9 @@ class PlaylistGrid extends React.Component{
render(){ render(){
if (!this.props.playlists ) return null if (!this.props.playlists ) return null
var className = "grid playlist-grid" var className = "grid grid--playlists"
if (this.props.className) className += ' '+this.props.className if (this.props.className) className += ' '+this.props.className
if (this.props.single_row) className += ' single-row' if (this.props.single_row) className += ' grid--single-row'
return ( return (
<div className={className}> <div className={className}>
{ {

91
src/scss/components/_grid.scss
View File

@ -1,27 +1,28 @@
.grid { .grid {
.grid-item-wrapper { &__item {
display: inline-block;
}
.grid-item {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
border-bottom: 0; border-bottom: 0;
position: relative; position: relative;
.thumbnail { &__wrapper {
display: inline-block;
}
&__thumbnail {
@include animate(); @include animate();
max-width: 100%; max-width: 100%;
} }
.name { &__name {
@include one_line_text; @include one_line_text;
padding-top: 8px; padding-top: 12px;
font-size: 15px;
} }
.secondary { &__secondary {
@include one_line_text; @include one_line_text;
padding-top: 2px; padding-top: 2px;
color: colour(secondary_grey); color: colour(secondary_grey);
@ -34,7 +35,7 @@
&:hover{ &:hover{
cursor: pointer; cursor: pointer;
.thumbnail { &__thumbnail {
opacity: 0.75; opacity: 0.75;
} }
} }
@ -47,11 +48,11 @@
} }
} }
&.category-grid { &--categories {
.grid-item { .grid__item {
position: relative; position: relative;
.name { &__name {
position: absolute; position: absolute;
bottom: 15%; bottom: 15%;
left: 0; left: 0;
@ -64,8 +65,8 @@
} }
@include responsive(null, $bp_wide){ @include responsive(null, $bp_wide){
.grid-item { .grid__item {
.name { &__name {
font-size: 16px; font-size: 16px;
} }
} }
@ -73,21 +74,21 @@
} }
@include responsive(null, 1900px){ @include responsive(null, 1900px){
&.mini { &--mini {
.grid-item { .grid__item {
@include grid_item(3) @include grid_item(3)
} }
&.single-row { &--single-row {
.grid-item:nth-child(1n+4){ .grid-item:nth-child(1n+4){
display: none; display: none;
} }
} }
} }
&:not(.mini){ &:not(.grid--mini){
.grid-item { .grid__item {
@include grid_item(5 ) @include grid_item(5 )
} }
&.single-row { &--single-row {
.grid-item:nth-child(1n+6){ .grid-item:nth-child(1n+6){
display: none; display: none;
} }
@ -96,21 +97,21 @@
} }
@include responsive(1899px, 1200px){ @include responsive(1899px, 1200px){
&.mini { &--mini {
.grid-item { .grid__item {
@include grid_item(2 ) @include grid_item(2 )
} }
&.single-row { &--single-row {
.grid-item:nth-child(1n+3){ .grid-item:nth-child(1n+3){
display: none; display: none;
} }
} }
} }
&:not(.mini){ &:not(.grid--mini){
.grid-item { .grid__item {
@include grid_item(4 ) @include grid_item(4 )
} }
&.single-row { &--single-row {
.grid-item:nth-child(1n+5){ .grid-item:nth-child(1n+5){
display: none; display: none;
} }
@ -119,21 +120,21 @@
} }
@include responsive(1199px, 800px){ @include responsive(1199px, 800px){
&.mini { &--mini {
.grid-item { .grid__item {
@include grid_item(2 ) @include grid_item(2 )
} }
&.single-row { &--single-row {
.grid-item:nth-child(1n+3){ .grid-item:nth-child(1n+3){
display: none; display: none;
} }
} }
} }
&:not(.mini){ &:not(.grid--mini){
.grid-item { .grid__item {
@include grid_item(4 ) @include grid_item(4 )
} }
&.single-row { &--single-row {
.grid-item:nth-child(1n+5){ .grid-item:nth-child(1n+5){
display: none; display: none;
} }
@ -142,21 +143,21 @@
} }
@include responsive(799px, 500px){ @include responsive(799px, 500px){
&.mini{ &--mini{
.grid-item { .grid__item {
@include grid_item(6, 2%, 4% ) @include grid_item(6, 2%, 4% )
} }
&.single-row { &--single-row {
.grid-item:nth-child(1n+7){ .grid-item:nth-child(1n+7){
display: none; display: none;
} }
} }
} }
&:not(.mini){ &:not(.grid--mini){
.grid-item { .grid__item {
@include grid_item(3, 2%, 4% ) @include grid_item(3, 2%, 4% )
} }
&.single-row { &--single-row {
.grid-item:nth-child(1n+4){ .grid-item:nth-child(1n+4){
display: none; display: none;
} }
@ -165,21 +166,21 @@
} }
@include responsive(499px){ @include responsive(499px){
&.mini{ &--mini{
.grid-item { .grid__item {
@include grid_item(3, 2%, 4% ) @include grid_item(3, 2%, 4% )
} }
&.single-row { &--single-row {
.grid-item:nth-child(1n+4){ .grid-item:nth-child(1n+4){
display: none; display: none;
} }
} }
} }
&:not(.mini){ &:not(.grid--mini){
.grid-item { .grid__item {
@include grid_item(2, 2%, 4% ) @include grid_item(2, 2%, 4% )
} }
&.single-row { &--single-row {
.grid-item:nth-child(1n+5){ .grid-item:nth-child(1n+5){
display: none; display: none;
} }

6
src/scss/components/_sidebar.scss
View File

@ -52,13 +52,13 @@ aside{
a { a {
@include gradient_overlay(3px); @include gradient_overlay(3px);
font-family: "Overpass"; font-family: "Overpass";
font-weight: 500; font-weight: 600;
font-size: 14px; font-size: 14px;
color: colour(white); color: colour(white);
text-decoration: none; text-decoration: none;
display: block; display: block;
padding: 10px 10px 8px; padding: 12px 10px 10px;
margin: 0 16px; margin: 0 18px;
border-radius: 3px; border-radius: 3px;
.light-theme & { .light-theme & {