VOL ATTIRE: Apparel for the discerning scofflaw.

commit d99aa91739d25546c14a83bc2a6ad19d02fe1df5 Author: Spencer Flagg Date: Mon Mar 13 15:56:08 2023 +0100 Initial commit diff --git a/android-icon-144x144.png b/android-icon-144x144.png new file mode 100644 index 0000000..aa5383a Binary files /dev/null and b/android-icon-144x144.png differ diff --git a/android-icon-192x192.png b/android-icon-192x192.png new file mode 100644 index 0000000..4d23cbb Binary files /dev/null and b/android-icon-192x192.png differ diff --git a/android-icon-36x36.png b/android-icon-36x36.png new file mode 100644 index 0000000..8f55a41 Binary files /dev/null and b/android-icon-36x36.png differ diff --git a/android-icon-48x48.png b/android-icon-48x48.png new file mode 100644 index 0000000..c0e6652 Binary files /dev/null and b/android-icon-48x48.png differ diff --git a/android-icon-72x72.png b/android-icon-72x72.png new file mode 100644 index 0000000..11ff8d8 Binary files /dev/null and b/android-icon-72x72.png differ diff --git a/android-icon-96x96.png b/android-icon-96x96.png new file mode 100644 index 0000000..630fa3a Binary files /dev/null and b/android-icon-96x96.png differ diff --git a/apple-icon-114x114.png b/apple-icon-114x114.png new file mode 100644 index 0000000..b53a0d9 Binary files /dev/null and b/apple-icon-114x114.png differ diff --git a/apple-icon-120x120.png b/apple-icon-120x120.png new file mode 100644 index 0000000..13187b5 Binary files /dev/null and b/apple-icon-120x120.png differ diff --git a/apple-icon-144x144.png b/apple-icon-144x144.png new file mode 100644 index 0000000..aa5383a Binary files /dev/null and b/apple-icon-144x144.png differ diff --git a/apple-icon-152x152.png b/apple-icon-152x152.png new file mode 100644 index 0000000..3df277b Binary files /dev/null and b/apple-icon-152x152.png differ diff --git a/apple-icon-180x180.png b/apple-icon-180x180.png new file mode 100644 index 0000000..6c78e1e Binary files /dev/null and b/apple-icon-180x180.png differ diff --git a/apple-icon-57x57.png b/apple-icon-57x57.png new file mode 100644 index 0000000..09cb8fe Binary files /dev/null and b/apple-icon-57x57.png differ diff --git a/apple-icon-60x60.png b/apple-icon-60x60.png new file mode 100644 index 0000000..96bcee7 Binary files /dev/null and b/apple-icon-60x60.png differ diff --git a/apple-icon-72x72.png b/apple-icon-72x72.png new file mode 100644 index 0000000..11ff8d8 Binary files /dev/null and b/apple-icon-72x72.png differ diff --git a/apple-icon-76x76.png b/apple-icon-76x76.png new file mode 100644 index 0000000..69c2255 Binary files /dev/null and b/apple-icon-76x76.png differ diff --git a/apple-icon-precomposed.png b/apple-icon-precomposed.png new file mode 100644 index 0000000..7c3ba5c Binary files /dev/null and b/apple-icon-precomposed.png differ diff --git a/apple-icon.png b/apple-icon.png new file mode 100644 index 0000000..7c3ba5c Binary files /dev/null and b/apple-icon.png differ diff --git a/browserconfig.xml b/browserconfig.xml new file mode 100644 index 0000000..c554148 --- /dev/null +++ b/browserconfig.xml @@ -0,0 +1,2 @@ + +#ffffff \ No newline at end of file diff --git a/bundle.js b/bundle.js new file mode 100644 index 0000000..dad67f4 Binary files /dev/null and b/bundle.js differ diff --git a/favicon-16x16.png b/favicon-16x16.png new file mode 100644 index 0000000..07a993a Binary files /dev/null and b/favicon-16x16.png differ diff --git a/favicon-32x32.png b/favicon-32x32.png new file mode 100644 index 0000000..a6fdae2 Binary files /dev/null and b/favicon-32x32.png differ diff --git a/favicon-96x96.png b/favicon-96x96.png new file mode 100644 index 0000000..630fa3a Binary files /dev/null and b/favicon-96x96.png differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..5504cd9 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..ec08694 --- /dev/null +++ b/index.html @@ -0,0 +1,94 @@ + + + + + + + + + + + + + VOL ATTIRE: Apparel for the discerning scofflaw. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

HAVE A PHILOSOPHY. MAKE A STATEMENT. BUT DO IT IN STYLE. DO IT WITH CLASS. BE MODERN. BE ELEGANT. BE + BOLD. BE COLORFUL. WEAR VOL.

+ + + + + + + + +

+ + + + + + + + + \ No newline at end of file diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..013d4a6 --- /dev/null +++ b/manifest.json @@ -0,0 +1,41 @@ +{ + "name": "App", + "icons": [ + { + "src": "\/android-icon-36x36.png", + "sizes": "36x36", + "type": "image\/png", + "density": "0.75" + }, + { + "src": "\/android-icon-48x48.png", + "sizes": "48x48", + "type": "image\/png", + "density": "1.0" + }, + { + "src": "\/android-icon-72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": "1.5" + }, + { + "src": "\/android-icon-96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": "2.0" + }, + { + "src": "\/android-icon-144x144.png", + "sizes": "144x144", + "type": "image\/png", + "density": "3.0" + }, + { + "src": "\/android-icon-192x192.png", + "sizes": "192x192", + "type": "image\/png", + "density": "4.0" + } + ] +} \ No newline at end of file diff --git a/ms-icon-144x144.png b/ms-icon-144x144.png new file mode 100644 index 0000000..aa5383a Binary files /dev/null and b/ms-icon-144x144.png differ diff --git a/ms-icon-150x150.png b/ms-icon-150x150.png new file mode 100644 index 0000000..2b815c6 Binary files /dev/null and b/ms-icon-150x150.png differ diff --git a/ms-icon-310x310.png b/ms-icon-310x310.png new file mode 100644 index 0000000..9e6ae1c Binary files /dev/null and b/ms-icon-310x310.png differ diff --git a/ms-icon-70x70.png b/ms-icon-70x70.png new file mode 100644 index 0000000..3cc2e91 Binary files /dev/null and b/ms-icon-70x70.png differ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..bdb6852 --- /dev/null +++ b/styles.css @@ -0,0 +1,419 @@ +@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"); +@import url("https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"); +html, +body { + background-color: #f6f6f8; + margin: 0; } + +a { + text-decoration: none; + color: #000; + cursor: pointer; } + +.container { + display: flex; + align-items: center; + justify-content: center; } + +h2.motto { + height: 49px; + top: 0px; + overflow: visible; + padding-bottom: 0px; + font-family: "Poppins"; + font-size: 18px; + font-weight: 300; + color: #b0ae99; + text-align: center; + letter-spacing: 4px; + word-spacing: 7px; + line-height: 1.4; + padding-left: 20px; + padding-right: 20px; } + @media screen and (max-width: 767px) { + h2.motto { + visibility: hidden; } } + +@keyframes blink { + 0% { + background: #000; } + 47% { + background: #000; } + 50% { + background: transparent; } + 97% { + background: transparent; } + 100% { + background: #000; } } + +.frame { + margin: 30px 20px 20px 20px; + padding: 20px 20px 50px 20px; + outline: 1px solid #b0ae99; + display: grid; + grid-template-columns: 20vw auto 20vw; + grid-template-rows: auto; + grid-template-areas: "tag logolist social"; + /* Smartphones (portrait and landscape) ---------- */ + /* Smartphones (portrait) ---------- */ + /* Smartphones (landscape) ---------- */ + /* Tablets, iPads (portrait and landscape) ---------- */ + /* Tablets, iPads (portrait) ---------- */ + /* Tablets, iPads (landscape) ---------- */ + /* Desktops and laptops ---------- */ + /* Large screens ---------- */ } + @media screen and (max-width: 767px) { + .frame { + grid-template-columns: 25vw auto 25px !important; + margin: 0; + padding: 20px 10px 30px 10px; + outline: 0; } + .frame .logo-container { + margin-top: 5px !important; } } + @media screen and (min-width: 768px) and (max-width: 1024px) { + .frame { + /* styles */ } } + @media screen and (min-width: 768px) { + .frame { + /* styles */ } } + @media screen and (min-width: 1224px) { + .frame { + /* styles */ } } + @media screen and (min-width: 1824px) { + .frame { + /* styles */ } } + .frame .tag-bar { + grid-area: tag; } + .frame .tag-bar ul.type-menu { + padding: 0; + margin: 0 0 20px 0; + display: flex; + flex-direction: column; + align-items: flex-start; } + .frame .tag-bar ul.type-menu li { + list-style-type: none; + position: relative; + display: inline; + font-size: calc(15pt + 1vw); + font-family: "Raleway"; + font-weight: bold; + background-color: #f6f6f8; } + .frame .tag-bar ul.type-menu li a { + color: #f6f6f8; + mix-blend-mode: difference; } + .frame .tag-bar ul.type-menu li::before { + position: absolute; + width: 0%; + height: 1em; + background-color: #000; + content: ''; + left: -5px; + bottom: 0em; + transition: all .5s; } + .frame .tag-bar ul.type-menu li::after { + position: absolute; + width: 0%; + height: .35em; + background-color: #f6f6f8; + content: ''; + left: -5px; + top: 0; + transition: all .5s; } + .frame .tag-bar ul.type-menu li:hover::before { + width: calc(100% + 10px); } + .frame .tag-bar ul.type-menu li:hover::after { + width: calc(100% + 10px); } + .frame .tag-bar ul.tag-menu { + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + align-items: flex-start; } + .frame .tag-bar ul.tag-menu li { + list-style-type: none; + font-size: 10pt; + font-family: "Raleway"; + font-weight: bold; } + .frame .tag-bar ul.tag-menu li a { + color: #b0ae99; } + .frame .tag-bar ul.tag-menu li a .tag-seasteading { + outline: blue 2px dashed; + background-color: rgba(0, 0, 255, 0.5); + color: white; + text-transform: uppercase; } + .frame .tag-bar ul.tag-menu li a .tag-free_ross { + outline: red 2px dashed; + background-color: rgba(255, 0, 0, 0.5); + color: white; + text-transform: uppercase; } + .frame .tag-bar ul.tag-menu li a .tag-bogart { + outline: orange 2px dashed; + background-color: rgba(255, 127, 0, 0.5); + color: white; + text-transform: uppercase; } + .frame .tag-bar ul.tag-menu li a:hover { + text-decoration: underline; } + .frame .tag-bar ul.tag-menu li a:hover .badge { + text-decoration: none; } + .frame .tag-bar ul.tag-menu li a .badge { + opacity: .5; } + .frame .social-bar { + grid-area: social; } + .frame .social-bar ul { + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + align-items: flex-end; } + .frame .social-bar ul li { + list-style-type: none; + font-size: 16pt; + font-family: "Raleway"; + font-weight: bold; + height: 1.5em; } + .frame .social-bar ul li.hidden { + display: none; } + .frame .social-bar ul li a { + display: flex; + flex-direction: row-reverse; + align-items: center; } + @media screen and (max-width: 767px) { + .frame .social-bar ul li a span { + display: none; } } + .frame .social-bar ul li a:hover { + text-decoration: underline; } + .frame .social-bar ul li img { + height: 1.5em; } + .frame .logolist-container { + grid-area: logolist; } + .frame .logo-container { + margin-top: 20vh; + transition: .5s all; + transition-delay: .3s; } + .frame .logo-container .logo { + width: 40vw; + transition: .5s all; + transition-delay: .3s; } + .frame.focused .logo-container { + margin-top: 0; + margin-bottom: 40px; } + .frame.focused .logo-container .logo { + width: 25vw; } + +.search { + position: relative; + margin: 30px 0; + display: grid; + grid-template-columns: auto 76px; } + @media screen and (max-width: 767px) { + .search { + position: fixed; + z-index: 100; + top: 0; + left: 0; + right: 0; + background: #f6f6f8; + padding-bottom: 10px; + margin: 0; } } + @media screen and (max-width: 1023px) { + .search { + grid-template-columns: auto; } } + .search .cursor { + position: absolute; + top: 0; + z-index: 2; + width: 3px; + height: 100%; + animation: blink 2s linear 0s infinite; } + .search .counter-container { + display: flex; + align-items: center; + justify-content: flex-end; } + @media screen and (max-width: 1023px) { + .search .counter-container { + display: none; } } + .search .counter-container .counter { + font-family: "Raleway"; + font-size: 55px; + font-weight: 700; + color: #000; + user-select: none; } + .search .search-control { + white-space: nowrap; + display: flex; + align-items: center; + overflow: hidden; } + +.search input, .search .search-div { + border: 0; + padding: 10px 10px; + font-size: calc(20pt + 2vw); + font-family: "Raleway"; + font-weight: 200; + background-color: transparent; + display: inline-block; + user-select: none; } + .search input::placeholder, .search .search-div::placeholder { + color: #000; } + .search input + .border, .search .search-div + .border { + height: 3px; + width: 0; + background: #000; + position: absolute; + bottom: 0; + transition: all .2s ease; } + .search input:focus, .search .search-div:focus { + box-shadow: none; + outline: none; } + .search input:focus + .border, .search .search-div:focus + .border { + width: 100%; } + .search input:focus + .border + .cursor, .search .search-div:focus + .border + .cursor { + display: none; } + +.search-div { + position: relative; } + .search-div:empty { + width: 100%; } + .search-div:empty + .border + .cursor + .clear-search { + display: none; } + .search-div:empty::after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 10px 10px; + font-size: calc(30pt + 1vw); + font-family: "Raleway"; + font-weight: 200; + background-color: transparent; + width: 100%; + content: 'find your style'; + display: block; + text-overflow: ellipsis; + overflow: hidden; } + .search-div:focus::after { + display: none; } + +.clear-search { + background: url("https://openmoji.org/data/black/svg/274C.svg") transparent no-repeat; + border: 0; + padding: 0; + margin-top: 10px; + height: 55px; + width: 55px; + user-select: none; + z-index: 10; + cursor: pointer; } + .clear-search:hover { + background-color: #eee; + border-radius: 50%; } + .clear-search:active, .clear-search:active, .clear-search:focus { + outline: none; + box-shadow: none; } + +.list { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: center; + justify-content: center; } + .list .items { + padding: 0; + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: center; + width: 100%; } + .list .items > li { + list-style-type: none; + width: 70%; + margin: 5% 15%; + /* Smartphones (portrait and landscape) ---------- */ + /* Smartphones (portrait) ---------- */ + /* Smartphones (landscape) ---------- */ + /* Tablets, iPads (portrait and landscape) ---------- */ + /* Tablets, iPads (portrait) ---------- */ + /* Tablets, iPads (landscape) ---------- */ + /* Desktops and laptops ---------- */ + /* Large screens ---------- */ } + @media screen and (min-width: 320px) and (max-width: 480px) { + .list .items > li { + width: 70%; + margin: 5% 15%; + margin-bottom: 6vh; } } + @media screen and (max-width: 320px) { + .list .items > li { + /* styles */ } } + @media screen and (min-width: 321px) { + .list .items > li { + /* styles */ } } + @media screen and (min-width: 768px) and (max-width: 1024px) { + .list .items > li { + /* styles */ } } + @media screen and (min-width: 768px) { + .list .items > li { + width: 40%; + margin: 5% 5%; } } + @media screen and (min-width: 1024px) { + .list .items > li { + width: 27.33%; + margin: 5% 3%; } } + @media screen and (min-width: 1224px) { + .list .items > li { + width: 20%; + margin: 5% 2.5%; } } + @media screen and (min-width: 1824px) { + .list .items > li { + /* styles */ } } + .list .items > li a { + display: block; + position: relative; } + .list .items > li a h1 { + color: #000; + font-family: "Raleway"; + font-size: 10pt; + font-weight: bold; + text-align: right; + position: absolute; + width: 70%; + left: 15%; + bottom: 97%; } + .list .items > li a:hover img { + transition: .3s all; + filter: grayscale(1); } + .list .items > li a:hover .img-frame { + transition: width .3s, left .3s, box-shadow .3s; + z-index: 2; + left: 5%; + width: 90%; + outline: 3px solid #000; } + .list .items > li .img-container { + position: relative; } + .list .items > li .img-frame { + z-index: 2; + transition: width .3s, left .3s, box-shadow .3s; + position: absolute; + top: 15%; + left: 15%; + width: 70%; + height: 70%; + outline: 1px solid #000; } + .list .items > li img { + transition: .5s all; + width: 100%; } + .list .items > li .tags { + padding: 0; + margin: 0 15%; } + .list .items > li .tags > li { + list-style-type: none; + font-family: "Raleway"; + font-size: 8pt; + font-weight: bold; + color: #000; + text-transform: lowercase; } + .list .empty { + color: #b0ae99; + font-family: "Poppins"; } + .list .empty a:hover { + text-decoration: underline; }