webpage/src/style.sass

$bg: #000000
$fg: #ffffaa //#e6e6e6
//$muted: #ff7f00 // #9aa9aa // #86b1c3 // #aca59a
$accent: #ffbf00 // #98cacd // #b9d0d0 // #c8dbe3 // #86b1c3 // #dbb7a2 // #c8ac9b // #ea9619 // #7ea9d5 //#5eead4
$card: rgba(12,12,12,0.8)
$border: #7f0000 // #2a0055 // #6b7c7d // #556f79 // #83756c

*
	margin: 0
	padding: 0

// HACK: hide marquee on browsers which didn't support it (mostly css1 ones)
#silly-animated-text
	display: none

@-moz-document url-prefix()
	#silly-animated-text
		display: block
// anything new
html:first-child
	#silly-animated-text
		display: block
@media (-webkit-min-device-pixel-ratio: 0)
	#silly-animated-text
		display: block

@media print
	#silly-animated-text
		display: none
// END OF HACK

body
	background-image: url("assets/bg.gif")
	background-repeat: repeat
	background-color: $bg
	font-family: ui-monospace, Consolas, monospace
	line-height: 1.6
	font-size: 12px
	padding: 0

.header
	margin-bottom: 32px
	text-align: center
	h1
		font-size: 24px
		color: $fg

.spoiler-content
	display: none

.spoiler-link
	&:focus, &:target
		& + .spoiler-content
			display: block
		&:before
			content: "[-] "
	&:before
		content: "[+] "
		color: $accent

.spoiler:hover > .spoiler-link
	&:before
		content: "[-] "
	& + .spoiler-content
		display: block

.section
	background-image: url("/assets/chesstransparent.png")
	background-repeat: repeat
	border: 1px solid $border
	padding: 16px
	margin-bottom: 16px
	width: 688px
	text-align: left
	color: $fg
	h2, h2 a
		font-size: 14px
		font-weight: 500
		margin-bottom: 8px

.spoiler-section > .spoiler > .spoiler-link
	font-size: 14px

ul
	margin-top: 8px
	margin-left: 12px
	ul
		margin-top: 0
	li
		margin-bottom: 4px
		list-style-type: circle
a
	color: $accent
	text-decoration: none
a:hover
	text-decoration: underline
.userbar
	width: 720px
	border: $border 1px solid
	border-bottom-width: 0px

.navbar
	table
		width: 100%
		padding: 8px
	width: 720px
	height: 38px
	margin: 0 0 24px 0
	white-space: nowrap
	border: 1px solid $border
	background-image: url("assets/userbar.png")

.navbar, .basement
	font-size: 12px
	//background-image: url("/assets/chesstransparent.png")
	background-repeat: repeat
	.container
		padding-top: 0
		padding-bottom: 0

.container
	margin: auto
	width: 720px

.basement
	background-image: url("/assets/chesstransparent.png")
	border-top: 1px solid $border
	color: $fg
	padding: 8px
	text-align: center

.navbar-right
	text-align: right

.codeblock
	background-color: #000000
	border: 1px solid $border
	padding: 3px
	margin-top: 12px
	p
		color: #cc0000
	pre
		border-top: 1px solid $border
		padding: 3px

marquee span
	margin-left: 360px
	margin-right: 360px
	font-size: 14px
	&:first-child
		margin-left: 0
	&:last-child
		margin-right: 0