New much darker backing colour & restrict max article width

https://emilkowalski.github.io/css-effects-snippets/

.gitignore

@@ -2,3 +2,5 @@ _site
 .sass-cache
 .jekyll-metadata
 .jekyll-cache
+public/
+node_modules/

content/blog/2016-12-16-minds-eye-blind.markdown

@@ -2,6 +2,9 @@
 layout:	post
 title:	"Mind’s eye blind"
 date:	2016-12-16
+categories:
+    - philosophy
+    - about me
 ---
 
   *Sunset. Golden reds and yellows pouring, fading away, succumbing to the clutching grasp of creeping twilight, the strangling darkness.*
@@ -16,4 +19,4 @@ The term ‘aphantasia’ to describe the condition I have just outlined was coi
 
 Zeman has described it as an ‘intriguing variation in human experience”. I can certainly agree in that I feel that it has changed the way I experience the world compared to others, forcibly so. Something seen and now gone, is forever lost to me, where for others it would live on in images conjured from memories. The ability to do such a thing sounds more than a little like magic to me. It’s forced me to live in the present. But, like Zeman, I don’t feel that that’s entirely a bad thing, something to suffer from. A difference, not a handicap.
 
-  
+  

content/blog/2020-07-01-worth.md

@@ -0,0 +1,15 @@
+---
+layout: post
+title:  "Worth"
+date:   2020-07-01 00:00:00 +0100
+categories: poetic
+---
+I believe, even a little bit, in Fate
+
+Why? Dear, why not?
+
+nothing is in vain
+
+all is remembered
+
+You're worth it

content/blog/2020-07-15-til-font-weight.md

@@ -0,0 +1,14 @@
+---
+layout: post
+title: "TIL #1: Font weights in the browser"
+date: 2020-07-15
+categories:
+- webdev
+- til
+---
+
+Stealing an idea from somewhere (that I would link if I could remember where!) when I learn something worth sharing (especially if it's from a small blog like this one) I'm going to reshare it here. This will likely evolve into a full separate section, but for now, here it is.
+
+So, I now realise why the Jekyll theme that became the basis for the custom styles of this site included an explicit numerical font weight and it is because of some odd default choices in Safari.
+
+Read more here: https://blog.stephaniestimac.com/posts/2020/06/browser-fonts/

content/blog/2020-12-07-naturalselection.md

@@ -0,0 +1,26 @@
+---
+layout: post
+title:  "Natural Selection"
+date:   2020-12-07 00:00:00 +0100
+categories: 
+- 52stories
+- fiction
+- short story
+---
+*Galactic Council Record No. 2020*
+
+All races across the universe undergo natural selection. Few go so far as to let it run its course unchecked, though this is true of some particularly proud or warlike species like the dragonlike Yywrack, feared pirates and plunderers. Some have escaped it to varying degrees of success. 
+
+Except for one. Humanity. They have beaten it back, killed it completely.  But on the galactic stage, strength came above all else. Strength of the individual, and strength of the species. Some among the stars, like the mysterious inhabitants of the Pleiades, took this idea so far that they pursued strict eugenics programs, to ensure the purity of blood of their brethren. Others still forewent natural reproduction and became a race of clones edging towards physical perfection. Rogues from these types of species made perfect, untraceable mercenaries. All species are united in allowing Darwinism (though none knew it by this name at the time) to ensure that the strong survived. Such was the rule of the universe, the law of the stars and the void between.
+
+Not so for humanity. Such was the depth of their compassion that they invented procedures and machinery to fight to save those that could not be saved. Those born without limbs had neural-bonded cybernetic replacements grafted in their place, often performing as well or better than an original one. Humanity battled genetic diseases and regular ones alike, and the Red Cross opened an intergalactic branch that became the forerunning humanitarian aid organisations in the universe. Something to do with being the very first lent it a home turf advantage. Even that word. Humanitarian. Lent to us by them to mean helping those in need, staying the course of nature. 
+
+Humanity was unique in treating the sick with a respect that bordered on veneration, on seeing the strength in those set back from the very start. And not one of them was content to settle for the hand that they were dealt. They hadn't always been this way. Their comparatively short history was littered with examples of a parent abandoning a weak or malformed child. Even just for being born the (perceived) wrong gender. But their mythos, their legends, and their truest history, also bore stories of those that survived despite, despite the cruel jokes of the universe, and thrived in the face of it all. Vulkan. Romulus and Remus. Others beside. Sickness held no fear for humanity, for they bore it with chins raised - a symbol of perseverance in their culture. Where other races continually cast out those the universe had decided, through pure chance, humanity fought for them, raised them up. They started to do the same for children of other races besides their own, too, and Earth gradually became a great infirmary, the considerable resources of the human factions poured into supporting those that needed people there for them. 
+
+They were openly treated with distrust for what was perceived as disrespect for universal law, and behind closed doors, they were mocked. How wrong we were. Let it be recorded, shame is upon us all now. 
+
+And that was their greatest strength. It saved us all. They died for us, and in doing so showed us even as we worship the strong, we are **weak**. Even when the Blight came, they refused to back down. They refused to sacrifice those that were succumbing, excruciatingly slowly, to the rot. 
+
+Over and above that, they refused to allow any of their number to run. They contained the plague even as it burned like a wildfire through their population, devastating their core worlds in a matter of days. Some did try, not all humans were noble. Some were just scared. But humanity, acting in the first (and, as it came to be, last) time in their history, truly as a cohesive species, set up a perimeter. And though it must have hurt, they shot down their fellows. Blew pirates, traders and civilians alike out of space, condemning them to a slow death not unakin to that the infection brought, all to ensure this mysterious infection did not spread beyond their space.
+
+In the end, natural selection caught up with Humanity and dragged their whole species into the darkness. But even as it inexorably did so, they fought tooth and nail to prevent it from taking us all with them. With the blood of their own people, of their own brothers and sisters, they burnt a firebreak across the stars and saved every one of us. Whenever we look at the Black, the dark between stars, we remember them. To them we owe everything.

content/blog/2020-12-13-olivia.md

@@ -0,0 +1,51 @@
+---
+layout: post
+title:  "Olivia, The Storm"
+date:   2020-12-13 00:25:00
+categories: 
+- 52stories
+- fiction
+- short story
+---
+Olivia crackled fiercely, enveloped in a maelstrom of energy that was as green as her eyes. It rose around her and whipped up the once calm air. Mimicking this rise, she took off. Incongruously slowly, her feet rose several metres from the sodden earth as her eyes flashed fierce with ethereal power. The unshackled force spilled out across the sky like a supercharged aurora, dancing as if it were alive and gleeful at being let free.
+
+Moments later, she lashed out, a twisting beam of energy coming crashing down like a striking snake. The smoke-like figure she had been aiming for dodged easily, blurring through the air between where it had been and where it was now in the work of moments. Irritation rose as the overwhelming emotion in Olivia's mind and she had a sudden desire to scream in an imitation of the fierce wind that now screamed in circles around her. She choked it back. Her emotion wasn't deserved. She had been here before. Died here before. It was all just as little deserving of her time, and her feelings, her pain, than ever. 
+
+The setup was the same as it always was. She was alone, but yet also surrounded. Alone in that she had no allies, and very much not alone in that she was completely surrounded by enemies. The landscape changed every time she ended up here, as inevitable as the turning of the days to years, but her enemy stayed the same. Demons wrought of smoke and fire, which she had always thought of as a rather cliche manifestation of evil. Things inevitably played out the same, too. She had powers here, here in the dream, but they were never enough. The tide of daemonic hatred was always too much, always overwhelming, and one way or another every single one of these dreams ended with her being run through with knife, claw or horn. The feeling of being stabbed, still invasive, was sickeningly familiar now.
+
+But this was the start of the hell loop. Which left her an uncertain but brief amount of time in which she was strong, and could wash aside those that fought her over and over in this odd pocket of unreality as the crashing sea does all at the shore, or the cascading storm does to the land below. As she snapped back into the present moment, the emerald hued thunderstorm that encircled her reached a crescendo, exploding outwards in a supernova of blinding light which erased her surroundings from existence. So bright that it made her squint hard and by the time she could see again the land around for what seemed like a kilometre was flat and barren, smoking gently. She felt, she realised, more powerful than usual, felt the sparks of energy dance up and down her spine and all the way out to the tips of her outstretched fingers, as if particularly aggressive pixies had invaded her blood. Her shoulder length blonde hair was taken up in the wind and flew into her eyes, momentarily obscuring her vision. She still hovered quite a distance clear of the ground, so hoped that she would be safe for now. 
+
+No sooner had she had dared to think that was she proved wrong. An unseen force grabbed her bodily and slammed her to the earth. When her vision cleared again, the storm momentarily dying back as all the wind was knocked from her, the otherwise newly flat landscape was once again teeming with the demonic hordes which assailed her every time she ended up here. A few were crouched over her, leering in close. She took half a second to look at them in detail, from the cracked black cloven hooves that were mirrored at the creature's head by where it was framed by a tangled mess of six curved horns that framed a face mostly made of slavering teeth. It was built of slabs of steaming muscle which might as well have been chiselled from stone. Whenever it got this close in she inevitably lost, no hope of matching even a single on of these things in physical combat. Two bright pinpricks of molten light shone in a rather poor imitation of eyes, echoed by cracks of light that leaked across the creatures body rather like it was filled with magma, the energy oozing off of it. The effect was completed by the stench of sulphur that filled the air, soon no doubt to be joined with the iron tang of blood. Hers or theirs, she told herself, as she scrambled quickly to her feet. Hers or theirs, she repeated, a sort of mantra allowing her to carve a defiant space against the dark. 
+
+The three closest to her lunged the instant she showed sign of life. In truth, she didn't know why they hadn't done so before, why they hadn't fallen upon her prone form. Dramatic effect perhaps, she thought grimly yet wryly. Just then something, like a wordless voice at the base of her skull, told her to put her hand out. So she did so, even as it felt highly ridiculous to do. As she complied, the air solidified in her hand, writhing as if she had reached out and grasped a decidedly antagonised snake. Fortunately for her, what materialised in her hand was not a snake, but a gun. 
+
+That was new, she thought to herself. Normally all she had to battle her not-nearly-ethereal-enough demons was her wits and the power of the storm that even now raged overhead. Occasionally the smell of overcooked ozone overwhelmed the sulphur rotting in her nose as a lance of energy lashed down and vaporised whatever it struck. The storm, though, was not easy to control. This gun, she sensed with that same wordless foreign knowledge, would be a damn sight simpler. It wasn't a typical nondescript black semi-auto that she had seen thousands of times in films. This gun had style, and she appreciated it as time dutifully stood still around her for her to do so. It was a snub nosed revolver of shining silver, glinting menacingly in the green light cast by her storm. As her finger curled gratefully around the trigger runes that she hadn't noticed etched into the barrel sprang into life, in a vibrant green that almost made her avert her gaze. She didn't recognise the script, despite a working knowledge of most all earthly languages. 
+
+Half a heartbeat later her pondering over what the inscription might say was abruptly yet inevitably interrupted by the thunderous report of a shot. The demon in front of her fell, a brightly glowing hole punched directly in the centre of its forehead between the forest of horns. The creature was rapidly absorbed into the ground as it opened around it and swallowed it hungrily. As if envious, several bolts of green tinged lightning stabbed at the earth each with a booming, rolling sound which swallowed the echo of the shot whole. The demons which had surrounded her scattered like a flock of startled birds until they circled her at a healthy distance, with what seemed to border on respect if not fear. She somehow knew that it was the weapon and not her that they feared. 
+
+Duly renewed and rearmed, she drew the storm around herself like a heavy protective cloak and with some concentration rose from the dark earth once again. She still held the revolver in her hand. Did she only get six shots, she wondered? She would certainly need a lot more than that to finish off all those that currently swirled below her in a rough imitation of her storm cloak, and she knew from bitter experience that for each one she felled more would come at her. She could never win, she always knew that. But still she fought, whether out of stubbornness or something more she had never stopped to think. 
+
+Just as she was getting ready to fire again, taking careful aim even though with the number of bodies seething below her she absolutely could not miss, she sensed a presence with a skilful sense she had only in this unreality. With a thought, she sent herself swirling sideways, the storm for once doing her bidding without argument. almost as if it recognised and responded to the urgency in her command. A bolt of black energy whipped through the space she had occupied only moments before, a grim imitation of the verdant green energy she harnessed herself. That was new, she thought. The demons came at her with tooth and claw, they had never reflected her magic back toward her. 'Reflected?' she found herself thinking...how did she know that was what happened. Was it even what was happening? 
+
+More important to her present survival was where that attack had come from. She looked up, rather than down at the ground below, and in front of her saw another woman. The figure flew just as she was, also encircled in the storm except that where the cloud cradled Olivia, it kept its distance from this other person, like the demons now did from the armed Olivia. Experimentally, she lashed out with several tendrils of energy of her own, these glowing with a fierce bright energy that was the precise opposite of the sucking darkness that had come from the earlier bolt which had nearly slashed her in half. The woman dodged just as easily as Olivia had. It seemed that they were evenly matched. 
+
+As the other person's figure solidified further, drawing near through the misty haze and sheeting rain, Olivia realised that this was true in more ways than one. The other woman looked eerily similar to herself, though with raven black hair a little longer than her own, and she seemed a little taller too. It could just have been the dark presence that rolled off her in waves, pushing away the crushing cloud. It was difficult to tell, floating above the ground making true reference difficult. Her face was a little different too. Sharper. This was emphasised by dark and heavy make-up that encircled her eyes, matching the black of her lips and standing out against her unearthly pale skin. 
+
+The figure across from Olivia gestured indistinctly, and then in her hand she held a sword. The flat single-edged blade shone in bright metal imitating that of Olivia's gun, an ornate basketwork of finely spun gold enveloping the hilt and the slender fingers of the other woman's hand that curled tight there. The metal glowed dully, a perhaps bluish sheen across it. It was, ultimately, the exact opposite of its wielder. The light to the darkness. Olivia didn't have a moment longer to look at the sword before it was slicing toward her head, whistling lightly as it did so, even though that menacing quiet sound ought not to have been audible above the fierce wind. 
+
+Without knowing how she knew how, but completely aware that she had to, Olivia imitated the other woman's gesture and a sword of her own materialised rapidly. The gun which she still had held outstretched, forgotten, writhed once more snakelike and forced itself into a sword totally unlike any other Olivia had seen before. The hilt was heavy and cast iron black, two smaller blades curving back to form a protective arch across her white knuckle grip. It had a huge blade coming to a sharp edge on both sides. These edges were white with energy, lessening to a dull cherry glow at the ridge of the blade's back. It was as if it had only just that precise moment been pulled free fresh from the forge. Reinforcing the effect, it threw off a fierce heat that caused Olivia to instinctually draw away. She practically dropped the thing, such was the surprise, worsened by the sudden weight.  
+
+Not a moment too soon, as the other woman's blade abruptly crashed into hers. A resounding clang, like a more metallic version of the earlier ringing gunshot, filled what space the storm left in the air. This was chased off by a rapidly receding sizzle as sparks flew firefly-like and twisting into the air where the slim shining blade met the hefty molten one and skittered away harmlessly. Phoenix tear droplets of molten metal were cast away into the air from Olivia's own blade even as the other woman's sword sharply heated to an orange glow at the point of impact. Moments later they were locked into a deadly dance, whirling through the air like the storm that still thrived around them, occasionally taking a break from the clashing of blades to cast bolts of piercing energy at one another. 
+
+Olivia felt her chest rise and fall quickly as the exertion took its toll, sweat beading on her brow, whilst the other woman appeared to have unearthly stamina, showing no sign of flagging. Olivia almost had this mysterious other woman several times, but the ponderous slowness with which she was now forced to heft the massive blade repeatedly stole the finishing blow from her. 
+
+She didn't know how long they fought for. The storm seemed to stand still around them, watching eagerly. The ever present whistling roar of it died away to be replaced by the rhythmic clang of metal on slightly more molten metal. They twisted and tumbled through the air, a three dimensional fight that seemed perfectly choreographed in its volatility. She didn't know why they were fighting, either, it occurred to Olivia, after what could quite easily have been forever. It never had need to before. She knew whenever she woke here that she would fight and fight until she died. But this time was different. Why? She had to know.  
+
+"Who are you?" she shouted, barely able to catch her breath amongst the exertion of furious strikes and parries. No reply came.
+"Who are you?" she tried again, and nearly paid for it dearly as she only just managed to send the slim blade of her silent opponent singing away from where it had almost pierced her chest straight through to the heart. Still no answer was forthcoming, the other woman's mouth set in a tight lipped line which still frustratingly betrayed no sign of tiring even as Olivia felt the last reservoirs of strength gradually draining from her limbs.
+"I'm Olivia..." Olivia said, trying a different tactic. Not giving a chance for an answer this time, she followed up,
+"Why are why fighting...why the hell are we fighting?" she continued, rising to a half scream by the end of the sentence. A light grew in her opponent's eyes, much like that which had flashed at Olivia's at the beginning of this nightmare, not that she could have known that. 
+
+"Olivia..." the woman spoke and trailed off, her voice fading away into the wind which suddenly sprang up once more, reaching out toward her and almost brushing her with outstretched fingertips before the world began to shatter around them both. White nothing persecuted and invaded the carefully constructed mental torture chamber as it sharded into smaller and smaller pieces. The last piece to shatter was the face of the other woman, outliving even Olivia felt the twisted expression of the other sear itself into her mind alongside the feeling of being stabbed which was the typical way for these things to end. 
+
+In a disturbing echo of the dream, "Olivia?" was the first word Olivia heard as she crashed back to reality, accompanied by the sickening feeling of falling. Her fall was mercifully broken by the creaky softness of her familiar bed. A reassuringly familiar figure, though her brain hadn't woken enough to place their face yet, stood in the doorway with a decidedly quizzical expression. Wait...fall? As she came back to her senses she noticed a pervading damp that quickly spread fingers of cold into her bones. It was as if her bedroom had been torn through by a storm, though the window beside her remained firmly shut and the air outside steadfastly dark and deathly still. Strangely like the storm had come from within.

content/blog/2020-12-16-twinswords.md

@@ -0,0 +1,19 @@
+---
+layout: post
+title:  "Twin Swords"
+date:   2020-12-16 23:05:00 +0100
+categories: fiction
+---
+*For Olivia, who vehemently prefers Liv :)* 
+
+Blood-red runes smoulder with hellfire heat, eldritch and arcane symbols twisting and writhing like caged beasts. Molten light pours from the blade, a cacophony of flaming colours pulsating to a deep, unseen beat. The air around it shimmers, trying to run from the smoking heat. Living fire, possessed with evil intent, drips from the tip of the wide spined sword, a deep groove running down its spine. The Evil Eye sits crouched on the hilt, slitted pupil moving erratically, madly. 
+
+The saber is alive with boundless rage, blood and flame bound in shackles of brass. Possessing a wicked razor sharpness no object of the mortal realm can even slow, like the scythe of Death itself. Capable of cutting an ethereal flame in twain, or cleaving a soul from its body. It seems to radiate evil, as if a demon is entombed within the metal and fire of the artifact. One wonders if this sword is wielded...or it wields. 
+
+This is the Blade of Hatred. 
+
+Blinding white light matches the volcanic glow emanating from the Hellblade. Burning with clean force, a miniature sun. Energy flickers and crackles along the length of the curved blade. The hilt is a basketwork of shining gold, the pure light glinting off it, sparkling fragments twirling into the darkness. It shines with strength, and surest purity.
+
+It rivals its pair in sharpness, capable of hewing the head of a demon from its shoulders without the slightest resistance. This sword too, feels alive. But not possessed, instead...confident. Filled with life, not hate. 
+
+This is the Blade of Hope. 

content/blog/2020-12-16-worth.md

@@ -0,0 +1,14 @@
+---
+layout: post
+title:  "Worth Reading"
+date:   2020-12-16 00:00:00 +0100
+categories: philosophy
+---
+EDIT: A previous version of this was unkind, perhaps too much so. 
+
+Not a lot of philosophy stands out to me. It feels like, since the Greeks, we've gotten pretty bogged down in proofs and formulations, with very little to show for it. Of course, the hell do I know? Some things have stood out to me, though. So follows, in no particular order, a short (living) list of things I have found that inspired my intrest: 
+
+- Jean-Dominique Bauby, "The Diving Bell and the Butterfly"
+- Thomas Young, "Overconsumption and procreation: are they morally equivalent?."
+
+Your mileage may, decidedly, vary. 

content/blog/2020-12-21-52stories.md

@@ -0,0 +1,16 @@
+---
+layout: post
+title:  "I defy you to write 52 bad stories"
+date:   2020-12-21 00:00:00 +0100
+categories: 
+- writing
+- 52stories
+- fiction
+---
+I declare a ~~thumb war~~ challenge. 52 weeks of the year, 52 stories. I only barely won NaNoWriMo this year, and for an Overachiever (35k in 24 hours last year!) like me that just *isn't good enough*. So this year, I have a new challenge. A new short story every week, for the whole year until its time to do NaNoWriMo again. 
+
+As with any challenge I set myself, I'll keep the rules intentionally vaugue and let them develop over time. One story, per week, that's all. 
+
+The theory here is nobody can write fifty two stories (which simultanously sounds like a lot and nothing at all! Only that many weeks in a year?!) and have all of them be terrible. It should also force me to work on my weakpoint, compelling characters, whilst allowing me to excercise my worldbuilding often. 
+
+Let's see about proving that prior theory wrong! :p 

content/blog/2021-01-01-stolenpast.md

@@ -0,0 +1,38 @@
+---
+layout:	post
+title:	"Rage, Rage Against the Dying of the Light"
+date:	2021-01-01
+categories:
+    - philosophy
+    - about me
+    - on life
+---
+<div style="max-width: 600px; margin-left: auto; margin-right: auto;">
+{{< image url="/img/tony-rojas-lk5MYKmGyFE-unsplash.jpg" caption="*Photo by [Tony Rojas](https://unsplash.com/@tonyrojasstudio?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/blindfold?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)*" class="full-width" >}}
+</div>
+
+Quite a while<sup>1</sup> I [wrote]({{< ref "/blog/2016-12-16-minds-eye-blind" >}} "About Us") about my experience of aphantasia. At the time I said<sup>2</sup>:
+
+> It’s forced me to live in the present. But, like Zeman, I don’t feel that that’s entirely a bad thing, something to suffer from. A difference, not a handicap.
+
+These days, that's not true at ALL. Not only that, I'm angry. I don't remember my past, good and bad, and I don't even remember what I don't remember. Aphantas isn't wholly to blame for this, but it doesn't fucking help. Even if I could recall the moments I so desperately want to, I wouldn't be able to live them inside my head in the same way as others.
+
+So I'm really quite angry at what I've lost. So many moments that ought to have been memories for a lifetime, gone like sand in the wind. Moments that should be unforgettable, all gone. I've lost first kisses, first loves. I've lost birthdays, Christmases, holidays. I've lost heartbreaks and breakups. Maybe you think it makes it easier? Seventeen hells no. It makes the fragments that do stick hurt even more, shrapnel in an open wound.
+
+People talk a lot about letting go of the past. I don't really have a choice in the letting go, and as a result I fight every step of the way, clinging to scraps. It hurts a lot more this way. 
+
+It feels, almost, like I've lost a sense, though of course I can't lose something I've never had. And I'm not sure that's fair to say, as apart from a brief brush with blindness from a massive blood pressure crash, I haven't lost any real world senses. But that's the closest words I can find to describe it. That's another thing that feeds my anger. I'm struggling, but there aren't even the words for why. We haven't even invented them yet. Every time I type the word aphantasia a red squiggle comes up, taunting me. 'This isn't a word' it's saying. In other words — 'It isn't a real thing.' Sure, that's just the computer. But even still. Nobody knows about it, and we can't talk about it because we haven't *invented the words* yet. That twists the knife. Talking about the inside of our heads is so damn hard. I can't imagine what it's like for mindsighted people just as mindsighted people can't imagine an aphantasiac's life. Hopefully this will get better with time. I'm going to fight (in whatever small way I can) for it to, at least. 
+
+At this point I feel obligated to mention - things could be worse. There are plenty of worse conditions, and I empathise with everyone who suffers, but this one is mine. Sometimes, it feels like mine alone.
+
+On that note, if you're suffering like me, or even if you're not and just want to know more, *please* get in touch...<sup>3</sup>
+
+<hr>
+
+<sup>1</sup>Four or so years! Cor...
+
+<sup>2</sup> Urgh, quoting myself always feels so masturbatory >.>
+
+<sup>3</sup> People who have aphantasia and see it as a gift...you optimistic bastards can **sod off**!<sup>4</sup>
+
+<sup>4</sup> Only joking...mostly... (the glass is half full. Shame it's full of piss.)

content/now.md

@@ -4,8 +4,11 @@ menu:
     main:
         name: "Now"
 ---
-# 2020-07:
-COVID bloody COVID. With no work to do for the forseeable future I am doing a lot of programming, a lot of work on this website and other selfhosting projects, and looking at bashing together a more ergonomic keyboard, because my hands are getting increasingly grumpy with straight days spent typing.
+# 2020-12:
+Back home for the holidays, missing my computing power and my soldering station. I'm writing an essay on triumphalism as a form of pathophobia, and working on a new and intresting project involving WebRTC and Django. Still wanting to work more on this site...
+
+# ~~2020-07~~:
+~~COVID bloody COVID. With no work to do for the forseeable future I am doing a lot of programming, a lot of work on this website and other selfhosting projects, and looking at bashing together a more ergonomic keyboard, because my hands are getting increasingly grumpy with straight days spent typing.~~
 
 # ~~2019-09~~:
 ~~I'm about to go into second year of Philosophy at University of Nottingham. Most of my spare time is spent running recruitment and social media for [TEC PA & Lighting](https://www.nottinghamtec.co.uk). I want to get back into fiction writing and programming soon. And work more on this website.~~

gulpfile.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var gulp = require('gulp');
+
+var autoprefixer = require('autoprefixer')
+var terser = require('gulp-terser');
+var sass = require('gulp-sass');
+var postcss = require('gulp-postcss')
+var flatten = require('gulp-flatten');
+var csso = require('gulp-csso');
+var spawn = require('child_process').spawn;
+
+sass.compiler = require('node-sass');
+
+function styles(done) {
+    return gulp.src(['src/sass/screen.scss'])
+    .pipe(sass().on('error', sass.logError))
+    .pipe(flatten())
+    .pipe(postcss([ autoprefixer() ]))
+    .pipe(csso())
+    .pipe(gulp.dest('static/css/'))
+    .on('end', done);
+}
+
+function scripts(done) {
+    return gulp.src(['node_modules/@fortawesome/fontawesome-free/js/all.min.js'])
+    .pipe(flatten())
+    .pipe(terser())
+    .pipe(gulp.dest('static/js/'))
+    .on('end', done);
+}
+
+function up(done) {
+    spawn('hugo', ['serve', '-w', '-D'], {stdio: 'inherit'});
+    done();
+}
+
+function watchFiles(done) {
+  gulp.watch("src/sass/*.scss", styles);
+  done();
+}
+
+exports.build = gulp.parallel(styles, scripts);
+exports.watch = gulp.parallel(watchFiles, up);

layouts/_default/baseof.html

@@ -4,7 +4,7 @@
   <body>
     <div class="container">
         <header>
-            <h3><a href="/">Arona Jones</a></h3>
+            <h3>Arona Jones</h3>
             {{ partial "nav.html" . }}
         </header>
         <main aria-label="Content">

layouts/blog/single.html

@@ -1,11 +1,24 @@
 {{ define "main" }}
 <article>
-    <h1 style="padding-top: 2em; padding-bottom: 1em;">{{ .Title }}</h1>
-    <p>Tags:
+    <h1 style="padding-top: 1em;">{{ .Title }}</h1>
+    <p style="padding-bottom: 1em;">Tags:
     {{ range (.GetTerms "categories") }}
-        <a href="{{ .Permalink }}" style="background: black; border-radius: 0.5em; padding: 0.5em; margin: 0.4em">{{ .LinkTitle }}</a>
+        <a href="{{ .Permalink }}" style="background: #202226; border-radius: 0.3em; padding: 0.4em; margin: 0.1em">{{ .LinkTitle }}</a>
    {{ end }}</p>
 	{{.Content}}
     <small>Published on {{ .Date.Format "2006-01-02" }}</small>
+    <div class="next-post" style="padding-top: 1em;">
+	{{ if .NextPage }}
+	Next: <a class="link-reverse" href="{{ .NextPage.Permalink }}"> {{ .NextPage.Title | truncate 50 "..." }}</a> »
+	{{ end }}
+    </div>
+    <div class="previous-post" style="padding-top: 1em; padding-bottom: 2em;">
+	    {{ if .PrevPage }}
+	    « Previous: <a class="link-reverse" href="{{ .PrevPage.Permalink }}"> {{ .PrevPage.Title | truncate 50 "..."}}</a>
+	    {{ end }}
+    </div>
+    <script defer src="https://comments.aronajones.com/js/commento.js"></script>
+    <div id="commento" style="width: 50%"></div>
+    <noscript>FYI: Comments would be here, but they require Javascript.</noscript>
 </article>
 {{ end }}

layouts/index.html

@@ -5,18 +5,17 @@
     <div class="container">
         <header>
             <h1>Arona Jones</h1>
-            <h3>{{ .Site.Title }}</h3>
+            <h2 style="color: white;">{{ .Site.Title }}</h2>
         </header>
         <main aria-label="Content">
-            <div style="display: flex; justify-content: center; background: black; margin-left: -5vw; margin-right: -5vw; height: 100%;">
-                <div class="bigimage"><img class="background" src="img/christian-wiediger-WkfDrhxDMC8-unsplash.jpg"><a class="button" href="development"><span class="fas fa-file-code"></span> Development</a></div>
-                <div class="bigimage"><img class="background" src="img/1*0V2rDSk8SOr6mpfFf28EJA.jpeg"><a class="button" href="writing"><span class="fas fa-pen-fancy"></span> Writing</a></div>
-                <div class="bigimage"><img class="background" src="img/diwaliball.jpg"><a class="button" href="technical"><span class="fas fa-lightbulb"></span> Technical</a></div>
-                <div class="bigimage"><img class="background" src="img/1*2J4xTO7JYBYA3dcMwwGSlw.jpeg"><a class="button" href="blog"><span class="fas fa-portrait"></span> Blog</a></div>
+            <div style="display: flex; justify-content: center; background: black; margin-left: -5vw; margin-right: -5vw; height: 100%;" id="homepage-container">
+                <div class="bigimage"><img class="background" src="img/christian-wiediger-WkfDrhxDMC8-unsplash.jpg" alt="Keyboard with blue backlit keys"><a class="button" href="development"><span class="fas fa-file-code"></span> Development</a></div>
+                <div class="bigimage"><img class="background" src="img/1*0V2rDSk8SOr6mpfFf28EJA.jpeg" alt="Mugs of coffee on a fire grate"><a class="button" href="writing"><span class="fas fa-pen-fancy"></span> Writing</a></div>
+                <div class="bigimage"><img class="background" src="img/diwaliball.jpg" alt="Spotlight on an actor, from  the position of the spot"><a class="button" href="technical"><span class="fas fa-lightbulb"></span> Technical</a></div>
+                <div class="bigimage"><img class="background" src="img/1*2J4xTO7JYBYA3dcMwwGSlw.jpeg" alt="Gold pocketwatch"><a class="button" href="blog"><span class="fas fa-portrait"></span> Blog</a></div>
             </div>
         </main>
         {{ partial "footer.html" . }}
     </div>
   </body>
 </html>
-

layouts/partials/footer.html

@@ -1,5 +1,5 @@
 <footer>
-<a href="m&#97;ilto&#58;aj&#64;a&#37;&#55;2o%&#54;&#69;&#97;jo%&#54;E%&#54;5s&#46;c&#111;&#109;" rel="noopener" target="_blank"><span class="fas fa-envelope"></span></a>
-<a href="https://www.github.com/FreneticScribbler" rel="noopener" target="_blank"><span class="fab fa-github"></span></a>
-<a href="https://www.twitter.com/aronajones_" rel="noopener" target="_blank"><span class="fab fa-twitter"></span></a>
+<a href="m&#97;ilto&#58;aj&#64;a&#37;&#55;2o%&#54;&#69;&#97;jo%&#54;E%&#54;5s&#46;c&#111;&#109;" rel="noopener" target="_blank"><span class="fas fa-envelope"></span><span class="sr-only">My Email Address</span></a>
+<a href="https://www.github.com/FreneticScribbler" rel="noopener" target="_blank"><span class="fab fa-github"></span><span class="sr-only">My Github</span></a>
+<a href="https://www.twitter.com/aronajones_" rel="noopener" target="_blank"><span class="fab fa-twitter"></span><span class="sr-only">My Twitter</span></a>
 </footer>

layouts/partials/head.html

@@ -2,7 +2,8 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{ if and (.IsPage) (.Title) }}{{ .Title }} | {{ end }}{{ .Site.Title }}</title>
   <meta name="description" content="{{if .IsHome}}{{ $.Site.Title }}{{else}}{{.Description}}{{end}}" />
   <link rel="stylesheet" type="text/css" href="/css/screen.css">
-  <script defer src="/js/fontawesome.js"></script>
+  <script defer src="/js/all.min.js"></script>
 </head>

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "website",
+  "version": "1.0.0",
+  "description": "Arona Jones's Website",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.aronajones.com/arona/website"
+  },
+  "keywords": [
+    "website"
+  ],
+  "author": "FreneticScribbler",
+  "license": "ISC",
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.14.0",
+    "autoprefixer": "^9.8.5",
+    "gulp": "^4.0.2",
+    "gulp-csso": "^4.0.1",
+    "gulp-flatten": "^0.4.0",
+    "gulp-postcss": "^8.0.0",
+    "gulp-sass": "^4.1.0",
+    "gulp-terser": "^1.2.0",
+    "node-sass": "^4.14.1"
+  }
+}

src/sass/screen.scss

@@ -0,0 +1,250 @@
+$primaryColor: #00ADFF;
+
+*, *::before, *::after {
+    box-sizing: inherit;
+}
+
+/** Reset some basic elements */
+body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
+
+/** Set `margin-bottom` to maintain vertical rhythm */
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }
+
+/** `main` element */
+main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }
+
+/** Images */
+img { max-width: 100%; vertical-align: middle; }
+
+/** Figures */
+figure > img { display: block; }
+
+figcaption { font-size: 14px; }
+
+/** Lists */
+ul, ol { margin-left: 30px; }
+
+li > ul, li > ol { margin-bottom: 0; }
+
+/** Links */
+a { color: #2a7ae2; text-decoration: none; }
+
+a:visited { color: #1756a9; }
+
+a:hover { color: #111; text-decoration: underline; }
+
+/** Blockquotes */
+blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }
+
+blockquote > :last-child { margin-bottom: 0; }
+
+/** Code formatting */
+pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; }
+
+code { padding: 1px 5px; }
+
+pre { padding: 8px 12px; overflow-x: auto; }
+
+pre > code { border: 0; padding-right: 0; padding-left: 0; }
+
+/** Tables */
+table { margin-bottom: 30px; width: 100%; text-align: left; color: #3f3f3f; border-collapse: collapse; border: 1px solid #e8e8e8; }
+
+table tr:nth-child(even) { background-color: #f7f7f7; }
+
+table th, table td { padding: 10px 15px; }
+
+table th { background-color: #f0f0f0; border: 1px solid #dedede; border-bottom-color: #c9c9c9; }
+
+table td { border: 1px solid #e8e8e8; }
+
+html, body {
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    font-family: helvetica, arial;
+    font-size: 100%;
+    box-sizing: border-box;
+    background-color: #222831;
+    color: white;
+}
+header, footer {
+    background: #202226;
+    padding: 1rem;
+    text-align: center;
+}
+header > * {
+    padding-top: 0.5em;
+}
+header {
+  box-shadow: 0 0 25px 0 black;
+}
+footer {
+    color: white;
+}
+figcaption {
+  text-align: center;
+  color: #999;
+}
+footer > a {
+    font-size: x-large;
+    color: white;
+    padding: 0.5rem;
+}
+h1 {
+    color: $primaryColor;
+}
+img {
+  max-width: 100%;
+}
+p, figure {
+  margin: 15px 0;
+}
+h3 {
+  color: white;
+}
+.contained {
+    width: 70vw;
+    margin-left: auto;
+    margin-right: auto;
+}
+article {
+    margin: 0 auto;
+    max-width: 80ch !important;
+}
+.container {
+    min-height: 100%;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 100%;
+}
+.bigimage {
+  transform: skew(-10deg);
+  color: white;
+  padding: 2em;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+/*My kingdom for a 'backdrop-filter'!*/
+img.background {
+  object-fit: cover;
+  color: black;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: -1;
+  filter: blur(2px);
+  transition: .3s ease-in-out;
+}
+.bigimage:hover img {
+	filter: blur(0);
+}
+a.button {
+    /* Counteract skew of image */
+    transform: skew(10deg);
+    color: white;
+    touch-callout: none;
+    user-select: none;
+    display: inline-block;
+    border-radius: 0.5em;
+    position: relative;
+    cursor: pointer;
+    overflow: hidden;
+    padding: 0.8em;
+    background: rgba(32, 34, 38, 0.7);
+}
+.badge {
+    /* Center the content */
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+
+    /* Rounded border */
+    border-radius: 0.5em;
+
+    /* Spacing */
+    padding: 4px 8px;
+}
+.bg-green {
+    background: green;
+}
+.full-width {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+}
+nav {
+  display: flex;
+  /* Looks crap, but better than broken nav */
+  flex-wrap: wrap;
+  align-items: center;
+  width: 70%;
+}
+nav > * {
+  padding-left: 2em;
+  padding-right: 2em;
+  border-left: 2px solid black;
+  display: inline-block;
+  position: relative;
+  color: white !important;
+}
+nav :first-child {
+  padding-left: 0;
+  border-left: none;
+}
+nav > *::after {
+content: '';
+    position: absolute;
+    height: 2px;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    opacity: 0;
+    transform: translateY(3px);
+    background: $primaryColor;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+}
+nav a:hover {
+    color: $primaryColor;
+    text-decoration: none;
+}
+nav a:hover::after {
+opacity: 1;
+transform: translateY(0);
+}
+
+.borderFade:hover::after {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+
+@media only screen and (max-width: 800px) {
+    nav {
+        flex-direction: column;
+    }
+    nav > * {
+        margin-right: auto;
+        padding-bottom: 0.5em;
+    }
+    nav :first-child {
+        padding-left: 2em;
+        border-left: 2px solid black;
+    }
+    #homepage-container {
+        flex-wrap: wrap;
+    }
+    .bigimage {
+        max-height: 20vh;
+        transform: skew(0deg);
+    }
+    a.button {
+        transform: skew(0deg);
+    }
+}

static/css/screen.css

@@ -1,209 +1 @@
-*, *::before, *::after {
-    box-sizing: inherit;
-}
-
-/** Reset some basic elements */
-body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
-
-/** Set `margin-bottom` to maintain vertical rhythm */
-h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }
-
-/** `main` element */
-main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }
-
-/** Images */
-img { max-width: 100%; vertical-align: middle; }
-
-/** Figures */
-figure > img { display: block; }
-
-figcaption { font-size: 14px; }
-
-/** Lists */
-ul, ol { margin-left: 30px; }
-
-li > ul, li > ol { margin-bottom: 0; }
-
-/** Links */
-a { color: #2a7ae2; text-decoration: none; }
-
-a:visited { color: #1756a9; }
-
-a:hover { color: #111; text-decoration: underline; }
-
-/** Blockquotes */
-blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }
-
-blockquote > :last-child { margin-bottom: 0; }
-
-/** Code formatting */
-pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; }
-
-code { padding: 1px 5px; }
-
-pre { padding: 8px 12px; overflow-x: auto; }
-
-pre > code { border: 0; padding-right: 0; padding-left: 0; }
-
-/** Tables */
-table { margin-bottom: 30px; width: 100%; text-align: left; color: #3f3f3f; border-collapse: collapse; border: 1px solid #e8e8e8; }
-
-table tr:nth-child(even) { background-color: #f7f7f7; }
-
-table th, table td { padding: 10px 15px; }
-
-table th { background-color: #f0f0f0; border: 1px solid #dedede; border-bottom-color: #c9c9c9; }
-
-table td { border: 1px solid #e8e8e8; }
-
-html, body {
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-    font-family: helvetica, arial;
-    font-size: 100%;
-    box-sizing: border-box;
-}
-header, footer {
-    background: #202226;
-    padding: 1rem;
-    text-align: center;
-}
-header > * {
-    padding-top: 0.5em;
-}
-header {
-  box-shadow: 0 0 25px 0 black;
-}
-footer {
-    color: white;
-}
-figcaption {
-  text-align: center;
-  color: #999;
-}
-footer > a {
-    font-size: x-large;
-    color: white;
-    padding: 0.5rem;
-}
-h1 {
-    color: #00ADFF;
-}
-img {
-  max-width: 100%;
-}
-p, figure {
-  margin: 15px 0;
-}
-h3 {
-  color: white;
-}
-article, .contained {
-    width: 70vw;
-    margin-left: auto;
-    margin-right: auto;
-}
-.container {
-    min-height: 100%;
-    display: grid;
-    grid-template-rows: auto 1fr auto;
-    grid-template-columns: 100%;
-}
-.bigimage {
-  transform: skew(-10deg);
-  color: white;
-  padding: 2em;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-}
-/*My kingdom for a 'backdrop-filter'!*/
-img.background {
-  object-fit: cover;
-  color: black;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  z-index: -1;
-  -webkit-filter: blur(2px);
-  filter: blur(2px);
-  -webkit-transition: .3s ease-in-out;
-  transition: .3s ease-in-out;
-}
-.bigimage:hover img {
-    -webkit-filter: blur(0);
-	filter: blur(0);
-}
-a.button {
-    /* Counteract skew of image */
-    transform: skew(10deg);
-    color: white;
-    touch-callout: none;
-    user-select: none;
-    display: inline-block;
-    border-radius: 0.5em;
-    position: relative;
-    cursor: pointer;
-    overflow: hidden;
-    padding: 0.8em;
-    background: rgba(32, 34, 38, 0.7);
-}
-.badge {
-    /* Center the content */
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-
-    /* Rounded border */
-    border-radius: 0.5em;
-
-    /* Spacing */
-    padding: 4px 8px;
-}
-.bg-green {
-    background: green;
-}
-.full-width {
-  width: 100vw;
-  position: relative;
-  left: 50%;
-  right: 50%;
-  margin-left: -50vw;
-  margin-right: -50vw;
-}
-nav {
-  display: flex;
-  /* Looks crap, but better than broken nav */
-  flex-wrap: wrap;
-  align-items: center;
-  width: 70%;
-}
-nav > * {
-  padding-left: 2em;
-  padding-right: 2em;
-  border-left: 2px solid black;
-}
-nav :first-child {
-  padding-left: 0;
-  border-left: none;
-}
-nav a:hover {
-  color: white;
-}
-
-@media only screen and (max-width: 800px) {
-    nav {
-        flex-direction: column;
-    }
-    nav > * {
-        margin-right: auto;
-        padding-bottom: 0.5em;
-    }
-    nav :first-child {
-        padding-left: 2em;
-        border-left: 2px solid black;
-    }
-}
+*,::after,::before{box-sizing:inherit}body,dd,hr{margin:0;padding:0}blockquote,dl,figure,h1,h2,h3,h4,h5,h6,ol,p,ul{padding:0}blockquote,dl,h1,h2,h3,h4,h5,h6,ol,pre,ul{margin:0 0 15px}.highlight{margin-bottom:15px}figure>img,main{display:block}img{vertical-align:middle;max-width:100%}figcaption{font-size:14px;text-align:center;color:#999}ol,ul{margin-left:30px}li>ol,li>ul{margin-bottom:0}a{color:#2a7ae2;text-decoration:none}a:visited{color:#1756a9}a:hover{color:#111;text-decoration:underline}blockquote{color:#828282;border-left:4px solid #e8e8e8;padding-left:15px;font-size:18px;letter-spacing:-1px;font-style:italic}blockquote>:last-child{margin-bottom:0}code,pre,table{border:1px solid #e8e8e8}code,pre{font-size:15px;border-radius:3px;background-color:#eef}code{padding:1px 5px}pre{padding:8px 12px;overflow-x:auto}pre>code{border:0;padding-right:0;padding-left:0}table{margin-bottom:30px;width:100%;text-align:left;color:#3f3f3f;border-collapse:collapse}table tr:nth-child(even){background-color:#f7f7f7}table td,table th{padding:10px 15px}table th{background-color:#f0f0f0;border:1px solid #dedede;border-bottom-color:#c9c9c9}table td{border:1px solid #e8e8e8}body,html{width:100%;height:100%;overflow-x:hidden;font-family:helvetica,arial;font-size:100%;box-sizing:border-box;background-color:#222831}footer,header{background:#202226;padding:1rem;text-align:center}header>*{padding-top:.5em}header{box-shadow:0 0 25px 0 #000}body,footer,footer>a,h3,html{color:#fff}footer>a{font-size:x-large;padding:.5rem}h1{color:#00adff}figure,p{margin:15px 0}.contained{width:70vw;margin-left:auto;margin-right:auto}article{margin:0 auto;max-width:80ch!important}.container{min-height:100%;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:100%}.bigimage{transform:skew(-10deg);color:#fff;padding:2em;width:100%;height:100%;text-align:center}img.background{-o-object-fit:cover;object-fit:cover;color:#000;width:100%;height:100%;position:absolute;left:0;top:0;z-index:-1;-webkit-filter:blur(2px);filter:blur(2px);transition:.3s ease-in-out}.bigimage:hover img{-webkit-filter:blur(0);filter:blur(0)}a.button,nav>*{display:inline-block;position:relative}a.button{transform:skew(10deg);color:#fff;touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;overflow:hidden;padding:.8em;background:rgba(32,34,38,.7)}.badge,nav{align-items:center}.badge,a.button{border-radius:.5em}.badge{display:inline-flex;justify-content:center;padding:4px 8px}.bg-green{background:green}.full-width{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}nav{display:flex;flex-wrap:wrap;width:70%}nav>*{padding-left:2em;padding-right:2em;border-left:2px solid #000;color:#fff!important}nav :first-child{padding-left:0;border-left:none}nav>::after{content:'';position:absolute;height:2px;width:100%;left:0;bottom:0;opacity:0;transform:translateY(3px);background:#00adff;transition:opacity .2s ease,transform .2s ease}nav a:hover{color:#00adff;text-decoration:none}.borderFade:hover::after,nav a:hover::after{opacity:1;transform:translateY(0)}@media only screen and (max-width:800px){nav{flex-direction:column}nav>*{margin-right:auto;padding-bottom:.5em}nav :first-child{padding-left:2em;border-left:2px solid #000}#homepage-container{flex-wrap:wrap}.bigimage{max-height:20vh}.bigimage,a.button{transform:skew(0deg)}}