Iosevka/snapshot/index.styl

@import url(iosevka.css)
@import url(iosevka-slab.css)

.thin       { font-weight: 100 }
.extralight { font-weight: 200 }
.light      { font-weight: 300 }
.medium     { font-weight: 500 }
.bold       { font-weight: 700 }
.extrabold  { font-weight: 800 }
.heavy      { font-weight: 900 }
.italic     { font-style: italic }
.oblique    { font-style: oblique }
.slab { font-family: "Iosevka Slab", monospace }

html,body{
	margin: 0
	padding:0
}
body {
	font-family: "Iosevka"
	background: #008000
	padding-bottom: 60em
	font-size: 15px
}
pre, code { font-family: "Iosevka"; }

::-webkit-scrollbar {display: none;}

body > section {
	margin: 3em auto
	width: 900px
	background: white
}

/* hljs */
section.preview {
	text-align: center
	font-size: 80%
}
section.preview pre {
	display: inline-block
	text-align: left
	margin: 1.2rem 0
	line-height: 1.5
}
section.color-light {
	background-color: hsl(39, 6%, 95%)
	color: #333
}
.color-light .keyword, .color-light .class, .color-light .tag, .color-light .pseudo, .color-light .attr_selector, .color-light .constant, .color-light .xml .title {
  color: #446fbd
}
.color-light .comment {
  color: hsl(0, 0%, 62%)
}
.color-light .title, .color-light .attribute, .color-light .params, .color-light .built_in {
  color: #8757ad
}
.color-light .string, .color-light .pi, .color-light .language-less .keyword, .color-light .xml .value {
  color: #e88501
}
.color-light .number, .color-light .xml .attribute {
  color: #6d8600
}
.color-light .operator {
	color: #c33500
}
section.color-dark {
	background-color: hsl(39, 6%, 12%)
	color: #cfcfcf
}
.color-dark .keyword, .color-dark .class, .color-dark .tag, .color-dark .pseudo, .color-dark .attr_selector, .color-dark .constant, .color-dark .xml .title {
	color: #6c9ef8
}
.color-dark .comment {
	color: #767676
}
.color-dark .title, .color-dark .attribute, .color-dark .params, .color-dark .built_in {
	color: #b77fdb
}
.color-dark .string, .color-dark .pi, .color-dark .language-less .keyword, .color-dark .xml .value {
	color: #D89333
}
.color-dark .number, .color-dark .xml .attribute {
	color: #85a300
}
.color-dark .operator {
	color: #c34564
}

section#matrix
	height: 480px
	position: relative
	> div
		position: absolute
		font-size: 90px
		left: 50%
		margin-left: -3.75em
		top: 50%
		margin-top: -1.95em
		> row
			display: block
			text-align: center
			line-height: 0.8em
			> span
				font-size: 0.4em
				padding: 0 0.5em
		&.slab
			margin-left: -3.25em
			margin-top: -1.44em

section#matrix > div > row > span {
	font-size: 0.4em
	padding: 0 0.5em
}

section#opentype
	width: 36em
	padding: 0 8em
	> h2 { display: none }
	> div.hr
		font-size: 80%
		text-transform: uppercase
		letter-spacing: 0.2em
		margin: 3rem auto
		text-align: center
		display: block
		&:before, &:after
			content: ''
			display: inline-block
			border-bottom: 1px solid #ddd
			width: 4em
			margin: 0 1em
			vertical-align: 0.3em

	> ol
		list-style none
		margin 0
		padding 0
		font-size 1em
		width 36em
		> li
			margin 0
			padding 0
			position relative
			height 4.5em
			border-top 1px solid #eee
			margin-top 0.4em
			padding-top 0.4em
			&:first-child
				border-top none
				margin-top 0
			> .tag
				display block
				position absolute
				top calc(0.8em - 0.2em - 1px)
				left 0
				font-size 0.8em
				width 2em
				border 1px solid rgba(0, 0, 0, 0.25)
				padding 0.2em
				padding-bottom 0.1em
				text-align center
				border-radius 0.2em
			> .description
				display block
				position absolute
				top 0.8em
				right 0
				font-style italic
				font-size 0.8em
				color rgba(0, 0, 0, 0.5)
			> .sample
				display block
				margin-top 1.6em
				&.italic { margin-top: 0.25em }
		&.narrow
			display flex
			justify-content center
			flex-wrap wrap
			width: 35em;
			margin-left: ((35.5em - 35em) / 2);
			> li
				margin 0 0.5em 0.5em
				border none
				width 4em
				flex none
				> .tag
					width auto
					left 50%
					margin-left calc(-1.2em - 1px)
				> .sample
					display inline-block
					font-size 2em
					margin-top 0.9em
					width 1em
					text-align center
		b
			font-weight normal
			color #c33500

#family
	background: white
	font-size: 0.9em
	.group { display: flex }
	.group a
		display: block
		padding: 0.5rem
		flex: 1
		text-shadow: none
		color: black
		text-decoration: none
		&.italic, &.oblique { flex: 1.3 }
		&.slab { flex: 1.2 }
		&.slab.italic, &.slab.oblique { flex: 1.7 }

#downloadoptions
	display: flex
	justify-content: center
	> div
		flex: none
		width: 12em
		border: 3px solid #ddd
		border-radius: 1em
		margin: 0.5em
		> h3
			margin: 0
			padding: 1rem 0 1rem 0
			text-align: center
			font-weight: bold
			font-size: 1em
		> ul
			display: flex
			list-style: none
			margin: 0
			padding: 0
			justify-content: center
			> li
				margin: 0
				padding: 0
				height: 3.5em
				position: relative
				padding: 0 0.5em 1em
				> div
					font-size: 0.8em
					height: 2em
					width: 2em
					line-height: 2em
					text-align: center
					padding: 0.5em
					border: 1px solid #ddd
					border-radius: 0.5em
				> h4
					position: absolute
					left: 0
					right: 0
					bottom: 1.25em
					margin: 0
					font-size: 0.6em
					text-align: center
					font-weight: normal
	.missing
		color: rgba(0, 0, 0, 0.25)
	span
		outline: 1px solid rgba(0, 0, 0, 0.2)
	.fwm
		padding-left: 0.25em
		padding-right: 0.25em
		margin-right: 0.25em
		margin-left: -0.125em
	.fwl
		padding-right: 0.5em

#ligations > table
	border-spacing 0
	border-top 2px solid black
	border-bottom 2px solid black
	margin 1em 0
	pre
		margin 0
	th, td
		padding: 0.4em 1em
		text-align: justify
		white-space: nowrap
	tr.first th
		border-bottom: 1px solid black
	s, .nolig
		text-decoration: none
		opacity: 0.25
	.nolig
		font-feature-settings: "calt" 0;