402 lines
11 KiB
CSS
402 lines
11 KiB
CSS
|
@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 {
|
||
|
|
outline: 20px solid red;
|
||
|
|
grid-template-columns: 25vw auto 50px !important;
|
||
|
|
margin: 30px -1px -1px -1px;
|
||
|
|
padding: 10px 10px 30px 10px; }
|
||
|
|
.frame .logo-container {
|
||
|
|
margin-top: 0 !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: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: 50vw;
|
||
|
|
transition: .5s all;
|
||
|
|
transition-delay: .3s; }
|
||
|
|
.frame.focused .logo-container {
|
||
|
|
margin-top: 0; }
|
||
|
|
.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;
|
||
|
|
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%; } }
|
||
|
|
@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; }
|