1
0
Fork 0
mirror of https://github.com/GuerillaStudio/now-playing synced 2024-12-30 01:41:56 +00:00
This commit is contained in:
Tixie 2019-11-27 18:06:26 +01:00
parent 1e5b2d56f5
commit dd4b2c71ad
214 changed files with 3303 additions and 102 deletions

249
.csscomb.json Normal file
View file

@ -0,0 +1,249 @@
{
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": false,
"quotes": "double",
"space-after-colon": " ",
"space-before-combinator": " ",
"space-after-combinator": " ",
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": "\n",
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"strip-spaces": true,
"sort-order": [
[
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"display",
"visibility",
"-moz-appearance",
"-webkit-appearance",
"appearance",
"flex-direction",
"flex-wrap",
"flex-flow",
"justify-content",
"align-items",
"align-content",
"flex-grow",
"flex-shrink",
"flex-basis",
"flex",
"order",
"align-self",
"flex-pack",
"flex-align",
"flex-item-align",
"float",
"clear",
"overflow",
"overflow-x",
"overflow-y",
"-webkit-overflow-scrolling",
"clip",
"box-sizing",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"min-width",
"min-height",
"max-width",
"max-height",
"width",
"height",
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"border",
"border-spacing",
"border-collapse",
"border-width",
"border-style",
"border-color",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-right",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"border-image",
"border-image-source",
"border-image-slice",
"border-image-width",
"border-image-outset",
"border-image-repeat",
"border-top-image",
"border-right-image",
"border-bottom-image",
"border-left-image",
"border-corner-image",
"border-top-left-image",
"border-top-right-image",
"border-bottom-right-image",
"border-bottom-left-image",
"background",
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
"background-color",
"background-image",
"background-attachment",
"background-position",
"background-position-x",
"background-position-y",
"background-clip",
"background-origin",
"background-size",
"background-repeat",
"box-decoration-break",
"box-shadow",
"fill",
"color",
"table-layout",
"caption-side",
"empty-cells",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image",
"quotes",
"content",
"counter-increment",
"counter-reset",
"-ms-writing-mode",
"vertical-align",
"text-align",
"text-align-last",
"text-decoration",
"text-emphasis",
"text-emphasis-position",
"text-emphasis-style",
"text-emphasis-color",
"text-indent",
"-ms-text-justify",
"text-justify",
"text-outline",
"text-transform",
"text-wrap",
"-ms-text-overflow",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"text-shadow",
"white-space",
"word-spacing",
"-ms-word-wrap",
"word-wrap",
"-ms-word-break",
"word-break",
"-moz-tab-size",
"-o-tab-size",
"tab-size",
"-webkit-hyphens",
"-moz-hyphens",
"hyphens",
"letter-spacing",
"font",
"font-display",
"font-weight",
"font-style",
"font-variant",
"font-size-adjust",
"font-stretch",
"font-size",
"font-family",
"src",
"line-height",
"opacity",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
"-ms-interpolation-mode",
"-webkit-filter",
"-ms-filter",
"filter",
"resize",
"cursor",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"transition",
"transition-delay",
"transition-timing-function",
"transition-duration",
"transition-property",
"transform",
"transform-origin",
"animation",
"animation-name",
"animation-duration",
"animation-play-state",
"animation-timing-function",
"animation-delay",
"animation-iteration-count",
"animation-direction",
"pointer-events",
"unicode-bidi",
"direction",
"columns",
"column-span",
"column-width",
"column-count",
"column-fill",
"column-gap",
"column-rule",
"column-rule-width",
"column-rule-style",
"column-rule-color",
"break-before",
"break-inside",
"break-after",
"page-break-before",
"page-break-inside",
"page-break-after",
"orphans",
"widows",
"-ms-zoom",
"zoom",
"max-zoom",
"min-zoom",
"user-zoom",
"orientation"
]
]
}

View file

@ -0,0 +1,64 @@
// --------------------------------------------------------------
// == mixins */
// --------------------------------------------------------------
@mixin flow($font-size, $bf: $base-font, $lh: $line-height) {
$lh-value: $base-font * $lh;
$coeff: ceil($font-size / $lh-value);
$new-lh: ($lh-value / $font-size) * $coeff;
$margin-bottom: $new-lh / $coeff;
margin-bottom: $margin-bottom + em;
font-size: $font-size / 10 + rem;
line-height: $new-lh;
}
/* Glitch
-------------------------------------------------------------- */
@mixin textGlitch($name, $intensity, $background, $highlightColor1, $highlightColor2, $width, $height) {
position: relative;
$steps: $intensity;
// Ensure the @keyframes are generated at the root level
@at-root {
// We need two different ones
@for $i from 1 through 2 {
@keyframes #{$name}-anim-#{$i} {
@for $i from 0 through $steps {
#{percentage($i*(1/$steps)) - 60} {
clip: rect(
random($height)+px,
$width+px,
random($height)+px,
0
);
}
}
}
}
}
&:before,
&:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
background: $background;
clip: rect(0, 0, 0, 0);
}
&:after {
left: 2px;
text-shadow: -1px 0 $highlightColor1;
animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
}
&:before {
left: -2px;
text-shadow: 2px 0 $highlightColor2;
animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
}
}

View file

@ -0,0 +1,48 @@
/* ----------------------------------------------------------- */
/* == reset */
/* ----------------------------------------------------------- */
html {
box-sizing: border-box;
}
*,
*:after,
*:before {
box-sizing: inherit;
}
body {
margin: 0;
}
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
video,
svg {
max-width: 100%;
}
img {
height: auto;
border-style: none;
vertical-align: middle;
}
/* fix input no style on Safari */
input[type="search"] {
-webkit-appearance: textfield;
}
button,
input,
select,
textarea {
font: inherit;
}

View file

@ -0,0 +1,28 @@
/* ----------------------------------------------------------- */
/* == typography */
/* ----------------------------------------------------------- */
html {
font-size: 62.5%;
/* IE9-11 calculation fix */
font-size: calc(1em * .625);
}
body {
font-size: $base-font / 10 + em;
line-height: $line-height;
}
p,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
label,
textarea,
caption {
margin: 0 0 ($line-height + em) 0;
}

View file

@ -0,0 +1,29 @@
/* ----------------------------------------------------------- */
/* == helpers */
/* ----------------------------------------------------------- */
/* screen readers
-------------------------------------------------------------- */
/* Hide only visually, but have it available for screen readers (from HTML5 Boilerplate) */
.visually-hidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
border: 0;
}
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
position: static;
overflow: visible;
clip: auto;
margin: 0;
width: auto;
height: auto;
}

View file

@ -0,0 +1,27 @@
/* ----------------------------------------------------------- */
/* == layout */
/* ----------------------------------------------------------- */
/* BFC to the rescue */
.mod {
overflow: hidden;
}
.clear,
.line,
.row {
clear: both;
}
/* blocks that must contain floats */
.clearfix:after,
.line:after,
.mod:after {
display: table;
clear: both;
content: "";
}
.inbl {
display: inline-block;
}

View file

@ -0,0 +1,124 @@
// important: nth-child(n) is used to keep same specificity between grid (equal and unequal)
.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
}
.grid > * {
display: block; /* IE fix */
flex: 0 0 auto;
}
// equal grid
@mixin grid($number:$number, $gutter:$default-gutter, $mb:$gutter) {
// equal grid no gutter
@if $gutter == 0 {
& {
margin-bottom: -$mb;
}
& > *:nth-child(n) {
margin-bottom: $mb;
width: calc(100% * 1 / #{$number} - .01px);
}
}
// one column mode
@if $number == 1 {
& {
margin-bottom: -$mb;
margin-left: 0;
}
& > *:nth-child(n) {
margin-bottom: $mb;
margin-left: 0;
width: 100%;
}
}
// with gutter (avoid percentage since it doesn't work well with margin bottom)
@if $number>1 and $gutter>0 {
& {
margin-bottom: -$mb; /* avoid unwanted margin on last line */
margin-left: -$gutter;
}
& > *:nth-child(n) {
margin-bottom: $mb;
margin-left: $gutter;
width: calc(100% * 1 / #{$number} - #{$gutter} - .01px); // .01px = $bugfix IE
}
}
}
// unequal grid
@mixin unequalGrid($column1, $column2, $gutter:$default-gutter, $mb:$gutter) {
// no gutter (when gutter = 0)
@if $gutter == 0 {
& > *:nth-child(odd) {
width: calc(#{$size});
$size : ($column1 * 100%) / ($column1 + $column2);
}
& > *:nth-child(even) {
width: calc(#{$size});
$size : ($column2 * 100%) / ($column1 + $column2);
}
}
// with gutter
@else {
$g : $gutter / 2;
&>* {
margin-bottom: $mb;
}
& > *:nth-child(odd) {
$size : ($column1 * 100%) / ($column1 + $column2);
width: calc(#{$size} - #{$g} - .01px); // .01px = $bugfix IE
}
& > *:nth-child(even) {
$size : ($column2 * 100%) / ($column1 + $column2);
margin-left: $gutter;
width: calc(#{$size} - #{$g} - .01px); // .01px = $bugfix IE
}
}
}
/* vertical align
-------------------------------------------------------------- */
[class*="grid-top"] {
align-items: flex-start;
}
[class*="grid-bottom"] {
align-items: flex-end;
}
[class*="grid-center"] {
align-items: center;
}
/* helpers
-------------------------------------------------------------- */
[class*="grid-"].grid-noMargin > * {
margin-bottom: 0;
}

View file

@ -0,0 +1,84 @@
/* ----------------------------------------------------------- */
/* == rwd */
/* ----------------------------------------------------------- */
/* responsive iframe http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/ */
.responsive-iframe {
position: relative;
overflow: hidden;
padding-top: 3rem;
padding-bottom: 56.25%;
height: 0;
}
.responsive-iframe iframe,
.responsive-iframe object,
.responsive-iframe embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* utilities
-------------------------------------------------------------- */
.hidden {
display: none;
}
@media (min-width: ($large + 1)) {
[class*="-l+"][class*="hidden-"]:not([class*="up"]) {
display: none !important;
}
}
@media (min-width: ($medium + 1)) and (max-width: $large) {
[class*="-l"][class*="hidden-"]:not([class*="up"]) {
display: none !important;
}
}
@media (min-width: ($small + 1)) and (max-width: $medium) {
[class*="-m"][class*="hidden-"]:not([class*="up"]) {
display: none !important;
}
}
@media (min-width: ($xsmall + 1)) and (max-width: $small) {
[class*="-s"][class*="hidden-"]:not([class*="up"]) {
display: none !important;
}
}
@media ( max-width: $xsmall) {
[class*="-xs"][class*="hidden-"]:not([class*="up"]) {
display: none !important;
}
}
@media ( min-width: $small) {
.hidden-s-up {
display: none !important;
}
}
@media ( min-width: $xsmall) {
.hidden-xs-up {
display: none !important;
}
}
/* xsmall
-------------------------------------------------------------- */
@media (max-width: $xsmall) {
.mod {
display: block !important;
float: none !important;
width: auto !important;
}
}

View file

@ -0,0 +1,41 @@
/* ----------------------------------------------------------- */
/* == debug */
/* ----------------------------------------------------------- */
/*
* Generates a random color
*
*/
@mixin randomColor {
$red: round(random()*222);
$green: round(random()*222);
$blue: round(random()*222);
}
/*
* Easily debug an element
*
*/
@mixin debug() {
@include randomColor;
border: .3rem dotted rgb($red, $green, $blue);
background-color: rgba($red, $green, $blue, 30%);
}
/*
* Display grid for vertical rhythm
*
*/
@mixin debug-rythm($bh: $line-height) {
background: linear-gradient(to bottom, #ba9b9a .1em, transparent .1em ) !important;
background-size: 100% ($bh + em) !important;
}
.debug-rythm {
@include debug-rythm();
}

View file

@ -0,0 +1,46 @@
/* ----------------------------------------------------------- */
/* == alignment */
/* ----------------------------------------------------------- */
/* block
-------------------------------------------------------------- */
.left {
float: left;
}
.right {
float: right;
}
.center {
margin-right: auto;
margin-left: auto;
}
/* text/inline
-------------------------------------------------------------- */
.txtright {
text-align: right;
}
.txtcenter {
text-align: center;
}
.txtleft {
text-align: left;
}
.vtop {
vertical-align: top;
}
.vbottom {
vertical-align: bottom;
}
.vmiddle {
vertical-align: middle;
}

View file

@ -0,0 +1,11 @@
/* ----------------------------------------------------------- */
/* == colors */
/* ----------------------------------------------------------- */
.color-primary {
color: $color-primary;
}
.color-secondary {
color: $color-secondary;
}

View file

@ -0,0 +1,179 @@
/* ----------------------------------------------------------- */
/* == spacings */
/* ----------------------------------------------------------- */
.ma0 {
margin: 0;
}
.pa0 {
padding: 0;
}
.ma1 {
margin: 1rem;
}
.ma2 {
margin: 2rem;
}
.ma3 {
margin: 3rem;
}
.pa1 {
padding: 1rem;
}
.pa2 {
padding: 2rem;
}
.pa3 {
padding: 3rem;
}
.mt0 {
margin-top: 0;
}
.mt1 {
margin-top: 1rem;
}
.mt2 {
margin-top: 2rem;
}
.mt3 {
margin-top: 3rem;
}
.mt4 {
margin-top: 4rem;
}
.mt5 {
margin-top: 5rem;
}
.mr0 {
margin-right: 0;
}
.mr1 {
margin-right: 1rem;
}
.mr2 {
margin-right: 2rem;
}
.mr3 {
margin-right: 3rem;
}
.mb0 {
margin-bottom: 0;
}
.mb1 {
margin-bottom: 1rem;
}
.mb2 {
margin-bottom: 2rem;
}
.mb3 {
margin-bottom: 3rem;
}
.mb4 {
margin-bottom: 4rem;
}
.mb5 {
margin-bottom: 5rem;
}
.ml0 {
margin-left: 0;
}
.ml1 {
margin-left: 1rem;
}
.ml2 {
margin-left: 2rem;
}
.ml3 {
margin-left: 3rem;
}
.pt0 {
padding-top: 0;
}
.pt1 {
padding-top: 1rem;
}
.pt2 {
padding-top: 2rem;
}
.pt3 {
padding-top: 3rem;
}
.pr0 {
padding-right: 0;
}
.pr1 {
padding-right: 1rem;
}
.pr2 {
padding-right: 2rem;
}
.pr3 {
padding-right: 3rem;
}
.pb0 {
padding-bottom: 0;
}
.pb1 {
padding-bottom: 1rem;
}
.pb2 {
padding-bottom: 2rem;
}
.pb3 {
padding-bottom: 3rem;
}
.pl0 {
padding-left: 0;
}
.pl1 {
padding-left: 1rem;
}
.pl2 {
padding-left: 2rem;
}
.pl3 {
padding-left: 3rem;
}

View file

@ -0,0 +1,7 @@
/* ----------------------------------------------------------- */
/* == state */
/* ----------------------------------------------------------- */
.is-disabled {
cursor: not-allowed;
}

View file

@ -0,0 +1,45 @@
/* ----------------------------------------------------------- */
/* == text */
/* ----------------------------------------------------------- */
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
/* font size
-------------------------------------------------------------- */
.txtsmaller {
@include flow($base-font - 4);
}
.txtsmall {
@include flow($base-font - 2);
}
.txtbig {
@include flow($base-font + 2);
}
.txtbigger {
@include flow($base-font + 4);
}
/* transformations
-------------------------------------------------------------- */
.uppercase {
text-transform: uppercase;;
}
.capitalize {
text-transform: capitalize;
}
.lowercase {
text-transform: lowercase;
}

View file

@ -0,0 +1,18 @@
/* ----------------------------------------------------------- */
/* == width */
/* ----------------------------------------------------------- */
.w10 { width: 10%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w33 { width: 33.3333%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w66 { width: 66.6666%; }
.w70 { width: 70%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }

View file

@ -0,0 +1,122 @@
/**
* Button Module
* namespace : .btn
*/
/* ----------------------------------------------------------- */
/* == configuration */
/* ----------------------------------------------------------- */
$btn-primary: $color-secondary;
$btn-secondary: rgba($color-light-text, .05);
$btn-success: #1cb841;
$btn-danger: #c53a3a;
$btn-hover: 5%;
$btn-radius: .2rem;
/* ----------------------------------------------------------- */
/* == module */
/* ----------------------------------------------------------- */
.btn {
display: inline-block;
padding: 1.5rem 2.5rem;
border: none;
border-radius: $btn-radius;
background-color: $btn-primary;
box-shadow: none;
color: #fff;
vertical-align: middle;
text-align: center;
text-decoration: none !important;
font-size: 2rem;
line-height: normal;
cursor: pointer;
transition: background-color .4s;
}
.btn:active,
.btn:focus {
outline: none;
box-shadow: $focus-ring;
}
/* colors
-------------------------------------------------------------- */
.btn--primary,
.btn--primary:link,
.btn--primary:visited {
background-color: rgba($btn-primary, .6);
color: #fff;
}
.btn--primary:hover,
.btn--primary:active,
.btn--primary:focus {
background-color: $btn-primary;
}
.btn--secondary,
.btn--secondary:link,
.btn--secondary:visited {
background-color: $btn-secondary;
color: #fff;
}
.btn--secondary:hover,
.btn--secondary:active,
.btn--secondary:focus {
background-color: rgba($color-light-text, .1);
}
.btn--secondary.disabled,
.btn--secondary.disabled:hover,
.btn--secondary.disabled:active,
.btn--secondary.disabled:focus {
background-color: rgba($color-light-text, .05);
box-shadow: none;
opacity: .5;
cursor: not-allowed;
}
.btn--danger,
.btn--danger:link,
.btn--danger:visited {
background-color: $btn-danger;
color: #fff;
}
.btn--danger:hover,
.btn--danger:active,
.btn--danger:focus {
background-color: darken($btn-danger, $btn-hover);
}
.btn--link,
.btn--link:link,
.btn--link:visited {
display: inline;
padding: 0;
border: none;
background: none;
color: $color-light-text;
font-size: 1em;
cursor: pointer;
}
.btn--link:hover,
.btn--link:active,
.btn--link:focus {
text-decoration: underline;
}
/* size
-------------------------------------------------------------- */
.btn--big {
padding: 2rem 4rem;
}

View file

@ -0,0 +1,214 @@
/**
* Form Module
* Namespace : .form
*/
/* ----------------------------------------------------------- */
/* == configuration */
/* ----------------------------------------------------------- */
$input-border-radius: .3rem;
$input-border: none;
$input-background-color: rgba(#fff, .07);
$input-hover: 5%;
$input-placeholder-color: #c4c1be;
$input-error: #ff3860;
$input-required: #ff3860;
/* ----------------------------------------------------------- */
/* == module */
/* ----------------------------------------------------------- */
/* placeholders
-------------------------------------------------------------- */
input::-webkit-input-placeholder {
color: $input-placeholder-color;
}
input:-moz-placeholder {
color: $input-placeholder-color;
}
textarea::-webkit-input-placeholder {
color: $input-placeholder-color;
}
textarea:-moz-placeholder {
color: $input-placeholder-color;
}
/* block form
-------------------------------------------------------------- */
.f-group {
margin-bottom: 3rem;
}
label,
.label {
display: block;
margin-top: 0;
margin-bottom: 1rem;
vertical-align: middle;
font-weight: 600;
cursor: pointer;
}
/* inline form
-------------------------------------------------------------- */
.f-inline label,
.f-inline .label {
display: inline-block;
margin: 0 1rem;
}
.f-inline {
display: inline-block;
}
.f-inline input,
.f-inline .btn {
height: 4rem;
}
.f-inline .btn {
vertical-align: middle;
}
/* basics style
-------------------------------------------------------------- */
fieldset {
margin: 2.5rem 0;
padding: 1em;
border: .1rem solid rgba(#fff, .1);
}
legend {
padding-right: 1rem;
padding-left: 1rem;
}
input,
select,
label,
.label {
vertical-align: middle;
}
select {
margin: 0;
border: .1rem solid #ccc;
background-color: #fff;
}
textarea {
padding: .4em;
min-width: 32rem;
min-height: 8em;
vertical-align: top;
resize: vertical;
}
input {
padding: 1em 1.3rem;
max-width: 32rem;
width: 100%;
border: $input-border;
border-radius: $input-border-radius;
background: $input-background-color;
color: #fff;;
}
textarea:active,
textarea:focus,
select:active,
select:focus,
input:active,
input:focus {
outline: none;
box-shadow: $focus-ring;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
display: inline-block;
margin-right: 1rem;
vertical-align: baseline;
}
input[type="radio"],
input[type="checkbox"] {
padding: 0;
width: inherit;
}
/* autogrid
-------------------------------------------------------------- */
[class^="f-grid"] {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
}
[class^="f-grid"] > * {
display: flex;
flex-direction: column;
flex: 1 0 0;
margin-left: 2rem;
}
[class^="f-grid"] > *:first-child {
margin-left: 0;
}
[class^="f-grid"] input {
max-width: 100%;
}
/* size
-------------------------------------------------------------- */
.f-size-1 {
max-width: 10rem;
}
.f-size-2 {
max-width: 20rem;
}
.f-size-3 {
max-width: 30rem;
}
.f-size-4 {
max-width: 40rem;
}
.f-size-5 {
max-width: 50rem;
}
.f-size-full {
max-width: 100%;
}
/* errors
-------------------------------------------------------------- */
.f-required {
color: $input-error;
font-weight: bold;
}
.f-error input {
margin-bottom: .8rem;
border: .1rem solid $input-error;
}
.f-error-message {
color: $input-error;
}

View file

@ -0,0 +1,42 @@
/**
* Notification module
* Namespace : .notif
*/
/* ----------------------------------------------------------- */
/* == configuration */
/* ----------------------------------------------------------- */
$notif-success: #00d1b2;
$notif-warning: #ffdd57;
$notif-error: #ff3860;
$notif-info: $color-info;
/* ----------------------------------------------------------- */
/* == module */
/* ----------------------------------------------------------- */
.notif {
padding: 1em;
border-radius: 4px;
}
.notif--success {
background-color: $notif-success;
color: #fff;
}
.notif--warning {
background-color: $notif-warning;
color: #000;
}
.notif--error {
background-color: $notif-error;
color: #fff;
}
.notif--info {
background-color: $notif-info;
color: #fff;
}

View file

@ -0,0 +1,34 @@
/**
* Pagination Module
* namespace : .pagination
*/
/* ----------------------------------------------------------- */
/* == module */
/* ----------------------------------------------------------- */
.pagination {
display: inline-block;
padding-top: 10rem;
width: 100%;
border-radius: .4rem;
background-color: $color-primary;
}
.pagination > .container {
max-width: 68rem;
width: 80%;
}
.pagination__side {
display: flex;
margin-top: 2rem;
margin-right: -1rem;
margin-left: -1rem;
}
.pagination__side > * {
margin-right: 1rem;
margin-left: 1rem;
width: 50%;
}

View file

@ -0,0 +1,71 @@
/**
* Radiobox Module
* Namespace : .radiobox
*/
/* ----------------------------------------------------------- */
/* == module */
/* ----------------------------------------------------------- */
.radiobox {
display: inline-flex;
padding: .2rem;
max-width: 32rem;
width: 100%;
border: $input-border;
border-radius: $input-border-radius;
}
.radiobox--full {
max-width: 100%;
width: 100%;
}
.radiobox input {
position: absolute;
left: -9999px;
}
.radiobox input + label {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
margin: 0;
padding: 1rem 1.8rem;
min-height: 4rem;
width: 50%;
text-align: center;
font-weight: normal;
transition: all .05s ease-in;
}
.radiobox input:first-child + label {
border-radius: ($input-border-radius - .2rem) 0 0 ($input-border-radius - .2rem);
}
.radiobox label:last-child {
border-radius: 0 ($input-border-radius - .2rem) ($input-border-radius - .2rem) 0;
}
/* Checked state */
.radiobox input:checked + label {
background-color: $color-primary;
color: #fff;
}
/* Focus state */
.radiobox input:focus + label {
box-shadow: $focus-ring;
}
.radiobox:active,
.radiobox:focus-within {
box-shadow: $focus-ring;
}
.radiobox:focus-within input:focus + label {
box-shadow: none;
}

View file

@ -0,0 +1,49 @@
/**
* Radiobox Module
* Namespace: .radiobox
*/
/* ----------------------------------------------------------- */
/* == module */
/* ----------------------------------------------------------- */
.switch[type="checkbox"] {
position: relative;
margin-top: -.05em;
width: 4rem;
height: 2rem;
outline: none;
border: $input-border;
border-radius: 42rem;
background-color: white;
box-shadow: inset -2rem 0 0 .1rem rgba(192, 192, 192, .5);
transition: .2s;
appearance: none;
}
.switch[type="checkbox"]::-ms-check {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; // IE 8
}
/* Checked state
-------------------------------------------------------------- */
.switch[type="checkbox"]:checked {
border-color: $color-primary;
box-shadow: inset 2rem 0 0 .1rem rgba($color-primary, .7);
}
/* Focus state
-------------------------------------------------------------- */
.switch[type="checkbox"]:active,
.switch[type="checkbox"]:focus {
box-shadow: inset -2rem 0 0 .1rem rgba(192, 192, 192, .5), $focus-ring;
}
.switch[type="checkbox"]:checked:active,
.switch[type="checkbox"]:checked:focus {
box-shadow: inset 2rem 0 0 .1rem rgba($color-primary, .7), $focus-ring;
}

View file

@ -0,0 +1,56 @@
/**
* Table Module
* namespace : .table
*/
/* ----------------------------------------------------------- */
/* == configuration */
/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */
/* == module */
/* ----------------------------------------------------------- */
.table {
max-width: 100%;
width: 100%;
border: .1rem solid #cbcbcb;
border-spacing: 0;
border-collapse: collapse /* remove spacing between table cells */;
table-layout: fixed /* http://css-tricks.com/fixing-tables-long-strings */;
}
.table caption {
padding: 1em 0;
color: #000;
text-align: center;
font: italic 85%/1 arial, sans-serif;
}
.table td,
.table th {
overflow: hidden;
margin: 0;
padding: .5em 1em;
border-width: 0 0 0 .1rem;
border-left: .1rem solid #cbcbcb;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
font-size: inherit;
}
.table td:first-child,
.table th:first-child {
border-left-width: 0;
}
.table thead {
background: #e0e0e0;
color: #000;
vertical-align: bottom;
text-align: left;
}

View file

@ -0,0 +1,112 @@
/**
* Tooltip Module
* namespace : .tooltip
*/
/* ----------------------------------------------------------- */
/* == configuration */
/* ----------------------------------------------------------- */
$tooltip-bg: rgba($color-tertiary, .6);
$tooltip-color: #fff;
$tooltip-radius: .2rem;
/* ----------------------------------------------------------- */
/* == module */
/* ----------------------------------------------------------- */
.tooltip {
position: relative;
// cursor: help;
}
.tooltip:hover::after,
.tooltip:focus::after {
position: absolute;
bottom: calc(100% + 1em);
left: 50%;
padding: .5em 1em;
border-radius: $tooltip-radius;
background: $tooltip-bg;
color: $tooltip-color;
content: attr(data-tooltip);
white-space: nowrap;
font-size: 1.4rem;
transform: translateX(-50%);
}
.tooltip:hover::before,
.tooltip:focus::before {
position: absolute;
bottom: calc(100% + .45em);
left: 50%;
display: block;
border: solid;
border-width: .4em .4em 0 .4em;
border-color: $tooltip-bg transparent;
content: "";
transform: translateX(-50%);
}
/* Right version
-------------------------------------------------------------- */
.tooltip--right:hover::before,
.tooltip--right:focus::before {
bottom: 50%;
left: calc(100% + .65em);
border-width: .4em .4em .4em 0;
border-color: transparent $tooltip-bg;
transform: translateY(50%);
}
.tooltip--right:hover::after,
.tooltip--right:focus::after {
bottom: 50%;
left: calc(100% + .9em);
transform: translateY(50%);
}
/* Left version
-------------------------------------------------------------- */
.tooltip--left:hover::before,
.tooltip--left:focus::before {
right: calc(100% + .65em);
bottom: 50%;
left: inherit;
border-width: .4em 0 .4em .4em;
border-color: transparent $tooltip-bg;
transform: translateY(50%);
}
.tooltip--left:hover::after,
.tooltip--left:focus::after {
right: calc(100% + .9em);
bottom: 50%;
left: inherit;
transform: translateY(50%);
}
/* Bottom version
-------------------------------------------------------------- */
.tooltip--bottom:hover::before,
.tooltip--bottom:focus::before {
top: calc(100% + .4em);
bottom: inherit;
border-width: 0 .4em .4rem .4em;
border-color: $tooltip-bg transparent;
transform: translateX(-50%);
}
.tooltip--bottom:hover::after,
.tooltip--bottom:focus::after {
top: calc(100% + 1rem);
bottom: inherit;
transform: translateX(-50%);
}

View file

@ -0,0 +1,31 @@
/* ----------------------------------------------------------- */
/* == custom fonts */
/* ----------------------------------------------------------- */
@font-face {
font-display: swap;
font-weight: normal;
font-family: "Source Sans Pro";
src: local("Source Sans Pro"), local("SourceSansPro-Regular"),
url("/fonts/sourcesanspro-regular-webfont.woff2") format("woff2"),
url("/fonts/sourcesanspro-regular-webfont.woff") format("woff");
}
@font-face {
font-display: swap;
font-weight: 600;
font-family: "Source Sans Pro";
src: local("Source Sans Pro Semibold"), local("SourceSansPro-Semibold"),
url("/fonts/sourcesanspro-semibold-webfont.woff2") format("woff2"),
url("/fonts/sourcesanspro-semibold-webfont.woff") format("woff");
}
@font-face {
font-display: swap;
font-weight: 900;
font-family: "Source Sans Pro";
src: local("Source Sans Pro Black"), local("SourceSansPro-Black"),
url("/fonts/sourcesanspro-black-webfont.woff2") format("woff2"),
url("/fonts/sourcesanspro-black-webfont.woff") format("woff");
}

View file

@ -0,0 +1,3 @@
/* ----------------------------------------------------------- */
/* == icons */
/* ----------------------------------------------------------- */

View file

@ -0,0 +1,49 @@
/* ----------------------------------------------------------- */
/* == grids */
/* ----------------------------------------------------------- */
$grid-gutter: 2rem;
$grid-mb: 2rem;
/**
* Some grid examples
*/
.grid-1 {
@include grid(1, $grid-gutter, $grid-mb);
}
.grid-2 {
@include grid(2, $grid-gutter);
}
.grid-2-noGutter {
@include grid(2, 0, 0);
}
.grid-1-3 {
@include unequalGrid(1, 3, $grid-gutter, 2rem);
}
.grid-1-3 {
@include unequalGrid(1, 3, $grid-gutter, 2rem);
}
.grid-catalog {
@include grid(4, $grid-gutter, 6rem);
}
@media (max-width: $small) {
.grid-catalog {
@include grid(3, $grid-gutter, 4rem);
}
.grid-1-s {
@include grid(1, $grid-gutter);
}
}
@media (max-width: $xsmall) {
.grid-catalog {
@include grid(2, 1rem, 3rem);
}
}

View file

@ -0,0 +1,87 @@
/* ----------------------------------------------------------- */
/* == main */
/* ----------------------------------------------------------- */
body {
background-color: $color-primary;
color: $color-light-text;
font-family: $fontstack1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
margin-right: auto;
margin-left: auto;
padding-right: 4rem;
padding-left: 4rem;
max-width: 138rem;
}
.container--small {
max-width: 60rem;
}
::selection {
background-color: rgba($color-secondary, .8);
color: $color-light-text;
}
/* titles
-------------------------------------------------------------- */
h1 {
@include flow(100);
}
h2 {
@include flow(22);
}
h3 {
@include flow(18);
}
h4 {
@include flow(16);
}
/* links
-------------------------------------------------------------- */
a,
a:visited {
color: $color-link;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:focus {
outline: none;
border-radius: .3rem;
box-shadow: $focus-ring;
}
/* lists
-------------------------------------------------------------- */
ul {
padding-left: 2rem;
list-style-type: disc;
}
/* divers
-------------------------------------------------------------- */
hr {
display: block;
margin: 1em 0;
padding: 0;
height: .1rem;
border: 0;
border-top: .1rem solid #ccc;
}

View file

View file

@ -0,0 +1,58 @@
/* ----------------------------------------------------------- */
/* == header */
/* ----------------------------------------------------------- */
.header {
position: relative;
top: 0;
background-color: $color-bg-head;
}
.header--home {
padding-top: 2.5rem;
}
.header > .container {
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 4rem;
padding-bottom: 4rem;
}
.header__left {
z-index: 1;
display: flex;
align-items: flex-end;
}
.header__logo:link,
.header__logo:visited {
margin-right: 1rem;
width: 18rem;
box-shadow: none;
text-decoration: none;
font-weight: 900;
font-size: 3rem;
line-height: 3.8rem;
}
.header__logo:active,
.header__logo:focus {
text-decoration: underline;
text-decoration-skip-ink: auto;
}
.header__logo:active::before,
.header__logo:focus::after,
.header__logo:active::before,
.header__logo:focus::after {
content: none;
}
.header__tagline {
margin-bottom: .4rem;
color: rgba($color-light-text, .7);
}

View file

@ -0,0 +1,87 @@
/* ----------------------------------------------------------- */
/* == navigation */
/* ----------------------------------------------------------- */
.navigation {
display: flex;
align-items: center;
margin-top: .5rem;
}
.navigation__item,
.navigation__item:link,
.navigation__item:visited {
position: relative;
margin-left: 4rem;
padding: 0;
border: none;
background-color: transparent;
color: rgba($color-light-text, .8);
text-decoration: none;
font-weight: 600;
cursor: pointer;
}
.navigation__item::after {
position: absolute;
top: calc(100% + .8rem);
left: calc(50% - .3rem);
width: .6rem;
height: .6rem;
border-radius: 4.2rem;
background-color: $color-secondary;
content: "";
opacity: 0;
transition: all .15s cubic-bezier(.68,-.55,.27,1.55);
transform: translateY(-2rem);
}
.navigation__item.active,
.navigation__item:hover,
.navigation__item:active,
.navigation__item:focus {
color: $color-light-text;
}
.navigation__item:active {
box-shadow: none;
}
.navigation__item.active::after,
.navigation__item:active::after,
.navigation__item:focus::after {
opacity: 1;
transform: translateY(0);
}
.navigation__item--admin:link,
.navigation__item--admin:visited {
padding: .3rem 1rem;
border: .1rem solid rgba(#fff, .8);
border-radius: .3rem;
}
.navigation__item--thin,
.navigation__item--thin:link,
.navigation__item--thin:visited,
.navigation__item--thin:hover,
.navigation__item--thin:active {
color: rgba($color-light-text, .8);
font-weight: normal;
font-size: 1em;
cursor: normal;
}
.navigation__item--near,
.navigation__item--near:link,
.navigation__item--near:visited {
margin-left: .5rem;
}
/* Mobile Menu
-------------------------------------------------------------- */
.navigation__mobileBtn,
.navigation__mobileOverlay {
display: none;
}

View file

@ -0,0 +1,19 @@
/* ----------------------------------------------------------- */
/* == content */
/* ----------------------------------------------------------- */
.content {
border-top: 6rem solid $color-bg-head;
}
.content > :first-child {
margin-top: -6rem;
}
.content-title {
margin: 0;
margin-top: 1.3rem;
margin-bottom: 5rem;
font-size: 5rem;
}

View file

@ -0,0 +1,11 @@
/* ----------------------------------------------------------- */
/* == footer */
/* ----------------------------------------------------------- */
.footer {
padding-top: 18rem;
padding-bottom: 10rem;
background: $color-primary url("/images/triforce.svg") no-repeat;
background-position: center 10rem;
text-align: center;
}

View file

@ -0,0 +1,27 @@
//
// (TEXT) PARAMS
// =================
// 1. Namespace
// 2. Intensity
// 3. Text color
// 4. Background color (flat)
// 5. Highlight #1 color
// 6. Highlight #2 color
// 7. Width (px)
// 8. Height (px)
//
.glitch,
.glitch--hover:hover {
position: relative;
@include textGlitch("glitchText", 50, $color-bg-head, red, blue, 9999, 100);
}
.glitch:nth-child(2)::after,
.glitch--hover:hover:nth-child(2)::after,
.glitch:nth-child(2)::before,
.glitch--hover:hover:nth-child(2)::before {
animation-delay: .3s;
}

View file

@ -0,0 +1,120 @@
/* ----------------------------------------------------------- */
/* == Album showcase page */
/* ----------------------------------------------------------- */
.album {
margin-bottom: 10rem;
border-top: 33.7rem solid $color-bg-head;
}
.album > .container {
margin-top: -24.3rem;
}
.album-layout {
display: flex;
align-items: flex-start;
}
/* Cover
-------------------------------------------------------------- */
.album-cover {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
margin-left: -7rem;
padding: 8.5rem 9rem 8rem 7rem;
max-width: 66rem;
width: 51%;
background: url("/images/illustration.svg") no-repeat;
background-position: center center;
background-size: 100% 100%;
font-size: 0;
}
.album-cover__visual {
flex-shrink: 0;
max-width: 50rem;
width: 100%;
border-radius: .6rem;
background-color: rgba($color-primary, .5);
box-shadow: 0 .6rem 4.4rem 0 rgba(0,0,0,.5);
}
/* Infos
-------------------------------------------------------------- */
.album-infos {
margin-left: 1rem;
padding-top: 18.3rem;
}
.album-name {
margin: 0;
font-weight: 900;
font-size: 7rem;
line-height: 7rem;
}
.album-artist {
display: block;
margin-top: .4rem;
color: rgba($color-light-text, .8);
font-weight: normal;
font-size: 3rem;
line-height: 4rem;
}
.album-tags {
display: flex;
flex-wrap: wrap;
margin: 0;
margin-top: 4rem;
padding: 0;
}
.album-tags__item {
margin-right: 1rem;
margin-bottom: 1rem;
padding: .7rem 2rem .9rem;
border-radius: 4.2rem;
background: rgba($color-light-text, .1);
list-style: none;
font-size: 1.6rem;
}
/* Links
-------------------------------------------------------------- */
.album-links {
margin-top: 4rem;
}
.album-links__list {
display: flex;
flex-wrap: wrap;
margin-top: 2rem;
}
.album-links__item:link,
.album-links__item:visited {
margin-right: 2rem;
margin-bottom: 2rem;
border-radius: .2rem;
background-color: rgba($color-light-text, .05);
color: $color-secondary;
text-decoration: none;
transition: .15s background;
}
.album-links__item:hover,
.album-links__item:active,
.album-links__item:focus {
background-color: rgba($color-light-text, .1);
}
.album-links__item svg {
vertical-align: middle;
}

View file

@ -0,0 +1,18 @@
/* ----------------------------------------------------------- */
/* == Auth pages */
/* ----------------------------------------------------------- */
.auth-container {
margin: 0 auto;
padding: 0 1rem;
max-width: 40rem;
width: 100%;
}
.auth-title {
margin: 0;
margin-top: 4rem;
margin-bottom: 5rem;
text-align: center;
font-size: 5rem;
}

View file

@ -0,0 +1,114 @@
/* ----------------------------------------------------------- */
/* == Catalog page */
/* ----------------------------------------------------------- */
/* Head
-------------------------------------------------------------- */
.catalog-head {
padding-top: 8rem;
padding-bottom: 6.5rem;
background-color: $color-bg-head;
}
.catalog-head__title {
margin: 0;
font-size: 10rem;
}
.catalog-head__title--primary {
margin-right: 3rem;
}
.catalog-head__title--secondary {
color: rgba($color-light-text, .6);
vertical-align: baseline;
font-size: 3.6rem;
}
/* List
-------------------------------------------------------------- */
.catalog-item {
position: relative;
box-shadow: none;
color: rgba($color-light-text, .8);
font-size: 1.8rem;
}
.catalog-item__content,
.catalog-item__content:link,
.catalog-item__content:visited {
display: flex;
flex-direction: column;
text-decoration: none;
}
.catalog-item__content:active,
.catalog-item__content:focus {
box-shadow: none;
}
.catalog-item__visual {
position: relative;
flex-shrink: 0;
order: -1;
overflow: hidden;
width: 100%;
border-radius: .3rem;
background-color: rgba(#fff, .3);
box-shadow: 0 .3rem 2.2rem 0 rgba(0,0,0,.10);
font-size: 0;
transition: all .2s;
}
.catalog-item__content:hover .catalog-item__visual,
.catalog-item__content:active .catalog-item__visual,
.catalog-item__content:focus .catalog-item__visual {
transform: scale3d(1.05, 1.05, 1.05);
}
.catalog-item__content:active .catalog-item__visual,
.catalog-item__content:focus .catalog-item__visual {
box-shadow: $focus-ring;
}
.catalog-item__album {
margin: 0;
margin-top: 1.5rem;
color: $color-light-text;
font-weight: 900;
font-size: 2.4rem;
}
.catalog-item__artist {
margin-top: .8rem;
}
/* Manage button
-------------------------------------------------------------- */
.catalog-item__manage:link,
.catalog-item__manage:visited {
position: absolute;
top: 0;
left: 0;
display: block;
margin-top: .5rem;
margin-left: .5rem;
padding: .5rem 1rem;
width: calc(100% - 1rem);
border-radius: .3rem;
background-color: darken($color-primary, 5%);
color: #fff;
text-align: center;
text-decoration: none;
font-size: 1.6rem;
transition: .1s all;
}
.catalog-item__manage:hover,
.catalog-item__manage:active,
.catalog-item__manage:focus {
background-color: lighten($color-primary, 10%);
}

View file

@ -0,0 +1,61 @@
/* ----------------------------------------------------------- */
/* == Home page */
/* ----------------------------------------------------------- */
/* Head
-------------------------------------------------------------- */
.home-head {
padding-top: 9rem;
padding-bottom: 10rem;
background: $color-bg-head;
}
.home-head > .container {
padding-bottom: 6rem;
background: url("/images/illustration.svg") no-repeat;
background-position: calc(100% - 4rem) center;
background-size: auto 100%;
}
.home-head__container {
max-width: 57rem;
}
.home-head__title {
margin-bottom: 0;
}
.home-head__title span {
display: block;
}
.home-head__subtitle {
margin-top: 2rem;
margin-bottom: 0;
color: rgba($color-light-text, .8);
font-weight: 900;
font-style: italic;
font-size: 2rem;
}
/* About
-------------------------------------------------------------- */
.home-about {
padding-top: 20rem;
background-color: $color-primary;
color: rgba($color-light-text, .6rem);
text-align: center;
font-style: italic;
font-size: 2.6rem;
}
.home-about > .container {
max-width: 70rem;
width: 90%;
}
.home-about p:last-child {
margin-bottom: 0;
}

View file

@ -0,0 +1,6 @@
/* ----------------------------------------------------------- */
/* == rwd -> large */
/* ----------------------------------------------------------- */
@media (max-width: $large) {
}

View file

@ -0,0 +1,59 @@
/* ----------------------------------------------------------- */
/* == rwd -> medium */
/* ----------------------------------------------------------- */
@media (max-width: $medium) {
/* Header
-------------------------------------------------------------- */
.header--home::before {
height: 1.5rem;
}
/* Album page
-------------------------------------------------------------- */
.album {
border-top-width: 21.2rem;
}
.album > .container {
margin-top: -18.4rem;
}
.album-cover {
padding-right: 5rem;
padding-bottom: 5rem;
}
.album-infos {
padding-top: 13.5rem;
}
.album-name {
font-size: 5.5rem;
line-height: 6rem;
}
.album-artist {
margin-top: 0;
font-size: 2rem;
line-height: 1.3;
}
.album-tags {
margin-top: 3rem;
}
.album-tags__item {
font-size: 1.4rem;
}
.album-links {
margin-top: 3rem;
}
.album-links__list {
margin-top: 1rem;
}
}

View file

@ -0,0 +1,24 @@
/* ----------------------------------------------------------- */
/* == rwd -> reduced motion */
/* ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
/* Glitch text
-------------------------------------------------------------- */
.glitch::before,
.glitch::after,
.glitch--hover:hover::before,
.glitch--hover:hover::after {
animation: none;
}
/* Catalog
-------------------------------------------------------------- */
.catalog-item__content:hover .catalog-item__visual,
.catalog-item__content:active .catalog-item__visual,
.catalog-item__content:focus .catalog-item__visual {
transform: none;
}
}

View file

@ -0,0 +1,234 @@
/* ----------------------------------------------------------- */
/* == rwd -> small */
/* ----------------------------------------------------------- */
@media (max-width: $small) {
/* Common
-------------------------------------------------------------- */
.container {
padding-right: 2rem;
padding-left: 2rem;
}
/* Header
-------------------------------------------------------------- */
.header--home {
padding-top: 0;
}
.header > .container {
padding-top: 2rem;
padding-bottom: 2rem;
}
.header__tagline {
display: none;
}
/* Mobile Menu
-------------------------------------------------------------- */
.navigation__mobileBtn {
display: block;
padding: .3rem 1rem .4rem;
border: .1rem solid rgba($color-light-text, .8);
border-radius: .3rem;
background-color: transparent;
color: $color-light-text;
transition: .1s all;
}
.navigation__mobileBtn:hover,
.navigation__mobileBtn:active {
background-color: $color-light-text;
color: $color-primary;
}
.navigation__mobileBtn:active,
.navigation__mobileBtn:focus {
outline: none;
box-shadow: $focus-ring;
}
.navigation__mobileOverlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
visibility: hidden;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
opacity: 0;
transition: opacity .15s cubic-bezier(0, 0, .30, 1);
}
.navigation__mobileOverlay.active {
visibility: visible;
opacity: 1;
}
.navigation {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-y: auto;
margin: 0;
padding: 1rem;
max-width: 30rem;
width: 85%;
height: 100%;
background: $color-bg-head url("/images/triforce.svg") no-repeat;
background-position: center calc(100% - 4rem);
box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, .4);
transition: transform .33s cubic-bezier(0, 0, .30, 1);
transform: translateX(-103%);
will-change: transform;
}
.navigation.active {
transform: translateX(0);
}
.navigation__item,
.navigation__item:link,
.navigation__item:visited {
margin: .5rem 0;
padding: .5rem 1rem;
border: none;
color: rgba($color-light-text, .9);
font-size: 2rem;
}
.navigation__item:after {
content: none;
}
/* Footer
-------------------------------------------------------------- */
.footer {
padding-top: 13rem;
padding-bottom: 5rem;
background-position: center 6rem;
}
/* Home
-------------------------------------------------------------- */
.home-head {
padding-top: 5rem;
padding-bottom: 7rem;
}
.home-head > .container {
padding-bottom: 4rem;
background-position: calc(100% - 2rem) center;
}
.home-head__container {
max-width: 36rem;
}
.home-head__title {
font-size: 6rem;
}
.home-head__subtitle {
margin-top: 1.2rem;
font-size: 1.7rem;
}
.home-about {
padding-top: 10rem;
font-size: 2rem;
}
/* Catalog
-------------------------------------------------------------- */
.catalog-head {
padding-top: 5rem;
padding-bottom: 5rem;
}
.catalog-head__title {
font-size: 6rem;
}
.catalog-head__title--primary {
margin-right: 2rem;
}
.catalog-head__title--secondary {
font-size: 2.8rem;
}
.catalog-item:link,
.catalog-item:visited {
font-size: 1.6rem;
}
.catalog-item__album {
font-size: 2rem;
}
/* Album
-------------------------------------------------------------- */
.album {
margin-bottom: 5rem;
border-top-width: 12rem;
}
.album > .container {
margin-top: -8.7rem;
}
.album-cover {
margin-left: -3rem;
padding: 3rem;
}
.album-infos {
margin-left: 0;
padding-top: 5.4rem;
}
.album-name {
font-size: 3.5rem;
line-height: 4rem;
}
.album-artist {
font-size: 1.6rem;
}
.album-tags__item {
padding: .4rem 1.5rem .5rem;
color: rgba($color-light-text, .8);
font-size: 1.3rem;
}
.album-links__item:link,
.album-links__item:visited {
margin-right: 1rem;
margin-bottom: 1rem;
}
.album-links__item svg {
width: 5rem;
height: 5rem;
}
}

View file

@ -0,0 +1,101 @@
/* ----------------------------------------------------------- */
/* == rwd -> xsmall */
/* ----------------------------------------------------------- */
@media (max-width: $xsmall) {
/* Header
-------------------------------------------------------------- */
.header__logo:link,
.header__logo:visited {
width: 12rem;
font-size: 2rem;
line-height: 1.2em;
}
/* Pagination
-------------------------------------------------------------- */
.pagination {
padding-top: 5rem;
}
.pagination > .container {
width: 100%;
}
/* Home
-------------------------------------------------------------- */
.home-head__title {
font-size: 4.5rem;
}
.home-head__title .glitch::before,
.home-head__title .glitch::after {
content: none;
}
.home-head__subtitle {
margin-top: .5rem;
font-size: 1.5rem;
}
/* Catalog
-------------------------------------------------------------- */
.catalog-head {
padding-top: 3rem;
padding-bottom: 2rem;
}
.catalog-head__title {
font-size: 4.5rem;
}
.catalog-head__title--primary {
margin-right: 1rem;
}
.catalog-head__title--secondary {
font-size: 2.3rem;
}
.catalog-item__album {
font-size: 1.7rem;
}
.catalog-item__artist {
margin-top: .3rem;
font-size: 1.4rem;
}
/* Album
-------------------------------------------------------------- */
.album-layout {
display: block;
text-align: center;
}
.album-cover {
margin-right: auto;
margin-left: auto;
max-width: 80%;
width: inherit;
}
.album-infos {
padding-top: 0;
}
.album-tags,
.album-links__list {
justify-content: center;
}
.album-tags,
.album-links {
margin-top: 2rem;
}
}

View file

@ -0,0 +1,3 @@
/* ----------------------------------------------------------- */
/* == rwd */
/* ----------------------------------------------------------- */

39
assets/scss/_colors.scss Normal file
View file

@ -0,0 +1,39 @@
// --------------------------------------------------------------
// == colors */
// --------------------------------------------------------------
// palette
// --------------------------------------------------------------
$color-primary: #0e1537;
$color-secondary: #ff2749;
$color-tertiary: #fec156;
$color-info: #2185d0;
// backgrounds
// --------------------------------------------------------------
$color-bg-head: #0e1848;
// texts
// --------------------------------------------------------------
$color-light-text: #fff;
$color-dark-text: #000;
// links
// --------------------------------------------------------------
$color-link: $color-light-text;
// brand
// --------------------------------------------------------------
$color-twitter: #55acee;
$color-facebook: #3b5998;
$color-google: #dd4b39;
$color-youtube: #e52d27;
$color-pinterest: #cc2127;
$color-vimeo: #1ab7ea;
$color-linkedin: #0976b4;
$color-instagram: #3f729b;

29
assets/scss/_config.scss Normal file
View file

@ -0,0 +1,29 @@
// --------------------------------------------------------------
// == config */
// --------------------------------------------------------------
// base
// --------------------------------------------------------------
$base-font: 16; // px value (without unit), will be converted in em
$line-height: 1.5;
$fontstack1: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
$fontstack2: Georgia, Times, "Times New Roman", serif;
// responsive
// --------------------------------------------------------------
$xsmall: 480px;
$small: 840px;
$medium: 960px;
$large: 1280px;
// default gutter
// --------------------------------------------------------------
$default-gutter: 2rem;
// Focus ring
// --------------------------------------------------------------
$focus-ring: 0 0 0 .3rem rgba($color-tertiary, .5);

96
assets/scss/style.scss Normal file
View file

@ -0,0 +1,96 @@
// --------------------------------------------------------------
// == config */
// --------------------------------------------------------------
@import "_colors";
@import "_config";
// --------------------------------------------------------------
// == core */
// --------------------------------------------------------------
@import "1-core/_00-mixins";
@import "1-core/_01-reset";
@import "1-core/_02-typography";
@import "1-core/_03-helpers";
@import "1-core/_04-layout";
@import "1-core/_05-flexgrid";
@import "1-core/_06-rwd";
@import "1-core/_debug";
// --------------------------------------------------------------
// == helpers */
// --------------------------------------------------------------
@import "2-helpers/_alignment";
@import "2-helpers/_colors";
@import "2-helpers/_spacing";
@import "2-helpers/_text";
@import "2-helpers/_width";
// --------------------------------------------------------------
// == components */
// --------------------------------------------------------------
@import "3-components/_forms";
@import "3-components/_switch";
@import "3-components/_radiobox";
@import "3-components/_buttons";
@import "3-components/_pagination";
@import "3-components/_tables";
@import "3-components/_tooltips";
@import "3-components/_notifications";
// --------------------------------------------------------------
// == base */
// --------------------------------------------------------------
@import "4-base/_01-fonts";
@import "4-base/_02-icons";
@import "4-base/_03-grids";
@import "4-base/_04-main";
@import "4-base/_05-layout";
@import "4-base/_06-header";
@import "4-base/_07-navigation";
@import "4-base/_08-content";
@import "4-base/_09-footer";
// --------------------------------------------------------------
// == modules */
// --------------------------------------------------------------
@import "5-modules/glitch";
// --------------------------------------------------------------
// == pages */
// --------------------------------------------------------------
@import "6-pages/home";
@import "6-pages/catalog";
@import "6-pages/album";
@import "6-pages/auth";
// --------------------------------------------------------------
// == vendors */
// --------------------------------------------------------------
// Tips: load vendor from your package manager and override CSS here (e.g. o-vendor-name.less)
// In this context, "o" means "override" and you can use it as a convention.
// @import '7-vendors/o-vendor.less';
// --------------------------------------------------------------
// == rwd */
// --------------------------------------------------------------
@import "8-rwd/_rwd-large";
@import "8-rwd/_rwd-medium";
@import "8-rwd/_rwd-small";
@import "8-rwd/_rwd-xsmall";
@import "8-rwd/_rwd";
@import "8-rwd/_rwd-reduced-motion";

View file

Before

Width:  |  Height:  |  Size: 248 KiB

After

Width:  |  Height:  |  Size: 248 KiB

View file

Before

Width:  |  Height:  |  Size: 378 KiB

After

Width:  |  Height:  |  Size: 378 KiB

View file

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 53 KiB

View file

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 1.9 MiB

View file

Before

Width:  |  Height:  |  Size: 178 KiB

After

Width:  |  Height:  |  Size: 178 KiB

View file

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 75 KiB

View file

Before

Width:  |  Height:  |  Size: 333 KiB

After

Width:  |  Height:  |  Size: 333 KiB

View file

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 65 KiB

View file

Before

Width:  |  Height:  |  Size: 383 KiB

After

Width:  |  Height:  |  Size: 383 KiB

View file

Before

Width:  |  Height:  |  Size: 219 KiB

After

Width:  |  Height:  |  Size: 219 KiB

View file

Before

Width:  |  Height:  |  Size: 87 KiB

After

Width:  |  Height:  |  Size: 87 KiB

View file

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

View file

Before

Width:  |  Height:  |  Size: 175 KiB

After

Width:  |  Height:  |  Size: 175 KiB

View file

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 99 KiB

View file

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 80 KiB

View file

Before

Width:  |  Height:  |  Size: 85 KiB

After

Width:  |  Height:  |  Size: 85 KiB

View file

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 88 KiB

View file

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View file

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 99 KiB

View file

Before

Width:  |  Height:  |  Size: 856 KiB

After

Width:  |  Height:  |  Size: 856 KiB

View file

Before

Width:  |  Height:  |  Size: 85 KiB

After

Width:  |  Height:  |  Size: 85 KiB

View file

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 76 KiB

View file

Before

Width:  |  Height:  |  Size: 180 KiB

After

Width:  |  Height:  |  Size: 180 KiB

View file

Before

Width:  |  Height:  |  Size: 171 KiB

After

Width:  |  Height:  |  Size: 171 KiB

View file

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

View file

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

View file

Before

Width:  |  Height:  |  Size: 592 KiB

After

Width:  |  Height:  |  Size: 592 KiB

View file

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 58 KiB

View file

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 86 KiB

View file

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 82 KiB

View file

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 63 KiB

View file

Before

Width:  |  Height:  |  Size: 484 KiB

After

Width:  |  Height:  |  Size: 484 KiB

View file

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 74 KiB

View file

Before

Width:  |  Height:  |  Size: 214 KiB

After

Width:  |  Height:  |  Size: 214 KiB

View file

Before

Width:  |  Height:  |  Size: 178 KiB

After

Width:  |  Height:  |  Size: 178 KiB

View file

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 64 KiB

View file

Before

Width:  |  Height:  |  Size: 602 KiB

After

Width:  |  Height:  |  Size: 602 KiB

View file

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

View file

Before

Width:  |  Height:  |  Size: 789 KiB

After

Width:  |  Height:  |  Size: 789 KiB

View file

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

View file

Before

Width:  |  Height:  |  Size: 151 KiB

After

Width:  |  Height:  |  Size: 151 KiB

View file

Before

Width:  |  Height:  |  Size: 255 KiB

After

Width:  |  Height:  |  Size: 255 KiB

View file

Before

Width:  |  Height:  |  Size: 87 KiB

After

Width:  |  Height:  |  Size: 87 KiB

View file

Before

Width:  |  Height:  |  Size: 324 KiB

After

Width:  |  Height:  |  Size: 324 KiB

View file

Before

Width:  |  Height:  |  Size: 500 KiB

After

Width:  |  Height:  |  Size: 500 KiB

View file

Before

Width:  |  Height:  |  Size: 585 KiB

After

Width:  |  Height:  |  Size: 585 KiB

View file

Before

Width:  |  Height:  |  Size: 796 KiB

After

Width:  |  Height:  |  Size: 796 KiB

View file

Before

Width:  |  Height:  |  Size: 255 KiB

After

Width:  |  Height:  |  Size: 255 KiB

View file

Before

Width:  |  Height:  |  Size: 405 KiB

After

Width:  |  Height:  |  Size: 405 KiB

View file

Before

Width:  |  Height:  |  Size: 341 KiB

After

Width:  |  Height:  |  Size: 341 KiB

View file

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 94 KiB

View file

Before

Width:  |  Height:  |  Size: 585 KiB

After

Width:  |  Height:  |  Size: 585 KiB

View file

Before

Width:  |  Height:  |  Size: 341 KiB

After

Width:  |  Height:  |  Size: 341 KiB

View file

Before

Width:  |  Height:  |  Size: 370 KiB

After

Width:  |  Height:  |  Size: 370 KiB

Some files were not shown because too many files have changed in this diff Show more