1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/skel';
@import 'font-awesome.min.css';
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300i,400i");
/*
Ethereal by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
@include skel-breakpoints((
xlarge: '(max-width: 1680px)',
large: '(max-width: 1280px)',
medium: '(max-width: 980px)',
small: '(max-width: 736px)',
xsmall: '(max-width: 480px)',
xxsmall: '(max-width: 360px)',
short: '(min-aspect-ratio: 16/7)',
xshort: '(min-aspect-ratio: 16/6)'
));
@include skel-layout((
reset: 'full',
boxModel: 'border'
));
// Mixins.
@mixin gradient-background($tint: false, $opacity: 0.25, $stop1: 25%, $stop2: 50%, $angle: 45deg) {
$background-image: (
url('../../images/overlay.png'),
linear-gradient($angle, transparentize(_palette(accent1), (1 - $opacity)) $stop1, transparentize(_palette(accent2), (1 - $opacity)) $stop2, transparentize(_palette(accent3), (1 - $opacity)))
);
$background-size: (
128px 128px,
auto
);
@if ($tint) {
$x: linear-gradient(0deg, rgba(0,0,0,0.125), rgba(0,0,0,0.125));
$y: auto;
$background-image: append($background-image, $x);
$background-size: append($background-size, $y);
}
background-image: $background-image;
background-size: $background-size;
}
@mixin gradient-background-small($tint: false, $opacity: 0.25, $stop1: 25%, $stop2: 50%) {
@include gradient-background($tint, $opacity, $stop1, $stop2, 135deg);
}
@mixin spans($x) {
@for $i from 0 through 10 {
@if ($i > 0) {
.span-#{$i} {
width: ($x * $i);
}
}
@if ($i < 10) {
.span-#{$i}-25 {
width: ($x * $i) + ($x * 0.25);
}
.span-#{$i}-5 {
width: ($x * $i) + ($x * 0.5);
}
.span-#{$i}-75 {
width: ($x * $i) + ($x * 0.75);
}
}
}
}
@mixin spans-small($x) {
@for $i from 0 through 10 {
@if ($i > 0) {
.span-#{$i} {
width: 100%;
}
}
@if ($i < 10) {
.span-#{$i}-25 {
width: 100%;
}
.span-#{$i}-5 {
width: 100%;
}
.span-#{$i}-75 {
width: 100%;
}
}
}
}
// Base.
@import 'base/page';
@import 'base/typography';
// Component.
@import 'components/form';
@import 'components/icon';
@import 'components/image';
@import 'components/list';
@import 'components/table';
@import 'components/button';
@import 'components/gallery';
@import 'components/panel';
@import 'components/panel-banner';
@import 'components/panel-spotlight';
// Layout.
@import 'layout/page-wrapper';
@import 'layout/wrapper';
|
