[READ-ONLY] Mirror of https://github.com/probablykasper/v5.kasper.space.
v5.kasper.space
personal-website
website
Fixing stuff. Im bad at commit logs, jeez
+149
-171
+1
-1
src/contact/index.pug
+1
-1
src/contact/index.pug
+1
-1
src/for-sale/index.pug
+1
-1
src/for-sale/index.pug
+2
-2
src/index.pug
+2
-2
src/index.pug
+21
-92
src/index.sass
+21
-92
src/index.sass
···
22
22
display: flex
23
23
flex-direction: column
24
24
align-items: center
25
-
height: 2000px
26
25
a
27
26
text-decoration: none
28
27
color: $darkest
···
34
33
max-width: calc(100% - 120px)
35
34
align-items: center
36
35
display: flex
37
-
.logo
36
+
.kh-logo
37
+
cursor: pointer
38
38
width: 50px
39
39
height: 50px
40
40
display: block
41
41
// margin: 30px
42
42
margin-right: auto
43
-
.menu
43
+
.nav-bar
44
44
font-family: 'ffad-matro-regular'
45
45
display: flex
46
46
justify-content: flex-end
47
47
position: relative
48
48
user-select: none
49
49
.nav-item
50
-
margin-right: 20px
51
-
&:hover > .text
52
-
opacity: 1
50
+
cursor: pointer
51
+
outline: none
53
52
.text
54
-
// padding: 4px
55
-
cursor: pointer
53
+
padding: 5px 10px
56
54
white-space: nowrap
57
55
background-image: linear-gradient(to right,#DA4453,#89216B)
58
56
-webkit-background-clip: text
59
57
-webkit-text-fill-color: transparent
60
-
outline: none
61
58
transition: 0.2s $transition all
62
59
font-size: 16px
63
60
filter: grayscale(100%)
64
61
opacity: 0.5
65
62
&:hover, &:focus
66
63
opacity: 1
67
-
&:active, &.current
68
-
filter: none
69
-
opacity: 1
70
-
// &.in-submenu
64
+
.text:active, &.current > .text, .text.current
65
+
filter: none
66
+
opacity: 1
71
67
.submenu
72
68
opacity: 0
73
69
pointer-events: none
···
75
71
display: flex
76
72
transition: 0.2s $transition all
77
73
// transform: translateY(-10px)
78
-
.nav-item
79
-
margin-top: 10px
74
+
.text
80
75
transform: scale(0.7)
81
76
font-size: 14px
82
77
&:hover .submenu
83
78
transform: none
84
79
opacity: 1
85
80
pointer-events: all
86
-
.nav-item
81
+
.text
87
82
transform: scale(1)
88
83
89
-
90
-
// .nav-bar
91
-
// font-family: 'ffad-matro-regular'
92
-
// margin-left: auto
93
-
// display: flex
94
-
// justify-content: flex-end
95
-
// .nav-item
96
-
// margin: 0px 10px
97
-
// padding: 10px
98
-
// cursor: pointer
99
-
// position: relative
100
-
// z-index: 2
101
-
// outline: none
102
-
// user-select: none
103
-
// transition: 0.2s $transition all
104
-
// opacity: 0.7
105
-
// background-image: linear-gradient(to right,#DA4453,#89216B)
106
-
// -webkit-background-clip: text
107
-
// -webkit-text-fill-color: transparent
108
-
// filter: grayscale(100%)
109
-
// &.current-page
110
-
// .nav-item-text
111
-
// filter: grayscale(100%)
112
-
// opacity: 1
113
-
// &:active
114
-
// .nav-item-text
115
-
// opacity: 1
116
-
// &:hover
117
-
// .nav-submenu
118
-
// opacity: 1
119
-
// .nav-submenu
120
-
// position: absolute
121
-
// display: flex
122
-
// opacity: 0
123
-
124
84
.social-media
125
85
float: left
126
-
// margin: 0px 10px
127
-
// margin-right: auto
128
-
// display: flex
129
-
// justify-items: center
130
-
// align-items: center
131
-
// grid-gap: 10px
132
-
// grid-template-columns: repeat(8, 1fr)
133
-
// justify-content: space-around
134
-
// height: 50px
135
-
// width: 300px
136
-
// max-width: 100%
137
86
a
138
-
// margin: 2px
139
87
display: block
140
88
cursor: pointer
141
89
position: relative
···
159
107
width: 100%
160
108
// transform: rotate(180deg)
161
109
transition: 1s $transition opacity
162
-
// opacity: 0.4
163
110
&.hidden
164
111
opacity: 0
165
112
canvas
166
113
display: block
167
114
.pages
168
-
// margin-top: 10px
169
115
.page
116
+
width: 100%
117
+
left: 0px
118
+
align-items: center
119
+
flex-direction: column
120
+
transition: 1s $transition all
170
121
display: none
171
-
&.current
172
-
display: block
122
+
opacity: 0
123
+
&.visible
124
+
display: flex
125
+
opacity: 1
173
126
.title
174
-
font-size: 26px
127
+
font-size: 36px
175
128
font-family: 'ffad-matro-regular'
176
129
background-image: linear-gradient(to right,#55e5fd,#7155fe,#f31d9e)
177
130
-webkit-background-clip: text
178
131
-webkit-text-fill-color: transparent
179
-
// .menu
180
-
// display: flex
181
-
// .menu-item
182
-
// font-family: 'ffad-matro-regular'
183
-
// font-size: 26px
184
-
// opacity: 0.7
185
-
// transform: scale(0.7)
186
-
// user-select: none
187
-
// padding: 10px
188
-
// cursor: pointer
189
-
// transition: 0.4s $transition all
190
-
// // background-image: linear-gradient(to right, $darkest, $darkest)
191
-
// background-image: linear-gradient(to right,#55e5fd,#7155fe,#f31d9e)
192
-
// filter: grayscale(100%) brightness(50%)
193
-
// -webkit-background-clip: text
194
-
// -webkit-text-fill-color: transparent
195
-
// &.current
196
-
// filter: grayscale(0%)
197
-
// transform: scale(1)
198
-
// opacity: 1
199
-
// &.left
200
-
// transform: scale(0.7) translateX(-20px)
201
-
// &.right
202
-
// transform: scale(0.7) translateX(20px)
+66
-27
src/js/index.js
+66
-27
src/js/index.js
···
3
3
require('./bg.js')
4
4
5
5
// pages
6
-
document.addEventListener('click', (e) => {
7
-
if (e.target.classList.contains('nav-item')) {
8
-
document.querySelector('.current-page').classList.remove('current-page')
9
-
e.target.classList.add('current-page')
10
-
window.history.pushState({page:e.target.dataset.page}, 'KH - '+e.target.innerHTML, '/'+e.target.dataset.page)
11
-
}
12
-
})
6
+
function openPage(newPage, title) {
7
+
document.title = title
8
+
const currentPageEl = document.querySelector('.page.visible')
9
+
if (currentPageEl) currentPageEl.classList.remove('visible')
10
+
const pageEl = document.querySelector(`.page[data-page='${newPage}']`)
11
+
pageEl.classList.add('visible')
12
+
}
13
13
14
-
// menu
15
14
document.addEventListener('click', (e) => {
16
-
if (e.target.classList.contains('menu-item')) {
17
-
const menuItems = e.target.parentElement.children
18
-
let loopedPast = false
19
-
for (let i = 0; i < menuItems.length; i++) {
20
-
menuItems[i].classList.remove('left')
21
-
menuItems[i].classList.remove('right')
22
-
menuItems[i].classList.remove('current')
23
-
if (loopedPast) {
24
-
menuItems[i].classList.add('right')
25
-
} else if (menuItems[i] === e.target) {
26
-
menuItems[i].classList.add('current')
27
-
loopedPast = true
28
-
} else {
29
-
menuItems[i].classList.add('left')
15
+
let el = e.target
16
+
while (el.parentElement && el.tagName !== 'A') el = el.parentElement
17
+
18
+
if (el.tagName === 'A') {
19
+
e.preventDefault()
20
+
// deselect current page from nav bar
21
+
const navItems = document.querySelectorAll('.nav-bar .current')
22
+
for (let i = 0; i < navItems.length; i++) {
23
+
navItems[i].classList.remove('current')
24
+
}
25
+
// select new page in nav bar
26
+
newPage = el.getAttribute('href')
27
+
navBarItem = document.querySelector(`.nav-bar a[href='${newPage}']`)
28
+
if (navBarItem) {
29
+
navBarItem.classList.add('current')
30
+
let title = el.innerText+' | KH'
31
+
if (el.classList.contains('in-submenu')) {
32
+
const parentNavItem = el.parentElement.parentElement
33
+
parentNavItem.classList.add('current')
34
+
const parentText = parentNavItem.children[0].innerText
35
+
console.log(parentText)
36
+
let title = el.innerText+' - '+el.parentElement.parentElement.innerText+' | KH'
30
37
}
38
+
window.history.pushState({page:newPage}, title, newPage)
39
+
openPage(newPage, title)
40
+
} else {
41
+
const title = 'KH'
42
+
window.history.pushState({page:newPage}, title, newPage)
43
+
openPage(newPage, title)
31
44
}
32
-
const current = e.target.parentElement.querySelector('.current')
33
-
if (current) current.classList.remove('current')
34
-
e.target.classList.add('current')
35
-
// window.history.pushState({page:e.target.dataset.page}, 'KH - '+e.target.innerHTML, '/'+e.target.dataset.page)
36
45
}
37
-
})
46
+
47
+
48
+
// let el = e.target
49
+
// if (el.parentElement.classList.contains('nav-item')) el = el.parentElement
50
+
// if (el.classList.contains('nav-item')) {
51
+
// const navItems = document.querySelectorAll('.nav-item.current')
52
+
// for (let i = 0; i < navItems.length; i++) {
53
+
// navItems[i].classList.remove('current')
54
+
// }
55
+
// el.classList.add('current')
56
+
// let title = e.target.innerText.trim()+' | KH'
57
+
// if (el.classList.contains('in-submenu')) {
58
+
// el.parentElement.parentElement.classList.add('current')
59
+
// title = el.innerHTML+' - '+el.parentElement.parentElement.innerHTML+' | '+title
60
+
// }
61
+
// const newPage = el.dataset.page
62
+
// window.history.pushState({page:newPage}, title, newPage)
63
+
// openPage(newPage, title)
64
+
// } else if (el.classList.contains('kh-logo')) {
65
+
// const newPage = e.target.dataset.page
66
+
// const title = 'KH'
67
+
// window.history.pushState({page:newPage}, title, newPage)
68
+
// openPage(newPage, title)
69
+
// }
70
+
71
+
72
+
73
+
}, false)
74
+
window.onpopstate = (e) => {
75
+
openPage(e.state.page)
76
+
}
+3
src/lacuna/index.pug
+3
src/lacuna/index.pug
+3
src/synctan/index.pug
+3
src/synctan/index.pug
+42
-47
src/template.pug
+42
-47
src/template.pug
···
1
1
doctype html
2
2
html
3
3
head
4
-
title='KH - '+title
4
+
title=title
5
5
//- font
6
6
link(href="https://fonts.googleapis.com/css?family=Rubik:400", rel="stylesheet")
7
7
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Marck+Script" rel="stylesheet">
8
8
link(rel='stylesheet' type='text/css' href='/index.sass')
9
9
body
10
10
.header
11
-
img.logo(src='/img/kh-logo.png')
12
-
.menu
13
-
.nav-item
14
-
.text(tabindex=0) Work
11
+
a.noreload.kh-logo(href='/')
12
+
img.kh-logo(src='/img/kh-logo.png')
13
+
.nav-bar
14
+
.nav-item(tabindex=0)
15
+
a.noreload.text(href='/work') Work
15
16
.submenu
16
-
.nav-item.in-submenu.text(tabindex=0) Video
17
-
.nav-item.in-submenu.text(tabindex=0) Art
18
-
.nav-item.in-submenu.text(tabindex=0) Development
19
-
.nav-item
20
-
.text(tabindex=0) For Sale
21
-
.submenu
22
-
.nav-item.in-submenu.text(tabindex=0) Video
23
-
.nav-item.in-submenu.text(tabindex=0) Art
24
-
.nav-item
25
-
.text(tabindex=0) Synctan
26
-
.nav-item
27
-
.text(tabindex=0) Lacuna
28
-
.nav-item
29
-
.text(tabindex=0) Contact
30
-
31
-
32
-
33
-
//- .nav-item(class=(page === 'work' ? 'current-page' : '') data-page='work')
34
-
//- .nav-item-text Work
35
-
//- .nav-submenu
36
-
//- .nav-item Video
37
-
//- .nav-item Art
38
-
//- .nav-item Development
39
-
//- .nav-item(tabindex='0' class=(page === 'for-sale' ? 'current-page' : '') data-page='for-sale')
40
-
//- .nav-item-text For Sale
41
-
//- .nav-submenu
42
-
//- .nav-item Video
43
-
//- .nav-item Art
44
-
//- .nav-item(tabindex='0' class=(page === 'synctan' ? 'current-page' : '') data-page='synctan')
45
-
//- .nav-item-text Synctan
46
-
//- .nav-item(tabindex='0' class=(page === 'lacuna' ? 'current-page' : '') data-page='lacuna')
47
-
//- .nav-item-text Lacuna
48
-
//- .nav-item(tabindex='0' class=(page === 'contact' ? 'current-page' : '') data-page='contact')
49
-
//- .nav-item-text Contact
17
+
a.nav-item.in-submenu.text(tabindex=0 href='/work/video') Video
18
+
a.nav-item.in-submenu.text(tabindex=0 href='/work/art') Art
19
+
a.nav-item.in-submenu.text(tabindex=0 href='/work/development') Development
20
+
.nav-item(tabindex=0)
21
+
a.noreload.text(href='/for-sale') For Sale
22
+
.nav-item(tabindex=0)
23
+
a.noreload.text(href='/synctan') Synctan
24
+
.nav-item(tabindex=0)
25
+
a.noreload.text(href='/lacuna') Lacuna
26
+
.nav-item(tabindex=0)
27
+
a.noreload.text(href='/contact') Contact
50
28
.social-media
51
29
a.twitter(target="_blank" title="Twitter" href="https://twitter.com/SpectralKH")
52
30
include img/twitter.svg
···
67
45
//- a.soundcloud(target="_blank" title="SoundCloud" href="https://soundcloud.com/SpectralKH")
68
46
//- include img/soundcloud.svg
69
47
.pages
70
-
.page.video
48
+
.page(data-page='/')
49
+
h1.title Kasper Henningsen
50
+
p.description There could be an awesome
51
+
.page(data-page='/work')
52
+
h1.title Work
53
+
p.description There could be an awesome
54
+
.page(data-page='/work/video')
71
55
h1.title Video
72
-
.page.art
56
+
p.description There could be an awesome
57
+
.page(data-page='/work/art')
73
58
h1.title Art
74
-
.page.synctan
59
+
p.description There could be an awesome
60
+
.page(data-page='/work/development')
61
+
h1.title Development
62
+
p.description There could be an awesome
63
+
64
+
.page(data-page='/for-sale')
65
+
h1.title For Sale
66
+
p.description There could be an awesome
67
+
68
+
.page(data-page='/synctan')
75
69
h1.title Synctan
76
-
.page.lacuna
70
+
p.description There could be an awesome
71
+
.page(data-page='/lacuna')
77
72
h1.title Lacuna
78
-
.page.development
79
-
h1.title Development
80
-
.page.for-sale
81
-
.page.contact
73
+
p.description There could be an awesome
74
+
.page(data-page='/contact')
75
+
h1.title Contact
76
+
p.description There could be an awesome
82
77
script(src='/js/index.js')
+3
src/work/art/index.pug
+3
src/work/art/index.pug
+3
src/work/development/index.pug
+3
src/work/development/index.pug
+1
-1
src/work/index.pug
+1
-1
src/work/index.pug