diff --git a/.DS_Store b/.DS_Store index 17f5e95..3c40675 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/detail.html b/detail.html new file mode 100644 index 0000000..f162b7d --- /dev/null +++ b/detail.html @@ -0,0 +1,310 @@ + + + + + + + + + + + + + +
+
+ + + + + All stores + +

San Francisco Showroom

+
+
+
+
+
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+ + + +
+
+ +
+
+

Come visit our showroom located in the heart of San Francisco's Union Square.

+
+
+ ADDRESS
+ 291 Geary St, 2nd Floor
+ San Francisco, CA 94102
+ + OPEN ON GOOGLE MAPS + +
+
+ HOURS
+ Weekdays: 11AM - 8PM
+ Saturday: 11AM - 7PM
+ Sunday: 11AM - 6PM +
+
+ CONTACT
+ (917) 4090432 +
+
+
+
+
+ + + + diff --git a/header.scss b/header.scss deleted file mode 100644 index 6f9f10a..0000000 --- a/header.scss +++ /dev/null @@ -1,248 +0,0 @@ -$mobile-nav-height: 48px; -$desktop-nav-height: 64px; -$desktop-menu-height: 352px; -$offBlack: #1a1a1a; -$greyCopy: #565656; - -header { - position: fixed; - top: 0; - z-index: 0; - width: 100%; - - a, - button { - border: none; - background: none; - cursor: pointer; - padding: 0.5px; - } - - ul { - --textColor: $greyCopy; - } - - nav { - --textColor: $offBlack; - --backgroundColor: white; - display: flex; - flex-direction: row; - justify-content: space-between; - background-color: var(--backgroundColor); - - * { - box-sizing: border-box; - background-color: var(--backgroundColor); - color: var(--textColor); - } - - &.white { - --textColor: white; - --backgroundColor: transparent; - #logo { - filter: invert(1); - } - svg, - g, - path { - fill: var(--textColor); - } - } - - .navbar-filler { - flex: 1; - visibility: hidden; - } - - &#mobile-nav { - padding: 16px; - height: $mobile-nav-height; - - a[aria-label="home"] { - display: flex; - margin-right: auto; - width: 100px; - overflow: hidden; - #logo { - display: block; - width: 100%; - max-width: 100%; - } - } - button[aria-label="search"] { - } - - button[aria-label="menu"], - button[aria-label="search"], - button[aria-label="cart"], - .placeholder { - margin-right: 16px; - margin-left: 16px; - border: none; - padding: 0; - width: 16px; - } - - button[aria-label="cart"] { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - width: auto; - .count { - position: relative; - top: 2px; - margin-left: 4px; - width: 12px; - font-size: 10; - } - } - - .placeholder { - position: relative; - opacity: 1; - z-index: -1; - pointer-events: none; - } - .placeholder, - button[aria-label="menu"] { - margin-right: 0; - } - - button[aria-label="menu"] { - position: fixed; - right: 16px; - z-index: 2; - #nav-open-icon { - display: block; - } - #nav-close-icon { - display: none; - } - svg { - display: block; - } - &[aria-expanded="true"] { - --textColor: $offBlack; - #nav-open-icon { - display: none; - } - #nav-close-icon { - display: block; - } - } - } - @media screen and (min-width: 768px) { - display: none; - } - } - - &#desktop-nav { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 32px; - height: $desktop-nav-height; - [aria-label="home"] { - margin-right: 36px; - #logo { - width: 114px; - } - } - - ul[role="menubar"] { - display: flex; - flex-direction: row; - background-color: transparent; - li { - margin: 0 10px; - color: $greyCopy; - a, - button { - color: $greyCopy; - } - button { - display: inline-flex; - flex-direction: row; - align-content: center; - align-items: center; - justify-content: center; - padding: 8px; - } - [role="search"] { - svg { - margin-right: 8px; - } - } - } - } - @media screen and (max-width: 767.9px) { - display: none; - } - } - } -} -#mobile-menu { - position: fixed; - top: 0; - left: 0; - transform: translateX(100vw); - transition: transform 0.5s ease-in-out; - z-index: 1; - background-color: white; - padding: 16px; - width: 101vw; - height: 100vh; - color: var(--textColor); - &[data-open="true"] { - transform: translateX(0); - } - .menu-spacer { - height: 68px; - } - li[role="menuitem"] { - padding-bottom: 32px; - } - .mobile-submenu-level1, - .mobile-submenu-level2 { - position: fixed; - top: 0; - left: 0; - transform: translateX(100vw); - background: white; - width: 100vw; - height: 100vh; - &[data-open="true"] { - transform: translateX(0); - } - * { - color: blue !important; - } - } - @media screen and (min-width: 768px) { - display: none; - } -} -#desktop-menu { - position: relative; - transform: translateY(-$desktop-menu-height - $desktop-nav-height); - z-index: 1; - background-color: white; - width: 100%; - height: $desktop-menu-height; - &[data-open="true"], - &:focus-within { - transform: translateY(0); - } - - .nav-bucket { - display: none; - &[active="true"] { - display: flex; - } - } - - @media screen and (max-width: 767.9px) { - display: none; - } -} diff --git a/img/Pacific_Palisades.png b/img/Pacific_Palisades.png new file mode 100644 index 0000000..b27daed Binary files /dev/null and b/img/Pacific_Palisades.png differ diff --git a/img/Palo_Alto.png b/img/Palo_Alto.png new file mode 100644 index 0000000..fa495c6 Binary files /dev/null and b/img/Palo_Alto.png differ diff --git a/img/SF.png b/img/SF.png new file mode 100644 index 0000000..a849346 Binary files /dev/null and b/img/SF.png differ diff --git a/img/Venice.png b/img/Venice.png new file mode 100644 index 0000000..83e0f2f Binary files /dev/null and b/img/Venice.png differ diff --git a/img/events.png b/img/events.png new file mode 100644 index 0000000..4886010 Binary files /dev/null and b/img/events.png differ diff --git a/img/left.svg b/img/left.svg new file mode 100644 index 0000000..5208c28 --- /dev/null +++ b/img/left.svg @@ -0,0 +1,11 @@ + + + + Fill 1 Copy 3 + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 652f56a..17321af 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,12 @@ + + + - + -
- +
+

Stores

+

+ Experience the fewer, better philosophy in person at our six locations. +

+
+
+ +
+
+
+ Now open store +
+

Miami Now Open

+

+ We are excited to announce the openning of our new store in the + Miami Design District - a destination grounded in cultural + experiences, heritage and design. +

+ Details +
+
+
+
+ +
+ +
+
+ +
+
+

Store events

+
+ Store events +
+

+ We also host fewer, better events with women we admire, partnering + brands and nonprofits that embody our same belief in intentional + living. +

+

+ Please contact us at events@cuyana.com for any private or + corporate event inquiries. +

+

+ To keep in touch and find out about future store events please + sign uo for our newsletter below: +

+ +
+
+
+
diff --git a/package-lock.json b/package-lock.json index e6941e0..5196b0d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1702,6 +1702,11 @@ "to-fast-properties": "^2.0.0" } }, + "@glidejs/glide": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/@glidejs/glide/-/glide-3.4.1.tgz", + "integrity": "sha512-C34AEcK1HjSyxilRToUL54I6KAoodojUbeRlXoruobZuG0eGm8xfDL+3kgkWj7AJK4EZtunSOYfoqMp70eDtwg==" + }, "@iarna/toml": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.3.tgz", diff --git a/package.json b/package.json index bbbe7c2..6d858af 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "version": "1.0.0", "main": "script.js", "dependencies": { + "@glidejs/glide": "^3.4.1", "css-vars-ponyfill": "^2.0.2", "react": "^16.8.6", "react-dom": "^16.8.6" diff --git a/src/index.js b/src/index.js index 83a200a..0468726 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,19 @@ -import React from "react"; -import ReactDOM from "react-dom"; +import Glide from "@glidejs/glide"; -const Example = () =>
; +const glide = new Glide(".glide").mount(); -ReactDOM.render(, document.getElementById("root")); +glide.on("move.after", function() { + const carouselPosition = document.querySelector("#carousel-position"); + const items = document.querySelectorAll(".carousel-item").length; + carouselPosition.innerHTML = `${glide.index + 1}/${items}`; +}); + +const prevButton = document.querySelector("#carousel-prev"); +prevButton.addEventListener("click", () => { + glide.go("<"); +}); + +const nextButton = document.querySelector("#carousel-next"); +nextButton.addEventListener("click", () => { + glide.go(">"); +}); diff --git a/src/styles.scss b/src/styles.scss deleted file mode 100644 index 2964140..0000000 --- a/src/styles.scss +++ /dev/null @@ -1 +0,0 @@ -// New CSS goes here