Add style for navbar, improve blue/green theme switch (7bf6676b) · Commits · Fachschaft / Portal

css/main.css

+77 −23

Changes for css/main.css: 77 added lines, 23 removed lines.
Original line number	Diff line number	Diff line
		@import url("/lib/fontawesome-free-6.5.2-web/css/all.min.css");

		:root {
		--shadow-width: 2px;
		.blue {
		--primary: #144a8b;
		--primary-light: #387bd0;
		}

		.blue ::selection {
		background-color: #387bd0;
		color: white;
		.green {
		--primary: #135a3a;
		--primary-light: #2aac6d;
		}

		:root {
		--shadow-width: 2px;
		}

		.green ::selection {
		background-color: #2aac6d;
		::selection {
		background-color: var(--primary-light);
		color: white;
		}

		@@ -20,31 +25,84 @@ body {

		display: grid;

		align-content: center;
		grid-template-rows: max-content 1fr 4em;
		align-items: center;
		justify-content: center;

		font-family: "Roboto", sans-serif;

		background-color: var(--primary-light);
		background-size: cover;
		}

		code {
		font-family: "Inconsolata", monospace;
		}

		body.blue {
		background-color: #387bd0;
		background-color: var(--primary-light);
		background-image: url("/lib/nautilus/nautilus_blue.svg");
		}

		body.green {
		background-color: #2aac6d;
		background-image: url("/lib/nautilus/nautilus_green.svg");
		}

		header {
		min-width: 60vw;
		justify-self: center;
		}

		header,
		main {
		margin-top: 4em;
		}

		code {
		font-family: "Inconsolata", monospace;
		}

		nav {
		display: grid;
		grid-template-columns: 1fr max-content;
		}

		nav section.left {
		padding-left: 1em;
		justify-self: start;
		}

		nav section.right {
		padding-right: 1em;
		justify-self: end;
		}

		nav ul {
		padding: 0;
		margin: 0;
		}

		nav ul li {
		display: inline-block;
		}

		nav ul li a {
		--border-strength: 0.3em;

		display: block;
		padding: 1em 1.5em;
		padding-bottom: calc(1em - var(--border-strength));
		border-bottom: var(--border-strength) solid #00000000;
		text-decoration: none;
		}

		nav ul li a.current {
		border-color: var(--primary);
		font-weight: bold;
		}

		nav ul li:hover a {
		border-color: var(--primary-light);
		}

		.tools {
		display: grid;
		margin: 4em 0;

		grid-template-columns: repeat(6, min-content);
		column-gap: 4em;
		@@ -82,6 +140,10 @@ article h1 {
		font-size: 200%;
		}

		a {
		color: var(--primary);
		}

		a.btn {
		height: 10em;
		width: 10em;
		@@ -99,14 +161,6 @@ a.btn {
		text-decoration: none;
		}

		.blue a {
		color: #144a8b;
		}

		.green a {
		color: #135a3a;
		}

		a.btn > i {
		font-size: 200%;
		}