fakulta-online/sass/style.scss

@font-face {
	font-family: moderat;
	src: url(/moderat.otf);
}

$header-width: 1560px;
$main-width: 1024px;

:focus { outline: none; }

body {
	margin: 0;
	color: #fff;
	font-size: 1.15em;
	font-family: moderat, Arial, Helvetica, sans-serif;
	line-height: 1.6;
	height: 100vh;
	background: url(/body-bg.svg) #d22d40;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;

	a {
		color: #fff;
		text-decoration: none;
	}
}

nav {
	position: fixed;
	top: 0;
	right: 0;
	width: 0;
	height: 100vh;
	overflow: hidden;
	text-align: right;
	opacity: 0;
	transition: opacity .3s;

	&.visible {
		width: 100%;
		opacity: 1;
	}

	ul { list-style-type: none; }
	li { margin: 2em 0; }

	div.background {
		position: absolute;
		top: 0;
		right: 0;
		width: 30vw;
		height: 100vh;
		background-color: #b52637;
		z-index: -1;
	}

	div.list {
		max-width: $header-width;
		padding: 2em;
		text-align: right;
		margin: 0 auto;

		ul { padding: 0; }
	}

	header { justify-content: flex-end; }
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 4em;
	max-width: $header-width;
	margin: 0 auto;
	padding: 2em;

	a#logo {
		display: block;
		width: 250px;
		height: 100%;
		background-image: url(/logo.svg);
		background-repeat: no-repeat;
		background-position: left center;
		background-size: contain;
	}

	h1 {
		font-size: 1.35em;
		font-weight: normal;
		color: #fff;
	}

	.menu {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 100%;
		width: 250px;
		font-size: 1.2em;

		img {
			margin-left: 1em;
			width: 1.5em;
		}
	}
}

main {
	max-width: $main-width;
	padding: 2em;
	margin: 0 auto;

	h2, h3, h4, h5, h6 {
		line-height: 1.2;
	}
	h5, h6 {
		margin-top: 2.75em;
	}
	h2 {
		font-size: 2.3em;
	}
	h3 {
		font-size: 1.8em;
		margin-top: 3em;
	}

	a {
		color: #fff;
		text-decoration: underline;
	}

	img {
		max-width: 100%;
	}

	section {

		img.logo {
			max-height: 5em;
			max-width: 100%;
			display: block;
			margin: 2em auto 4em auto;
		}

		&.meta {
			display: flex;
			align-items: center;

			h2 { margin: .9em 0; }

			img {
				float: right;
				max-width: 48%;
				margin-left: 2em;
				border-radius: 50%;
			}
		}

		&.filters {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;

			button {
				color: #fff;
				background-color: #d22d40;
				border: 2px solid #fff;
				border-radius: 1em;
				font-weight: bold;
				padding: .8em 1em;
				margin: .5em;

				&:hover, &.active {
					color: #d22d40;
					background-color: #fff;
				}
			}
		}

		&.software {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.program {
				width: 48%;
				box-sizing: border-box;
				margin-top: 4em;
				display: none; // for filtering

				&.show { display: block; } // when filtered

				img {
					max-height: 3em;
					max-width: 50%;
				}

				div.stats {
					display: flex;

					ul:nth-child(2) {
						margin-left: 2em;
					}
				}
			}
		}

		&.articles {
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 1em;
			row-gap: 1em;

			a {
				padding: .5em 1em;
				border: 2px solid #fff;
				border-radius: 1em;
				text-decoration: none;
				text-align: center;

				&:hover {
					color: #d22d40;
					background-color: #fff;
				}
			}
		}

		div.stats {
			margin: 3em 0;

			ul.positive, ul.negative {
				padding-left: 0;
				list-style-type: none;

				li::before{
					display: inline-block;
					width: 1em;
					height: 1em;
					content: ' ';
					background-size: 100% 100%;
					margin-right: .85em;
					position: relative;
					top: .15em;
				}
				&.positive li::before {
					background-image: url('/plus.svg');
				}
				&.negative li::before {
					background-image: url('/minus.svg');
				}
			}
		}

		div.coordinator {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 8em;

			&>div {
				display: flex;
				align-items: center;

				img {
					width: 10em;
					margin: 0 2em;
					border-radius: 50%;
				}

				ul {
					padding: 0;
					list-style-type: none;
				}
			}
		}

		div.video {
			min-height: 15em;
			margin: 3em 0;

			iframe {
				float: left;
				margin: 0 2em 0 0;
				width: 50%;
				min-height: inherit;
			}
		}

		div.metadata {
			text-align: right;
			margin-bottom: 3em;
			font-weight: bold;
		}
	}
}

body.index {
	background-image: url(/index-bg.png), url(/body-index-bg.svg);
	background-position: center center, top center;
	background-size: 30em auto, cover;

	main {
		max-width: $header-width;
		display: flex;
		align-items: center;
		justify-content: space-between;

		h2 {
			font-size: 2.5em;
			margin-top: 2.75em;
		}

		section, aside { max-width: 35%; }
		section{ text-shadow: 0px 3px 8px rgba(0, 0, 0, .35); }
		aside {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			width: 25%;
			margin-top: 6em;

			a {
				text-align: center;
				text-decoration: none;
				border: 2px solid #fff;
				border-radius: .8em;
				margin-bottom: 1.5em;
				padding: .6em 1.5em;
				color: #fff;

				&:hover {
					background: #fff;
					color: #b52637;
				}
			}
		}
	}
}

div.twocolumn {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2em;

	img { width: 100%; }
}

@import "mobile";