diff --git a/assets/css/main.css b/assets/css/main.css
index 59b8a78..0e7c18f 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -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 */
\ No newline at end of file
diff --git a/assets/css/main.css.map b/assets/css/main.css.map
index 4371309..017ef40 100644
--- a/assets/css/main.css.map
+++ b/assets/css/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"
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 369feed..767675c 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -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;
}
diff --git a/assets/js/main.js b/assets/js/main.js
index d84f2c4..d27e7d0 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -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);
});
+ */
diff --git a/views/index.hbs b/views/index.hbs
index 1f297a4..2fa1106 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -1,9 +1,9 @@
-
\ No newline at end of file