Initial commit

jessicarush · Oct 8, 2021 · cb6ef9b · cb6ef9b
1 parent a365160
commit cb6ef9b
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 0 deletions.
diff --git a/css_scroll_snap/base.css b/css_scroll_snap/base.css
@@ -0,0 +1,67 @@
+@charset "UTF-8";
+
+
+
+/* VARIABLES -------------------------------------------------------------- */
+
+:root {
+  --heading-font: 'Open Sans', sans-serif;
+  --main-font: 'Open Sans', sans-serif;
+  --minor-font: 'Open Sans', sans-serif;
+  --heading-color: rgba(0,0,50,.9);
+  --main-color: rgba(70,70,90,.9);
+  --minor-color: rgb(190,190,200);
+  --emphasis-color: rgb(27,211,165);
+}
+
+
+
+/* DEFAULTS --------------------------------------------------------------- */
+
+html {
+  color: var(--main-color);
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+/* TYPOGRAPHY ------------------------------------------------------------- */
+
+.primary-heading {
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-size: 2rem;
+  font-weight: 400;
+}
+
+.highlight-text {
+  color: var(--emphasis-color);
+}
+
+
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+html {
+  scroll-behavior: smooth;
+  scroll-snap-type: y mandatory;
+}
+
+section {
+  height: 100vh;
+  scroll-snap-align: start;
+}
+
+section:nth-child(odd) {
+  background: rgb(220,220,220);
+}
+
+/* COMPONENTS ------------------------------------------------------------- */
+
+/* COSMETIC --------------------------------------------------------------- */
+
+/* UTILITY ---------------------------------------------------------------- */
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_scroll_snap/index.html b/css_scroll_snap/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Site | Page</title>
+  <link href="base.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
+</head>
+
+<body>
+
+  <section>
+    <h1 class="primary-heading">CSS Scroll Snap Align</h1>
+  </section>
+
+  <section>
+    <h1 class="primary-heading">One.</h1>
+  </section>
+
+  <section>
+    <h1 class="primary-heading">Two.</h1>
+  </section>
+
+  <section>
+    <h1 class="primary-heading">Three.</h1>
+  </section>
+
+  <section>
+    <h1 class="primary-heading">Four.</h1>
+  </section>
+
+  <section>
+    <h1 class="primary-heading">Five.</h1>
+  </section>
+
+</body>
+</html>