~nature/galaxy.moe

969f914936eb5935b7fe1f59dc992487cc950a6e — LordNature 4 years ago 93dc5fd
Removed Sass in favor of CSS

Makefile:
	Removed CSS building for Sass, one less dependency.
main.sass -> main.css:
	- Rewrote Sass to CSS.
	- Removed old animation support (Web Standards updated since 2017).
	- Removed useless variables & header definitions.
	- Removed scrollbar to not highjack the users's & for accessibility.
	- Prefer the user's font.
3 files changed, 86 insertions(+), 179 deletions(-)

M Makefile
A assets/main.css
D scss/main.sass
M Makefile => Makefile +4 -7
@@ 1,18 1,15 @@
.PHONY: all assets css watch clean
.PHONY: all assets watch clean

all: assets css

css:
	mkdir -p build
	sassc -Iscss scss/main.sass build/assets/main.css
all: assets

assets:
	mkdir -p build
	cp -r assets build

# Requires inotify-tools
watch:
	while inotifywait \
		-e close_write scss/; \
		-e close_write assets/; \
		do make; done

clean:

A assets/main.css => assets/main.css +82 -0
@@ 0,0 1,82 @@
/*! (C) 2020 LordNature - see LICENSE */
:root {
	--bg-color: #222;
	--footer-color: #111;
	--main-color: rgb(39, 153, 200);
}

body {
	background-color: var(--bg-color);
	color: var(--main-color);
	font-family: monospace;
	font-size: 1rem;
	line-height: 1.6;
}

main {
	margin: 2em auto;
	max-width: 800px;
	padding: 0 10px;
}

.terminal em {
	color: #79bdd8;
	font-style: normal;
	font-weight: 700;
}

.terminal p {
	margin: 0;
	padding: 0;
}

.terminal pre {
	font: 4px/2px monospace;
	margin: 10px;
	text-align: center;
}

.terminal .cursor {
	background: var(--bg-color);
	display: inline-block;
	margin-left: 6px;
	animation: blink 1s ease 0s infinite alternate;
}

hr {
	border-color: var(--main-color);
	border-style: inset;
	border-width: 1px;
	display: block;
	margin: 0.5em auto;
}

a {
	color: #79bdd8;
	text-decoration: none;
}

a:hover {
	color: #359ab6;
}

footer {
	background-color: var(--footer-color);
	bottom: 0;
	left: 0;
	position: fixed;
	line-height: 40px;
	height: 40px;
	width: 100%;
}

footer .copyright {
	color: rgba(255,255,255,.5);
	font-size: .8rem;
	padding: 0 20px;
}

@keyframes blink {
	from {background: var(--bg-color);}
	to {background: #12C4FF;}
}

D scss/main.sass => scss/main.sass +0 -172
@@ 1,172 0,0 @@
/*! Copyright 2019 - Galaxy CSS v2 */

// Color pallet
$bg: #222
$bg-alt: #111
$gal01: rgb(39, 153, 200) // lt. blue
$gal02: rgb(108, 221, 118) // Lt. Green
$gal80: rgb(252, 252, 252) // Very lt. grey

@mixin scrollbar($size, $primary, $secondary: lighten($primary, 5%))
	$primary: adjust-color($primary, $blue: 7)
	$secondary: adjust-color($secondary, $blue: 7)

	::-webkit-scrollbar
		width:  $size
		height: $size

	::-webkit-scrollbar-thumb
		background: $primary

	::-webkit-scrollbar-track
		background: $secondary

	body
		scrollbar-face-color: $primary
		scrollbar-track-color: $secondary

	*
		scrollbar-color: $primary $secondary

@include scrollbar(.5em, $bg)

body
	background-color: $bg
	font-family: "Courier New", Courier, monospace
	font-size: 1rem
	color: $gal01
	line-height: 1.6

h1, h2, h3
	line-height: 1.2
	color: $gal01

main
	margin: 2em auto
	max-width: 800px
	padding: 0 10px

.terminal
	em
		color: #79bdd8
		font-style: normal
		font-weight: 700
	p
		padding: 0
		margin: 0
	pre
		font: 4px/2px monospace
		text-align: center
	.cursor
		display: inline-block
		background: $bg
		margin-left: 6px
		-webkit-animation: blink 2s linear 0s infinite
		-moz-animation: blink 2s linear 0s infinite
		-ms-animation: blink 2s linear 0s infinite
		-o-animation: blink 2s linear 0s infinite

hr
	display: block
	-webkit-margin-before: 0.5em
	-webkit-margin-after: 0.5em
	-webkit-margin-start: auto
	-webkit-margin-end: auto
	border-style: inset
	border-width: 1px
	border-color: $gal01

pre
	margin: 10px

a
	color: #79bdd8
	text-decoration: none

a:hover
	color: darken(#79bdd8, 20%)
	text-decoration: none

footer
	position: fixed
	left: 0
	bottom: 0
	width: 100%
	height: 40px
	line-height: 40px
	background-color: $bg-alt
	.copyright
		color: rgba(255,255,255,.5)
		font-size: .8rem
		padding: 0 20px

// Blink Attribute for Termianl
@-webkit-keyframes blink
	0%
		background: #12C4FF
	
	47%
		background: #12C4FF
	
	50%
		background: $bg
	
	97%
		background: $bg
	
	100%
		background: #12C4FF
	


@-moz-keyframes blink
	0%
		background: #12C4FF
	
	47%
		background: #12C4FF
	
	50%
		background: $bg
	
	97%
		background: $bg
	
	100%
		background: #12C4FF
	


@-ms-keyframes blink
	0%
		background: #12C4FF
	
	47%
		background: #12C4FF
	
	50%
		background: $bg
	
	97%
		background: $bg
	
	100%
		background: #12C4FF
	


@-o-keyframes blink
	0%
		background: #12C4FF
	
	47%
		background: #12C4FF
	
	50%
		background: $bg
	
	97%
		background: $bg
	
	100%
		background: #12C4FF
\ No newline at end of file