spencer/wearvol
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
Spencer Flagg 2023-03-13 15:56:08 +01:00
commit d99aa91739
30 changed files with 556 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
android-icon-144x144.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
android-icon-192x192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
android-icon-36x36.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
android-icon-48x48.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
android-icon-72x72.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
android-icon-96x96.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
apple-icon-114x114.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
apple-icon-120x120.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7 KiB

BIN
apple-icon-144x144.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
apple-icon-152x152.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
apple-icon-180x180.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
apple-icon-57x57.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
apple-icon-60x60.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
apple-icon-72x72.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
apple-icon-76x76.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
apple-icon-precomposed.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
apple-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

2
browserconfig.xml Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

BIN
bundle.js Normal file
View file

Binary file not shown.

BIN
favicon-16x16.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
favicon-32x32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
favicon-96x96.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

94
index.html Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135332-10"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-135332-10');
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<!-- Primary Meta Tags -->
<title>VOL ATTIRE: Apparel for the discerning scofflaw.</title>
<meta name="title" content="VOL ATTIRE: Apparel for the discerning scofflaw.">
<meta name="description" content="Looking for statement clothing that's edgier than 'Enjoy Capitalism' & more on-trend than a Gadsden flag?
Wear Vol Attire:
Apparel for the discerning scofflaw.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://wearvol.com/">
<meta property="og:title" content="VOL ATTIRE: Apparel for the discerning scofflaw.">
<meta property="og:description" content="Looking for statement clothing that's edgier than 'Enjoy Capitalism' & more on-trend than a Gadsden flag?
Wear Vol Attire:
Apparel for the discerning scofflaw.">
<meta property="og:image" content="https://images.wearvol.com/Social/meta.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://wearvol.com/">
<meta property="twitter:title" content="VOL ATTIRE: Apparel for the discerning scofflaw.">
<meta property="twitter:description" content="Looking for statement clothing that's edgier than 'Enjoy Capitalism' & more on-trend than a Gadsden flag?
Wear Vol Attire:
Apparel for the discerning scofflaw.">
<meta property="twitter:image" content="https://images.wearvol.com/Social/meta.png">
<link type="text/css" href="styles.css" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<h2 class="motto">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.</h2>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16.14.0/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-router-dom@5.3.0/umd/react-router-dom.min.js"></script>
<!-- <script src="https://unpkg.com/react-contenteditable@3.3.2/lib/react-contenteditable.js"></script> -->
<div id="root"></div>
<!-- Load our React component. -->
<script src="bundle.js"></script>
<!-- Twitter universal website tag code -->
<script>
!function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments);
},s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='//static.ads-twitter.com/uwt.js',
a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script');
// Insert Twitter Pixel ID and Standard Event data below
twq('init','o2q3q');
twq('track','PageView');
</script>
<!-- End Twitter universal website tag code -->
</body>
</html>

41
manifest.json Normal file
View file

@ -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"
}
]
}

BIN
ms-icon-144x144.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
ms-icon-150x150.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
ms-icon-310x310.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
ms-icon-70x70.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

419
styles.css Normal file
View file

@ -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; }