suroh
/
work.suroh.tk
0
0
Fork 0
Code Pull Requests Actions Activity

Updated found more errors in media queries, and missing meta viewport tag in html head.

This commit is contained in:
suroh 2019-05-04 17:41:47 +02:00
parent c04344286c
commit 13b5462751
3 changed files with 46 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
css/master.css
View File

@ -89,6 +89,28 @@ h1#menuItem.active {
transform: translateY(-100px) !important;
}
/* --> AUDIO TOGGLE <-- */
span#audioToggle {
position: absolute;
top: 16px;
right: 16px;
transition: color ease-in-out 0.1s;
}
span#audioToggle:hover {
color: #CECECE;
cursor: pointer;
transition: color ease-in-out 0.1s;
}
span#audioToggle:after {
content: '🔇'
}
span#audioToggle.active:after {
content: '🔉'
}
/* --> MAINPAGE CONSTRUCTION <-- */
section.content {
margin: 0;
@ -202,7 +224,7 @@ section.page h1 {
}
}
@media screen and (max-width: 1360px) {
@media screen and (max-width: 1359px) {
body {
font-size: 19px;
line-height: 24px;
@ -303,7 +325,7 @@ section.page h1 {
/* --> SUBCONTENT CONSTRUCTION <-- */
section.content.page {
display: inherit;
max-width: 1960px;
max-width: 650px;
grid-gap: 24px;
}
@ -319,24 +341,4 @@ section.page h1 {
margin: 40px 0 48px;
}
/*
section.content.page div.imgFeat {
grid-column: span 5;
grid-row: 1 / 4:
}
section.content.page section.imgs {
grid-column: 4 / span 2;
grid-row: 2:
}
section.content.page section.imgs>img {
max-width: 100%;
height: auto;
}
section.content.page section.text {
grid-column: 1 / span 3;
grid-row: 2;
} */
}

9
index.html
View File

@ -4,17 +4,18 @@
<head>
<title>wkflw</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/master.css">
<!-- Matomo -->
<script type="text/javascript">
<!-- <script type="text/javascript">
var _paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u = "//analytics.suroh.tk/";
var u = "https://analytics.suroh.tk/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '1']);
var d = document,
@ -26,7 +27,7 @@
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
</script> -->
<!-- End Matomo Code -->
<script src="js/audio.js" charset="utf-8" defer></script>
@ -42,6 +43,8 @@
<span data-link="~"><~</span><span data-link="works" class="">█</span><span data-link="audio" class="">█</span><span data-link="teach" class="">█</span>
</nav>
<span id="audioToggle"></span>
<section style="position: fixed; top: 0; left: 0; margin: 0; padding: 0; width: 100vw; height: 100vh; z-index: -100;">
<div style="position: relative; width: 100%; height: 100%;">
<h1 id="menuItem" class=""></h1>

26
js/audio.js
View File

@ -1,17 +1,23 @@
// audio for events
// AUDIO SETUP
const audioEngine = new (window.AudioContext || window.webkitAudioContext)()
audioEngine.suspend()
const masterGain = audioEngine.createGain()
const audioEl = document.querySelector('#audioToggle')
window.onload = function() {
// create gain
masterGain.gain.value = 0.9
masterGain.connect(audioEngine.destination)
masterGain.gain.value = 0.9
masterGain.connect(audioEngine.destination)
// window.onload = function() {
// // create gain
// }
const audioToggle = () => {
audioEl.classList.toggle('active');
if (audioEngine.state == 'suspended') {
audioEngine.resume()
} else {
audioEngine.suspend()
}
}
// AMBIENT
// BUTTON HOVER
audioEl.addEventListener('click', audioToggle)