new layout
This commit is contained in:
ry
parent
c86bc19515
commit
59d8a45efd
9 changed files with 401 additions and 515 deletions
192
assets/css/x.css
192
assets/css/x.css
|
|
@ -1,3 +1,4 @@
|
|||
@import url("https://fonts.googleapis.com/css?family=Poiret+One&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
|
||||
* {
|
||||
margin: 0;
|
||||
|
|
@ -14,24 +15,56 @@ a {
|
|||
color: white;
|
||||
text-decoration: none;
|
||||
border: transparent;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
a#yugen {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
border-bottom: 1vh solid #dadada;
|
||||
border-right: 1vh solid #dadada;
|
||||
border-left: 1vh solid #dadada;
|
||||
border-top: 1vh solid #dadada;
|
||||
}
|
||||
|
||||
section {
|
||||
height: 100vh;
|
||||
section:not(#home) {
|
||||
height: 20vh;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
section#contact {
|
||||
height: 40vh;
|
||||
font-size: 7vw;
|
||||
height: 101%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.email, .contactme {
|
||||
font-size: 6vw;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
font-family: 'Poiret One', sans-serif;
|
||||
}
|
||||
|
||||
.email {
|
||||
text-decoration: underline;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 8vw;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -49,54 +82,117 @@ h1 {
|
|||
}
|
||||
|
||||
#home {
|
||||
font-size: 8vw !important;
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#portfolio {
|
||||
background: #f7665c;
|
||||
}
|
||||
|
||||
#portfolio a {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#portfolio a:hover {
|
||||
color: #d63631;
|
||||
}
|
||||
|
||||
#homepage {
|
||||
background: #78db6f;
|
||||
}
|
||||
|
||||
#homepage a {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#homepage a:hover {
|
||||
color: #4c9da0;
|
||||
}
|
||||
|
||||
#yugen {
|
||||
background: #5ad350;
|
||||
}
|
||||
|
||||
#yugen a {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#yugen a:hover {
|
||||
color: #329c28;
|
||||
}
|
||||
|
||||
#sor {
|
||||
background: #c669db;
|
||||
}
|
||||
|
||||
#sor a {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#sor a:hover {
|
||||
color: #a24ab6;
|
||||
}
|
||||
|
||||
#benji {
|
||||
background: #7272d1;
|
||||
}
|
||||
|
||||
#benji a {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#benji a:hover {
|
||||
color: #4646a3;
|
||||
}
|
||||
|
||||
#thaldrin {
|
||||
background: #ff841f;
|
||||
background: #8a60da;
|
||||
}
|
||||
|
||||
#thaldrin a {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#thaldrin a:hover {
|
||||
color: #6136b3;
|
||||
}
|
||||
|
||||
#kaito {
|
||||
background: #96400e;
|
||||
background: #6033b4;
|
||||
}
|
||||
|
||||
#kaito a {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#kaito a:hover {
|
||||
color: #441b8f;
|
||||
}
|
||||
|
||||
#yiff {
|
||||
background: #b32c54;
|
||||
}
|
||||
|
||||
#yiff a {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#yiff a:hover {
|
||||
color: #9c0d38;
|
||||
}
|
||||
|
||||
a.email {
|
||||
color: #9c0d38;
|
||||
}
|
||||
|
||||
a.email:hover {
|
||||
color: #aa3055;
|
||||
}
|
||||
|
||||
#Twitter {
|
||||
background: #1DA1F2;
|
||||
}
|
||||
|
||||
#homepage {
|
||||
background: #d83333;
|
||||
}
|
||||
|
||||
#yiff {
|
||||
background: #e01653;
|
||||
}
|
||||
|
||||
#portfolio {
|
||||
background: #2022a0;
|
||||
}
|
||||
|
||||
#yugen {
|
||||
background: #ffffff;
|
||||
color: #000;
|
||||
padding: 2vw;
|
||||
}
|
||||
|
||||
#yugen button {
|
||||
background: #ffffff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 2vw;
|
||||
border-style: none;
|
||||
padding: 1vh;
|
||||
background: white;
|
||||
}
|
||||
/*# sourceMappingURL=x.css.map */
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAA,OAAO,CAAC,mEAAI;AAEZ,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CAAG;;AAGjB,AAAA,IAAI,CAAC;EACD,gBAAgB,EAAE,KAAK;EACvB,KAAK,EAAE,KAAK;EACZ,WAAW,EAAE,qBAAqB;CAAG;;AAEzC,AAAA,CAAC,CAAC;EACE,KAAK,EAAE,KAAK;EACZ,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,WAAW;CAAG;;AAE1B,AAAA,CAAC,AAAA,MAAM,CAAC;EACJ,KAAK,EAAE,KAAK;EACZ,eAAe,EAAE,IAAI;EACrB,aAAa,EAAE,iBAAiB;EAChC,YAAY,EAAE,iBAAiB;EAC/B,WAAW,EAAE,iBAAiB;EAC9B,UAAU,EAAE,iBAAiB;CAAG;;AACpC,AAAA,OAAO,CAAC;EACJ,MAAM,EAAE,KAAK;EACb,YAAY,EAAE,IAAI;CAAG;;AAEzB,AAAA,EAAE,CAAC;EACC,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;CAAG;;AAE9B,AAAA,KAAK,CAAC;EACF,gBAAgB,EAAE,KAAK;EACvB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;CAAG;;AAEzB,AAAA,SAAS,CAAC;EACN,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,MAAM,CAAC;EACH,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,QAAQ,CAAC;EACL,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,SAAS,CAAC;EACN,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,KAAK,CAAC;EACF,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,UAAU,CAAC;EACP,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,MAAM,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,GAAG;CAGQ;;AANxB,AAII,MAJE,CAIF,MAAM,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;CAAG;;AAEtB,AAAA,QAAQ,CAAC;EACL,OAAO,EAAE,MAAM;CAAG;;AAEtB,AAAA,MAAM,CAAC;EACC,SAAS,EAAE,GAAG;EACd,YAAY,EAAE,IAAI;EAClB,OAAO,EAAE,GAAG;EACZ,UAAU,EAAE,KAAK;CAAG",
|
||||
"mappings": "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",
|
||||
"sources": [
|
||||
"x.sass"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Poiret+One&display=swap')
|
||||
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap')
|
||||
|
||||
*
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
|
||||
body
|
||||
background-color: black
|
||||
color: white
|
||||
|
|
@ -13,21 +13,35 @@ body
|
|||
a
|
||||
color: white
|
||||
text-decoration: none
|
||||
border: transparent
|
||||
border: transparent
|
||||
justify-content: space-between
|
||||
|
||||
a#yugen
|
||||
color: black
|
||||
text-decoration: none
|
||||
border-bottom: 1vh solid #dadada
|
||||
border-right: 1vh solid #dadada
|
||||
border-left: 1vh solid #dadada
|
||||
border-top: 1vh solid #dadada
|
||||
section
|
||||
height: 100vh
|
||||
section:not(#home)
|
||||
height: 20vh
|
||||
border-style: none
|
||||
|
||||
h1
|
||||
section#contact
|
||||
height: 40vh
|
||||
font-size: 7vw
|
||||
height: 101%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
justify-content: center
|
||||
|
||||
.email, .contactme
|
||||
font-size: 6vw
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
font-family: 'Poiret One', sans-serif
|
||||
|
||||
.email
|
||||
text-decoration: underline
|
||||
font-style: italic
|
||||
|
||||
h1
|
||||
font-size: 8vw
|
||||
height: 100%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
|
@ -35,42 +49,64 @@ h1
|
|||
justify-content: center
|
||||
|
||||
#home
|
||||
font-size: 8vw !important
|
||||
background-color: black
|
||||
color: white
|
||||
font-style: italic
|
||||
|
||||
#portfolio
|
||||
background: #f7665c
|
||||
a
|
||||
color: #000000
|
||||
&:hover
|
||||
color: #d63631
|
||||
#homepage
|
||||
background: #78db6f
|
||||
a
|
||||
color: #000000
|
||||
&:hover
|
||||
color: #4c9da0
|
||||
#yugen
|
||||
background: #5ad350
|
||||
a
|
||||
color: #000000
|
||||
&:hover
|
||||
color: #329c28
|
||||
#sor
|
||||
background: #c669db
|
||||
a
|
||||
color: #000000
|
||||
&:hover
|
||||
color: #a24ab6
|
||||
#benji
|
||||
background: #7272d1
|
||||
a
|
||||
color: #000000
|
||||
&:hover
|
||||
color: #4646a3
|
||||
#thaldrin
|
||||
background: #ff841f
|
||||
|
||||
background: #8a60da
|
||||
a
|
||||
color: #000000
|
||||
&:hover
|
||||
color: #6136b3
|
||||
#kaito
|
||||
background: #96400e
|
||||
background: #6033b4
|
||||
a
|
||||
color: #000000
|
||||
&:hover
|
||||
color: #441b8f
|
||||
#yiff
|
||||
background: #b32c54
|
||||
a
|
||||
color: #000000
|
||||
&:hover
|
||||
color: #9c0d38
|
||||
|
||||
a.email
|
||||
color: #9c0d38
|
||||
&:hover
|
||||
color: #aa3055
|
||||
|
||||
#Twitter
|
||||
background: #1DA1F2
|
||||
|
||||
#homepage
|
||||
background: #d83333
|
||||
|
||||
#yiff
|
||||
background: #e01653
|
||||
|
||||
#portfolio
|
||||
background: #2022a0
|
||||
|
||||
#yugen
|
||||
background: #ffffff
|
||||
color: #000
|
||||
padding: 2vw
|
||||
button
|
||||
background: #ffffff
|
||||
color: #000
|
||||
|
||||
.buttons
|
||||
display: inline
|
||||
|
||||
button
|
||||
font-size: 2vw
|
||||
border-style: none
|
||||
padding: 1vh
|
||||
background: white
|
||||
|
||||
background: #1DA1F2
|
||||
163
assets/css/y.css
163
assets/css/y.css
|
|
@ -1,163 +0,0 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*::after, *::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
--background-color:hsl(180, 20%, 90%) {}
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
background: var(--background-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
h1 + p {
|
||||
font-size: 1.8rem;
|
||||
padding: 2rem 0 3rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
margin: 2rem;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform: perspective(100rem);
|
||||
transform: perspective(100rem);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.container {
|
||||
--rX:0 {}
|
||||
--rY:0 {}
|
||||
--bX:50% {}
|
||||
--bY:80% {}
|
||||
width: 30rem;
|
||||
height: 36rem;
|
||||
border: 1px solid var(--background-color);
|
||||
border-radius: 1.6rem;
|
||||
padding: 4rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
-webkit-transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
|
||||
transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.1))), url("https://images.unsplash.com/photo-1559113513-d5e09c78b9dd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9");
|
||||
background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url("https://images.unsplash.com/photo-1559113513-d5e09c78b9dd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9");
|
||||
background-position: var(--bX) var(--bY);
|
||||
background-size: 40rem auto;
|
||||
-webkit-box-shadow: 0 0 3rem 0.5rem rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 3rem 0.5rem rgba(0, 0, 0, 0.2);
|
||||
-webkit-transition: -webkit-transform .6s 1s;
|
||||
transition: -webkit-transform .6s 1s;
|
||||
transition: transform .6s 1s;
|
||||
transition: transform .6s 1s, -webkit-transform .6s 1s;
|
||||
}
|
||||
|
||||
.container::before, .container::after {
|
||||
content: "";
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: 1px solid #fff;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
opacity: .3;
|
||||
-webkit-transition: .3s;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.container::before {
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
border-bottom-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.container::after {
|
||||
bottom: 2rem;
|
||||
left: 2rem;
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.container--active {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.container--portfolio {
|
||||
-webkit-filter: hue-rotate(80deg) saturate(140%);
|
||||
filter: hue-rotate(80deg) saturate(140%);
|
||||
}
|
||||
|
||||
.container--homepage {
|
||||
-webkit-filter: hue-rotate(160deg) saturate(140%);
|
||||
filter: hue-rotate(160deg) saturate(140%);
|
||||
}
|
||||
|
||||
.container--yugen {
|
||||
-webkit-filter: hue-rotate(180deg) saturate(40%);
|
||||
filter: hue-rotate(180deg) saturate(40%);
|
||||
}
|
||||
|
||||
.container--thaldrin {
|
||||
-webkit-filter: hue-rotate(180deg) saturate(140%);
|
||||
filter: hue-rotate(180deg) saturate(140%);
|
||||
}
|
||||
|
||||
.container--kaito {
|
||||
-webkit-filter: hue-rotate(180deg) saturate(140%);
|
||||
filter: hue-rotate(180deg) saturate(140%);
|
||||
}
|
||||
|
||||
.container--yiff {
|
||||
-webkit-filter: hue-rotate(180deg) saturate(140%);
|
||||
filter: hue-rotate(180deg) saturate(140%);
|
||||
}
|
||||
|
||||
.container p {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.wrap:hover .container::before, .wrap:hover .container::after {
|
||||
width: calc(100% - 4rem);
|
||||
height: calc(100% - 4rem);
|
||||
}
|
||||
/*# sourceMappingURL=y.css.map */
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": [
|
||||
"y.sass"
|
||||
],
|
||||
"names": [],
|
||||
"file": "y.css"
|
||||
}
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
*
|
||||
margin: 0
|
||||
padding: 0
|
||||
box-sizing: border-box
|
||||
|
||||
&::after, &::before
|
||||
margin: 0
|
||||
padding: 0
|
||||
box-sizing: border-box
|
||||
|
||||
html
|
||||
font-size: 62.5%
|
||||
|
||||
body
|
||||
--background-color:hsl(180, 20%, 90%)
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
|
||||
min-height: 100vh
|
||||
padding: 2rem
|
||||
color: hsla(0, 0%, 0%, 0.6)
|
||||
background: var(--background-color)
|
||||
text-align: center
|
||||
|
||||
h1
|
||||
font-size: 3.2rem
|
||||
padding-top: 2rem
|
||||
|
||||
+ p
|
||||
font-size: 1.8rem
|
||||
padding: 2rem 0 3rem
|
||||
|
||||
.main
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
.wrap
|
||||
margin: 2rem
|
||||
transform-style: preserve-3d
|
||||
transform: perspective(100rem)
|
||||
cursor: pointer
|
||||
|
||||
.container
|
||||
--rX:0
|
||||
--rY:0
|
||||
--bX:50%
|
||||
--bY:80%
|
||||
width: 30rem
|
||||
height: 36rem
|
||||
border: 1px solid var(--background-color)
|
||||
border-radius: 1.6rem
|
||||
padding: 4rem
|
||||
display: flex
|
||||
align-items: flex-end
|
||||
position: relative
|
||||
transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg))
|
||||
background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)), url("https://images.unsplash.com/photo-1559113513-d5e09c78b9dd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9")
|
||||
background-position: var(--bX) var(--bY)
|
||||
background-size: 40rem auto
|
||||
box-shadow: 0 0 3rem 0.5rem hsla(0, 0%, 0%, 0.2)
|
||||
transition: transform .6s 1s
|
||||
|
||||
&::before, &::after
|
||||
content: ""
|
||||
width: 2rem
|
||||
height: 2rem
|
||||
border: 1px solid #fff
|
||||
position: absolute
|
||||
z-index: 2
|
||||
opacity: .3
|
||||
transition: .3s
|
||||
|
||||
&::before
|
||||
top: 2rem
|
||||
right: 2rem
|
||||
border-bottom-width: 0
|
||||
border-left-width: 0
|
||||
|
||||
&::after
|
||||
bottom: 2rem
|
||||
left: 2rem
|
||||
border-top-width: 0
|
||||
border-right-width: 0
|
||||
|
||||
.container--active
|
||||
transition: none
|
||||
|
||||
.container--portfolio
|
||||
filter: hue-rotate(80deg) saturate(140%)
|
||||
|
||||
.container--homepage
|
||||
filter: hue-rotate(160deg) saturate(140%)
|
||||
|
||||
.container--yugen
|
||||
filter: hue-rotate(180deg) saturate(40%)
|
||||
|
||||
.container--thaldrin
|
||||
filter: hue-rotate(180deg) saturate(140%)
|
||||
|
||||
.container--kaito
|
||||
filter: hue-rotate(180deg) saturate(140%)
|
||||
|
||||
.container--yiff
|
||||
filter: hue-rotate(180deg) saturate(140%)
|
||||
|
||||
.container p
|
||||
color: hsla(0, 0%, 100%, 0.6)
|
||||
font-size: 2.2rem
|
||||
|
||||
.wrap:hover .container
|
||||
&::before, &::after
|
||||
width: calc(100% - 4rem)
|
||||
height: calc(100% - 4rem)
|
||||
Loading…
Add table
Add a link
Reference in a new issue