css-ing to death of the writer

I hate css.
2023-08-14 17:14:46 +02:00
parent 6f6178b066
commit 3cc52e37b2
9 changed files with 245 additions and 52 deletions
--- a/src/app.scss
+++ b/src/app.scss
@@ -0,0 +1,119 @@
+html,
+body {
+	height: 100%;
+	background-color: var(--background);
+}
+
+body {
+	height: auto;
+	min-height: 100%;
+	background-image: var(--background-image);
+	background-size: cover;
+	background-position: center;
+	color: var(--text);
+	transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+
+	a {
+		color: var(--link);
+		&:hover {
+			color: var(--link-hover);
+		}
+	}
+
+	.title {
+		color: var(--text-title);
+	}
+
+	.subtitle {
+		color: var(--text-subtitle);
+	}
+}
+
+h1 {
+	font-size: 2rem;
+}
+
+h2 {
+	font-size: 1.7rem;
+	margin-top: 2rem;
+	margin-bottom: 1rem;
+
+	.fas,
+	.fab,
+	.far {
+		margin-right: 10px;
+	}
+
+	span {
+		font-weight: bold;
+		color: var(--highlight-secondary);
+	}
+}
+
+header {
+	color: var(--text-header);
+
+	.dashboard-title {
+		padding-left: 16px;
+	}
+
+	.first-line {
+		.container {
+			display: flex;
+			flex-flow: row wrap;
+			align-items: center;
+		}
+
+		min-height: 100px;
+		background-color: var(--highlight-primary);
+
+		h1 {
+			margin-top: -12px;
+			font-size: 2rem;
+		}
+		.headline {
+			font-size: 0.9rem;
+			height: min-content;
+		}
+
+		.container {
+			min-height: 80px;
+			padding: 10px 0;
+		}
+		.logo {
+			i {
+				vertical-align: top;
+				padding: 8px 15px;
+				font-size: 48px;
+			}
+
+			img {
+				max-height: 70px;
+				max-width: 70px;
+			}
+		}
+	}
+
+	.navbar {
+		background-color: var(--highlight-secondary);
+
+		a {
+			color: var(--text-header);
+			padding: 8px 12px;
+
+			&:hover,
+			&:focus {
+				color: var(--text-header);
+				background-color: var(--highlight-hover);
+			}
+		}
+
+		.navbar-menu {
+			background-color: inherit;
+		}
+	}
+
+	.navbar-end {
+		text-align: right;
+	}
+}