Start rewriting with Phlexite

assets/site.css

@@ -172,4 +172,143 @@ i.cite {
     margin: 10px;
     border-top: 1px solid;
     opacity: 0.8;
-}
+}
+
+/* <editor-fold desc="component: NavLinks"> */
+nav.nav-links {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+.nav-links a {
+	display: block;
+	color: var(--color-theme-1);
+	text-decoration: none;
+	border-bottom: 1px solid transparent;
+	transition-property: border-color;
+	transition-duration: .5s;
+}
+
+.nav-links a:hover {
+	border-color: var(--color-theme-1);
+}
+/* </editor-fold> */
+
+/* <editor-fold desc="component: SectionLink"> */
+
+a.section-link {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	padding: 10px;
+	margin-top: 10px;
+	margin-bottom: 10px;
+	text-decoration: none !important;
+	text-transform: uppercase;
+	color: inherit;
+	--bg-hover: black;
+	background-image: linear-gradient(135deg,
+	var(--bg-hover) 0%,
+	var(--bg-hover) 50%,
+	transparent 50%,
+	transparent 100%
+	);
+	background-size: 250%;
+	background-position: 90% 90%;
+	border: 2px solid;
+	transition-property: color, border-color, background-position, background-color, background-image;
+	transition-duration: .75s;
+}
+a.section-link span, a.section-link svg {
+	display: block;
+}
+a.section-link:hover {
+	color: white;
+	background-position: 0% 0%;
+	border-color: black;
+}
+a.section-link:active {
+	--bg-hover: var(--color-theme-1);
+	border-color: var(--color-theme-1);
+	color: var(--color-theme-1);
+	background-position: -75% -75%;
+}
+
+/* </editor-fold> */
+
+/* <editor-fold desc="page: Index"> */
+@keyframes fade {
+	0% {
+		opacity: 0;
+		pointer-events: none;
+	}
+	100% {
+		opacity: 1;
+		pointer-events: all;
+	}
+}
+.fade {
+	opacity: 0;
+	pointer-events: none;
+	animation: fade .5s linear 0s 1 forwards normal;
+}
+.fade2 {
+	animation-delay: 2s;
+}
+.fade3 {
+	animation-delay: 4s;
+}
+.fade4 {
+	animation-delay: 4.25s;
+}
+.fade5 {
+	animation-delay: 4.5s;
+}
+.fade.no-delay {
+	animation-delay: 0s !important;
+}
+
+h1 {
+	width: 100%;
+}
+
+.welcome {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	width: 100%;
+}
+
+.welcome img {
+	display: block;
+	opacity: 0.7;
+}
+
+.tagline {
+	align-self: center;
+	font-style: italic;
+	margin-top: -10px;
+}
+
+.under-construction {
+	padding: 10px;
+	margin-top: 10px;
+	margin-bottom: 10px;
+	text-transform: uppercase;
+	color: inherit;
+	border: 2px solid;
+	opacity: 0.9;
+	text-align: center;
+	background: repeating-linear-gradient(
+			45deg,
+			rgba(0, 0, 0, 0),
+			rgba(0, 0, 0, 0) 10px,
+			rgba(0, 0, 0, 0.1) 10px,
+			rgba(0, 0, 0, 0.1) 20px
+	);
+}
+/* </editor-fold> */