Initial commit
This commit is contained in:
Spencer Flagg
commit
d99aa91739
30 changed files with 556 additions and 0 deletions
BIN
android-icon-144x144.png
Normal file
BIN
android-icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
android-icon-192x192.png
Normal file
BIN
android-icon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
android-icon-36x36.png
Normal file
BIN
android-icon-36x36.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
android-icon-48x48.png
Normal file
BIN
android-icon-48x48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
android-icon-72x72.png
Normal file
BIN
android-icon-72x72.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4 KiB |
BIN
android-icon-96x96.png
Normal file
BIN
android-icon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
apple-icon-114x114.png
Normal file
BIN
apple-icon-114x114.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
apple-icon-120x120.png
Normal file
BIN
apple-icon-120x120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7 KiB |
BIN
apple-icon-144x144.png
Normal file
BIN
apple-icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
apple-icon-152x152.png
Normal file
BIN
apple-icon-152x152.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
apple-icon-180x180.png
Normal file
BIN
apple-icon-180x180.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
apple-icon-57x57.png
Normal file
BIN
apple-icon-57x57.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
apple-icon-60x60.png
Normal file
BIN
apple-icon-60x60.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
apple-icon-72x72.png
Normal file
BIN
apple-icon-72x72.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4 KiB |
BIN
apple-icon-76x76.png
Normal file
BIN
apple-icon-76x76.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
apple-icon-precomposed.png
Normal file
BIN
apple-icon-precomposed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
apple-icon.png
Normal file
BIN
apple-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
2
browserconfig.xml
Normal file
2
browserconfig.xml
Normal 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
BIN
bundle.js
Normal file
Binary file not shown.
BIN
favicon-16x16.png
Normal file
BIN
favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
favicon-32x32.png
Normal file
BIN
favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
favicon-96x96.png
Normal file
BIN
favicon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
94
index.html
Normal file
94
index.html
Normal 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
41
manifest.json
Normal 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
BIN
ms-icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
ms-icon-150x150.png
Normal file
BIN
ms-icon-150x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
ms-icon-310x310.png
Normal file
BIN
ms-icon-310x310.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
ms-icon-70x70.png
Normal file
BIN
ms-icon-70x70.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
419
styles.css
Normal file
419
styles.css
Normal 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; }
|
||||||
Loading…
Reference in a new issue