switch to new theme due to old theme not liking newer versions. New theme seems kick-arse, however
This commit is contained in:
Don Harper
parent
1909ea34ea
commit
e3ac8b96f5
531 changed files with 147790 additions and 66 deletions
355
themes/story/static/css/descartes.less
Normal file
355
themes/story/static/css/descartes.less
Normal file
|
|
@ -0,0 +1,355 @@
|
|||
@sides: {
|
||||
t: -top;
|
||||
r: -right;
|
||||
b: -bottom;
|
||||
l: -left;
|
||||
}
|
||||
|
||||
@border-lengths: {
|
||||
-0: 0;
|
||||
-1: .125rem;
|
||||
-2: .25rem;
|
||||
-3: .5rem;
|
||||
-4: 1rem;
|
||||
-5: 2rem;
|
||||
-100pct: 100%;
|
||||
}
|
||||
|
||||
@box-lengths: {
|
||||
-0: 0;
|
||||
-1: 1rem;
|
||||
-2: 2rem;
|
||||
-3: 4rem;
|
||||
-4: 8rem;
|
||||
-5: 16rem;
|
||||
-6: 32rem;
|
||||
-7: 48rem;
|
||||
-8: 64rem;
|
||||
-9: 96rem;
|
||||
-10pct: 10%;
|
||||
-20pct: 20%;
|
||||
-30pct: 30%;
|
||||
-33pct: 33%;
|
||||
-34pct: 34%;
|
||||
-40pct: 40%;
|
||||
-50pct: 50%;
|
||||
-60pct: 60%;
|
||||
-70pct: 70%;
|
||||
-75pct: 75%;
|
||||
-80pct: 80%;
|
||||
-90pct: 90%;
|
||||
-100pct: 100%;
|
||||
-1-12th: 100%/12;
|
||||
-2-12th: 200%/12;
|
||||
-3-12th: 300%/12;
|
||||
-4-12th: 400%/12;
|
||||
-5-12th: 500%/12;
|
||||
-6-12th: 600%/12;
|
||||
-7-12th: 700%/12;
|
||||
-8-12th: 800%/12;
|
||||
-9-12th: 900%/12;
|
||||
-10-12th: 1000%/12;
|
||||
-11-12th: 1100%/12;
|
||||
-third: 100%/3;
|
||||
-two-thirds: 200%/3;
|
||||
}
|
||||
|
||||
@spacing-lengths: {
|
||||
-0: 0;
|
||||
-1: .25rem;
|
||||
-2: .5rem;
|
||||
-3: 1rem;
|
||||
-4: 2rem;
|
||||
-5: 4rem;
|
||||
-6: 8rem;
|
||||
-7: 16rem;
|
||||
-8: 32rem;
|
||||
-9: 64rem;
|
||||
}
|
||||
|
||||
// https://drafts.csswg.org/css-color/#named-colors
|
||||
@named-colors: {
|
||||
aliceblue: #F0F8FF;
|
||||
antiquewhite: #FAEBD7;
|
||||
aqua: #00FFFF;
|
||||
aquamarine: #7FFFD4;
|
||||
azure: #F0FFFF;
|
||||
beige: #F5F5DC;
|
||||
bisque: #FFE4C4;
|
||||
black: #000000;
|
||||
blanchedalmond: #FFEBCD;
|
||||
blue: #0000FF;
|
||||
blueviolet: #8A2BE2;
|
||||
brown: #A52A2A;
|
||||
burlywood: #DEB887;
|
||||
cadetblue: #5F9EA0;
|
||||
chartreuse: #7FFF00;
|
||||
chocolate: #D2691E;
|
||||
coral: #FF7F50;
|
||||
cornflowerblue: #6495ED;
|
||||
cornsilk: #FFF8DC;
|
||||
crimson: #DC143C;
|
||||
cyan: #00FFFF;
|
||||
darkblue: #00008B;
|
||||
darkcyan: #008B8B;
|
||||
darkgoldenrod: #B8860B;
|
||||
darkgray: #A9A9A9;
|
||||
darkgreen: #006400;
|
||||
darkgrey: #A9A9A9;
|
||||
darkkhaki: #BDB76B;
|
||||
darkmagenta: #8B008B;
|
||||
darkolivegreen: #556B2F;
|
||||
darkorange: #FF8C00;
|
||||
darkorchid: #9932CC;
|
||||
darkred: #8B0000;
|
||||
darksalmon: #E9967A;
|
||||
darkseagreen: #8FBC8F;
|
||||
darkslateblue: #483D8B;
|
||||
darkslategray: #2F4F4F;
|
||||
darkslategrey: #2F4F4F;
|
||||
darkturquoise: #00CED1;
|
||||
darkviolet: #9400D3;
|
||||
deeppink: #FF1493;
|
||||
deepskyblue: #00BFFF;
|
||||
dimgray: #696969;
|
||||
dimgrey: #696969;
|
||||
dodgerblue: #1E90FF;
|
||||
firebrick: #B22222;
|
||||
floralwhite: #FFFAF0;
|
||||
forestgreen: #228B22;
|
||||
fuchsia: #FF00FF;
|
||||
gainsboro: #DCDCDC;
|
||||
ghostwhite: #F8F8FF;
|
||||
gold: #FFD700;
|
||||
goldenrod: #DAA520;
|
||||
gray: #808080;
|
||||
green: #008000;
|
||||
greenyellow: #ADFF2F;
|
||||
grey: #808080;
|
||||
honeydew: #F0FFF0;
|
||||
hotpink: #FF69B4;
|
||||
indianred: #CD5C5C;
|
||||
indigo: #4B0082;
|
||||
ivory: #FFFFF0;
|
||||
khaki: #F0E68C;
|
||||
lavender: #E6E6FA;
|
||||
lavenderblush: #FFF0F5;
|
||||
lawngreen: #7CFC00;
|
||||
lemonchiffon: #FFFACD;
|
||||
lightblue: #ADD8E6;
|
||||
lightcoral: #F08080;
|
||||
lightcyan: #E0FFFF;
|
||||
lightgoldenrodyellow: #FAFAD2;
|
||||
lightgray: #D3D3D3;
|
||||
lightgreen: #90EE90;
|
||||
lightgrey: #D3D3D3;
|
||||
lightpink: #FFB6C1;
|
||||
lightsalmon: #FFA07A;
|
||||
lightseagreen: #20B2AA;
|
||||
lightskyblue: #87CEFA;
|
||||
lightslategray: #778899;
|
||||
lightslategrey: #778899;
|
||||
lightsteelblue: #B0C4DE;
|
||||
lightyellow: #FFFFE0;
|
||||
lime: #00FF00;
|
||||
limegreen: #32CD32;
|
||||
linen: #FAF0E6;
|
||||
magenta: #FF00FF;
|
||||
maroon: #800000;
|
||||
mediumaquamarine: #66CDAA;
|
||||
mediumblue: #0000CD;
|
||||
mediumorchid: #BA55D3;
|
||||
mediumpurple: #9370DB;
|
||||
mediumseagreen: #3CB371;
|
||||
mediumslateblue: #7B68EE;
|
||||
mediumspringgreen: #00FA9A;
|
||||
mediumturquoise: #48D1CC;
|
||||
mediumvioletred: #C71585;
|
||||
midnightblue: #191970;
|
||||
mintcream: #F5FFFA;
|
||||
mistyrose: #FFE4E1;
|
||||
moccasin: #FFE4B5;
|
||||
navajowhite: #FFDEAD;
|
||||
navy: #000080;
|
||||
oldlace: #FDF5E6;
|
||||
olive: #808000;
|
||||
olivedrab: #6B8E23;
|
||||
orange: #FFA500;
|
||||
orangered: #FF4500;
|
||||
orchid: #DA70D6;
|
||||
palegoldenrod: #EEE8AA;
|
||||
palegreen: #98FB98;
|
||||
paleturquoise: #AFEEEE;
|
||||
palevioletred: #DB7093;
|
||||
papayawhip: #FFEFD5;
|
||||
peachpuff: #FFDAB9;
|
||||
peru: #CD853F;
|
||||
pink: #FFC0CB;
|
||||
plum: #DDA0DD;
|
||||
powderblue: #B0E0E6;
|
||||
purple: #800080;
|
||||
rebeccapurple: #663399;
|
||||
red: #FF0000;
|
||||
rosybrown: #BC8F8F;
|
||||
royalblue: #4169E1;
|
||||
saddlebrown: #8B4513;
|
||||
salmon: #FA8072;
|
||||
sandybrown: #F4A460;
|
||||
seagreen: #2E8B57;
|
||||
seashell: #FFF5EE;
|
||||
sienna: #A0522D;
|
||||
silver: #C0C0C0;
|
||||
skyblue: #87CEEB;
|
||||
slateblue: #6A5ACD;
|
||||
slategray: #708090;
|
||||
slategrey: #708090;
|
||||
snow: #FFFAFA;
|
||||
springgreen: #00FF7F;
|
||||
steelblue: #4682B4;
|
||||
tan: #D2B48C;
|
||||
teal: #008080;
|
||||
thistle: #D8BFD8;
|
||||
tomato: #FF6347;
|
||||
turquoise: #40E0D0;
|
||||
violet: #EE82EE;
|
||||
wheat: #F5DEB3;
|
||||
white: #FFFFFF;
|
||||
whitesmoke: #F5F5F5;
|
||||
yellow: #FFFF00;
|
||||
yellowgreen: #9ACD32;
|
||||
}
|
||||
|
||||
@fifths: {
|
||||
-20pct: 80%;
|
||||
-40pct: 60%;
|
||||
-60pct: 40%;
|
||||
-80pct: 20%;
|
||||
}
|
||||
|
||||
// Text color, border color, background color, opacity
|
||||
.color-transparent, img[src~=color-transparent] { color: transparent; }
|
||||
.bg-transparent, img[src~=bg-transparent] { background-color: transparent; }
|
||||
.bc-transparent, img[src~=bc-transparent] { border-color: transparent; }
|
||||
.color(@name, @color) {
|
||||
.color-@{name}, img[src~="color-@{name}"] { color: @value; }
|
||||
each(@fifths, {
|
||||
.color-@{name}@{key}, img[src~="color-@{name}"] { color: fadeout(@color, @value); }
|
||||
});
|
||||
}
|
||||
.background-color(@name, @color) {
|
||||
.bg-@{name}, img[src~="bg-@{name}"] { background-color: @value; }
|
||||
each(@fifths, {
|
||||
.bg-@{name}@{key}, img[src~="bg-@{name}"] { background-color: fadeout(@color, @value); }
|
||||
});
|
||||
}
|
||||
.border-color(@name, @color) {
|
||||
.bc-@{name}, img[src~="bc-@{name}"] { border-color: @value; }
|
||||
each(@fifths, {
|
||||
.bc-@{name}@{key}, img[src~="bc-@{name}"] { border-color: fadeout(@color, @value); }
|
||||
});
|
||||
}
|
||||
each(@named-colors, {
|
||||
.color(@key, @value);
|
||||
.background-color(@key, @value);
|
||||
.border-color(@key, @value);
|
||||
});
|
||||
each(@fifths, {
|
||||
.opacity@{key}, img[src~="opacity-@{key}"] { opacity: 100%-@value; }
|
||||
});
|
||||
|
||||
// Border styles, widths, and radiuses
|
||||
.ba, img[src~=ba] { border: 1px solid; }
|
||||
.bn, img[src~=bn] { border: 0px none; }
|
||||
each(@sides, {
|
||||
.b@{key}, img[src~="b@{key}"] { border@{value}: 1px solid; }
|
||||
});
|
||||
each(@border-lengths, {
|
||||
.br@{key}, img[src~="br@{key}"] { border-radius: @value; }
|
||||
.bw@{key}, img[src~="bw@{key}"] { border-width: @value; }
|
||||
});
|
||||
|
||||
// Padding and margins
|
||||
each(@spacing-lengths, {
|
||||
.pa@{key}, img[src~="pa@{key}"] { padding: @value; }
|
||||
.pv@{key}, img[src~="pv@{key}"] { padding-top: @value; padding-bottom: @value; }
|
||||
.ph@{key}, img[src~="ph@{key}"] { padding-left: @value; padding-right: @value; }
|
||||
.ma@{key}, img[src~="ma@{key}"] { margin: @value; }
|
||||
.mv@{key}, img[src~="mv@{key}"] { margin-top: @value; margin-bottom: @value; }
|
||||
.mh@{key}, img[src~="mh@{key}"] { margin-left: @value; margin-right: @value; }
|
||||
});
|
||||
.spacing(@name, @side) {
|
||||
each(@spacing-lengths, {
|
||||
.p@{name}@{key}, img[src~="p@{name}@{key}"] { padding@{side}: @value; }
|
||||
.m@{name}@{key}, img[src~="m@{name}@{key}"] { margin@{side}: @value; }
|
||||
});
|
||||
}
|
||||
each(@sides, {
|
||||
.spacing(@key, @value);
|
||||
});
|
||||
|
||||
// Element widths, heights, and coordinates
|
||||
// Idle thought: combine with the inverse golden ratio, 2/(1+sqrt(5))
|
||||
each(@box-lengths, {
|
||||
.w@{key}, img[src~="w@{key}"] { width: @value; }
|
||||
.maxw@{key}, img[src~="maxw@{key}"] { max-width: @value; }
|
||||
.minw@{key}, img[src~="minw@{key}"] { min-width: @value; }
|
||||
.h@{key}, img[src~="h@{key}"] { height: @value; }
|
||||
.maxh@{key}, img[src~="maxh@{key}"] { max-height: @value; }
|
||||
.minh@{key}, img[src~="minh@{key}"] { min-height: @value; }
|
||||
.t@{key}, img[src~="t@{key}"] { top: @value; }
|
||||
.r@{key}, img[src~="r@{key}"] { right: @value; }
|
||||
.b@{key}, img[src~="b@{key}"] { bottom: @value; }
|
||||
.l@{key}, img[src~="l@{key}"] { left: @value; }
|
||||
// https://www.sitepoint.com/css-center-position-absolute-div/
|
||||
.w@{key}.center, img[src~="w@{key}"][src~=center] {
|
||||
left: 50%;
|
||||
margin-left: @value/-2;
|
||||
}
|
||||
});
|
||||
|
||||
// Element display styles, positioning, floating, etc
|
||||
.dn, img[src~=dn] { display: none; }
|
||||
.di, img[src~=di] { display: inline; }
|
||||
.db, img[src~=db] { display: block; }
|
||||
.dib, img[src~=dib] { display: inline-block; }
|
||||
|
||||
.fl, img[src~=fl] { float: left; }
|
||||
.fr, img[src~=fr] { float: right; }
|
||||
.fn, img[src~=fn] { float: none; }
|
||||
|
||||
img[src~=cf]:before,
|
||||
img[src~=cf]:after { content: " "; display: table; }
|
||||
img[src~=cf]:after { clear: both; }
|
||||
.cf, img[src~=cf] { *zoom: 1; }
|
||||
|
||||
.static, img[src~=static] { position: static; }
|
||||
.relative, img[src~=relative] { position: relative; }
|
||||
.absolute, img[src~=absolute] { position: absolute; }
|
||||
.fixed, img[src~=fixed] { position: fixed; }
|
||||
|
||||
.center, img[src~=center] { display: block; margin-left: auto; margin-right: auto; }
|
||||
|
||||
// Object-fitting and covering
|
||||
.ofc, img[src~=ofc] { object-fit: contain; }
|
||||
.ofv, img[src~=ofv] { object-fit: cover; }
|
||||
.opl, img[src~=opl] { object-position: left !important; }
|
||||
.opc, img[src~=opc] { object-position: center !important; }
|
||||
.opr, img[src~=opr] { object-position: right !important; }
|
||||
.opt, img[src~=opt] { object-position: top !important; }
|
||||
.opb, img[src~=opb] { object-position: bottom !important; }
|
||||
.oplt, img[src~=oplt] { object-position: left top !important; }
|
||||
.oplc, img[src~=oplc] { object-position: left center !important; }
|
||||
.oplb, img[src~=oplb] { object-position: left bottom !important; }
|
||||
.opct, img[src~=opct] { object-position: center top !important; }
|
||||
.opcc, img[src~=opcc] { object-position: center center !important; }
|
||||
.opcb, img[src~=opcb] { object-position: center bottom !important; }
|
||||
.oprt, img[src~=oprt] { object-position: right top !important; }
|
||||
.oprc, img[src~=oprc] { object-position: right center !important; }
|
||||
.oprb, img[src~=oprb] { object-position: right bottom !important; }
|
||||
|
||||
// Box shadows
|
||||
.shadow-1, img[src~=shadow-1] { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
|
||||
.shadow-2, img[src~=shadow-2] { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
|
||||
.shadow-3, img[src~=shadow-3] { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
|
||||
.shadow-4, img[src~=shadow-4] { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
|
||||
.shadow-5, img[src~=shadow-5] { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
|
||||
Loading…
Add table
Add a link
Reference in a new issue