Skip to content

Commit cb6ef9b

Browse files
jessicarushjessicarush
committed
Initial commit
1 parent a365160 commit cb6ef9b

File tree

2 files changed

+105
-0
lines changed

2 files changed

+105
-0
lines changed

‎css_scroll_snap/base.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@charset "UTF-8";
2+
3+
4+
5+
/* VARIABLES -------------------------------------------------------------- */
6+
7+
:root {
8+
--heading-font: 'Open Sans', sans-serif;
9+
--main-font: 'Open Sans', sans-serif;
10+
--minor-font: 'Open Sans', sans-serif;
11+
--heading-color: rgba(0,0,50,.9);
12+
--main-color: rgba(70,70,90,.9);
13+
--minor-color: rgb(190,190,200);
14+
--emphasis-color: rgb(27,211,165);
15+
}
16+
17+
18+
19+
/* DEFAULTS --------------------------------------------------------------- */
20+
21+
html {
22+
color: var(--main-color);
23+
font-family: var(--main-font);
24+
font-size: 16px;
25+
font-weight: 400;
26+
}
27+
28+
/* TYPOGRAPHY ------------------------------------------------------------- */
29+
30+
.primary-heading {
31+
color: var(--heading-color);
32+
font-family: var(--heading-font);
33+
font-size: 2rem;
34+
font-weight: 400;
35+
}
36+
37+
.highlight-text {
38+
color: var(--emphasis-color);
39+
}
40+
41+
42+
43+
/* LINKS & BUTTONS -------------------------------------------------------- */
44+
45+
/* LAYOUT ----------------------------------------------------------------- */
46+
47+
html {
48+
scroll-behavior: smooth;
49+
scroll-snap-type: y mandatory;
50+
}
51+
52+
section {
53+
height: 100vh;
54+
scroll-snap-align: start;
55+
}
56+
57+
section:nth-child(odd) {
58+
background: rgb(220,220,220);
59+
}
60+
61+
/* COMPONENTS ------------------------------------------------------------- */
62+
63+
/* COSMETIC --------------------------------------------------------------- */
64+
65+
/* UTILITY ---------------------------------------------------------------- */
66+
67+
/* STATE ------------------------------------------------------------------ */

‎css_scroll_snap/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Site | Page</title>
7+
<link href="base.css" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
13+
<section>
14+
<h1 class="primary-heading">CSS Scroll Snap Align</h1>
15+
</section>
16+
17+
<section>
18+
<h1 class="primary-heading">One.</h1>
19+
</section>
20+
21+
<section>
22+
<h1 class="primary-heading">Two.</h1>
23+
</section>
24+
25+
<section>
26+
<h1 class="primary-heading">Three.</h1>
27+
</section>
28+
29+
<section>
30+
<h1 class="primary-heading">Four.</h1>
31+
</section>
32+
33+
<section>
34+
<h1 class="primary-heading">Five.</h1>
35+
</section>
36+
37+
</body>
38+
</html>

0 commit comments

Comments
 (0)