h
This commit is contained in:
codepupper
parent
a97d0e4d47
commit
329ac23ca2
5 changed files with 102 additions and 101 deletions
|
|
@ -1,10 +1,4 @@
|
|||
/* #box {
|
||||
background-color: aquamarine;
|
||||
height: 80vh;
|
||||
margin: 2%;
|
||||
// border-radius: 20px 0px 20px 0px;
|
||||
border-radius: 0px 20px 0px 20px;
|
||||
} */
|
||||
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
|
|
@ -15,19 +9,14 @@ body {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#box {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
border: 25px solid white;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
|
|
@ -35,45 +24,67 @@ a {
|
|||
transition: border-color 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
a:hover ~ #box .colorBorder {
|
||||
border-color: red;
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.portfolio:hover {
|
||||
color: #ff6a5f;
|
||||
}
|
||||
|
||||
.portfolio:hover ~ #box {
|
||||
border-color: #ff6a5f;
|
||||
}
|
||||
|
||||
.lore:hover {
|
||||
color: #92a9f3;
|
||||
}
|
||||
|
||||
.lore:hover ~ #box {
|
||||
border-color: #92a9f3;
|
||||
}
|
||||
|
||||
.art:hover {
|
||||
color: #c974da;
|
||||
}
|
||||
|
||||
.art:hover ~ #box {
|
||||
border-color: #c974da;
|
||||
}
|
||||
|
||||
.portfolio {
|
||||
font-size: 6vh;
|
||||
}
|
||||
|
||||
.lore {
|
||||
font-size: 6vh;
|
||||
}
|
||||
|
||||
.art {
|
||||
font-size: 6vh;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 6vw;
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 13vh;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.portfolio,
|
||||
.lore,
|
||||
.art {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
@-webkit-keyframes LinkHover {
|
||||
from {
|
||||
color: white;
|
||||
}
|
||||
to {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes LinkHover {
|
||||
from {
|
||||
color: white;
|
||||
}
|
||||
to {
|
||||
color: red;
|
||||
}
|
||||
height: 100%;
|
||||
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;
|
||||
}
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AACA;;;;;;IAMI;AAIJ,AAAA,IAAI,CAAC;EACJ,gBAAgB,EAAE,KAAY;EAC9B,KAAK,EAAE,KAAkB;CACzB;;AAED,AAAA,CAAC,CAAC;EACD,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CACV;;AACD,AAAA,CAAC,CAAC;EACD,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,KAAK;CACZ;;AAED,AAAA,IAAI,CAAC;EACJ,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,gBAAgB;EACxB,UAAU,EAAE,UAAU;EACtB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,cAAc,EAAE,IAAI;EACpB,UAAU,EAAE,6BAA6B;CACzC;;AAED,AAAA,CAAC,AAAA,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC;EAC3B,YAAY,EA9BE,GAAG;CA+BjB;;AACD,AAAA,MAAM,CAAC;EACN,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,CAAC;EACT,UAAU,EAAE,MAAM;CAClB;;AAED,AAAA,OAAO,CAAC;EC9CJ,QAAQ,EAAE,QAAQ;EAGd,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,qBAAqB;CD2CvC;;AAED,AAAA,UAAU;AACV,KAAK;AACL,IAAI,CAAC;EACJ,SAAS,EAAE,GAAG;CACd;;AAED,UAAU,CAAV,SAAU;EACT,IAAI;IACH,KAAK,EAAE,KAAK;;EAGb,EAAE;IACD,KAAK,EAtDQ,GAAG",
|
||||
"mappings": "AAAA,OAAO,CAAC,2EAAI;AAGZ,AAAA,IAAI,CAAC;EACJ,gBAAgB,EAAE,KAAY;EAC9B,KAAK,EAAE,KAAkB;CAEzB;;AAED,AAAA,CAAC,CAAC;EACD,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CACV;;AAED,AAAA,IAAI,CAAC;EACJ,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,gBAAgB;EACxB,UAAU,EAAE,UAAU;EACtB,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,cAAc,EAAE,IAAI;EACpB,UAAU,EAAE,6BAA6B;CACzC;;AAED,AAAA,CAAC,CAAC;EACD,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,KAAK;CACZ;;AAMA,AAAA,UAAU,AAAA,MAAM,CAAA;EACf,KAAK,EALiB,OAAO;CAU7B;;AAND,AAGC,UAHS,AAAA,MAAM,GAGX,IAAI,CAAC;EACR,YAAY,EARS,OAAO;CAS5B;;AALF,AAAA,KAAK,AAAA,MAAM,CAAK;EACf,KAAK,EALkC,OAAO;CAU9C;;AAND,AAGC,KAHI,AAAA,MAAM,GAGN,IAAI,CAAC;EACR,YAAY,EAR0B,OAAO;CAS7C;;AALF,AAAA,IAAI,AAAA,MAAM,CAAM;EACf,KAAK,EALkD,OAAO;CAU9D;;AAND,AAGC,IAHG,AAAA,MAAM,GAGL,IAAI,CAAC;EACR,YAAY,EAR0C,OAAO;CAS7D;;AAIF,AAAA,UAAU,CAAA;EACT,SAAS,EAAE,GAAG;CACd;;AAFD,AAAA,KAAK,CAAK;EACT,SAAS,EAAE,GAAG;CACd;;AAFD,AAAA,IAAI,CAAM;EACT,SAAS,EAAE,GAAG;CACd;;AAEF,AAAA,MAAM,CAAC;EACN,WAAW,EAAE,6BAA6B;EAC1C,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,CAAC;CACT;;AAED,AAAA,OAAO,CAAC;EACP,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;CACvB",
|
||||
"sources": [
|
||||
"main.scss",
|
||||
"_functions.scss"
|
||||
"main.scss"
|
||||
],
|
||||
"names": [],
|
||||
"file": "main.css"
|
||||
|
|
|
|||
|
|
@ -1,67 +1,62 @@
|
|||
@import '_functions.scss';
|
||||
/* #box {
|
||||
background-color: aquamarine;
|
||||
height: 80vh;
|
||||
margin: 2%;
|
||||
// border-radius: 20px 0px 20px 0px;
|
||||
border-radius: 0px 20px 0px 20px;
|
||||
} */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
|
||||
$accent-color: red;
|
||||
|
||||
body {
|
||||
background-color: rgb(0, 0, 0);
|
||||
color: rgb(255, 255, 255);
|
||||
//font-size: 3vw;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#box {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
border: 25px solid white;
|
||||
box-sizing: border-box;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
transition: border-color 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
a:hover ~ #box .colorBorder {
|
||||
border-color: $accent-color;
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
$accents: ("portfolio": #ff6a5f, "lore": #92a9f3, "art": #c974da);
|
||||
$links: ('portfolio', 'lore', 'art');
|
||||
$time: 2s;
|
||||
@each $link, $color in $accents {
|
||||
.#{$link}:hover {
|
||||
color: $color;
|
||||
|
||||
& ~ #box {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@each $link in $links {
|
||||
.#{$link} {
|
||||
font-size: 6vh;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 6vw;
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 13vh;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center {
|
||||
@include centerer();
|
||||
}
|
||||
|
||||
.portfolio,
|
||||
.lore,
|
||||
.art {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
@keyframes LinkHover {
|
||||
from {
|
||||
color: white;
|
||||
//border: 25px solid white;
|
||||
}
|
||||
to {
|
||||
color: $accent-color;
|
||||
//border: 25px solid $accent-color;
|
||||
}
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
let portfolio = document.getElementsByClassName('portfolio');
|
||||
/* let portfolio = document.getElementsByClassName('portfolio');
|
||||
let art = document.getElementsByClassName('art');
|
||||
let lore = document.getElementsByClassName('lore');
|
||||
let box = document.getElementById('box');
|
||||
|
|
@ -6,12 +6,8 @@ let box = document.getElementById('box');
|
|||
let links = [ portfolio[0], art[0], lore[0] ];
|
||||
|
||||
links.forEach((link) => {
|
||||
link.addEventListener('mouseover', (e) => {
|
||||
//console.log('hovered');
|
||||
box.classList.add('colorBorder');
|
||||
});
|
||||
link.addEventListener('mouseleave', (e) => {
|
||||
//console.log('left');
|
||||
box.classList.remove('colorBorder');
|
||||
});
|
||||
setTimeout(() => {
|
||||
link.classList.add('show');
|
||||
}, 3 * 1000);
|
||||
});
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<body>
|
||||
<div class="center">
|
||||
<h1 class="title" data-user="{{user}}" id="title">{{link}}</h1>
|
||||
<a data-color="#123456" class="portfolio" href="/portfolio">portfolio</a>
|
||||
<a data-color="#654321" class="lore" href="/lore">lore</a>
|
||||
<a data-color="#294129" class="art" href="/art">art</a>
|
||||
<h1 class="title"><i>{{link}}</i></h1>
|
||||
<a data-port="#123456" class="portfolio" href="/portfolio">portfolio</a>
|
||||
<a data-lore="#654321" class="lore" href="/lore">lore</a>
|
||||
<a data-art="#294129" class="art" href="/art">art</a>
|
||||
<div id="box"></div>
|
||||
</div>
|
||||
<div id="box"></div>
|
||||
</body>
|
||||
Loading…
Reference in a new issue