Blog design redo - Manual Selectors

blog-design-redo-manual-selectors.markdown

Blog design redo - Manual Selectors

A Pen by ShadowKyogre on CodePen.

License.

index.jade

header#site-header
	ul.crumbtrail.no-bullets
		li.crumb.home: a(href="")
			img(src="https://avatars3.githubusercontent.com/u/673620?v=3&s=460")
			h1.page-title
				| Here
		li.crumb.trail: a(href="")
			| amma crumbs
		li.crumb.trail: a(href="")
			| amma crumbs
main#content.central-panel(role="main")
	article.article-content
		header: h2 Here
		section
			p
				| Hamburger.
				| Hamburger is the ultimate content.
				| Hamburger also has spoilers. 
				strong Here is some strong flavor. 
				em Have some emphasized flavor too. 
				strong: em How about both emphasized and strong?
			p
				| Hamburger.
				| Hamburger is the ultimate content.
				| Hamburger also has spoilers. 
				strong Here is some strong flavor. 
				em Have some emphasized flavor too. 
				strong: em How about both emphasized and strong? 
				| Hamburger.
				| Hamburger is the ultimate content.
				| Hamburger also has spoilers. 
				strong Here is some strong flavor. 
				em Have some emphasized flavor too. 
				strong: em How about both emphasized and strong? 
				| Hamburger.
				| Hamburger is the ultimate content.
				| Hamburger also has spoilers. 
				strong Here is some strong flavor. 
				em Have some emphasized flavor too. 
				strong: em How about both emphasized and strong?
			p
				| Hamburger.
				| Hamburger is the ultimate content.
				| Hamburger also has spoilers. 
				strong Here is some strong flavor. 
				em Have some emphasized flavor too. 
				strong: em How about both emphasized and strong? 
				| Hamburger.
				| Hamburger is the ultimate content.
				| Hamburger also has spoilers. 
				strong Here is some strong flavor. 
				em Have some emphasized flavor too. 
				strong: em How about both emphasized and strong? 
				| Hamburger.
				| Hamburger is the ultimate content.
				| Hamburger also has spoilers. 
				strong Here is some strong flavor. 
				em Have some emphasized flavor too. 
				strong: em How about both emphasized and strong?
	footer.content-footer
			input#hide-comments(type="checkbox").hide-after
			label(for="hide-comments").hide-after
			div.comment-draft
				h3 Write a comment
				form(action="")
					label(for=name) Name
					input#name
					label(for=email) Email
					input#email
					textarea#comment
					button Submit
			ul.no-bullets.comments
				each val in [1, 2, 3, 4]
					li.comment
						div.metadata
							a(href="")="Name"
							|  - 
							a(href="").permalink="2016-08-13 12:00:00"
						div.body="fake comment bodies"
aside#content-info.sidebar-1.sidebar
	h2
		| Series title
	div.series-desc
		| A description of what series of articles is
	ul.no-bullets
		each val in [1, 2, 3, 4]
			li: a(href="")=["series", val].join(' ')
nav#site-sections.sidebar-2.sidebar
	h2 Site navigation
	ul.no-bullets
		li: a(href="").
			Bugfix forks
		li: a(href="").
			Feature forks
		li: a(href="").
			Upstream contribs
	input#search.full-width
footer#site-footer
	span#copyright(style="border: none;")
		| ShadowKyogre © 2016
	a(href="https://github.com/ShadowKyogre").
		Github
	a(href="https:/twitter.com/ShadowKyogre").
		Twitter
	a(href="mailto:dummy@email.com").
		Email

style.postcss

@use postcss-nested;
@use postcss-simple-vars;
@use cssnext;

/* spacing */
$spacing: 1em;
$crumb-size: 2rem;

/* colors */
$border-color: #151522;
$main-bg: #221144;
$main-fg: #dddddd;
$button-fg: #EEDBA0;
$button-bg: #281A44;
$button-border: #EEDBA0;
$input-widget-fg: #dddddd;
$input-widget-bg: #414155;
$bars-bg: #332255;
$crumb-bg: #333355;
$sidebar-bg: #333355;
$content-bg: #2D3475;
$strong-fg: #ffcc77;
$emphasis-fg: #ff6677;
$link-fg: color(hotpink saturation(- 60%));
$link-visit-fg: color($link-fg saturation(+ 30%) hue(-45deg));
$link-visit-border: $link-visit-fg;
$link-hover-bg: rgba(1, 1, 1, 0.2);
$link-border: hotpink;

$read-shadow-size: 2px;
$read-shadow-bg: rgba(0,0,0,0.4);

$gradient-shine: dodgerblue;

body {
	background: $main-bg;
	color: $main-fg;
}

h1, h2, h3, h4, h5, h6 {
	background: radial-gradient(
		50% 12.5% at center bottom,
		$main-fg,
		$gradient-shine 20%,
		transparent 90%
	);
	
	text-align: center;
}

/* * {
	text-shadow:
		$read-shadow-size 0 0 $read-shadow-bg,
		-$read-shadow-size 0 0 $read-shadow-bg,
		0 $read-shadow-size 0 $read-shadow-bg,
		0 -$read-shadow-size 0 $read-shadow-bg,
		-calc($read-shadow-size/2) -calc($read-shadow-size/2) $read-shadow-bg,
		calc($read-shadow-size/2) -calc($read-shadow-size/2) $read-shadow-bg,
		-calc($read-shadow-size/2) calc($read-shadow-size/2) $read-shadow-bg;
} */

strong {
	color: $strong-fg;
}

em {
	color: $emphasis-fg;
}

strong > em, em > strong {
	color: color($strong-fg blend($emphasis-fg 75%));
}

a {
	color: $link-fg;
	display: inline-block;
	
	&:hover {
		background: $link-hover-bg;
	}
	
	&:visited {
		color: $link-visit-fg;
	}
}

.crumbtrail, footer {
	background: $bars-bg;
}

.crumbtrail .crumb {
	background: $crumb-bg;
}

.central-panel .article-content {
	background: $content-bg;
}

.sidebar {
	background: linear-gradient(
		to bottom,
		$sidebar-bg, $sidebar-bg calc($spacing / 2),
		color($sidebar-bg blend($gradient-shine 40%)) calc($spacing * 0.9),
		color($sidebar-bg blend($gradient-shine 80%)) $spacing,
		color($sidebar-bg blend($main-bg 50%)) calc($spacing * 1.1),
		$sidebar-bg
	);
	background-color: $sidebar-bg;
	box-shadow: 0 0
		8px 10px
		color($sidebar-bg blend($main-bg 50%) alpha(- 40%))
		inset;
}

/* FORMAT */


input, textarea {
	color: $input-widget-fg;
	background-color: $input-widget-bg;
	border: 1px solid $border-color;
	padding: calc($spacing / 4);
	box-shadow: 0 0 5px 3px color($border-color blend($bars-bg 50%)) inset;
}

button, input[type=submit] {
	color: $button-fg;
	background: $button-bg;
	border: 1px solid $button-border;
	padding: calc($spacing / 2);
	&:hover {
		background: color($button-bg lightness(+ 2%));
	}
}

.full-width {
	display: block;
	width: 100%;
}

body {
	display: flex;
	flex-flow: row wrap;
	
	& > * {
		flex: 1 100%;
	}
}

.crumbtrail, footer {
	padding: $spacing;
	border: 1px solid $border-color;
}

.crumbtrail {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	margin: 0;
	
	& .crumb {
		flex: 0 1 auto;
		margin: calc($spacing / 8);
		padding: calc($spacing / 4);
		
		font-size: $crumb-size;
		font-weight: bold;
		
		& a:link {
			text-decoration: none;
		}
		
		&.home a > * {
			display: inline-block;
			vertical-align: middle;
		}
	}
}

h1 {
	font-size: $crumb-size;
}

.central-panel > * {
	border: 1px solid $border-color;
}

.central-panel .article-content {
	padding: $spacing;
}

.comment-draft  {
	& form {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: flex-start;
		
		& input {
			width: 75%;
		}
		
		& label {
			text-align: right;
			font-weight: bold;
			width: 20%;
		}
		
		& textarea, & button {
			flex: 1 100%;
		}
		
		& > * {
			margin: calc($spacing / 2);
		}
	}
	
	& label:after {
		content:':';
		margin-right: 0.5em;
	}
}

.no-bullets {
	list-style: none;
	padding-left: 0;
}

.sidebar {
	& ul {
		margin-bottom: 0;
		& li a {
			display: block;
			border: 1px solid $link-border;
			padding: calc($spacing / 4);
			margin-bottom: calc($spacing / 4);
			&:visited {
				border: 1px solid $link-visit-border;
			}
		}
	}
}

body > footer {
	display: flex;
	flex-flow: row wrap;
	
	& > * {
		flex: 1 auto;
		text-align: center;
		border: 1px solid;
		padding: calc($spacing / 4);
	}
}

.sidebar {
	padding: $spacing;
	border: 1px solid $border-color;
	
	& > a:last-child {
		margin-bottom: 0;
	}
}

.crumbtrail { order: 0; }
.sidebar-2 { order: 3; }
.central-panel { order: 1; }
.sidebar-1 { order: 2; }
footer { order: 9999; }

@media all and (max-width: 52em) {
	body > footer > * {
		flex: 1 100%;
	}
	.crumbtrail .crumb {
		flex: 1 100%;
	}
	body {
		padding: 0;
	}
}

@media all and (min-width: 52em) {
	/* We tell both sidebars to share a row */
	.sidebar { flex: 1 auto; }
}

@media all and (max-width: 64em) {
	#copyright {
		flex: 1 100%;
		padding-bottom: $spacing;
	}
}

@media all and (min-width: 64em) {
	body {
		padding: $spacing;
	}
	.sidebar {
		margin: $spacing;
		max-width: 15%;
	}
	.crumbtrail { order: 0; }
	.sidebar-2 {
		order: 3;
		margin-right: 0;
	}
	.central-panel { order: 2; }
	.sidebar-1 {
		order: 1;
		margin-left: 0;
	}
	footer { order: 9999; }
	.central-panel {
		flex: 6 1 0;
		margin: $spacing 0;
	}
	.content-footer {
		margin-top: $spacing ;
	}
}

.content-footer {
	border-top: 1px solid $border-color;
}

ul.comments  {
	margin-bottom: 0;
}

ul.comments li.comment {
	margin: calc($spacing / 2) 0;
	padding: calc($spacing / 2);
	border: 1px solid $border-color;
	
	&:last-child {
		margin-bottom: 0;
	}

	& .metadata {
		padding-bottom: calc($spacing / 2);
		border-bottom: 1px solid $border-color;
	}
	
	& .body {
		padding-top: calc($spacing / 2);
	}
}


.hide-after {
	input& {
		display: none;
	}
	label&:before {
		display: block;
		width: 100%;
		text-align: center;
		font-weight: bold;
		content: 'Hide comments';
	}
	input&:checked + label& {
		& ~ * {
			display: none;
		}
		&:before {
			content: 'Show comments';
		}
	}
}