Veronicodes Dark Mode

With a secret in it!

by Admiral Potato

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta property="og:title" content="Veronicodes">
	<meta property="og:locale" content="en_US">
	<meta name="description" content="Veronica Eulenberg: fixing bugs one semicolon at a time.">
	<meta property="og:description" content="Veronica Eulenberg: fixing bugs one semicolon at a time.">
	<link rel="canonical" href="https://veronicodes.com/">
	<meta property="og:url" content="https://veronicodes.com/">
	<meta property="og:site_name" content="Veronicodes">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="author" content="Veronica Eulenberg">
	<meta name="keywords"
		content="CSS, HTML, JavaScript, jQuery, ReactJS, Redux, Redux-Observable, Jest, Puppeteer, Node, NPM, Babel, Webpack, Axios, Express, WordPress, WooCommerce, All Import Pro, Avada WordPress theme, Beaver Builder, Bootstrap, Bulma, Hugo, PHP, GIT, GitHub, GitLab, MySQL, PHPMyAdmin, GoDaddy, BlueHost, HostGator, Bash, Python">
	<link rel="icon" href="https://veronicodes.com/logo.svg" sizes="any" type="image/svg+xml">
	<title>Veronicodes</title>
	<style media="screen">
	</style>
</head>

<body>
	<div class="container">
		<div class="header">
			<h1 class="title big">Veronicodes <span class="logo"></span></h1>
			<h2 class="subtitle small">Fixing bugs<br> one semicolon at a time;</h2>
		</div>
		<hr>

		<h2 class="medium">About</h2>
		<p class="small">(Looking for work)</p>
		<p class="small">Veronica Eulenberg is based in Silicon Slopes of Utah. Her interests include programming,
			improv, and foosball.</p>
		<p class="small">She likes to pair program and do code review; it helps her develop as a developer.</p>
		<p>
			<a href="https://github.com/HappyViki">Projects @GitHub</a>
			<br>
			<a
			href="https://www.linkedin.com/in/veronica-eulenberg/">Contact @LinkedIn</a>
			|
			<button id="dark-mode-toggle">Dark Mode</button>
		</p>


		<hr>

		<h2...

CSS

/* the new part */

body, a {
  transition-property: all;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}
body {
  color: #000000;
  background-color: #ffffff;
}
body.dark-mode {
  color: #ffffff;
  background-color: #000000;
}
a,
a:link,
a:visited {
  color: #0000FF;
}
.dark-mode a,
.dark-mode a:link,
.dark-mode a:visited {
  color: #00FFFF;
}

/* end new part */

/* shhhh this is a secret goat */
body::before {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 512px;
  display: block;
  z-index: -1;
  font-family: monospace;
  font-size: 10;
  white-space: pre-wrap;
  content: '               %                       %%.\A              .%%%%%%             %%%%%%%%\A                %%%%%%%        ,%%%%%%%,\A                 %%%%%%%((((((#%%%%%%%\A              ((((((((((##&&%#((((((((((\A       ,((((((#@@@@@@@@@@@@@@@@@@@@@@@@#((((((\A      (((@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@((((((\A       ((((((@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%((\A      ((((@@@@@@@@@@@@@@@@@...&@@@@@@@@@@@@@@@@@@(((\A    (((@@@@@@@@@@@@@@@@@@@.....%@@@@@@@@@(((((((((*\A  (((@@@@@@@@@@@@@@@@@@@@@@...@@@@@@@@@@@(((((((((((*\A  ((&@@@......@@@@@@@@@@@@@@@@@@@@@@@@@@@@((@@@@@@@#((((((\A (((@@@@......(@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@((((,   (((.\A (((@@@@@@..&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@(((((((@(((\A  (((@@@...@....@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@((&@@&((,\A   (((@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&((((((\A    (((&@@@@@@@@@@@@@@@@@@@@@@@@@#%@@@@@@@@@@@@@@@@@@@@@@@@@@@(((\A      ((((@@@@@@@@@@@@@@@#((((((((@@@@@@@@@@@@@@@@@@@@@@@@@@@@(((\A        (((@@@@@@@@@@@(((#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&((\A         ((@@@@@@@@@(((((@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&((\A        ,((@@@@@(((((  ((@@@@@@@@@@@@@@@@@@@@#(((@@@@@((@@@@@@@((\A          (((((((      (((@@@@@@&((((@@@@@@@@((((@@@@@(((@@@@@@((\A                       (((@@@@@@#(((((@@@@@@@((((@@@@@(((@@@@@@((\A                      ...

JavaScript

var toggleDarkModeButton = document.getElementById('dark-mode-toggle');
function toggleDarkMode() {
  document.body.classList.toggle('dark-mode')
}
toggleDarkModeButton.addEventListener(
'click',
toggleDarkMode
);