diff --git a/.csscomb.json b/.csscomb.json new file mode 100644 index 0000000..d993f29 --- /dev/null +++ b/.csscomb.json @@ -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" + ] + ] +} diff --git a/assets/scss/1-core/_00-mixins.scss b/assets/scss/1-core/_00-mixins.scss new file mode 100644 index 0000000..0217ed1 --- /dev/null +++ b/assets/scss/1-core/_00-mixins.scss @@ -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; + } +} diff --git a/assets/scss/1-core/_01-reset.scss b/assets/scss/1-core/_01-reset.scss new file mode 100644 index 0000000..713446c --- /dev/null +++ b/assets/scss/1-core/_01-reset.scss @@ -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; +} diff --git a/assets/scss/1-core/_02-typography.scss b/assets/scss/1-core/_02-typography.scss new file mode 100644 index 0000000..81a8cf0 --- /dev/null +++ b/assets/scss/1-core/_02-typography.scss @@ -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; +} diff --git a/assets/scss/1-core/_03-helpers.scss b/assets/scss/1-core/_03-helpers.scss new file mode 100644 index 0000000..34cc374 --- /dev/null +++ b/assets/scss/1-core/_03-helpers.scss @@ -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; +} diff --git a/assets/scss/1-core/_04-layout.scss b/assets/scss/1-core/_04-layout.scss new file mode 100644 index 0000000..129be97 --- /dev/null +++ b/assets/scss/1-core/_04-layout.scss @@ -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; +} diff --git a/assets/scss/1-core/_05-flexgrid.scss b/assets/scss/1-core/_05-flexgrid.scss new file mode 100644 index 0000000..2ae2a34 --- /dev/null +++ b/assets/scss/1-core/_05-flexgrid.scss @@ -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; +} diff --git a/assets/scss/1-core/_06-rwd.scss b/assets/scss/1-core/_06-rwd.scss new file mode 100644 index 0000000..e405276 --- /dev/null +++ b/assets/scss/1-core/_06-rwd.scss @@ -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; + } +} diff --git a/assets/scss/1-core/_debug.scss b/assets/scss/1-core/_debug.scss new file mode 100644 index 0000000..7a70c6f --- /dev/null +++ b/assets/scss/1-core/_debug.scss @@ -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(); +} diff --git a/assets/scss/2-helpers/_alignment.scss b/assets/scss/2-helpers/_alignment.scss new file mode 100644 index 0000000..8c55f96 --- /dev/null +++ b/assets/scss/2-helpers/_alignment.scss @@ -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; +} diff --git a/assets/scss/2-helpers/_colors.scss b/assets/scss/2-helpers/_colors.scss new file mode 100644 index 0000000..50f8cad --- /dev/null +++ b/assets/scss/2-helpers/_colors.scss @@ -0,0 +1,11 @@ +/* ----------------------------------------------------------- */ +/* == colors */ +/* ----------------------------------------------------------- */ + +.color-primary { + color: $color-primary; +} + +.color-secondary { + color: $color-secondary; +} diff --git a/assets/scss/2-helpers/_spacing.scss b/assets/scss/2-helpers/_spacing.scss new file mode 100644 index 0000000..61fe540 --- /dev/null +++ b/assets/scss/2-helpers/_spacing.scss @@ -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; +} diff --git a/assets/scss/2-helpers/_state.scss b/assets/scss/2-helpers/_state.scss new file mode 100644 index 0000000..e872f35 --- /dev/null +++ b/assets/scss/2-helpers/_state.scss @@ -0,0 +1,7 @@ +/* ----------------------------------------------------------- */ +/* == state */ +/* ----------------------------------------------------------- */ + +.is-disabled { + cursor: not-allowed; +} diff --git a/assets/scss/2-helpers/_text.scss b/assets/scss/2-helpers/_text.scss new file mode 100644 index 0000000..0d0ae0e --- /dev/null +++ b/assets/scss/2-helpers/_text.scss @@ -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; +} diff --git a/assets/scss/2-helpers/_width.scss b/assets/scss/2-helpers/_width.scss new file mode 100644 index 0000000..0783b4e --- /dev/null +++ b/assets/scss/2-helpers/_width.scss @@ -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%; } diff --git a/assets/scss/3-components/_buttons.scss b/assets/scss/3-components/_buttons.scss new file mode 100644 index 0000000..86052d5 --- /dev/null +++ b/assets/scss/3-components/_buttons.scss @@ -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; +} diff --git a/assets/scss/3-components/_forms.scss b/assets/scss/3-components/_forms.scss new file mode 100644 index 0000000..8cb980e --- /dev/null +++ b/assets/scss/3-components/_forms.scss @@ -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; +} diff --git a/assets/scss/3-components/_notifications.scss b/assets/scss/3-components/_notifications.scss new file mode 100644 index 0000000..376511d --- /dev/null +++ b/assets/scss/3-components/_notifications.scss @@ -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; +} diff --git a/assets/scss/3-components/_pagination.scss b/assets/scss/3-components/_pagination.scss new file mode 100644 index 0000000..6819361 --- /dev/null +++ b/assets/scss/3-components/_pagination.scss @@ -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%; +} diff --git a/assets/scss/3-components/_radiobox.scss b/assets/scss/3-components/_radiobox.scss new file mode 100644 index 0000000..751ffe4 --- /dev/null +++ b/assets/scss/3-components/_radiobox.scss @@ -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; +} diff --git a/assets/scss/3-components/_switch.scss b/assets/scss/3-components/_switch.scss new file mode 100644 index 0000000..08d9416 --- /dev/null +++ b/assets/scss/3-components/_switch.scss @@ -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; +} diff --git a/assets/scss/3-components/_tables.scss b/assets/scss/3-components/_tables.scss new file mode 100644 index 0000000..b3f9edc --- /dev/null +++ b/assets/scss/3-components/_tables.scss @@ -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; +} diff --git a/assets/scss/3-components/_tooltips.scss b/assets/scss/3-components/_tooltips.scss new file mode 100644 index 0000000..3609c52 --- /dev/null +++ b/assets/scss/3-components/_tooltips.scss @@ -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%); +} diff --git a/assets/scss/4-base/_01-fonts.scss b/assets/scss/4-base/_01-fonts.scss new file mode 100644 index 0000000..a92bd27 --- /dev/null +++ b/assets/scss/4-base/_01-fonts.scss @@ -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"); +} diff --git a/assets/scss/4-base/_02-icons.scss b/assets/scss/4-base/_02-icons.scss new file mode 100644 index 0000000..7409ec8 --- /dev/null +++ b/assets/scss/4-base/_02-icons.scss @@ -0,0 +1,3 @@ +/* ----------------------------------------------------------- */ +/* == icons */ +/* ----------------------------------------------------------- */ diff --git a/assets/scss/4-base/_03-grids.scss b/assets/scss/4-base/_03-grids.scss new file mode 100644 index 0000000..6eae1a7 --- /dev/null +++ b/assets/scss/4-base/_03-grids.scss @@ -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); + } +} diff --git a/assets/scss/4-base/_04-main.scss b/assets/scss/4-base/_04-main.scss new file mode 100644 index 0000000..2791626 --- /dev/null +++ b/assets/scss/4-base/_04-main.scss @@ -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; +} diff --git a/assets/scss/4-base/_05-layout.scss b/assets/scss/4-base/_05-layout.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/4-base/_06-header.scss b/assets/scss/4-base/_06-header.scss new file mode 100644 index 0000000..86d2ac3 --- /dev/null +++ b/assets/scss/4-base/_06-header.scss @@ -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); +} diff --git a/assets/scss/4-base/_07-navigation.scss b/assets/scss/4-base/_07-navigation.scss new file mode 100644 index 0000000..f580df3 --- /dev/null +++ b/assets/scss/4-base/_07-navigation.scss @@ -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; +} diff --git a/assets/scss/4-base/_08-content.scss b/assets/scss/4-base/_08-content.scss new file mode 100644 index 0000000..fa838dc --- /dev/null +++ b/assets/scss/4-base/_08-content.scss @@ -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; +} diff --git a/assets/scss/4-base/_09-footer.scss b/assets/scss/4-base/_09-footer.scss new file mode 100644 index 0000000..ddb1b4e --- /dev/null +++ b/assets/scss/4-base/_09-footer.scss @@ -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; +} diff --git a/assets/scss/5-modules/glitch.scss b/assets/scss/5-modules/glitch.scss new file mode 100644 index 0000000..db6ad3e --- /dev/null +++ b/assets/scss/5-modules/glitch.scss @@ -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; +} diff --git a/assets/scss/6-pages/album.scss b/assets/scss/6-pages/album.scss new file mode 100644 index 0000000..7e7b095 --- /dev/null +++ b/assets/scss/6-pages/album.scss @@ -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; +} diff --git a/assets/scss/6-pages/auth.scss b/assets/scss/6-pages/auth.scss new file mode 100644 index 0000000..232f962 --- /dev/null +++ b/assets/scss/6-pages/auth.scss @@ -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; +} diff --git a/assets/scss/6-pages/catalog.scss b/assets/scss/6-pages/catalog.scss new file mode 100644 index 0000000..262a599 --- /dev/null +++ b/assets/scss/6-pages/catalog.scss @@ -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%); +} diff --git a/assets/scss/6-pages/home.scss b/assets/scss/6-pages/home.scss new file mode 100644 index 0000000..4ef75c3 --- /dev/null +++ b/assets/scss/6-pages/home.scss @@ -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; +} diff --git a/assets/scss/8-rwd/_rwd-large.scss b/assets/scss/8-rwd/_rwd-large.scss new file mode 100644 index 0000000..b90b88e --- /dev/null +++ b/assets/scss/8-rwd/_rwd-large.scss @@ -0,0 +1,6 @@ +/* ----------------------------------------------------------- */ +/* == rwd -> large */ +/* ----------------------------------------------------------- */ + +@media (max-width: $large) { +} diff --git a/assets/scss/8-rwd/_rwd-medium.scss b/assets/scss/8-rwd/_rwd-medium.scss new file mode 100644 index 0000000..bb8d170 --- /dev/null +++ b/assets/scss/8-rwd/_rwd-medium.scss @@ -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; + } +} diff --git a/assets/scss/8-rwd/_rwd-reduced-motion.scss b/assets/scss/8-rwd/_rwd-reduced-motion.scss new file mode 100644 index 0000000..a311a5b --- /dev/null +++ b/assets/scss/8-rwd/_rwd-reduced-motion.scss @@ -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; + } +} diff --git a/assets/scss/8-rwd/_rwd-small.scss b/assets/scss/8-rwd/_rwd-small.scss new file mode 100644 index 0000000..b69e39b --- /dev/null +++ b/assets/scss/8-rwd/_rwd-small.scss @@ -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; + } +} diff --git a/assets/scss/8-rwd/_rwd-xsmall.scss b/assets/scss/8-rwd/_rwd-xsmall.scss new file mode 100644 index 0000000..0e7957a --- /dev/null +++ b/assets/scss/8-rwd/_rwd-xsmall.scss @@ -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; + } +} diff --git a/assets/scss/8-rwd/_rwd.scss b/assets/scss/8-rwd/_rwd.scss new file mode 100644 index 0000000..f7595d5 --- /dev/null +++ b/assets/scss/8-rwd/_rwd.scss @@ -0,0 +1,3 @@ +/* ----------------------------------------------------------- */ +/* == rwd */ +/* ----------------------------------------------------------- */ diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss new file mode 100644 index 0000000..8b0129c --- /dev/null +++ b/assets/scss/_colors.scss @@ -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; diff --git a/assets/scss/_config.scss b/assets/scss/_config.scss new file mode 100644 index 0000000..d0bb64c --- /dev/null +++ b/assets/scss/_config.scss @@ -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); diff --git a/assets/scss/style.scss b/assets/scss/style.scss new file mode 100644 index 0000000..0932464 --- /dev/null +++ b/assets/scss/style.scss @@ -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"; diff --git a/assets/img/1-l9ycviqberhwkdtirgf1aq.jpeg b/assets/upload/1-l9ycviqberhwkdtirgf1aq.jpeg similarity index 100% rename from assets/img/1-l9ycviqberhwkdtirgf1aq.jpeg rename to assets/upload/1-l9ycviqberhwkdtirgf1aq.jpeg diff --git a/assets/img/1280x1280.jpg b/assets/upload/1280x1280.jpg similarity index 100% rename from assets/img/1280x1280.jpg rename to assets/upload/1280x1280.jpg diff --git a/assets/img/6b4996362018bb10e78813359075f0f7-1000x1000x1.jpg b/assets/upload/6b4996362018bb10e78813359075f0f7-1000x1000x1.jpg similarity index 100% rename from assets/img/6b4996362018bb10e78813359075f0f7-1000x1000x1.jpg rename to assets/upload/6b4996362018bb10e78813359075f0f7-1000x1000x1.jpg diff --git a/assets/img/70743_large.jpg b/assets/upload/70743_large.jpg similarity index 100% rename from assets/img/70743_large.jpg rename to assets/upload/70743_large.jpg diff --git a/assets/img/71veci6ghzl._sl1500.jpg b/assets/upload/71veci6ghzl._sl1500.jpg similarity index 100% rename from assets/img/71veci6ghzl._sl1500.jpg rename to assets/upload/71veci6ghzl._sl1500.jpg diff --git a/assets/img/7f29fab8-4bfb-4101-ba94-2feabe8b5ca2.jpeg b/assets/upload/7f29fab8-4bfb-4101-ba94-2feabe8b5ca2.jpeg similarity index 100% rename from assets/img/7f29fab8-4bfb-4101-ba94-2feabe8b5ca2.jpeg rename to assets/upload/7f29fab8-4bfb-4101-ba94-2feabe8b5ca2.jpeg diff --git a/assets/img/81zldubpmpl._sl1500.jpg b/assets/upload/81zldubpmpl._sl1500.jpg similarity index 100% rename from assets/img/81zldubpmpl._sl1500.jpg rename to assets/upload/81zldubpmpl._sl1500.jpg diff --git a/assets/img/8386fd594c42ffe29b24159714f9da0b.jpg b/assets/upload/8386fd594c42ffe29b24159714f9da0b.jpg similarity index 100% rename from assets/img/8386fd594c42ffe29b24159714f9da0b.jpg rename to assets/upload/8386fd594c42ffe29b24159714f9da0b.jpg diff --git a/assets/img/857vao72zkr01.jpg b/assets/upload/857vao72zkr01.jpg similarity index 100% rename from assets/img/857vao72zkr01.jpg rename to assets/upload/857vao72zkr01.jpg diff --git a/assets/img/939x0w.jpg b/assets/upload/939x0w.jpg similarity index 100% rename from assets/img/939x0w.jpg rename to assets/upload/939x0w.jpg diff --git a/assets/img/a0650005973_16.jpg b/assets/upload/a0650005973_16.jpg similarity index 100% rename from assets/img/a0650005973_16.jpg rename to assets/upload/a0650005973_16.jpg diff --git a/assets/img/a0728836461_16.jpg b/assets/upload/a0728836461_16.jpg similarity index 100% rename from assets/img/a0728836461_16.jpg rename to assets/upload/a0728836461_16.jpg diff --git a/assets/img/a1320994375_10.jpg b/assets/upload/a1320994375_10.jpg similarity index 100% rename from assets/img/a1320994375_10.jpg rename to assets/upload/a1320994375_10.jpg diff --git a/assets/img/a1739426881_16.jpg b/assets/upload/a1739426881_16.jpg similarity index 100% rename from assets/img/a1739426881_16.jpg rename to assets/upload/a1739426881_16.jpg diff --git a/assets/img/a2040672325_16.jpg b/assets/upload/a2040672325_16.jpg similarity index 100% rename from assets/img/a2040672325_16.jpg rename to assets/upload/a2040672325_16.jpg diff --git a/assets/img/a2050194680_16.jpg b/assets/upload/a2050194680_16.jpg similarity index 100% rename from assets/img/a2050194680_16.jpg rename to assets/upload/a2050194680_16.jpg diff --git a/assets/img/a2061651603_16.jpg b/assets/upload/a2061651603_16.jpg similarity index 100% rename from assets/img/a2061651603_16.jpg rename to assets/upload/a2061651603_16.jpg diff --git a/assets/img/a2530641631_16.jpg b/assets/upload/a2530641631_16.jpg similarity index 100% rename from assets/img/a2530641631_16.jpg rename to assets/upload/a2530641631_16.jpg diff --git a/assets/img/a2612354725_16.jpg b/assets/upload/a2612354725_16.jpg similarity index 100% rename from assets/img/a2612354725_16.jpg rename to assets/upload/a2612354725_16.jpg diff --git a/assets/img/a2700182496_10.jpg b/assets/upload/a2700182496_10.jpg similarity index 100% rename from assets/img/a2700182496_10.jpg rename to assets/upload/a2700182496_10.jpg diff --git a/assets/img/a2770210702_16.jpg b/assets/upload/a2770210702_16.jpg similarity index 100% rename from assets/img/a2770210702_16.jpg rename to assets/upload/a2770210702_16.jpg diff --git a/assets/img/a3395045031_16.jpg b/assets/upload/a3395045031_16.jpg similarity index 100% rename from assets/img/a3395045031_16.jpg rename to assets/upload/a3395045031_16.jpg diff --git a/assets/img/a4162111118_16.jpg b/assets/upload/a4162111118_16.jpg similarity index 100% rename from assets/img/a4162111118_16.jpg rename to assets/upload/a4162111118_16.jpg diff --git a/assets/img/agent-fresco.jpg b/assets/upload/agent-fresco.jpg similarity index 100% rename from assets/img/agent-fresco.jpg rename to assets/upload/agent-fresco.jpg diff --git a/assets/img/aokigahara-500.jpg b/assets/upload/aokigahara-500.jpg similarity index 100% rename from assets/img/aokigahara-500.jpg rename to assets/upload/aokigahara-500.jpg diff --git a/assets/img/audio-video-disco-500.jpg b/assets/upload/audio-video-disco-500.jpg similarity index 100% rename from assets/img/audio-video-disco-500.jpg rename to assets/upload/audio-video-disco-500.jpg diff --git a/assets/img/avenged-sevenfold-nightmare-20161013173906.jpg b/assets/upload/avenged-sevenfold-nightmare-20161013173906.jpg similarity index 100% rename from assets/img/avenged-sevenfold-nightmare-20161013173906.jpg rename to assets/upload/avenged-sevenfold-nightmare-20161013173906.jpg diff --git a/assets/img/brute_force.jpg b/assets/upload/brute_force.jpg similarity index 100% rename from assets/img/brute_force.jpg rename to assets/upload/brute_force.jpg diff --git a/assets/img/c9284e25d68511b33a3376e6eafc1587.1000x1000x1.jpg b/assets/upload/c9284e25d68511b33a3376e6eafc1587.1000x1000x1.jpg similarity index 100% rename from assets/img/c9284e25d68511b33a3376e6eafc1587.1000x1000x1.jpg rename to assets/upload/c9284e25d68511b33a3376e6eafc1587.1000x1000x1.jpg diff --git a/assets/img/cover-1200.jpg b/assets/upload/cover-1200.jpg similarity index 100% rename from assets/img/cover-1200.jpg rename to assets/upload/cover-1200.jpg diff --git a/assets/img/cover_50176662016_r.jpg b/assets/upload/cover_50176662016_r.jpg similarity index 100% rename from assets/img/cover_50176662016_r.jpg rename to assets/upload/cover_50176662016_r.jpg diff --git a/assets/img/cover_lux.png b/assets/upload/cover_lux.png similarity index 100% rename from assets/img/cover_lux.png rename to assets/upload/cover_lux.png diff --git a/assets/img/danger-taiko.jpg b/assets/upload/danger-taiko.jpg similarity index 100% rename from assets/img/danger-taiko.jpg rename to assets/upload/danger-taiko.jpg diff --git a/assets/img/e363b405b4b4d259ddbecf01c516ae6c.1000x1000x1.jpg b/assets/upload/e363b405b4b4d259ddbecf01c516ae6c.1000x1000x1.jpg similarity index 100% rename from assets/img/e363b405b4b4d259ddbecf01c516ae6c.1000x1000x1.jpg rename to assets/upload/e363b405b4b4d259ddbecf01c516ae6c.1000x1000x1.jpg diff --git a/assets/img/eba3e87a-96b6-4a4a-97cd-c9ee8a0ac541.sized-1000x1000.jpg b/assets/upload/eba3e87a-96b6-4a4a-97cd-c9ee8a0ac541.sized-1000x1000.jpg similarity index 100% rename from assets/img/eba3e87a-96b6-4a4a-97cd-c9ee8a0ac541.sized-1000x1000.jpg rename to assets/upload/eba3e87a-96b6-4a4a-97cd-c9ee8a0ac541.sized-1000x1000.jpg diff --git a/assets/img/fear_of_a_blank_planet.jpg b/assets/upload/fear_of_a_blank_planet.jpg similarity index 100% rename from assets/img/fear_of_a_blank_planet.jpg rename to assets/upload/fear_of_a_blank_planet.jpg diff --git a/assets/img/haken_vector.jpg b/assets/upload/haken_vector.jpg similarity index 100% rename from assets/img/haken_vector.jpg rename to assets/upload/haken_vector.jpg diff --git a/assets/img/joywave_content_9qco.jpg b/assets/upload/joywave_content_9qco.jpg similarity index 100% rename from assets/img/joywave_content_9qco.jpg rename to assets/upload/joywave_content_9qco.jpg diff --git a/assets/img/kvelertak.jpg b/assets/upload/kvelertak.jpg similarity index 100% rename from assets/img/kvelertak.jpg rename to assets/upload/kvelertak.jpg diff --git a/assets/img/night_club_-_scary_world-1.jpg b/assets/upload/night_club_-_scary_world-1.jpg similarity index 100% rename from assets/img/night_club_-_scary_world-1.jpg rename to assets/upload/night_club_-_scary_world-1.jpg diff --git a/assets/img/sigma.jpg b/assets/upload/sigma.jpg similarity index 100% rename from assets/img/sigma.jpg rename to assets/upload/sigma.jpg diff --git a/assets/img/the-do-shake-shook-shaken.jpg b/assets/upload/the-do-shake-shook-shaken.jpg similarity index 100% rename from assets/img/the-do-shake-shook-shaken.jpg rename to assets/upload/the-do-shake-shook-shaken.jpg diff --git a/assets/img/transgenderdysphoriablues_1024x1024.jpg b/assets/upload/transgenderdysphoriablues_1024x1024.jpg similarity index 100% rename from assets/img/transgenderdysphoriablues_1024x1024.jpg rename to assets/upload/transgenderdysphoriablues_1024x1024.jpg diff --git a/assets/img/tumblr_od8ui8iv6e1vfaqyoo1_r1_1280.jpg b/assets/upload/tumblr_od8ui8iv6e1vfaqyoo1_r1_1280.jpg similarity index 100% rename from assets/img/tumblr_od8ui8iv6e1vfaqyoo1_r1_1280.jpg rename to assets/upload/tumblr_od8ui8iv6e1vfaqyoo1_r1_1280.jpg diff --git a/assets/img/tumblr_od8ynlxegl1vfaqyoo1_1280.jpg b/assets/upload/tumblr_od8ynlxegl1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_od8ynlxegl1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_od8ynlxegl1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_od8yzti0js1vfaqyoo1_1280.jpg b/assets/upload/tumblr_od8yzti0js1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_od8yzti0js1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_od8yzti0js1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_od8z191lhw1vfaqyoo1_1280.jpg b/assets/upload/tumblr_od8z191lhw1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_od8z191lhw1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_od8z191lhw1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_od90lhpow21vfaqyoo1_1280.jpg b/assets/upload/tumblr_od90lhpow21vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_od90lhpow21vfaqyoo1_1280.jpg rename to assets/upload/tumblr_od90lhpow21vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_od911hqpw81vfaqyoo1_1280.jpg b/assets/upload/tumblr_od911hqpw81vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_od911hqpw81vfaqyoo1_1280.jpg rename to assets/upload/tumblr_od911hqpw81vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_od91wrov3p1vfaqyoo1_1280.jpg b/assets/upload/tumblr_od91wrov3p1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_od91wrov3p1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_od91wrov3p1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_od9bkx4mqi1vfaqyoo1_1280.jpg b/assets/upload/tumblr_od9bkx4mqi1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_od9bkx4mqi1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_od9bkx4mqi1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_odabwioake1vfaqyoo1_1280.jpg b/assets/upload/tumblr_odabwioake1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_odabwioake1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_odabwioake1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_odnacvmu5u1vfaqyoo1_1280.jpg b/assets/upload/tumblr_odnacvmu5u1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_odnacvmu5u1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_odnacvmu5u1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_oe03dzqv2t1vfaqyoo1_1280.jpg b/assets/upload/tumblr_oe03dzqv2t1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_oe03dzqv2t1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_oe03dzqv2t1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_oe04o4ghjq1vfaqyoo1_1280.jpg b/assets/upload/tumblr_oe04o4ghjq1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_oe04o4ghjq1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_oe04o4ghjq1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_oeb9nlsdpn1vfaqyoo1_1280.jpg b/assets/upload/tumblr_oeb9nlsdpn1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_oeb9nlsdpn1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_oeb9nlsdpn1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_oestcpgtdo1vfaqyoo1_1280.jpg b/assets/upload/tumblr_oestcpgtdo1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_oestcpgtdo1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_oestcpgtdo1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_ohvtwyysjp1vfaqyoo1_1280.jpg b/assets/upload/tumblr_ohvtwyysjp1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_ohvtwyysjp1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_ohvtwyysjp1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_ohvwiujxtj1vfaqyoo1_1280.jpg b/assets/upload/tumblr_ohvwiujxtj1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_ohvwiujxtj1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_ohvwiujxtj1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_oihg9eqkbb1vfaqyoo1_640.jpg b/assets/upload/tumblr_oihg9eqkbb1vfaqyoo1_640.jpg similarity index 100% rename from assets/img/tumblr_oihg9eqkbb1vfaqyoo1_640.jpg rename to assets/upload/tumblr_oihg9eqkbb1vfaqyoo1_640.jpg diff --git a/assets/img/tumblr_ojdjzqyaxo1vfaqyoo1_1280.jpg b/assets/upload/tumblr_ojdjzqyaxo1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_ojdjzqyaxo1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_ojdjzqyaxo1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_ojq31iv6eu1vfaqyoo1_1280.jpg b/assets/upload/tumblr_ojq31iv6eu1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_ojq31iv6eu1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_ojq31iv6eu1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_on3w8np7n41vfaqyoo1_1280.jpg b/assets/upload/tumblr_on3w8np7n41vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_on3w8np7n41vfaqyoo1_1280.jpg rename to assets/upload/tumblr_on3w8np7n41vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_oondm7xmeq1vfaqyoo1_1280.jpg b/assets/upload/tumblr_oondm7xmeq1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_oondm7xmeq1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_oondm7xmeq1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_op6u03jnrd1vfaqyoo1_1280.jpg b/assets/upload/tumblr_op6u03jnrd1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_op6u03jnrd1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_op6u03jnrd1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_orz1bzbbic1vfaqyoo1_1280.jpg b/assets/upload/tumblr_orz1bzbbic1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_orz1bzbbic1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_orz1bzbbic1vfaqyoo1_1280.jpg diff --git a/assets/img/tumblr_oyciocxvyi1vfaqyoo1_1280.jpg b/assets/upload/tumblr_oyciocxvyi1vfaqyoo1_1280.jpg similarity index 100% rename from assets/img/tumblr_oyciocxvyi1vfaqyoo1_1280.jpg rename to assets/upload/tumblr_oyciocxvyi1vfaqyoo1_1280.jpg diff --git a/assets/img/you-are-we.jpg b/assets/upload/you-are-we.jpg similarity index 100% rename from assets/img/you-are-we.jpg rename to assets/upload/you-are-we.jpg diff --git a/config.toml b/config.toml index b3222f3..754fb14 100644 --- a/config.toml +++ b/config.toml @@ -1,4 +1,5 @@ -baseURL = "http://example.org/" +baseURL = "http://127.0.0.1:8080/" languageCode = "en-us" -title = "My New Hugo Site" +title = "Now Playing" mainSections = ["musics"] +paginate = 16 diff --git a/content/musics/17-deutsche-tanze.md b/content/musics/17-deutsche-tanze.md index e2ef38e..e381f14 100644 --- a/content/musics/17-deutsche-tanze.md +++ b/content/musics/17-deutsche-tanze.md @@ -2,7 +2,7 @@ title: 17 Deutsche Tänze artist: Rotfront date: 2018-12-13T02:09:10.562Z -cover: /img/tumblr_on3w8np7n41vfaqyoo1_1280.jpg +cover: /upload/tumblr_on3w8np7n41vfaqyoo1_1280.jpg styles: - Ska - Folk diff --git a/content/musics/all-the-wars.md b/content/musics/all-the-wars.md index 4cdf1e9..257d31e 100644 --- a/content/musics/all-the-wars.md +++ b/content/musics/all-the-wars.md @@ -2,7 +2,7 @@ title: All the Wars artist: The Pineapple Thief date: 2018-12-16T02:09:10.565Z -cover: /img/tumblr_od8ui8iv6e1vfaqyoo1_r1_1280.jpg +cover: /upload/tumblr_od8ui8iv6e1vfaqyoo1_r1_1280.jpg styles: - Progressive Rock links: diff --git a/content/musics/anno-domini-high-definition.md b/content/musics/anno-domini-high-definition.md index a928257..2d547b9 100644 --- a/content/musics/anno-domini-high-definition.md +++ b/content/musics/anno-domini-high-definition.md @@ -2,7 +2,7 @@ title: Anno Domini High Definition artist: Riverside date: 2019-01-20T02:09:10.600Z -cover: /img/71veci6ghzl._sl1500.jpg +cover: /upload/71veci6ghzl._sl1500.jpg styles: - Progressive Rock links: diff --git a/content/musics/aokigahara.md b/content/musics/aokigahara.md index dd01301..8722ece 100644 --- a/content/musics/aokigahara.md +++ b/content/musics/aokigahara.md @@ -2,7 +2,7 @@ title: Aokigahara artist: Harariki For The Sky date: 2018-11-22T02:09:10.541Z -cover: /img/aokigahara-500.jpg +cover: /upload/aokigahara-500.jpg styles: - Black Metal - Post-Hardcore diff --git a/content/musics/audio-video-disco.md b/content/musics/audio-video-disco.md index b9cd3fd..bd25734 100644 --- a/content/musics/audio-video-disco.md +++ b/content/musics/audio-video-disco.md @@ -2,7 +2,7 @@ title: Audio, Video, Disco artist: Justice date: 2018-11-21T02:09:10.540Z -cover: /img/audio-video-disco-500.jpg +cover: /upload/audio-video-disco-500.jpg styles: - Electronic links: diff --git a/content/musics/bad-ideas.md b/content/musics/bad-ideas.md index b4c73f9..0301ffe 100644 --- a/content/musics/bad-ideas.md +++ b/content/musics/bad-ideas.md @@ -2,7 +2,7 @@ title: Bad Ideas artist: Tessa Violet date: 2019-01-27T02:09:10.607Z -cover: /img/c9284e25d68511b33a3376e6eafc1587.1000x1000x1.jpg +cover: /upload/c9284e25d68511b33a3376e6eafc1587.1000x1000x1.jpg styles: - Indie Pop links: diff --git a/content/musics/blood-like-lemonade.md b/content/musics/blood-like-lemonade.md index c649e41..1b76914 100644 --- a/content/musics/blood-like-lemonade.md +++ b/content/musics/blood-like-lemonade.md @@ -2,7 +2,7 @@ title: Blood Like Lemonade artist: Morcheeba date: 2018-12-04T02:09:10.553Z -cover: /img/tumblr_oestcpgtdo1vfaqyoo1_1280.jpg +cover: /upload/tumblr_oestcpgtdo1vfaqyoo1_1280.jpg styles: - Trip hop - Downtempo diff --git a/content/musics/brute-force.md b/content/musics/brute-force.md index dfd9a12..86a1f37 100644 --- a/content/musics/brute-force.md +++ b/content/musics/brute-force.md @@ -2,7 +2,7 @@ title: Brute Force artist: The Algorithm date: 2018-12-22T02:09:10.571Z -cover: /img/brute_force.jpg +cover: /upload/brute_force.jpg styles: - Electronic - Progressive Metal diff --git a/content/musics/chronologic.md b/content/musics/chronologic.md index 75e42e0..5d1f9b8 100644 --- a/content/musics/chronologic.md +++ b/content/musics/chronologic.md @@ -2,7 +2,7 @@ title: Chronologic artist: Caravan Palace date: 2019-01-23T02:09:10.603Z -cover: /img/cover-1200.jpg +cover: /upload/cover-1200.jpg styles: - Electro-Swing links: diff --git a/content/musics/compiler-optimization-techniques.md b/content/musics/compiler-optimization-techniques.md index 9324bf5..63d9770 100644 --- a/content/musics/compiler-optimization-techniques.md +++ b/content/musics/compiler-optimization-techniques.md @@ -2,7 +2,7 @@ title: Compiler Optimization Techniques artist: The Algorithm date: 2019-01-15T02:09:10.595Z -cover: /img/a2700182496_10.jpg +cover: /upload/a2700182496_10.jpg styles: - Electronic - Progressive Metal diff --git a/content/musics/content.md b/content/musics/content.md index d708d86..a044b41 100644 --- a/content/musics/content.md +++ b/content/musics/content.md @@ -2,7 +2,7 @@ title: Content artist: Joywave date: 2019-01-24T02:09:10.604Z -cover: /img/joywave_content_9qco.jpg +cover: /upload/joywave_content_9qco.jpg styles: - Alternative Rock links: diff --git a/content/musics/corpo-mente.md b/content/musics/corpo-mente.md index 393c73a..64c36c9 100644 --- a/content/musics/corpo-mente.md +++ b/content/musics/corpo-mente.md @@ -2,7 +2,7 @@ title: Corpo-Mente artist: Corpo-Mente date: 2018-11-23T02:09:10.542Z -cover: /img/tumblr_ohvwiujxtj1vfaqyoo1_1280.jpg +cover: /upload/tumblr_ohvwiujxtj1vfaqyoo1_1280.jpg styles: - Baroque - Rock diff --git a/content/musics/daft-science.md b/content/musics/daft-science.md index dd12931..151d28f 100644 --- a/content/musics/daft-science.md +++ b/content/musics/daft-science.md @@ -2,7 +2,7 @@ title: Daft Science artist: Coins date: 2019-01-09T02:09:10.589Z -cover: /img/a2061651603_16.jpg +cover: /upload/a2061651603_16.jpg styles: - Electro - Hip Pop diff --git a/content/musics/dead-end-kings.md b/content/musics/dead-end-kings.md index 1463452..3f04f97 100644 --- a/content/musics/dead-end-kings.md +++ b/content/musics/dead-end-kings.md @@ -2,7 +2,7 @@ title: Dead End Kings artist: Katatonia date: 2019-01-26T02:09:10.606Z -cover: /img/e363b405b4b4d259ddbecf01c516ae6c.1000x1000x1.jpg +cover: /upload/e363b405b4b4d259ddbecf01c516ae6c.1000x1000x1.jpg styles: - Progressive Rock - Progressive Metal diff --git a/content/musics/destrier.md b/content/musics/destrier.md index d2c44fa..3824753 100644 --- a/content/musics/destrier.md +++ b/content/musics/destrier.md @@ -2,7 +2,7 @@ title: Destrier artist: Agent Fresco date: 2019-01-18T02:09:10.598Z -cover: /img/agent-fresco.jpg +cover: /upload/agent-fresco.jpg styles: - Progressive Rock - Progressive Metal diff --git a/content/musics/echo.md b/content/musics/echo.md index 9d2f932..055a019 100644 --- a/content/musics/echo.md +++ b/content/musics/echo.md @@ -2,7 +2,7 @@ title: Echo artist: David Maxim Micic date: 2018-11-25T02:09:10.544Z -cover: /img/tumblr_od8z191lhw1vfaqyoo1_1280.jpg +cover: /upload/tumblr_od8z191lhw1vfaqyoo1_1280.jpg styles: - Progressive Metal - Rock diff --git a/content/musics/electric-girl.md b/content/musics/electric-girl.md index 2869b82..54b37bd 100644 --- a/content/musics/electric-girl.md +++ b/content/musics/electric-girl.md @@ -2,7 +2,7 @@ title: Electric Girl artist: she date: 2018-12-19T02:09:10.568Z -cover: /img/a1739426881_16.jpg +cover: /upload/a1739426881_16.jpg styles: - Electronic - Electronica diff --git a/content/musics/ember.md b/content/musics/ember.md index cac6a6a..80a0aa0 100644 --- a/content/musics/ember.md +++ b/content/musics/ember.md @@ -2,7 +2,7 @@ title: Ember artist: Kubbi date: 2018-12-01T02:09:10.550Z -cover: /img/tumblr_od90lhpow21vfaqyoo1_1280.jpg +cover: /upload/tumblr_od90lhpow21vfaqyoo1_1280.jpg styles: - Electronic - Chiptunes diff --git a/content/musics/empath.md b/content/musics/empath.md index dbfd71e..f1998b0 100644 --- a/content/musics/empath.md +++ b/content/musics/empath.md @@ -2,7 +2,7 @@ title: Empath artist: Devin Townsend date: 2019-01-14T02:09:10.594Z -cover: /img/7f29fab8-4bfb-4101-ba94-2feabe8b5ca2.jpeg +cover: /upload/7f29fab8-4bfb-4101-ba94-2feabe8b5ca2.jpeg styles: - Progressive Metal links: diff --git a/content/musics/everchild.md b/content/musics/everchild.md index bf38a2a..2ba4822 100644 --- a/content/musics/everchild.md +++ b/content/musics/everchild.md @@ -2,7 +2,7 @@ title: Everchild artist: Dark Suns date: 2018-12-02T02:09:10.551Z -cover: /img/tumblr_odabwioake1vfaqyoo1_1280.jpg +cover: /upload/tumblr_odabwioake1vfaqyoo1_1280.jpg styles: - Progressive Metal links: diff --git a/content/musics/fanfares.md b/content/musics/fanfares.md index 0a9f872..ef6b685 100644 --- a/content/musics/fanfares.md +++ b/content/musics/fanfares.md @@ -2,7 +2,7 @@ title: Fanfares artist: GoGo Penguin date: 2018-12-11T02:09:10.560Z -cover: /img/tumblr_op6u03jnrd1vfaqyoo1_1280.jpg +cover: /upload/tumblr_op6u03jnrd1vfaqyoo1_1280.jpg styles: - Jazz - Electronica diff --git a/content/musics/fear-of-a-blank-planet.md b/content/musics/fear-of-a-blank-planet.md index 1149911..45996bb 100644 --- a/content/musics/fear-of-a-blank-planet.md +++ b/content/musics/fear-of-a-blank-planet.md @@ -2,7 +2,7 @@ title: Fear of a Blank Planet artist: Porcupine Tree date: 2019-01-05T02:09:10.585Z -cover: /img/fear_of_a_blank_planet.jpg +cover: /upload/fear_of_a_blank_planet.jpg styles: - Progressive Rock links: diff --git a/content/musics/for-house-cats-and-sea-fans.md b/content/musics/for-house-cats-and-sea-fans.md index 04bc3d1..0e3e0c7 100644 --- a/content/musics/for-house-cats-and-sea-fans.md +++ b/content/musics/for-house-cats-and-sea-fans.md @@ -2,7 +2,7 @@ title: For House Cats And Sea Fans artist: Elysian Fields date: 2018-12-10T02:09:10.559Z -cover: /img/tumblr_ojdjzqyaxo1vfaqyoo1_1280.jpg +cover: /upload/tumblr_ojdjzqyaxo1vfaqyoo1_1280.jpg styles: - Indie - Chillout diff --git a/content/musics/handmade-cities.md b/content/musics/handmade-cities.md index 009eb99..c2ea3d1 100644 --- a/content/musics/handmade-cities.md +++ b/content/musics/handmade-cities.md @@ -2,7 +2,7 @@ title: Handmade Cities artist: Plini date: 2019-01-03T02:09:10.583Z -cover: /img/a2040672325_16.jpg +cover: /upload/a2040672325_16.jpg styles: - Progressive Rock - Instrumental diff --git a/content/musics/healing.md b/content/musics/healing.md index 64078e9..0236405 100644 --- a/content/musics/healing.md +++ b/content/musics/healing.md @@ -2,7 +2,7 @@ title: Healing artist: In Love With a Ghost date: 2018-12-29T02:09:10.578Z -cover: /img/a2770210702_16.jpg +cover: /upload/a2770210702_16.jpg styles: - Lofi - Piano diff --git a/content/musics/human-procastination.md b/content/musics/human-procastination.md index 761eec0..2a18a28 100644 --- a/content/musics/human-procastination.md +++ b/content/musics/human-procastination.md @@ -2,7 +2,7 @@ title: Human Procastination artist: LOOK MUM NO COMPUTER date: 2019-01-25T02:09:10.605Z -cover: /img/939x0w.jpg +cover: /upload/939x0w.jpg styles: - Electronic links: diff --git a/content/musics/hyper-light-drifter.md b/content/musics/hyper-light-drifter.md index 53abfbe..15e17ca 100644 --- a/content/musics/hyper-light-drifter.md +++ b/content/musics/hyper-light-drifter.md @@ -2,7 +2,7 @@ title: Hyper Light Drifter artist: Disasterpeace date: 2018-12-12T02:09:10.561Z -cover: /img/tumblr_oondm7xmeq1vfaqyoo1_1280.jpg +cover: /upload/tumblr_oondm7xmeq1vfaqyoo1_1280.jpg styles: - Pensive - Chiptunes diff --git a/content/musics/inhale-exhale.md b/content/musics/inhale-exhale.md index a9cf9a4..2314e46 100644 --- a/content/musics/inhale-exhale.md +++ b/content/musics/inhale-exhale.md @@ -2,7 +2,7 @@ title: Inhale / Exhale artist: Glaston date: 2018-12-27T02:09:10.576Z -cover: /img/a2612354725_16.jpg +cover: /upload/a2612354725_16.jpg styles: - Post-Rock links: diff --git a/content/musics/kodama.md b/content/musics/kodama.md index 9a3ac0e..d82bceb 100644 --- a/content/musics/kodama.md +++ b/content/musics/kodama.md @@ -2,7 +2,7 @@ title: Kodama artist: Alcest date: 2018-12-09T02:09:10.558Z -cover: /img/tumblr_ojq31iv6eu1vfaqyoo1_1280.jpg +cover: /upload/tumblr_ojq31iv6eu1vfaqyoo1_1280.jpg styles: - Post-Black Metal - Black Metal diff --git a/content/musics/kvelertak.md b/content/musics/kvelertak.md index d514674..5d51a80 100644 --- a/content/musics/kvelertak.md +++ b/content/musics/kvelertak.md @@ -2,7 +2,7 @@ title: Kvelertak artist: Kvelertak date: 2019-01-08T02:09:10.588Z -cover: /img/kvelertak.jpg +cover: /upload/kvelertak.jpg styles: - Black Metal - Punk Hardcore diff --git a/content/musics/londinium.md b/content/musics/londinium.md index d07dfce..c8ecc16 100644 --- a/content/musics/londinium.md +++ b/content/musics/londinium.md @@ -2,7 +2,7 @@ title: Londinium artist: Archive date: 2018-12-08T02:09:10.557Z -cover: /img/tumblr_ohvtwyysjp1vfaqyoo1_1280.jpg +cover: /upload/tumblr_ohvtwyysjp1vfaqyoo1_1280.jpg styles: - Trip pop links: diff --git a/content/musics/luftslott.md b/content/musics/luftslott.md index 12f7139..f47335f 100644 --- a/content/musics/luftslott.md +++ b/content/musics/luftslott.md @@ -2,7 +2,7 @@ title: Luftslott artist: Ugress date: 2018-11-28T02:09:10.547Z -cover: /img/tumblr_od9bkx4mqi1vfaqyoo1_1280.jpg +cover: /upload/tumblr_od9bkx4mqi1vfaqyoo1_1280.jpg styles: - Electronica - Trip hop diff --git a/content/musics/lux.md b/content/musics/lux.md index 8619d79..eb8acf1 100644 --- a/content/musics/lux.md +++ b/content/musics/lux.md @@ -2,7 +2,7 @@ title: LUX artist: Ez3kiel date: 2018-12-25T02:09:10.574Z -cover: /img/cover_lux.png +cover: /upload/cover_lux.png styles: - Dub - Electronic diff --git a/content/musics/minor-victories.md b/content/musics/minor-victories.md index bef288e..62614a4 100644 --- a/content/musics/minor-victories.md +++ b/content/musics/minor-victories.md @@ -2,7 +2,7 @@ title: Minor Victories artist: Minor Victories date: 2018-12-07T02:09:10.556Z -cover: /img/tumblr_oihg9eqkbb1vfaqyoo1_640.jpg +cover: /upload/tumblr_oihg9eqkbb1vfaqyoo1_640.jpg styles: - Alternative Rock - Post Rock diff --git a/content/musics/miracle.md b/content/musics/miracle.md index 2f65dfc..cbe079e 100644 --- a/content/musics/miracle.md +++ b/content/musics/miracle.md @@ -2,7 +2,7 @@ title: Miracle artist: Caravan Palace date: 2019-01-10T02:09:10.590Z -cover: /img/70743_large.jpg +cover: /upload/70743_large.jpg styles: - Electro Swing - House diff --git a/content/musics/mirrors-the-sky.md b/content/musics/mirrors-the-sky.md index 5271acd..8c46512 100644 --- a/content/musics/mirrors-the-sky.md +++ b/content/musics/mirrors-the-sky.md @@ -2,7 +2,7 @@ title: Mirrors the Sky artist: Layla Foy date: 2018-11-24T02:09:10.543Z -cover: /img/tumblr_od8ynlxegl1vfaqyoo1_1280.jpg +cover: /upload/tumblr_od8ynlxegl1vfaqyoo1_1280.jpg styles: - Pop - Psychedelic diff --git a/content/musics/moe-moe.md b/content/musics/moe-moe.md index 8f1418a..01b0363 100644 --- a/content/musics/moe-moe.md +++ b/content/musics/moe-moe.md @@ -2,7 +2,7 @@ title: Moe Moe artist: Moe Shop date: 2018-12-17T02:09:10.566Z -cover: /img/a4162111118_16.jpg +cover: /upload/a4162111118_16.jpg styles: - Electronic - Electronica diff --git a/content/musics/neon-impasse.md b/content/musics/neon-impasse.md index 35f7027..5b5e9f2 100644 --- a/content/musics/neon-impasse.md +++ b/content/musics/neon-impasse.md @@ -2,7 +2,7 @@ title: Neon Impasse artist: City Girl date: 2018-12-21T02:09:10.570Z -cover: /img/a2050194680_16.jpg +cover: /upload/a2050194680_16.jpg styles: - Soft Piano - Lofi diff --git a/content/musics/new-model.md b/content/musics/new-model.md index 5b7a7ac..87d3ae0 100644 --- a/content/musics/new-model.md +++ b/content/musics/new-model.md @@ -2,7 +2,7 @@ title: New Model artist: Perturbator date: 2019-01-02T02:09:10.582Z -cover: /img/a3395045031_16.jpg +cover: /upload/a3395045031_16.jpg styles: - Electronic - Synthwave diff --git a/content/musics/nightmare.md b/content/musics/nightmare.md index ef08f0d..4b9ad2f 100644 --- a/content/musics/nightmare.md +++ b/content/musics/nightmare.md @@ -2,7 +2,7 @@ title: Nightmare artist: Avenged Sevenfold date: 2019-01-21T02:09:10.601Z -cover: /img/avenged-sevenfold-nightmare-20161013173906.jpg +cover: /upload/avenged-sevenfold-nightmare-20161013173906.jpg styles: - Heavy Metal links: diff --git a/content/musics/nothing-but-thieves.md b/content/musics/nothing-but-thieves.md index 1226a51..81e3bfe 100644 --- a/content/musics/nothing-but-thieves.md +++ b/content/musics/nothing-but-thieves.md @@ -2,7 +2,7 @@ title: Nothing But Thieves artist: Nothing But Thieves date: 2019-01-01T02:09:10.581Z -cover: /img/1-l9ycviqberhwkdtirgf1aq.jpeg +cover: /upload/1-l9ycviqberhwkdtirgf1aq.jpeg styles: - Alternative Rock links: diff --git a/content/musics/once-more-round-the-sun.md b/content/musics/once-more-round-the-sun.md index 8a1dfc7..94ecdd7 100644 --- a/content/musics/once-more-round-the-sun.md +++ b/content/musics/once-more-round-the-sun.md @@ -2,7 +2,7 @@ title: Once More ‘Round the Sun artist: Mastodon date: 2018-11-27T02:09:10.546Z -cover: /img/tumblr_od91wrov3p1vfaqyoo1_1280.jpg +cover: /upload/tumblr_od91wrov3p1vfaqyoo1_1280.jpg styles: - Progressive Metal - Heavy Metal diff --git a/content/musics/out-of-body.md b/content/musics/out-of-body.md index b874a05..e2b9d3c 100644 --- a/content/musics/out-of-body.md +++ b/content/musics/out-of-body.md @@ -2,7 +2,7 @@ title: Out of Body artist: Dance With the Dead date: 2018-12-23T02:09:10.572Z -cover: /img/a0650005973_16.jpg +cover: /upload/a0650005973_16.jpg styles: - Synthwave - Metal diff --git a/content/musics/pandoras-pinata.md b/content/musics/pandoras-pinata.md index 06bb8ae..7e6cef2 100644 --- a/content/musics/pandoras-pinata.md +++ b/content/musics/pandoras-pinata.md @@ -2,7 +2,7 @@ title: Pandora’s Piñata artist: Diablo Swing Orchestra date: 2018-12-15T02:09:10.564Z -cover: /img/tumblr_oyciocxvyi1vfaqyoo1_1280.jpg +cover: /upload/tumblr_oyciocxvyi1vfaqyoo1_1280.jpg styles: - Progressive Metal - Swing Revival diff --git a/content/musics/pink-lemonade.md b/content/musics/pink-lemonade.md index 1992bc1..8eb9af2 100644 --- a/content/musics/pink-lemonade.md +++ b/content/musics/pink-lemonade.md @@ -2,7 +2,7 @@ title: Pink Lemonade artist: Closure in Moscow date: 2018-11-26T02:09:10.545Z -cover: /img/tumblr_od8yzti0js1vfaqyoo1_1280.jpg +cover: /upload/tumblr_od8yzti0js1vfaqyoo1_1280.jpg styles: - Progressive Rock - Psychedelic Rock diff --git a/content/musics/play-with-fire.md b/content/musics/play-with-fire.md index 5f1cdcf..7b8d831 100644 --- a/content/musics/play-with-fire.md +++ b/content/musics/play-with-fire.md @@ -2,7 +2,7 @@ title: Play with Fire artist: The Reign of Kindo date: 2018-12-06T02:09:10.555Z -cover: /img/tumblr_oe04o4ghjq1vfaqyoo1_1280.jpg +cover: /upload/tumblr_oe04o4ghjq1vfaqyoo1_1280.jpg styles: - Indie Rock - Jazz Rock diff --git a/content/musics/pray-for-the-wicked.md b/content/musics/pray-for-the-wicked.md index 88e9026..9164546 100644 --- a/content/musics/pray-for-the-wicked.md +++ b/content/musics/pray-for-the-wicked.md @@ -2,7 +2,7 @@ title: Pray For The Wicked artist: Panic! At The Disco date: 2019-01-17T02:09:10.597Z -cover: /img/eba3e87a-96b6-4a4a-97cd-c9ee8a0ac541.sized-1000x1000.jpg +cover: /upload/eba3e87a-96b6-4a4a-97cd-c9ee8a0ac541.sized-1000x1000.jpg styles: - Pop rock links: diff --git a/content/musics/prequelle.md b/content/musics/prequelle.md index 3961445..d13fab2 100644 --- a/content/musics/prequelle.md +++ b/content/musics/prequelle.md @@ -2,7 +2,7 @@ title: Prequelle artist: Ghost date: 2018-12-26T02:09:10.575Z -cover: /img/857vao72zkr01.jpg +cover: /upload/857vao72zkr01.jpg styles: - Rock - Hard Rock diff --git a/content/musics/requiem-for-romance.md b/content/musics/requiem-for-romance.md index 54c834a..78bde1c 100644 --- a/content/musics/requiem-for-romance.md +++ b/content/musics/requiem-for-romance.md @@ -2,7 +2,7 @@ title: Requiem for Romance artist: Night Club date: 2019-01-13T02:09:10.593Z -cover: /img/a2530641631_16.jpg +cover: /upload/a2530641631_16.jpg styles: - Electronic - Darkwave diff --git a/content/musics/s.md b/content/musics/s.md index 27fda36..b4335e1 100644 --- a/content/musics/s.md +++ b/content/musics/s.md @@ -2,7 +2,7 @@ title: Σ artist: REOL date: 2019-01-04T02:09:10.584Z -cover: /img/sigma.jpg +cover: /upload/sigma.jpg styles: - Electronic - Dance Music diff --git a/content/musics/scary-world.md b/content/musics/scary-world.md index ddd4b76..51bc0ae 100644 --- a/content/musics/scary-world.md +++ b/content/musics/scary-world.md @@ -2,7 +2,7 @@ title: Scary World artist: Night Club date: 2018-12-31T02:09:10.580Z -cover: /img/night_club_-_scary_world-1.jpg +cover: /upload/night_club_-_scary_world-1.jpg styles: - Electronic - Darkwave diff --git a/content/musics/shake-shook-shaken.md b/content/musics/shake-shook-shaken.md index cab0d9e..1ceb417 100644 --- a/content/musics/shake-shook-shaken.md +++ b/content/musics/shake-shook-shaken.md @@ -2,7 +2,7 @@ title: Shake Shook Shaken artist: The Dø date: 2018-12-20T02:09:10.569Z -cover: /img/the-do-shake-shook-shaken.jpg +cover: /upload/the-do-shake-shook-shaken.jpg styles: - Electronic Rock - Indie Pop diff --git a/content/musics/shrine-of-new-generation-slaves.md b/content/musics/shrine-of-new-generation-slaves.md index 01421a1..e5c4762 100644 --- a/content/musics/shrine-of-new-generation-slaves.md +++ b/content/musics/shrine-of-new-generation-slaves.md @@ -2,7 +2,7 @@ title: Shrine of New Generation Slaves artist: Riverside date: 2018-11-29T02:09:10.548Z -cover: /img/tumblr_od911hqpw81vfaqyoo1_1280.jpg +cover: /upload/tumblr_od911hqpw81vfaqyoo1_1280.jpg styles: - Progressive Rock links: diff --git a/content/musics/spanking-hour.md b/content/musics/spanking-hour.md index 5f5c9a1..d788c8c 100644 --- a/content/musics/spanking-hour.md +++ b/content/musics/spanking-hour.md @@ -2,7 +2,7 @@ title: Spanking Hour artist: Freak Kitchen date: 2019-01-07T02:09:10.587Z -cover: /img/1280x1280.jpg +cover: /upload/1280x1280.jpg styles: - Progressive Metal links: diff --git a/content/musics/taiko.md b/content/musics/taiko.md index fd726c4..b27761e 100644 --- a/content/musics/taiko.md +++ b/content/musics/taiko.md @@ -2,7 +2,7 @@ title: 太鼓 artist: Danger date: 2019-01-06T02:09:10.586Z -cover: /img/danger-taiko.jpg +cover: /upload/danger-taiko.jpg styles: - Electronic - Trip hop diff --git a/content/musics/technokinesis.md b/content/musics/technokinesis.md index 378d2d2..7a4e344 100644 --- a/content/musics/technokinesis.md +++ b/content/musics/technokinesis.md @@ -2,7 +2,7 @@ title: Technokinesis artist: Meganeko date: 2018-12-18T02:09:10.567Z -cover: /img/a0728836461_16.jpg +cover: /upload/a0728836461_16.jpg styles: - Electronic - Electronica diff --git a/content/musics/the-other-side.md b/content/musics/the-other-side.md index 29356fb..57da833 100644 --- a/content/musics/the-other-side.md +++ b/content/musics/the-other-side.md @@ -2,7 +2,7 @@ title: The Other Side artist: LukHash date: 2018-12-30T02:09:10.579Z -cover: /img/a1320994375_10.jpg +cover: /upload/a1320994375_10.jpg styles: - Electronica - Chiptunes diff --git a/content/musics/the-upper-hand.md b/content/musics/the-upper-hand.md index 94d8525..842e572 100644 --- a/content/musics/the-upper-hand.md +++ b/content/musics/the-upper-hand.md @@ -2,7 +2,7 @@ title: The Upper Hand artist: AllttA date: 2019-01-11T02:09:10.591Z -cover: /img/6b4996362018bb10e78813359075f0f7-1000x1000x1.jpg +cover: /upload/6b4996362018bb10e78813359075f0f7-1000x1000x1.jpg styles: - Hip-Pop - Electronic-Rap diff --git a/content/musics/this-is-the-warning.md b/content/musics/this-is-the-warning.md index 853e658..5fbcb5a 100644 --- a/content/musics/this-is-the-warning.md +++ b/content/musics/this-is-the-warning.md @@ -2,7 +2,7 @@ title: This Is The Warning artist: Dead Letter Circus date: 2018-12-03T02:09:10.552Z -cover: /img/tumblr_oeb9nlsdpn1vfaqyoo1_1280.jpg +cover: /upload/tumblr_oeb9nlsdpn1vfaqyoo1_1280.jpg styles: - Alternative Rock - Progressive Rock diff --git a/content/musics/transcendence.md b/content/musics/transcendence.md index 1ece40d..0c186eb 100644 --- a/content/musics/transcendence.md +++ b/content/musics/transcendence.md @@ -2,7 +2,7 @@ title: Transcendence artist: Devin Townsend Project date: 2018-12-24T02:09:10.573Z -cover: /img/81zldubpmpl._sl1500.jpg +cover: /upload/81zldubpmpl._sl1500.jpg styles: - Progressive Metal - Heavy Metal diff --git a/content/musics/transgender-dysphoria-blues.md b/content/musics/transgender-dysphoria-blues.md index 2226820..fabe444 100644 --- a/content/musics/transgender-dysphoria-blues.md +++ b/content/musics/transgender-dysphoria-blues.md @@ -2,7 +2,7 @@ title: Transgender Dysphoria Blues artist: Against Me! date: 2019-01-19T02:09:10.599Z -cover: /img/transgenderdysphoriablues_1024x1024.jpg +cover: /upload/transgenderdysphoriablues_1024x1024.jpg styles: - Punk - Punk Rock diff --git a/content/musics/trilogy.md b/content/musics/trilogy.md index 4790c90..fa7fb61 100644 --- a/content/musics/trilogy.md +++ b/content/musics/trilogy.md @@ -2,7 +2,7 @@ title: Trilogy artist: The Weeknd date: 2019-01-12T02:09:10.592Z -cover: /img/8386fd594c42ffe29b24159714f9da0b.jpg +cover: /upload/8386fd594c42ffe29b24159714f9da0b.jpg styles: - Electronic links: diff --git a/content/musics/two-hands.md b/content/musics/two-hands.md index 8eb156f..d073196 100644 --- a/content/musics/two-hands.md +++ b/content/musics/two-hands.md @@ -2,7 +2,7 @@ title: Two Hands artist: Turbowolf date: 2018-12-05T02:09:10.554Z -cover: /img/tumblr_oe03dzqv2t1vfaqyoo1_1280.jpg +cover: /upload/tumblr_oe03dzqv2t1vfaqyoo1_1280.jpg styles: - Hard Rock links: diff --git a/content/musics/vector.md b/content/musics/vector.md index 2667278..1305c54 100644 --- a/content/musics/vector.md +++ b/content/musics/vector.md @@ -2,7 +2,7 @@ title: Vector artist: Haken date: 2019-01-16T02:09:10.596Z -cover: /img/haken_vector.jpg +cover: /upload/haken_vector.jpg styles: - Progressive Metal links: diff --git a/content/musics/very-good-bad-thing.md b/content/musics/very-good-bad-thing.md index ffba1e3..e87e7c8 100644 --- a/content/musics/very-good-bad-thing.md +++ b/content/musics/very-good-bad-thing.md @@ -2,7 +2,7 @@ title: Very Good Bad Thing artist: Mother Mother date: 2018-11-30T02:09:10.549Z -cover: /img/tumblr_odnacvmu5u1vfaqyoo1_1280.jpg +cover: /upload/tumblr_odnacvmu5u1vfaqyoo1_1280.jpg styles: - Indie Rock links: diff --git a/content/musics/voice.md b/content/musics/voice.md index 5967144..dbb785c 100644 --- a/content/musics/voice.md +++ b/content/musics/voice.md @@ -2,7 +2,7 @@ title: Voice artist: Hiromi date: 2018-12-28T02:09:10.577Z -cover: /img/cover_50176662016_r.jpg +cover: /upload/cover_50176662016_r.jpg styles: - Jazz - Fusion diff --git a/content/musics/you-are-we.md b/content/musics/you-are-we.md index 1dfaab7..8023186 100644 --- a/content/musics/you-are-we.md +++ b/content/musics/you-are-we.md @@ -2,7 +2,7 @@ title: You Are We artist: While She Sleeps date: 2019-01-22T02:09:10.602Z -cover: /img/you-are-we.jpg +cover: /upload/you-are-we.jpg styles: - Metalcore links: diff --git a/content/musics/zaba.md b/content/musics/zaba.md index 136cfc5..d9629ba 100644 --- a/content/musics/zaba.md +++ b/content/musics/zaba.md @@ -2,7 +2,7 @@ title: Zaba artist: Glass Animals date: 2018-12-14T02:09:10.563Z -cover: /img/tumblr_orz1bzbbic1vfaqyoo1_1280.jpg +cover: /upload/tumblr_orz1bzbbic1vfaqyoo1_1280.jpg styles: - Indie Rock - Psychedelic Pop diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 4dad47c..7011dc5 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -3,11 +3,10 @@ {{ partial "head" . }} - {{ block "header" . }}Header{{end}} + {{ block "header" . }}{{ partial "header" . }}{{end}} {{ block "main" . }}{{ end }} {{ block "footer" . }}{{ partial "footer" . }}{{end}} - diff --git a/layouts/index.html b/layouts/index.html index 19e1d3a..73e0692 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,5 +1,33 @@ {{ define "main" }} +
+
+
+
+

+ Handpicked Albums +

+

by the Glitch Family

+
+
+
-{{ partial "musics" . }} - + +
+
+ {{ partial "musics" . }} + {{ partial "pagination" . }} +
+
+ +
+
+

About

+

At Glitch Family we love music, I mean we LOVE music! And we also LOVE great album covers. So we decided to make a place where we can showcase albums that are dear to us.

+

+ This is Now Playing.
+ A Glitch Family’s project. +

+
+
+
{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 09826be..191d2dd 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1 +1,3 @@ - + diff --git a/layouts/partials/head.html b/layouts/partials/head.html index c79257e..3a092df 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -1,27 +1,33 @@ - {{ .Title }} | {{ $.Site.Title }} + {{ .Title }} ∴ {{ $.Site.Title }} - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + - {{ if .IsHome }} - - {{ end }} + {{ $sass := resources.Get "/scss/style.scss" }} + {{ $style := $sass | resources.ToCSS }} + diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..d1ffd79 --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,18 @@ +
+
+
+ +
+ Great music should be shared +
+
+ + + +
+
diff --git a/layouts/partials/musics.html b/layouts/partials/musics.html index 8f8ad2a..a5eb0a6 100644 --- a/layouts/partials/musics.html +++ b/layouts/partials/musics.html @@ -1,14 +1,25 @@ -{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }} -{{ range sort $pages "Date" "desc" }} - -
  • - {{ .Title }} - +{{ $pages := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }} +
    + {{ range sort $pages.Pages "Date" "desc" }} {{ $original := resources.Get .Params.cover }} - {{ $cover := $original.Resize "x400" }} + {{ $cover := $original.Resize "x320" }} + {{ $cover2x := $original.Resize "x640" }} {{ $placeholder := $cover.Resize "x1" }} -
    - + -
  • -{{ end }} + {{ end }} + diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html new file mode 100644 index 0000000..39cf542 --- /dev/null +++ b/layouts/partials/pagination.html @@ -0,0 +1,75 @@ + +
    + {{"" | safeHTML }} + {{ $paginator := .Paginator }} + + {{ $adjacent_links := 2 }} + + {{ $max_links := (add (mul $adjacent_links 2) 1) }} + + {{ $lower_limit := (add $adjacent_links 1) }} + + {{ $upper_limit := (sub $paginator.TotalPages $adjacent_links) }} + + {{ if gt $paginator.TotalPages 1 }} + + {{ end }} + {{"" | safeHTML }} +
    diff --git a/static/README.md b/static/README.md new file mode 100644 index 0000000..cf00435 --- /dev/null +++ b/static/README.md @@ -0,0 +1,11 @@ +# STATIC + +**This directory is not required, you can delete it if you don't want to use it.** + +This directory contains your static files. +Each file inside this directory is mapped to `/`. +Thus you'd want to delete this README.md before deploying to production. + +Example: `/static/robots.txt` is mapped as `/robots.txt`. + +More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). diff --git a/static/favicons/android-chrome-192x192.png b/static/favicons/android-chrome-192x192.png new file mode 100644 index 0000000..7a6d051 Binary files /dev/null and b/static/favicons/android-chrome-192x192.png differ diff --git a/static/favicons/android-chrome-512x512.png b/static/favicons/android-chrome-512x512.png new file mode 100644 index 0000000..68e333a Binary files /dev/null and b/static/favicons/android-chrome-512x512.png differ diff --git a/static/favicons/apple-touch-icon.png b/static/favicons/apple-touch-icon.png new file mode 100644 index 0000000..98f2439 Binary files /dev/null and b/static/favicons/apple-touch-icon.png differ diff --git a/static/favicons/browserconfig.xml b/static/favicons/browserconfig.xml new file mode 100644 index 0000000..f2f8c50 --- /dev/null +++ b/static/favicons/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #0e1848 + + + diff --git a/static/favicons/favicon-16x16.png b/static/favicons/favicon-16x16.png new file mode 100644 index 0000000..1bdb393 Binary files /dev/null and b/static/favicons/favicon-16x16.png differ diff --git a/static/favicons/favicon-32x32.png b/static/favicons/favicon-32x32.png new file mode 100644 index 0000000..9ba7af7 Binary files /dev/null and b/static/favicons/favicon-32x32.png differ diff --git a/static/favicons/favicon.ico b/static/favicons/favicon.ico new file mode 100644 index 0000000..d2d0c16 Binary files /dev/null and b/static/favicons/favicon.ico differ diff --git a/static/favicons/mstile-144x144.png b/static/favicons/mstile-144x144.png new file mode 100644 index 0000000..6d09d0d Binary files /dev/null and b/static/favicons/mstile-144x144.png differ diff --git a/static/favicons/mstile-150x150.png b/static/favicons/mstile-150x150.png new file mode 100644 index 0000000..8de8ff9 Binary files /dev/null and b/static/favicons/mstile-150x150.png differ diff --git a/static/favicons/mstile-310x150.png b/static/favicons/mstile-310x150.png new file mode 100644 index 0000000..428d5dc Binary files /dev/null and b/static/favicons/mstile-310x150.png differ diff --git a/static/favicons/mstile-310x310.png b/static/favicons/mstile-310x310.png new file mode 100644 index 0000000..64d2374 Binary files /dev/null and b/static/favicons/mstile-310x310.png differ diff --git a/static/favicons/mstile-70x70.png b/static/favicons/mstile-70x70.png new file mode 100644 index 0000000..73326de Binary files /dev/null and b/static/favicons/mstile-70x70.png differ diff --git a/static/favicons/safari-pinned-tab.svg b/static/favicons/safari-pinned-tab.svg new file mode 100644 index 0000000..2139ec3 --- /dev/null +++ b/static/favicons/safari-pinned-tab.svg @@ -0,0 +1,23 @@ + + + + +Created by potrace 1.11, written by Peter Selinger 2001-2013 + + + + + + + diff --git a/static/favicons/site.webmanifest b/static/favicons/site.webmanifest new file mode 100644 index 0000000..5ab3efc --- /dev/null +++ b/static/favicons/site.webmanifest @@ -0,0 +1,18 @@ +{ + "name": "Now Playing", + "short_name": "Now Playing", + "icons": [ + { + "src": "./android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "./android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#0e1848", + "background_color": "#0e1848" +} diff --git a/static/fonts/sourcesanspro-black-webfont.woff b/static/fonts/sourcesanspro-black-webfont.woff new file mode 100644 index 0000000..f4dc44e Binary files /dev/null and b/static/fonts/sourcesanspro-black-webfont.woff differ diff --git a/static/fonts/sourcesanspro-black-webfont.woff2 b/static/fonts/sourcesanspro-black-webfont.woff2 new file mode 100644 index 0000000..d58afb4 Binary files /dev/null and b/static/fonts/sourcesanspro-black-webfont.woff2 differ diff --git a/static/fonts/sourcesanspro-regular-webfont.woff b/static/fonts/sourcesanspro-regular-webfont.woff new file mode 100644 index 0000000..440c9ce Binary files /dev/null and b/static/fonts/sourcesanspro-regular-webfont.woff differ diff --git a/static/fonts/sourcesanspro-regular-webfont.woff2 b/static/fonts/sourcesanspro-regular-webfont.woff2 new file mode 100644 index 0000000..4e32c46 Binary files /dev/null and b/static/fonts/sourcesanspro-regular-webfont.woff2 differ diff --git a/static/fonts/sourcesanspro-semibold-webfont.woff b/static/fonts/sourcesanspro-semibold-webfont.woff new file mode 100644 index 0000000..15a9613 Binary files /dev/null and b/static/fonts/sourcesanspro-semibold-webfont.woff differ diff --git a/static/fonts/sourcesanspro-semibold-webfont.woff2 b/static/fonts/sourcesanspro-semibold-webfont.woff2 new file mode 100644 index 0000000..31fb144 Binary files /dev/null and b/static/fonts/sourcesanspro-semibold-webfont.woff2 differ diff --git a/static/images/illustration.svg b/static/images/illustration.svg new file mode 100644 index 0000000..caa6423 --- /dev/null +++ b/static/images/illustration.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/static/images/logo-glitch-family.svg b/static/images/logo-glitch-family.svg new file mode 100644 index 0000000..a432e75 --- /dev/null +++ b/static/images/logo-glitch-family.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/static/images/triforce.svg b/static/images/triforce.svg new file mode 100644 index 0000000..5887384 --- /dev/null +++ b/static/images/triforce.svg @@ -0,0 +1,3 @@ + + +