-
-
Notifications
You must be signed in to change notification settings - Fork 208
/
custom.css
113 lines (113 loc) · 3.68 KB
/
custom.css
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
/*
Document : style
Created on : 20 Jul, 2013, 3:58:03 PM
Author : RAM
*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 15px; padding: 0; margin: 0;}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #89867e;
background: #f9f9f9;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #fff;
}
.main,
.container > header {
width: 100%;
margin: 0 auto;
padding: 2em;
}
.main {
max-width: 82.667em;
min-height: 40em;
}
.container > header {
text-align: center;
font-size: 16px;
padding: 4em 2em 3em;
background: rgba(0,0,0,0.01);
}
.container > header h1 {
font-size: 2.625em;
line-height: 1.3;
margin: 0;
font-weight: 700;
}
.container > header span {
display: block;
font-size: 60%;
color: #ceccc6;
padding: 0 0 0.6em 0.1em;
font-weight:300;
}
@media screen and (max-width: 25em) {
.codrops-icon span {
display: none;
}
.container > header {
font-size: 75%;
}
}
[id^="section-"]{margin-top:-20px;padding:25px;padding-top:5px}
[id^="section-"] h1,[id^="section-"] h3{font-family: 'Lato', Calibri, Arial, sans-serif;font-weight:300;color:#fff}
[id^="section-"] .content-wrapper{color:#f2f2f2;font-size:20px;font-weight:100}
[id^="section-"] .content-wrapper>pre{font-size:14px;display:inline-block}
[id^="section-"] .content-wrapper a{color:#f2f2f2;border-bottom: 1px dotted white}
[id^="section-"] .content-wrapper li{list-style:square}
#section-1{background:rgb(208, 101, 3)}
#section-2{background:rgb(233, 147, 26)}
#section-3{background:rgb(22, 145, 190)}
#section-4{background:rgb(22, 107, 162)}
#section-5{background:rgb(27, 54, 71)}
#section-6{background:rgb(21, 40, 54);margin-bottom:-30px}
.btn{padding:10px;border:3px solid #fff;background-color:transparent;color:#fff;font-weight:700;text-transform:uppercase;display:inline-block}
.btn:hover{border-style:dashed;cursor:pointer}
.btn:active,.demo-btn:active{border-style:dotted}
.demo-btn{position:absolute;margin-top:12px;margin-left:40px}
.element-demo{height:150px;margin:0.5em 0;padding:1em;font-family:Consolas,Monaco,'Andale Mono',monospace;text-shadow:0 -0.1em 0.2em black;border:0.3em solid #545454;border-radius:0.5em;background:none repeat scroll 0 0 #141414;box-shadow:1px 1px 0.5em black inset;overflow:auto}
.easing-buttons{margin-top:80px}
.download-buttons{margin-top:350px}
.fl{float:left}
.fr{float:right}
.disp-inl{display:inline}
.disp_inl_blk{display:inline-block}
.w30{width:30%}
.w50{width:50%}
.w60{width:60%}
.w70{width:70%}
.ptr{cursor:pointer}
/* For Responsiveness */
@media (min-width:32.5em) and (max-width: 61.250em) {
[id^="section-"] .content-wrapper{font-size:1.2em}
[id^="section-"] .content-wrapper>pre{display:block}
.demo-btn{position:relative}
.easing-buttons,.download-buttons{margin-top:0}
.fr{float:none}
.w30,.w60,.w70{width:100%}
}
@media (min-width: 32.5em) and (max-width: 38.688em) {
[id^="section-"] .content-wrapper{font-size:1.1em}
[id^="section-"] .content-wrapper>pre{display:block}
.demo-btn{position:relative}
.easing-buttons,.download-buttons{margin-top:0}
.fr{float:none}
.w30,.w60,.w70{width:100%}
}
@media (max-width: 32.438em) {
[id^="section-"] .content-wrapper{font-size:1em}
[id^="section-"] .content-wrapper>pre{display:block}
.demo-btn{position:relative}
.easing-buttons,.download-buttons{margin-top:0}
.fr{float:none}
.w30,.w60,.w70{width:100%}
}