forked from hemminger8/vw-starter-kit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.css
128 lines (97 loc) · 3.63 KB
/
demo.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/* ----------------------------------------------------------------------------
Variables
Set the variables below to match your Photoshop file widths (in pixels) and to specify breakpoints based on browser window size.
---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
strip-units() : convert 14px/14em/etc to (int) 14
---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
px2rem() : convert from pixels to rems
---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
px2em() : convert from pixels to ems, based on the context (inherited font-size in pixels)
---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
px2vw() : used to calculate vw font size so as to match Photoshop (or similar) design files.
Example usage:
$base-font-size: 16px;
html {
font-size: $base-font-size;
// set font-size to scale until reach max width of the site
@media screen and (max-width: $desktop-max) {
font-size: px2vw($base-font-size, $desktop-layout);
}
// font size reset to 16px at the tablet design layout width
@media screen and (max-width: $tablet-max) {
font-size: px2vw($base-font-size, $tablet-layout);
}
// font size reset to 16px at the mobile design layout width
@media screen and (max-width: $mobile-max) {
font-size: px2vw($base-font-size, $mobile-layout);
}
}
---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
vw-base() - set base font-size values in vws for each breakpoint
---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
font-size-breakpoint() - calculate min/max font size breakpoints (for specific components)
Example usage:
blockquote {
font-size: px2rem(17); // scaling down from a base size of 17px
// when font-size shrinks to 12px, set the CSS to 12px to stop
// further scaling
@media (max-width: font-size-breakpoint(12px, $desktop-layout, 17px)) {
font-size: 12px;
}
}
---------------------------------------------------------------------------- */
* {
box-sizing: border-box; }
html {
font-size: 16px; }
@media screen {
html {
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
overflow-x: hidden; } }
@media screen and (max-width: 1250px) {
html {
font-size: 1.28vw; } }
@media screen and (max-width: 899px) {
html {
font-size: 2.5vw; } }
@media screen and (max-width: 600px) {
html {
font-size: 5vw; } }
@media screen {
body {
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
overflow-x: hidden; } }
h1 {
font-size: 3.125rem;
text-align: center; }
h2 {
font-size: 1.875rem; }
img {
display: block;
float: left;
padding: 0 0.9375rem;
width: 18.75rem; }
@media screen and (max-width: 899px) {
img {
margin: 0 auto;
padding: 1.875rem 1.25rem;
width: 50%; } }
@media screen and (max-width: 600px) {
img {
float: none;
width: 100%; } }
div {
margin: 0 auto;
width: 56.25rem; }
@media screen and (max-width: 899px) {
div {
width: 100%; } }
/*# sourceMappingURL=demo.css.map */