pouet
Tixie
249
.csscomb.json
Normal file
|
|
@ -0,0 +1,249 @@
|
|||
{
|
||||
"remove-empty-rulesets": true,
|
||||
"always-semicolon": true,
|
||||
"color-case": "lower",
|
||||
"block-indent": " ",
|
||||
"color-shorthand": true,
|
||||
"element-case": "lower",
|
||||
"eof-newline": true,
|
||||
"leading-zero": false,
|
||||
"quotes": "double",
|
||||
"space-after-colon": " ",
|
||||
"space-before-combinator": " ",
|
||||
"space-after-combinator": " ",
|
||||
"space-between-declarations": "\n",
|
||||
"space-before-opening-brace": " ",
|
||||
"space-after-opening-brace": "\n",
|
||||
"space-after-selector-delimiter": "\n",
|
||||
"space-before-selector-delimiter": "",
|
||||
"space-before-closing-brace": "\n",
|
||||
"strip-spaces": true,
|
||||
"sort-order": [
|
||||
[
|
||||
"position",
|
||||
"top",
|
||||
"right",
|
||||
"bottom",
|
||||
"left",
|
||||
"z-index",
|
||||
"display",
|
||||
"visibility",
|
||||
"-moz-appearance",
|
||||
"-webkit-appearance",
|
||||
"appearance",
|
||||
"flex-direction",
|
||||
"flex-wrap",
|
||||
"flex-flow",
|
||||
"justify-content",
|
||||
"align-items",
|
||||
"align-content",
|
||||
"flex-grow",
|
||||
"flex-shrink",
|
||||
"flex-basis",
|
||||
"flex",
|
||||
"order",
|
||||
"align-self",
|
||||
"flex-pack",
|
||||
"flex-align",
|
||||
"flex-item-align",
|
||||
"float",
|
||||
"clear",
|
||||
"overflow",
|
||||
"overflow-x",
|
||||
"overflow-y",
|
||||
"-webkit-overflow-scrolling",
|
||||
"clip",
|
||||
"box-sizing",
|
||||
"margin",
|
||||
"margin-top",
|
||||
"margin-right",
|
||||
"margin-bottom",
|
||||
"margin-left",
|
||||
"padding",
|
||||
"padding-top",
|
||||
"padding-right",
|
||||
"padding-bottom",
|
||||
"padding-left",
|
||||
"min-width",
|
||||
"min-height",
|
||||
"max-width",
|
||||
"max-height",
|
||||
"width",
|
||||
"height",
|
||||
"outline",
|
||||
"outline-width",
|
||||
"outline-style",
|
||||
"outline-color",
|
||||
"outline-offset",
|
||||
"border",
|
||||
"border-spacing",
|
||||
"border-collapse",
|
||||
"border-width",
|
||||
"border-style",
|
||||
"border-color",
|
||||
"border-top",
|
||||
"border-top-width",
|
||||
"border-top-style",
|
||||
"border-top-color",
|
||||
"border-right",
|
||||
"border-right-width",
|
||||
"border-right-style",
|
||||
"border-right-color",
|
||||
"border-bottom",
|
||||
"border-bottom-width",
|
||||
"border-bottom-style",
|
||||
"border-bottom-color",
|
||||
"border-left",
|
||||
"border-left-width",
|
||||
"border-left-style",
|
||||
"border-left-color",
|
||||
"border-radius",
|
||||
"border-top-left-radius",
|
||||
"border-top-right-radius",
|
||||
"border-bottom-right-radius",
|
||||
"border-bottom-left-radius",
|
||||
"border-image",
|
||||
"border-image-source",
|
||||
"border-image-slice",
|
||||
"border-image-width",
|
||||
"border-image-outset",
|
||||
"border-image-repeat",
|
||||
"border-top-image",
|
||||
"border-right-image",
|
||||
"border-bottom-image",
|
||||
"border-left-image",
|
||||
"border-corner-image",
|
||||
"border-top-left-image",
|
||||
"border-top-right-image",
|
||||
"border-bottom-right-image",
|
||||
"border-bottom-left-image",
|
||||
"background",
|
||||
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
|
||||
"background-color",
|
||||
"background-image",
|
||||
"background-attachment",
|
||||
"background-position",
|
||||
"background-position-x",
|
||||
"background-position-y",
|
||||
"background-clip",
|
||||
"background-origin",
|
||||
"background-size",
|
||||
"background-repeat",
|
||||
"box-decoration-break",
|
||||
"box-shadow",
|
||||
"fill",
|
||||
"color",
|
||||
"table-layout",
|
||||
"caption-side",
|
||||
"empty-cells",
|
||||
"list-style",
|
||||
"list-style-position",
|
||||
"list-style-type",
|
||||
"list-style-image",
|
||||
"quotes",
|
||||
"content",
|
||||
"counter-increment",
|
||||
"counter-reset",
|
||||
"-ms-writing-mode",
|
||||
"vertical-align",
|
||||
"text-align",
|
||||
"text-align-last",
|
||||
"text-decoration",
|
||||
"text-emphasis",
|
||||
"text-emphasis-position",
|
||||
"text-emphasis-style",
|
||||
"text-emphasis-color",
|
||||
"text-indent",
|
||||
"-ms-text-justify",
|
||||
"text-justify",
|
||||
"text-outline",
|
||||
"text-transform",
|
||||
"text-wrap",
|
||||
"-ms-text-overflow",
|
||||
"text-overflow",
|
||||
"text-overflow-ellipsis",
|
||||
"text-overflow-mode",
|
||||
"text-shadow",
|
||||
"white-space",
|
||||
"word-spacing",
|
||||
"-ms-word-wrap",
|
||||
"word-wrap",
|
||||
"-ms-word-break",
|
||||
"word-break",
|
||||
"-moz-tab-size",
|
||||
"-o-tab-size",
|
||||
"tab-size",
|
||||
"-webkit-hyphens",
|
||||
"-moz-hyphens",
|
||||
"hyphens",
|
||||
"letter-spacing",
|
||||
"font",
|
||||
"font-display",
|
||||
"font-weight",
|
||||
"font-style",
|
||||
"font-variant",
|
||||
"font-size-adjust",
|
||||
"font-stretch",
|
||||
"font-size",
|
||||
"font-family",
|
||||
"src",
|
||||
"line-height",
|
||||
"opacity",
|
||||
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
|
||||
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
|
||||
"-ms-interpolation-mode",
|
||||
"-webkit-filter",
|
||||
"-ms-filter",
|
||||
"filter",
|
||||
"resize",
|
||||
"cursor",
|
||||
"nav-index",
|
||||
"nav-up",
|
||||
"nav-right",
|
||||
"nav-down",
|
||||
"nav-left",
|
||||
"transition",
|
||||
"transition-delay",
|
||||
"transition-timing-function",
|
||||
"transition-duration",
|
||||
"transition-property",
|
||||
"transform",
|
||||
"transform-origin",
|
||||
"animation",
|
||||
"animation-name",
|
||||
"animation-duration",
|
||||
"animation-play-state",
|
||||
"animation-timing-function",
|
||||
"animation-delay",
|
||||
"animation-iteration-count",
|
||||
"animation-direction",
|
||||
"pointer-events",
|
||||
"unicode-bidi",
|
||||
"direction",
|
||||
"columns",
|
||||
"column-span",
|
||||
"column-width",
|
||||
"column-count",
|
||||
"column-fill",
|
||||
"column-gap",
|
||||
"column-rule",
|
||||
"column-rule-width",
|
||||
"column-rule-style",
|
||||
"column-rule-color",
|
||||
"break-before",
|
||||
"break-inside",
|
||||
"break-after",
|
||||
"page-break-before",
|
||||
"page-break-inside",
|
||||
"page-break-after",
|
||||
"orphans",
|
||||
"widows",
|
||||
"-ms-zoom",
|
||||
"zoom",
|
||||
"max-zoom",
|
||||
"min-zoom",
|
||||
"user-zoom",
|
||||
"orientation"
|
||||
]
|
||||
]
|
||||
}
|
||||
64
assets/scss/1-core/_00-mixins.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
// --------------------------------------------------------------
|
||||
// == mixins */
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@mixin flow($font-size, $bf: $base-font, $lh: $line-height) {
|
||||
$lh-value: $base-font * $lh;
|
||||
$coeff: ceil($font-size / $lh-value);
|
||||
$new-lh: ($lh-value / $font-size) * $coeff;
|
||||
$margin-bottom: $new-lh / $coeff;
|
||||
|
||||
margin-bottom: $margin-bottom + em;
|
||||
font-size: $font-size / 10 + rem;
|
||||
line-height: $new-lh;
|
||||
}
|
||||
|
||||
|
||||
/* Glitch
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
|
||||
@mixin textGlitch($name, $intensity, $background, $highlightColor1, $highlightColor2, $width, $height) {
|
||||
|
||||
position: relative;
|
||||
$steps: $intensity;
|
||||
|
||||
// Ensure the @keyframes are generated at the root level
|
||||
@at-root {
|
||||
// We need two different ones
|
||||
@for $i from 1 through 2 {
|
||||
@keyframes #{$name}-anim-#{$i} {
|
||||
@for $i from 0 through $steps {
|
||||
#{percentage($i*(1/$steps)) - 60} {
|
||||
clip: rect(
|
||||
random($height)+px,
|
||||
$width+px,
|
||||
random($height)+px,
|
||||
0
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: $background;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
}
|
||||
&:after {
|
||||
left: 2px;
|
||||
text-shadow: -1px 0 $highlightColor1;
|
||||
animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
|
||||
}
|
||||
&:before {
|
||||
left: -2px;
|
||||
text-shadow: 2px 0 $highlightColor2;
|
||||
animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
|
||||
}
|
||||
}
|
||||
48
assets/scss/1-core/_01-reset.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == reset */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
code,
|
||||
pre,
|
||||
textarea,
|
||||
input,
|
||||
video,
|
||||
svg {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
border-style: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* fix input no style on Safari */
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
28
assets/scss/1-core/_02-typography.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == typography */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
/* IE9-11 calculation fix */
|
||||
font-size: calc(1em * .625);
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: $base-font / 10 + em;
|
||||
line-height: $line-height;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
blockquote,
|
||||
pre,
|
||||
td,
|
||||
th,
|
||||
label,
|
||||
textarea,
|
||||
caption {
|
||||
margin: 0 0 ($line-height + em) 0;
|
||||
}
|
||||
29
assets/scss/1-core/_03-helpers.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == helpers */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
/* screen readers
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
/* Hide only visually, but have it available for screen readers (from HTML5 Boilerplate) */
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.visually-hidden.focusable:active,
|
||||
.visually-hidden.focusable:focus {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
27
assets/scss/1-core/_04-layout.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == layout */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
/* BFC to the rescue */
|
||||
.mod {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.clear,
|
||||
.line,
|
||||
.row {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* blocks that must contain floats */
|
||||
.clearfix:after,
|
||||
.line:after,
|
||||
.mod:after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.inbl {
|
||||
display: inline-block;
|
||||
}
|
||||
124
assets/scss/1-core/_05-flexgrid.scss
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
// important: nth-child(n) is used to keep same specificity between grid (equal and unequal)
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.grid > * {
|
||||
display: block; /* IE fix */
|
||||
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
||||
// equal grid
|
||||
@mixin grid($number:$number, $gutter:$default-gutter, $mb:$gutter) {
|
||||
|
||||
// equal grid no gutter
|
||||
@if $gutter == 0 {
|
||||
& {
|
||||
margin-bottom: -$mb;
|
||||
}
|
||||
|
||||
& > *:nth-child(n) {
|
||||
margin-bottom: $mb;
|
||||
width: calc(100% * 1 / #{$number} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
// one column mode
|
||||
@if $number == 1 {
|
||||
& {
|
||||
margin-bottom: -$mb;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
& > *:nth-child(n) {
|
||||
margin-bottom: $mb;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// with gutter (avoid percentage since it doesn't work well with margin bottom)
|
||||
@if $number>1 and $gutter>0 {
|
||||
& {
|
||||
margin-bottom: -$mb; /* avoid unwanted margin on last line */
|
||||
margin-left: -$gutter;
|
||||
}
|
||||
|
||||
& > *:nth-child(n) {
|
||||
margin-bottom: $mb;
|
||||
margin-left: $gutter;
|
||||
width: calc(100% * 1 / #{$number} - #{$gutter} - .01px); // .01px = $bugfix IE
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// unequal grid
|
||||
@mixin unequalGrid($column1, $column2, $gutter:$default-gutter, $mb:$gutter) {
|
||||
|
||||
// no gutter (when gutter = 0)
|
||||
@if $gutter == 0 {
|
||||
& > *:nth-child(odd) {
|
||||
width: calc(#{$size});
|
||||
|
||||
$size : ($column1 * 100%) / ($column1 + $column2);
|
||||
}
|
||||
|
||||
& > *:nth-child(even) {
|
||||
width: calc(#{$size});
|
||||
|
||||
$size : ($column2 * 100%) / ($column1 + $column2);
|
||||
}
|
||||
}
|
||||
|
||||
// with gutter
|
||||
@else {
|
||||
$g : $gutter / 2;
|
||||
|
||||
&>* {
|
||||
margin-bottom: $mb;
|
||||
}
|
||||
|
||||
& > *:nth-child(odd) {
|
||||
$size : ($column1 * 100%) / ($column1 + $column2);
|
||||
|
||||
width: calc(#{$size} - #{$g} - .01px); // .01px = $bugfix IE
|
||||
}
|
||||
|
||||
& > *:nth-child(even) {
|
||||
$size : ($column2 * 100%) / ($column1 + $column2);
|
||||
|
||||
margin-left: $gutter;
|
||||
width: calc(#{$size} - #{$g} - .01px); // .01px = $bugfix IE
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* vertical align
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
[class*="grid-top"] {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
[class*="grid-bottom"] {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
[class*="grid-center"] {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* helpers
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
[class*="grid-"].grid-noMargin > * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
84
assets/scss/1-core/_06-rwd.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == rwd */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
/* responsive iframe http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/ */
|
||||
|
||||
.responsive-iframe {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.responsive-iframe iframe,
|
||||
.responsive-iframe object,
|
||||
.responsive-iframe embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* utilities
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: ($large + 1)) {
|
||||
[class*="-l+"][class*="hidden-"]:not([class*="up"]) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: ($medium + 1)) and (max-width: $large) {
|
||||
[class*="-l"][class*="hidden-"]:not([class*="up"]) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: ($small + 1)) and (max-width: $medium) {
|
||||
[class*="-m"][class*="hidden-"]:not([class*="up"]) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: ($xsmall + 1)) and (max-width: $small) {
|
||||
[class*="-s"][class*="hidden-"]:not([class*="up"]) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: $xsmall) {
|
||||
[class*="-xs"][class*="hidden-"]:not([class*="up"]) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: $small) {
|
||||
.hidden-s-up {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: $xsmall) {
|
||||
.hidden-xs-up {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* xsmall
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
@media (max-width: $xsmall) {
|
||||
.mod {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
41
assets/scss/1-core/_debug.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == debug */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
/*
|
||||
* Generates a random color
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin randomColor {
|
||||
$red: round(random()*222);
|
||||
$green: round(random()*222);
|
||||
$blue: round(random()*222);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Easily debug an element
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin debug() {
|
||||
@include randomColor;
|
||||
border: .3rem dotted rgb($red, $green, $blue);
|
||||
background-color: rgba($red, $green, $blue, 30%);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Display grid for vertical rhythm
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin debug-rythm($bh: $line-height) {
|
||||
background: linear-gradient(to bottom, #ba9b9a .1em, transparent .1em ) !important;
|
||||
background-size: 100% ($bh + em) !important;
|
||||
}
|
||||
|
||||
.debug-rythm {
|
||||
@include debug-rythm();
|
||||
}
|
||||
46
assets/scss/2-helpers/_alignment.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == alignment */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
/* block
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* text/inline
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.txtright {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.txtcenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.txtleft {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.vtop {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.vbottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.vmiddle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
11
assets/scss/2-helpers/_colors.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == colors */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.color-primary {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.color-secondary {
|
||||
color: $color-secondary;
|
||||
}
|
||||
179
assets/scss/2-helpers/_spacing.scss
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == spacings */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.ma0 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pa0 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ma1 {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.ma2 {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.ma3 {
|
||||
margin: 3rem;
|
||||
}
|
||||
|
||||
.pa1 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.pa2 {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.pa3 {
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.mt0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mt1 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mt2 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.mt3 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.mt4 {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.mt5 {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.mr0 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mr1 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.mr2 {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.mr3 {
|
||||
margin-right: 3rem;
|
||||
}
|
||||
|
||||
.mb0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mb1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mb2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.mb3 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.mb4 {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.mb5 {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.ml0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.ml1 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.ml2 {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.ml3 {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.pt0 {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.pt1 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.pt2 {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.pt3 {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
.pr0 {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.pr1 {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.pr2 {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.pr3 {
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.pb0 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.pb1 {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pb2 {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pb3 {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.pl0 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.pl1 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.pl2 {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.pl3 {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
7
assets/scss/2-helpers/_state.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == state */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.is-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
45
assets/scss/2-helpers/_text.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == text */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* font size
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.txtsmaller {
|
||||
@include flow($base-font - 4);
|
||||
}
|
||||
|
||||
.txtsmall {
|
||||
@include flow($base-font - 2);
|
||||
}
|
||||
|
||||
.txtbig {
|
||||
@include flow($base-font + 2);
|
||||
}
|
||||
|
||||
.txtbigger {
|
||||
@include flow($base-font + 4);
|
||||
}
|
||||
|
||||
/* transformations
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
18
assets/scss/2-helpers/_width.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == width */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.w10 { width: 10%; }
|
||||
.w20 { width: 20%; }
|
||||
.w25 { width: 25%; }
|
||||
.w30 { width: 30%; }
|
||||
.w33 { width: 33.3333%; }
|
||||
.w40 { width: 40%; }
|
||||
.w50 { width: 50%; }
|
||||
.w60 { width: 60%; }
|
||||
.w66 { width: 66.6666%; }
|
||||
.w70 { width: 70%; }
|
||||
.w75 { width: 75%; }
|
||||
.w80 { width: 80%; }
|
||||
.w90 { width: 90%; }
|
||||
.w100 { width: 100%; }
|
||||
122
assets/scss/3-components/_buttons.scss
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
/**
|
||||
* Button Module
|
||||
* namespace : .btn
|
||||
*/
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == configuration */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
|
||||
$btn-primary: $color-secondary;
|
||||
$btn-secondary: rgba($color-light-text, .05);
|
||||
$btn-success: #1cb841;
|
||||
$btn-danger: #c53a3a;
|
||||
$btn-hover: 5%;
|
||||
$btn-radius: .2rem;
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 1.5rem 2.5rem;
|
||||
border: none;
|
||||
border-radius: $btn-radius;
|
||||
background-color: $btn-primary;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
font-size: 2rem;
|
||||
line-height: normal;
|
||||
cursor: pointer;
|
||||
transition: background-color .4s;
|
||||
}
|
||||
|
||||
.btn:active,
|
||||
.btn:focus {
|
||||
outline: none;
|
||||
box-shadow: $focus-ring;
|
||||
}
|
||||
|
||||
/* colors
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.btn--primary,
|
||||
.btn--primary:link,
|
||||
.btn--primary:visited {
|
||||
background-color: rgba($btn-primary, .6);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn--primary:hover,
|
||||
.btn--primary:active,
|
||||
.btn--primary:focus {
|
||||
background-color: $btn-primary;
|
||||
}
|
||||
|
||||
.btn--secondary,
|
||||
.btn--secondary:link,
|
||||
.btn--secondary:visited {
|
||||
background-color: $btn-secondary;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn--secondary:hover,
|
||||
.btn--secondary:active,
|
||||
.btn--secondary:focus {
|
||||
background-color: rgba($color-light-text, .1);
|
||||
}
|
||||
|
||||
.btn--secondary.disabled,
|
||||
.btn--secondary.disabled:hover,
|
||||
.btn--secondary.disabled:active,
|
||||
.btn--secondary.disabled:focus {
|
||||
background-color: rgba($color-light-text, .05);
|
||||
box-shadow: none;
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn--danger,
|
||||
.btn--danger:link,
|
||||
.btn--danger:visited {
|
||||
background-color: $btn-danger;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.btn--danger:hover,
|
||||
.btn--danger:active,
|
||||
.btn--danger:focus {
|
||||
background-color: darken($btn-danger, $btn-hover);
|
||||
}
|
||||
|
||||
.btn--link,
|
||||
.btn--link:link,
|
||||
.btn--link:visited {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $color-light-text;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn--link:hover,
|
||||
.btn--link:active,
|
||||
.btn--link:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* size
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.btn--big {
|
||||
padding: 2rem 4rem;
|
||||
}
|
||||
214
assets/scss/3-components/_forms.scss
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
/**
|
||||
* Form Module
|
||||
* Namespace : .form
|
||||
*/
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == configuration */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
|
||||
$input-border-radius: .3rem;
|
||||
$input-border: none;
|
||||
$input-background-color: rgba(#fff, .07);
|
||||
$input-hover: 5%;
|
||||
$input-placeholder-color: #c4c1be;
|
||||
$input-error: #ff3860;
|
||||
$input-required: #ff3860;
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
/* placeholders
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
input:-moz-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
textarea:-moz-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
|
||||
/* block form
|
||||
-------------------------------------------------------------- */
|
||||
.f-group {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
label,
|
||||
.label {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
vertical-align: middle;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* inline form
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.f-inline label,
|
||||
.f-inline .label {
|
||||
display: inline-block;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.f-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.f-inline input,
|
||||
.f-inline .btn {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.f-inline .btn {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
/* basics style
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
fieldset {
|
||||
margin: 2.5rem 0;
|
||||
padding: 1em;
|
||||
border: .1rem solid rgba(#fff, .1);
|
||||
}
|
||||
|
||||
legend {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
label,
|
||||
.label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
select {
|
||||
margin: 0;
|
||||
border: .1rem solid #ccc;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: .4em;
|
||||
min-width: 32rem;
|
||||
min-height: 8em;
|
||||
vertical-align: top;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 1em 1.3rem;
|
||||
max-width: 32rem;
|
||||
width: 100%;
|
||||
border: $input-border;
|
||||
border-radius: $input-border-radius;
|
||||
background: $input-background-color;
|
||||
color: #fff;;
|
||||
}
|
||||
|
||||
textarea:active,
|
||||
textarea:focus,
|
||||
select:active,
|
||||
select:focus,
|
||||
input:active,
|
||||
input:focus {
|
||||
outline: none;
|
||||
box-shadow: $focus-ring;
|
||||
}
|
||||
|
||||
input[type="radio"] + label,
|
||||
input[type="checkbox"] + label {
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
padding: 0;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
/* autogrid
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
[class^="f-grid"] {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
[class^="f-grid"] > * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
[class^="f-grid"] > *:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[class^="f-grid"] input {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* size
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.f-size-1 {
|
||||
max-width: 10rem;
|
||||
}
|
||||
|
||||
.f-size-2 {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.f-size-3 {
|
||||
max-width: 30rem;
|
||||
}
|
||||
|
||||
.f-size-4 {
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
.f-size-5 {
|
||||
max-width: 50rem;
|
||||
}
|
||||
|
||||
.f-size-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* errors
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.f-required {
|
||||
color: $input-error;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.f-error input {
|
||||
margin-bottom: .8rem;
|
||||
border: .1rem solid $input-error;
|
||||
}
|
||||
|
||||
.f-error-message {
|
||||
color: $input-error;
|
||||
}
|
||||
42
assets/scss/3-components/_notifications.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* Notification module
|
||||
* Namespace : .notif
|
||||
*/
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == configuration */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
$notif-success: #00d1b2;
|
||||
$notif-warning: #ffdd57;
|
||||
$notif-error: #ff3860;
|
||||
$notif-info: $color-info;
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.notif {
|
||||
padding: 1em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.notif--success {
|
||||
background-color: $notif-success;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.notif--warning {
|
||||
background-color: $notif-warning;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.notif--error {
|
||||
background-color: $notif-error;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.notif--info {
|
||||
background-color: $notif-info;
|
||||
color: #fff;
|
||||
}
|
||||
34
assets/scss/3-components/_pagination.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
/**
|
||||
* Pagination Module
|
||||
* namespace : .pagination
|
||||
*/
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.pagination {
|
||||
display: inline-block;
|
||||
padding-top: 10rem;
|
||||
width: 100%;
|
||||
border-radius: .4rem;
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
.pagination > .container {
|
||||
max-width: 68rem;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.pagination__side {
|
||||
display: flex;
|
||||
margin-top: 2rem;
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
.pagination__side > * {
|
||||
margin-right: 1rem;
|
||||
margin-left: 1rem;
|
||||
width: 50%;
|
||||
}
|
||||
71
assets/scss/3-components/_radiobox.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
/**
|
||||
* Radiobox Module
|
||||
* Namespace : .radiobox
|
||||
*/
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.radiobox {
|
||||
display: inline-flex;
|
||||
padding: .2rem;
|
||||
max-width: 32rem;
|
||||
width: 100%;
|
||||
border: $input-border;
|
||||
border-radius: $input-border-radius;
|
||||
}
|
||||
|
||||
.radiobox--full {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.radiobox input {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
.radiobox input + label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
padding: 1rem 1.8rem;
|
||||
min-height: 4rem;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
transition: all .05s ease-in;
|
||||
}
|
||||
|
||||
.radiobox input:first-child + label {
|
||||
border-radius: ($input-border-radius - .2rem) 0 0 ($input-border-radius - .2rem);
|
||||
}
|
||||
|
||||
.radiobox label:last-child {
|
||||
border-radius: 0 ($input-border-radius - .2rem) ($input-border-radius - .2rem) 0;
|
||||
}
|
||||
|
||||
/* Checked state */
|
||||
|
||||
.radiobox input:checked + label {
|
||||
background-color: $color-primary;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Focus state */
|
||||
|
||||
.radiobox input:focus + label {
|
||||
box-shadow: $focus-ring;
|
||||
}
|
||||
|
||||
.radiobox:active,
|
||||
.radiobox:focus-within {
|
||||
box-shadow: $focus-ring;
|
||||
}
|
||||
|
||||
.radiobox:focus-within input:focus + label {
|
||||
box-shadow: none;
|
||||
}
|
||||
49
assets/scss/3-components/_switch.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
/**
|
||||
* Radiobox Module
|
||||
* Namespace: .radiobox
|
||||
*/
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.switch[type="checkbox"] {
|
||||
position: relative;
|
||||
margin-top: -.05em;
|
||||
width: 4rem;
|
||||
height: 2rem;
|
||||
outline: none;
|
||||
border: $input-border;
|
||||
border-radius: 42rem;
|
||||
background-color: white;
|
||||
box-shadow: inset -2rem 0 0 .1rem rgba(192, 192, 192, .5);
|
||||
transition: .2s;
|
||||
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.switch[type="checkbox"]::-ms-check {
|
||||
opacity: 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; // IE 8
|
||||
}
|
||||
|
||||
/* Checked state
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.switch[type="checkbox"]:checked {
|
||||
border-color: $color-primary;
|
||||
box-shadow: inset 2rem 0 0 .1rem rgba($color-primary, .7);
|
||||
}
|
||||
|
||||
/* Focus state
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.switch[type="checkbox"]:active,
|
||||
.switch[type="checkbox"]:focus {
|
||||
box-shadow: inset -2rem 0 0 .1rem rgba(192, 192, 192, .5), $focus-ring;
|
||||
}
|
||||
|
||||
.switch[type="checkbox"]:checked:active,
|
||||
.switch[type="checkbox"]:checked:focus {
|
||||
box-shadow: inset 2rem 0 0 .1rem rgba($color-primary, .7), $focus-ring;
|
||||
}
|
||||
56
assets/scss/3-components/_tables.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
/**
|
||||
* Table Module
|
||||
* namespace : .table
|
||||
*/
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == configuration */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.table {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
border: .1rem solid #cbcbcb;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse /* remove spacing between table cells */;
|
||||
table-layout: fixed /* http://css-tricks.com/fixing-tables-long-strings */;
|
||||
}
|
||||
|
||||
.table caption {
|
||||
padding: 1em 0;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
font: italic 85%/1 arial, sans-serif;
|
||||
}
|
||||
|
||||
.table td,
|
||||
.table th {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: .5em 1em;
|
||||
border-width: 0 0 0 .1rem;
|
||||
border-left: .1rem solid #cbcbcb;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: break-word;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.table td:first-child,
|
||||
.table th:first-child {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.table thead {
|
||||
background: #e0e0e0;
|
||||
color: #000;
|
||||
vertical-align: bottom;
|
||||
text-align: left;
|
||||
}
|
||||
112
assets/scss/3-components/_tooltips.scss
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
/**
|
||||
* Tooltip Module
|
||||
* namespace : .tooltip
|
||||
*/
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == configuration */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
|
||||
$tooltip-bg: rgba($color-tertiary, .6);
|
||||
$tooltip-color: #fff;
|
||||
$tooltip-radius: .2rem;
|
||||
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == module */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
// cursor: help;
|
||||
}
|
||||
|
||||
.tooltip:hover::after,
|
||||
.tooltip:focus::after {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 1em);
|
||||
left: 50%;
|
||||
padding: .5em 1em;
|
||||
border-radius: $tooltip-radius;
|
||||
background: $tooltip-bg;
|
||||
color: $tooltip-color;
|
||||
content: attr(data-tooltip);
|
||||
white-space: nowrap;
|
||||
font-size: 1.4rem;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.tooltip:hover::before,
|
||||
.tooltip:focus::before {
|
||||
position: absolute;
|
||||
bottom: calc(100% + .45em);
|
||||
left: 50%;
|
||||
display: block;
|
||||
border: solid;
|
||||
border-width: .4em .4em 0 .4em;
|
||||
border-color: $tooltip-bg transparent;
|
||||
content: "";
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
|
||||
/* Right version
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.tooltip--right:hover::before,
|
||||
.tooltip--right:focus::before {
|
||||
bottom: 50%;
|
||||
left: calc(100% + .65em);
|
||||
border-width: .4em .4em .4em 0;
|
||||
border-color: transparent $tooltip-bg;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
.tooltip--right:hover::after,
|
||||
.tooltip--right:focus::after {
|
||||
bottom: 50%;
|
||||
left: calc(100% + .9em);
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
/* Left version
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.tooltip--left:hover::before,
|
||||
.tooltip--left:focus::before {
|
||||
right: calc(100% + .65em);
|
||||
bottom: 50%;
|
||||
left: inherit;
|
||||
border-width: .4em 0 .4em .4em;
|
||||
border-color: transparent $tooltip-bg;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
.tooltip--left:hover::after,
|
||||
.tooltip--left:focus::after {
|
||||
right: calc(100% + .9em);
|
||||
bottom: 50%;
|
||||
left: inherit;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
/* Bottom version
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.tooltip--bottom:hover::before,
|
||||
.tooltip--bottom:focus::before {
|
||||
top: calc(100% + .4em);
|
||||
bottom: inherit;
|
||||
border-width: 0 .4em .4rem .4em;
|
||||
border-color: $tooltip-bg transparent;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.tooltip--bottom:hover::after,
|
||||
.tooltip--bottom:focus::after {
|
||||
top: calc(100% + 1rem);
|
||||
bottom: inherit;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
31
assets/scss/4-base/_01-fonts.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == custom fonts */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-weight: normal;
|
||||
font-family: "Source Sans Pro";
|
||||
src: local("Source Sans Pro"), local("SourceSansPro-Regular"),
|
||||
url("/fonts/sourcesanspro-regular-webfont.woff2") format("woff2"),
|
||||
url("/fonts/sourcesanspro-regular-webfont.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-weight: 600;
|
||||
font-family: "Source Sans Pro";
|
||||
src: local("Source Sans Pro Semibold"), local("SourceSansPro-Semibold"),
|
||||
url("/fonts/sourcesanspro-semibold-webfont.woff2") format("woff2"),
|
||||
url("/fonts/sourcesanspro-semibold-webfont.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-weight: 900;
|
||||
font-family: "Source Sans Pro";
|
||||
src: local("Source Sans Pro Black"), local("SourceSansPro-Black"),
|
||||
url("/fonts/sourcesanspro-black-webfont.woff2") format("woff2"),
|
||||
url("/fonts/sourcesanspro-black-webfont.woff") format("woff");
|
||||
}
|
||||
3
assets/scss/4-base/_02-icons.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == icons */
|
||||
/* ----------------------------------------------------------- */
|
||||
49
assets/scss/4-base/_03-grids.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == grids */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
$grid-gutter: 2rem;
|
||||
$grid-mb: 2rem;
|
||||
|
||||
/**
|
||||
* Some grid examples
|
||||
*/
|
||||
|
||||
.grid-1 {
|
||||
@include grid(1, $grid-gutter, $grid-mb);
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
@include grid(2, $grid-gutter);
|
||||
}
|
||||
|
||||
.grid-2-noGutter {
|
||||
@include grid(2, 0, 0);
|
||||
}
|
||||
|
||||
.grid-1-3 {
|
||||
@include unequalGrid(1, 3, $grid-gutter, 2rem);
|
||||
}
|
||||
|
||||
.grid-1-3 {
|
||||
@include unequalGrid(1, 3, $grid-gutter, 2rem);
|
||||
}
|
||||
|
||||
.grid-catalog {
|
||||
@include grid(4, $grid-gutter, 6rem);
|
||||
}
|
||||
|
||||
@media (max-width: $small) {
|
||||
.grid-catalog {
|
||||
@include grid(3, $grid-gutter, 4rem);
|
||||
}
|
||||
.grid-1-s {
|
||||
@include grid(1, $grid-gutter);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $xsmall) {
|
||||
.grid-catalog {
|
||||
@include grid(2, 1rem, 3rem);
|
||||
}
|
||||
}
|
||||
87
assets/scss/4-base/_04-main.scss
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == main */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
body {
|
||||
background-color: $color-primary;
|
||||
color: $color-light-text;
|
||||
font-family: $fontstack1;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 4rem;
|
||||
padding-left: 4rem;
|
||||
max-width: 138rem;
|
||||
}
|
||||
|
||||
.container--small {
|
||||
max-width: 60rem;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: rgba($color-secondary, .8);
|
||||
color: $color-light-text;
|
||||
}
|
||||
|
||||
/* titles
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
h1 {
|
||||
@include flow(100);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include flow(22);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include flow(18);
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include flow(16);
|
||||
}
|
||||
|
||||
/* links
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: $color-link;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: none;
|
||||
border-radius: .3rem;
|
||||
box-shadow: $focus-ring;
|
||||
}
|
||||
|
||||
/* lists
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
ul {
|
||||
padding-left: 2rem;
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
/* divers
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
height: .1rem;
|
||||
border: 0;
|
||||
border-top: .1rem solid #ccc;
|
||||
}
|
||||
0
assets/scss/4-base/_05-layout.scss
Normal file
58
assets/scss/4-base/_06-header.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == header */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
top: 0;
|
||||
background-color: $color-bg-head;
|
||||
}
|
||||
|
||||
.header--home {
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
|
||||
.header > .container {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.header__left {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.header__logo:link,
|
||||
.header__logo:visited {
|
||||
margin-right: 1rem;
|
||||
width: 18rem;
|
||||
box-shadow: none;
|
||||
text-decoration: none;
|
||||
font-weight: 900;
|
||||
font-size: 3rem;
|
||||
line-height: 3.8rem;
|
||||
}
|
||||
|
||||
.header__logo:active,
|
||||
.header__logo:focus {
|
||||
text-decoration: underline;
|
||||
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
|
||||
.header__logo:active::before,
|
||||
.header__logo:focus::after,
|
||||
.header__logo:active::before,
|
||||
.header__logo:focus::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.header__tagline {
|
||||
margin-bottom: .4rem;
|
||||
color: rgba($color-light-text, .7);
|
||||
}
|
||||
87
assets/scss/4-base/_07-navigation.scss
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == navigation */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.navigation__item,
|
||||
.navigation__item:link,
|
||||
.navigation__item:visited {
|
||||
position: relative;
|
||||
margin-left: 4rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: rgba($color-light-text, .8);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navigation__item::after {
|
||||
position: absolute;
|
||||
top: calc(100% + .8rem);
|
||||
left: calc(50% - .3rem);
|
||||
width: .6rem;
|
||||
height: .6rem;
|
||||
border-radius: 4.2rem;
|
||||
background-color: $color-secondary;
|
||||
content: "";
|
||||
opacity: 0;
|
||||
transition: all .15s cubic-bezier(.68,-.55,.27,1.55);
|
||||
transform: translateY(-2rem);
|
||||
}
|
||||
|
||||
.navigation__item.active,
|
||||
.navigation__item:hover,
|
||||
.navigation__item:active,
|
||||
.navigation__item:focus {
|
||||
color: $color-light-text;
|
||||
}
|
||||
|
||||
.navigation__item:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navigation__item.active::after,
|
||||
.navigation__item:active::after,
|
||||
.navigation__item:focus::after {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.navigation__item--admin:link,
|
||||
.navigation__item--admin:visited {
|
||||
padding: .3rem 1rem;
|
||||
border: .1rem solid rgba(#fff, .8);
|
||||
border-radius: .3rem;
|
||||
}
|
||||
|
||||
.navigation__item--thin,
|
||||
.navigation__item--thin:link,
|
||||
.navigation__item--thin:visited,
|
||||
.navigation__item--thin:hover,
|
||||
.navigation__item--thin:active {
|
||||
color: rgba($color-light-text, .8);
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
cursor: normal;
|
||||
}
|
||||
|
||||
.navigation__item--near,
|
||||
.navigation__item--near:link,
|
||||
.navigation__item--near:visited {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
/* Mobile Menu
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.navigation__mobileBtn,
|
||||
.navigation__mobileOverlay {
|
||||
display: none;
|
||||
}
|
||||
19
assets/scss/4-base/_08-content.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == content */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.content {
|
||||
border-top: 6rem solid $color-bg-head;
|
||||
}
|
||||
|
||||
.content > :first-child {
|
||||
margin-top: -6rem;
|
||||
}
|
||||
|
||||
|
||||
.content-title {
|
||||
margin: 0;
|
||||
margin-top: 1.3rem;
|
||||
margin-bottom: 5rem;
|
||||
font-size: 5rem;
|
||||
}
|
||||
11
assets/scss/4-base/_09-footer.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == footer */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.footer {
|
||||
padding-top: 18rem;
|
||||
padding-bottom: 10rem;
|
||||
background: $color-primary url("/images/triforce.svg") no-repeat;
|
||||
background-position: center 10rem;
|
||||
text-align: center;
|
||||
}
|
||||
27
assets/scss/5-modules/glitch.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
//
|
||||
// (TEXT) PARAMS
|
||||
// =================
|
||||
// 1. Namespace
|
||||
// 2. Intensity
|
||||
// 3. Text color
|
||||
// 4. Background color (flat)
|
||||
// 5. Highlight #1 color
|
||||
// 6. Highlight #2 color
|
||||
// 7. Width (px)
|
||||
// 8. Height (px)
|
||||
//
|
||||
|
||||
.glitch,
|
||||
.glitch--hover:hover {
|
||||
position: relative;
|
||||
|
||||
@include textGlitch("glitchText", 50, $color-bg-head, red, blue, 9999, 100);
|
||||
}
|
||||
|
||||
|
||||
.glitch:nth-child(2)::after,
|
||||
.glitch--hover:hover:nth-child(2)::after,
|
||||
.glitch:nth-child(2)::before,
|
||||
.glitch--hover:hover:nth-child(2)::before {
|
||||
animation-delay: .3s;
|
||||
}
|
||||
120
assets/scss/6-pages/album.scss
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == Album showcase page */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.album {
|
||||
margin-bottom: 10rem;
|
||||
border-top: 33.7rem solid $color-bg-head;
|
||||
}
|
||||
|
||||
.album > .container {
|
||||
margin-top: -24.3rem;
|
||||
}
|
||||
|
||||
.album-layout {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* Cover
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.album-cover {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
margin-left: -7rem;
|
||||
padding: 8.5rem 9rem 8rem 7rem;
|
||||
max-width: 66rem;
|
||||
width: 51%;
|
||||
background: url("/images/illustration.svg") no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 100% 100%;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.album-cover__visual {
|
||||
flex-shrink: 0;
|
||||
max-width: 50rem;
|
||||
width: 100%;
|
||||
border-radius: .6rem;
|
||||
background-color: rgba($color-primary, .5);
|
||||
box-shadow: 0 .6rem 4.4rem 0 rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
/* Infos
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.album-infos {
|
||||
margin-left: 1rem;
|
||||
padding-top: 18.3rem;
|
||||
}
|
||||
|
||||
.album-name {
|
||||
margin: 0;
|
||||
font-weight: 900;
|
||||
font-size: 7rem;
|
||||
line-height: 7rem;
|
||||
}
|
||||
|
||||
.album-artist {
|
||||
display: block;
|
||||
margin-top: .4rem;
|
||||
color: rgba($color-light-text, .8);
|
||||
font-weight: normal;
|
||||
font-size: 3rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
|
||||
.album-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
margin-top: 4rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.album-tags__item {
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: .7rem 2rem .9rem;
|
||||
border-radius: 4.2rem;
|
||||
background: rgba($color-light-text, .1);
|
||||
list-style: none;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
/* Links
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.album-links {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.album-links__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.album-links__item:link,
|
||||
.album-links__item:visited {
|
||||
margin-right: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: .2rem;
|
||||
background-color: rgba($color-light-text, .05);
|
||||
color: $color-secondary;
|
||||
text-decoration: none;
|
||||
transition: .15s background;
|
||||
}
|
||||
|
||||
.album-links__item:hover,
|
||||
.album-links__item:active,
|
||||
.album-links__item:focus {
|
||||
background-color: rgba($color-light-text, .1);
|
||||
}
|
||||
|
||||
.album-links__item svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
18
assets/scss/6-pages/auth.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == Auth pages */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.auth-container {
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
max-width: 40rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
margin: 0;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 5rem;
|
||||
text-align: center;
|
||||
font-size: 5rem;
|
||||
}
|
||||
114
assets/scss/6-pages/catalog.scss
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == Catalog page */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
/* Head
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.catalog-head {
|
||||
padding-top: 8rem;
|
||||
padding-bottom: 6.5rem;
|
||||
background-color: $color-bg-head;
|
||||
}
|
||||
|
||||
.catalog-head__title {
|
||||
margin: 0;
|
||||
font-size: 10rem;
|
||||
}
|
||||
|
||||
.catalog-head__title--primary {
|
||||
margin-right: 3rem;
|
||||
}
|
||||
|
||||
.catalog-head__title--secondary {
|
||||
color: rgba($color-light-text, .6);
|
||||
vertical-align: baseline;
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
|
||||
/* List
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.catalog-item {
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
color: rgba($color-light-text, .8);
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.catalog-item__content,
|
||||
.catalog-item__content:link,
|
||||
.catalog-item__content:visited {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.catalog-item__content:active,
|
||||
.catalog-item__content:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.catalog-item__visual {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
order: -1;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
border-radius: .3rem;
|
||||
background-color: rgba(#fff, .3);
|
||||
box-shadow: 0 .3rem 2.2rem 0 rgba(0,0,0,.10);
|
||||
font-size: 0;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.catalog-item__content:hover .catalog-item__visual,
|
||||
.catalog-item__content:active .catalog-item__visual,
|
||||
.catalog-item__content:focus .catalog-item__visual {
|
||||
transform: scale3d(1.05, 1.05, 1.05);
|
||||
}
|
||||
|
||||
.catalog-item__content:active .catalog-item__visual,
|
||||
.catalog-item__content:focus .catalog-item__visual {
|
||||
box-shadow: $focus-ring;
|
||||
}
|
||||
|
||||
.catalog-item__album {
|
||||
margin: 0;
|
||||
margin-top: 1.5rem;
|
||||
color: $color-light-text;
|
||||
font-weight: 900;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
.catalog-item__artist {
|
||||
margin-top: .8rem;
|
||||
}
|
||||
|
||||
/* Manage button
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.catalog-item__manage:link,
|
||||
.catalog-item__manage:visited {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
margin-top: .5rem;
|
||||
margin-left: .5rem;
|
||||
padding: .5rem 1rem;
|
||||
width: calc(100% - 1rem);
|
||||
border-radius: .3rem;
|
||||
background-color: darken($color-primary, 5%);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 1.6rem;
|
||||
transition: .1s all;
|
||||
}
|
||||
|
||||
.catalog-item__manage:hover,
|
||||
.catalog-item__manage:active,
|
||||
.catalog-item__manage:focus {
|
||||
background-color: lighten($color-primary, 10%);
|
||||
}
|
||||
61
assets/scss/6-pages/home.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == Home page */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
/* Head
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.home-head {
|
||||
padding-top: 9rem;
|
||||
padding-bottom: 10rem;
|
||||
background: $color-bg-head;
|
||||
}
|
||||
|
||||
.home-head > .container {
|
||||
padding-bottom: 6rem;
|
||||
background: url("/images/illustration.svg") no-repeat;
|
||||
background-position: calc(100% - 4rem) center;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
|
||||
.home-head__container {
|
||||
max-width: 57rem;
|
||||
}
|
||||
|
||||
.home-head__title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.home-head__title span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.home-head__subtitle {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0;
|
||||
color: rgba($color-light-text, .8);
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/* About
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.home-about {
|
||||
padding-top: 20rem;
|
||||
background-color: $color-primary;
|
||||
color: rgba($color-light-text, .6rem);
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
|
||||
.home-about > .container {
|
||||
max-width: 70rem;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.home-about p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
6
assets/scss/8-rwd/_rwd-large.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == rwd -> large */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
@media (max-width: $large) {
|
||||
}
|
||||
59
assets/scss/8-rwd/_rwd-medium.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == rwd -> medium */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
@media (max-width: $medium) {
|
||||
/* Header
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.header--home::before {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
/* Album page
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.album {
|
||||
border-top-width: 21.2rem;
|
||||
}
|
||||
|
||||
.album > .container {
|
||||
margin-top: -18.4rem;
|
||||
}
|
||||
|
||||
.album-cover {
|
||||
padding-right: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.album-infos {
|
||||
padding-top: 13.5rem;
|
||||
}
|
||||
|
||||
.album-name {
|
||||
font-size: 5.5rem;
|
||||
line-height: 6rem;
|
||||
}
|
||||
|
||||
.album-artist {
|
||||
margin-top: 0;
|
||||
font-size: 2rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.album-tags {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.album-tags__item {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.album-links {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.album-links__list {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
24
assets/scss/8-rwd/_rwd-reduced-motion.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == rwd -> reduced motion */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
/* Glitch text
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.glitch::before,
|
||||
.glitch::after,
|
||||
.glitch--hover:hover::before,
|
||||
.glitch--hover:hover::after {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* Catalog
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.catalog-item__content:hover .catalog-item__visual,
|
||||
.catalog-item__content:active .catalog-item__visual,
|
||||
.catalog-item__content:focus .catalog-item__visual {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
234
assets/scss/8-rwd/_rwd-small.scss
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == rwd -> small */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
@media (max-width: $small) {
|
||||
/* Common
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.container {
|
||||
padding-right: 2rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
/* Header
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.header--home {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.header > .container {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.header__tagline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Mobile Menu
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.navigation__mobileBtn {
|
||||
display: block;
|
||||
padding: .3rem 1rem .4rem;
|
||||
border: .1rem solid rgba($color-light-text, .8);
|
||||
border-radius: .3rem;
|
||||
background-color: transparent;
|
||||
color: $color-light-text;
|
||||
transition: .1s all;
|
||||
}
|
||||
|
||||
.navigation__mobileBtn:hover,
|
||||
.navigation__mobileBtn:active {
|
||||
background-color: $color-light-text;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.navigation__mobileBtn:active,
|
||||
.navigation__mobileBtn:focus {
|
||||
outline: none;
|
||||
box-shadow: $focus-ring;
|
||||
}
|
||||
|
||||
.navigation__mobileOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
opacity: 0;
|
||||
transition: opacity .15s cubic-bezier(0, 0, .30, 1);
|
||||
}
|
||||
|
||||
.navigation__mobileOverlay.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
max-width: 30rem;
|
||||
width: 85%;
|
||||
height: 100%;
|
||||
background: $color-bg-head url("/images/triforce.svg") no-repeat;
|
||||
background-position: center calc(100% - 4rem);
|
||||
box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, .4);
|
||||
transition: transform .33s cubic-bezier(0, 0, .30, 1);
|
||||
transform: translateX(-103%);
|
||||
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.navigation.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.navigation__item,
|
||||
.navigation__item:link,
|
||||
.navigation__item:visited {
|
||||
margin: .5rem 0;
|
||||
padding: .5rem 1rem;
|
||||
border: none;
|
||||
color: rgba($color-light-text, .9);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.navigation__item:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* Footer
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.footer {
|
||||
padding-top: 13rem;
|
||||
padding-bottom: 5rem;
|
||||
background-position: center 6rem;
|
||||
}
|
||||
|
||||
/* Home
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.home-head {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 7rem;
|
||||
}
|
||||
|
||||
.home-head > .container {
|
||||
padding-bottom: 4rem;
|
||||
background-position: calc(100% - 2rem) center;
|
||||
}
|
||||
|
||||
.home-head__container {
|
||||
max-width: 36rem;
|
||||
}
|
||||
|
||||
.home-head__title {
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
.home-head__subtitle {
|
||||
margin-top: 1.2rem;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.home-about {
|
||||
padding-top: 10rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/* Catalog
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.catalog-head {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.catalog-head__title {
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
.catalog-head__title--primary {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.catalog-head__title--secondary {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
.catalog-item:link,
|
||||
.catalog-item:visited {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.catalog-item__album {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/* Album
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.album {
|
||||
margin-bottom: 5rem;
|
||||
border-top-width: 12rem;
|
||||
}
|
||||
|
||||
.album > .container {
|
||||
margin-top: -8.7rem;
|
||||
}
|
||||
|
||||
.album-cover {
|
||||
margin-left: -3rem;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.album-infos {
|
||||
margin-left: 0;
|
||||
padding-top: 5.4rem;
|
||||
}
|
||||
|
||||
.album-name {
|
||||
font-size: 3.5rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
|
||||
.album-artist {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.album-tags__item {
|
||||
padding: .4rem 1.5rem .5rem;
|
||||
color: rgba($color-light-text, .8);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.album-links__item:link,
|
||||
.album-links__item:visited {
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.album-links__item svg {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
101
assets/scss/8-rwd/_rwd-xsmall.scss
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == rwd -> xsmall */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
@media (max-width: $xsmall) {
|
||||
/* Header
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.header__logo:link,
|
||||
.header__logo:visited {
|
||||
width: 12rem;
|
||||
font-size: 2rem;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
/* Pagination
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.pagination {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.pagination > .container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Home
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.home-head__title {
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
|
||||
.home-head__title .glitch::before,
|
||||
.home-head__title .glitch::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.home-head__subtitle {
|
||||
margin-top: .5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Catalog
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.catalog-head {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.catalog-head__title {
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
|
||||
.catalog-head__title--primary {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.catalog-head__title--secondary {
|
||||
font-size: 2.3rem;
|
||||
}
|
||||
|
||||
.catalog-item__album {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.catalog-item__artist {
|
||||
margin-top: .3rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
/* Album
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.album-layout {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.album-cover {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: 80%;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.album-infos {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.album-tags,
|
||||
.album-links__list {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.album-tags,
|
||||
.album-links {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
3
assets/scss/8-rwd/_rwd.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == rwd */
|
||||
/* ----------------------------------------------------------- */
|
||||
39
assets/scss/_colors.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
// --------------------------------------------------------------
|
||||
// == colors */
|
||||
// --------------------------------------------------------------
|
||||
|
||||
// palette
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$color-primary: #0e1537;
|
||||
$color-secondary: #ff2749;
|
||||
$color-tertiary: #fec156;
|
||||
$color-info: #2185d0;
|
||||
|
||||
// backgrounds
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$color-bg-head: #0e1848;
|
||||
|
||||
// texts
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$color-light-text: #fff;
|
||||
$color-dark-text: #000;
|
||||
|
||||
// links
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$color-link: $color-light-text;
|
||||
|
||||
// brand
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$color-twitter: #55acee;
|
||||
$color-facebook: #3b5998;
|
||||
$color-google: #dd4b39;
|
||||
$color-youtube: #e52d27;
|
||||
$color-pinterest: #cc2127;
|
||||
$color-vimeo: #1ab7ea;
|
||||
$color-linkedin: #0976b4;
|
||||
$color-instagram: #3f729b;
|
||||
29
assets/scss/_config.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
// --------------------------------------------------------------
|
||||
// == config */
|
||||
// --------------------------------------------------------------
|
||||
|
||||
// base
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$base-font: 16; // px value (without unit), will be converted in em
|
||||
$line-height: 1.5;
|
||||
$fontstack1: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$fontstack2: Georgia, Times, "Times New Roman", serif;
|
||||
|
||||
// responsive
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$xsmall: 480px;
|
||||
$small: 840px;
|
||||
$medium: 960px;
|
||||
$large: 1280px;
|
||||
|
||||
// default gutter
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$default-gutter: 2rem;
|
||||
|
||||
// Focus ring
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$focus-ring: 0 0 0 .3rem rgba($color-tertiary, .5);
|
||||
96
assets/scss/style.scss
Normal file
|
|
@ -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";
|
||||
|
Before Width: | Height: | Size: 248 KiB After Width: | Height: | Size: 248 KiB |
|
Before Width: | Height: | Size: 378 KiB After Width: | Height: | Size: 378 KiB |
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 178 KiB After Width: | Height: | Size: 178 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 333 KiB After Width: | Height: | Size: 333 KiB |
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 383 KiB After Width: | Height: | Size: 383 KiB |
|
Before Width: | Height: | Size: 219 KiB After Width: | Height: | Size: 219 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 175 KiB After Width: | Height: | Size: 175 KiB |
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 856 KiB After Width: | Height: | Size: 856 KiB |
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 180 KiB After Width: | Height: | Size: 180 KiB |
|
Before Width: | Height: | Size: 171 KiB After Width: | Height: | Size: 171 KiB |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 592 KiB After Width: | Height: | Size: 592 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 484 KiB After Width: | Height: | Size: 484 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 214 KiB After Width: | Height: | Size: 214 KiB |
|
Before Width: | Height: | Size: 178 KiB After Width: | Height: | Size: 178 KiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 602 KiB After Width: | Height: | Size: 602 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 789 KiB After Width: | Height: | Size: 789 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 151 KiB |
|
Before Width: | Height: | Size: 255 KiB After Width: | Height: | Size: 255 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 324 KiB After Width: | Height: | Size: 324 KiB |
|
Before Width: | Height: | Size: 500 KiB After Width: | Height: | Size: 500 KiB |
|
Before Width: | Height: | Size: 585 KiB After Width: | Height: | Size: 585 KiB |
|
Before Width: | Height: | Size: 796 KiB After Width: | Height: | Size: 796 KiB |
|
Before Width: | Height: | Size: 255 KiB After Width: | Height: | Size: 255 KiB |
|
Before Width: | Height: | Size: 405 KiB After Width: | Height: | Size: 405 KiB |
|
Before Width: | Height: | Size: 341 KiB After Width: | Height: | Size: 341 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 585 KiB After Width: | Height: | Size: 585 KiB |
|
Before Width: | Height: | Size: 341 KiB After Width: | Height: | Size: 341 KiB |
|
Before Width: | Height: | Size: 370 KiB After Width: | Height: | Size: 370 KiB |