theme-switch.js demo

Lorem ipsum dolor sit amet. Nonummy. Be excellent to each other.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blog

Site partially static (2024 in WWW)
Bumping version tags with git (2023 in WWW)
CSS Wishlist (2023 in WWW)
Ideas: Cascading Behavior Sheets, a declarative alternative to JS (2022 in WWW)
Simple MySQL backup script (2020 in WWW)
Forcing HTTPS and progressive enhancement (2019 in WWW)
Website Snow Script (2018 in WWW)

Quotes

Be excellent to each other

- Abraham Lincoln
& Ted "Theodore" Logan,
Bill & Ted's Excellent Adventure

Code

HTML

<div class="switchField field">
	<span class="fieldWidget">
		<input class="fieldControl" id="f-switch" name="switch" type="checkbox" />
		<i></i>
	</span>
	<span class="fieldLabel"><label for="f-switch">Switch me</label></span>
</div>

CSS

*{
	box-sizing: border-box;
}
.box{
	border-bottom: 3px dotted black;
	padding: 1em;
}
.boxes{
	margin-bottom: -3px;
}
.boxesWrap{
	overflow: hidden;
}
@media screen and (min-width: 38em){
	.box{
		border-right: 3px dotted black;
	}
	.boxes{
		display: grid;
		flex-wrap: wrap;
		grid-template-columns: repeat(2, 1fr);
		 margin-right: -3px;
	}
}
@media screen and (min-width: 48em){
	.boxes{
		grid-template-columns: repeat(3, 1fr);
	}
}
@media screen and (min-width: 60em){
	.boxes{
		grid-template-columns: repeat(4, 1fr);
	}
}

Shell

grep -E '(fatal error|Fatal|Critical|internal redir|PHP Parse|Stack trace)' /var/log/{apache2,httpd}/*error.log 2> /dev/null