@import 'lib/settings'

.mod-navigation
	.navball
		background: #555
		box-shadow: inset 0 .1em .8em #000, inset 0 1px 0 #000, 0 1px 0 #fff
		max-width: 20vw
		max-height: 20vw
		border-radius: 50%
		position: relative
		margin: 0 auto
		&::after
			content: ''
			display: block
			position: absolute
			width: 1em
			height: 1em
			top: 50%
			left: 50%
			transform: translate(-50%, -50%)
			border-radius: 50%
			border: 3px solid #f00
	.heading
		position: absolute
		bottom: -1px
		left: 50%
		transform: translate(-50%, 0)
		background: #d4d3d1 url('/img/noise.png')
		padding: ($quarter-gutter / 2) 0 0 0
		width: 5em
		text-align: center
		border-top-left-radius: 2em
		border-top-right-radius: 2em
		box-shadow: 0 -1px 0 rgba(#fff, 1)

@import 'lib/settings'

.mod-navigation
	display: flex
	flex-flow: column nowrap
	justify-content: center
	.navball
		background: #555
		box-shadow: inset 0 .1em .8em #000, inset 0 1px 0 #000, 0 1px 0 #fff
		min-width: 10em
		min-height: 10em
		max-width: 20vw
		max-height: 20vw
		border-radius: 50%
		position: relative
		margin: 0 auto
		&::after
			content: ''
			display: block
			position: absolute
			width: 1em
			height: 1em
			top: 50%
			left: 50%
			transform: translate(-50%, -50%)
			border-radius: 50%
			border: 3px solid #f00
	.heading
		position: absolute
		bottom: -1px
		left: 50%
		transform: translate(-50%, 0)
		background: #d4d3d1 url('/img/noise.png')
		padding: ($quarter-gutter / 2) 0 0 0
		width: 5em
		text-align: center
		border-top-left-radius: 2em
		border-top-right-radius: 2em
		box-shadow: 0 -1px 0 rgba(#fff, 1)

Update navball dimensions and alignment
Update navball dimensions and alignment
