diff --git a/themes/acoeur/assets/ananke/css/custom.css b/themes/acoeur/assets/ananke/css/custom.css index 0717385..b32a4d3 100644 --- a/themes/acoeur/assets/ananke/css/custom.css +++ b/themes/acoeur/assets/ananke/css/custom.css @@ -2,6 +2,10 @@ transition: all 1s; } +body > header { + text-shadow: 0 0 4px black; +} + .breadcrumb { display: none; padding: 0; diff --git a/themes/acoeur/assets/js/misc.js b/themes/acoeur/assets/js/misc.js index 187c82d..a42f811 100644 --- a/themes/acoeur/assets/js/misc.js +++ b/themes/acoeur/assets/js/misc.js @@ -1,3 +1,6 @@ +/* + * Some javascript trick to sleep for some number of seconds + */ const sleep = (seconds) => new Promise(resolve => { document.body.classList.add('sleeping') setTimeout(() => { @@ -5,3 +8,13 @@ const sleep = (seconds) => new Promise(resolve => { resolve() }, seconds * 1000) }) + +/* + * From the current URL generate an UUID + */ +getUuidFromUrl = (pathname = document.location.pathname) => + pathname + .split('') + .reverse() + .filter(l => l.match(/[0-9a-f]/)) + .join('') diff --git a/themes/acoeur/assets/js/notes.js b/themes/acoeur/assets/js/notes.js index 1e1510a..a45cb0d 100644 --- a/themes/acoeur/assets/js/notes.js +++ b/themes/acoeur/assets/js/notes.js @@ -10,7 +10,7 @@ note = (context, freq, counter) => { // console.log("Note n°", counter, freq) const oscil = context.createOscillator() - oscil.type = 'triangle' + oscil.type = 'sine' oscil.frequency.value = freq const gainNode = context.createGain() @@ -20,37 +20,27 @@ note = (context, freq, counter) => { const notesPerSecond = 5 // In Hertz // All are in seconds const start = counter / notesPerSecond - const duration = 1.2 / notesPerSecond + const duration = 1 / notesPerSecond const ramp = .2 / notesPerSecond / 3 // Exponential increase // Increase volume - gainNode.gain.setTargetAtTime(1, start, ramp) - // Decrease volume - gainNode.gain.setTargetAtTime(0, start + duration - ramp * 3, ramp) - + gainNode.gain.linearRampToValueAtTime(1, start) oscil.start(start) + + // Decrease volume + gainNode.gain.exponentialRampToValueAtTime(0.001, start + 1); oscil.stop(start + duration) } -/* - * From the current URL generate an UUID - */ -getUuidFromUrl = () => - document.location.pathname - .split('') - .reverse() - .filter(l => l.match(/[0-9a-f]/)) - .join('') - /* * Launch notes based on the current URL */ launchNotes = (event, counter = 0, uuid = getUuidFromUrl()) => { if (counter >= uuid.length || counter >= 5) return - const context = new AudioContext() + const context = new (window.AudioContext || window.webkitAudioContext)(); - const freq = tons[parseInt(uuid[counter], 16) % tons.length] / 2 + const freq = tons[parseInt(uuid[counter], 16) % tons.length] // freq *= Math.max(1, parseInt(uuid[counter], 16)) / Math.max(1, parseInt(uuid[counter + 1], 16)) // freq = Math.min(2000, Math.round(freq)) @@ -58,3 +48,5 @@ launchNotes = (event, counter = 0, uuid = getUuidFromUrl()) => { launchNotes(event, counter + 1, uuid) } + +// document.onclick = launchNotes diff --git a/themes/acoeur/assets/js/prettify.js b/themes/acoeur/assets/js/prettify.js new file mode 100644 index 0000000..31114a4 --- /dev/null +++ b/themes/acoeur/assets/js/prettify.js @@ -0,0 +1,25 @@ +/** + * Generate some random css effects on a specific item + */ + +const nextDigit = (uuid, counter) => parseInt(uuid[counter], 16) + +const generateColor = (uuid, counter = 0) => + `rgb(${nextDigit(uuid, counter) * 16 + nextDigit(uuid, counter + 1)}, + ${nextDigit(uuid, counter + 2) * 16 + nextDigit(uuid, counter + 3)}, + ${nextDigit(uuid, counter + 4) * 16 + nextDigit(uuid, counter + 5)})` + +const prettify = (element, uuid = getUuidFromUrl()) => { + if (element.style.backgroundImage || uuid.length < 6) return + + element.style.backgroundImage = `linear-gradient(black, ${generateColor(uuid)}, ${generateColor(uuid, 6)})` + element.style.boxShadow = `0 0 1em inset ${generateColor(uuid, 6)}` + + Array.from(element.children) + .forEach(c => c.style.backgroundColor = 'transparent') +} + +prettify(document.querySelector('body > header')) + +Array.from(document.querySelectorAll('a.hero-pill')) + .forEach(element => prettify(element, getUuidFromUrl(element.href))) diff --git a/themes/acoeur/assets/js/prop.js b/themes/acoeur/assets/js/prop.js index 986efa4..18ab8f2 100644 --- a/themes/acoeur/assets/js/prop.js +++ b/themes/acoeur/assets/js/prop.js @@ -114,5 +114,5 @@ uuid = () => { const temp_url = URL.createObjectURL(new Blob()) const uuid = temp_url.toString() URL.revokeObjectURL(temp_url) - return uuid.substr(uuid.lastIndexOf('/') + 1) // remove prefix (e.g. blob:null/, blob:www.test.com/, ...) + return uuid.substring(uuid.lastIndexOf('/') + 1) // remove prefix (e.g. blob:null/, blob:www.test.com/, ...) } diff --git a/themes/acoeur/layouts/_default/group.html b/themes/acoeur/layouts/_default/group.html index e98ac4e..6913ed9 100644 --- a/themes/acoeur/layouts/_default/group.html +++ b/themes/acoeur/layouts/_default/group.html @@ -9,10 +9,17 @@ {{ end }} {{ range .Pages }} - {{ .Render "summary-with-image" }} - {{ range (.Paginate .RegularPagesRecursive).Pages }} - {{ .Title }} - {{ end }} + {{ $featured_image := partial "func/GetFeaturedImage.html" . }} +
+ {{ if $featured_image }} + image from {{ .Title }} + {{ end }} + {{ .Title }} + - + {{ range (.Paginate .RegularPagesRecursive).Pages }} + {{ .Title }} + {{ end }} +
{{ end }} {{ end }} diff --git a/themes/acoeur/layouts/_default/summary-with-image.html b/themes/acoeur/layouts/_default/summary-with-image.html index 1e8c0e5..4ae618a 100644 --- a/themes/acoeur/layouts/_default/summary-with-image.html +++ b/themes/acoeur/layouts/_default/summary-with-image.html @@ -9,9 +9,12 @@ image from {{ .Title }} + {{ else }} + {{ end }} -
+