style.scss

---
---

@import "variable";

* {
	font-size: 16px;
}

body {
	margin: 0;
	padding: 0;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

header {
	position: fixed;
	z-index: 100;
	top: 0;
	width: 90%;
	padding: .5rem 5% 0;
	background-color: #fff;
	border-bottom: 1px solid $main-700;
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);

	h1 {
		display: inline-block;
		margin: 0;

		a {
			display: block;
			padding: 0.75rem;
			color: $main-color;
			text-shadow: 0 1px $main-100;
			text-decoration: none;
			font-size: 1.5rem;
		}
	}

	nav {
		display: inline-block;
		float: right;
		margin: 0 1rem;

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

			li {
				display: inline-block;
				margin: 0 1rem;

				a {
					display: block;
					padding: 1rem .5rem 1.5rem;
					color: $main-color;
					font-size: 1rem;
					font-weight: 600;
					text-decoration: none;

					&:hover {
						box-shadow: 0px -3px 0px $main-color inset;
						transition-duration: .2s;
					}
				}
			}
		}
	}
}

footer {
	padding: 1rem 4rem;
	height: 42px;
	background-color: #444444;
	color: #ccc;
	text-align: center;

	.license {
		float: right;
		opacity: 0.5;
	}
	div {
		padding-top: 0.75rem;

		a {
			float: left;
			display: block;
			color: #ccc;
			text-decoration: none;
		}
	}
}

main {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-top: 4.25rem;

	> section {
		flex: 1;
	}

	.slogan {
		background: #2A2929 url('/images/slogan_bg.png') top center no-repeat;

		div {
			background-color: transparentize($main-color, 0.075);
			padding: 5rem 0 3rem;

			text-style {
				text-shadow: 0 1px 1px #777;
				letter-spacing: .25rem;
				text-align: center;
			}

			h2 {
				@extend text-style;
				position: relative;
				top: -2rem;
				color: #fff;
				font-size: 3rem;
				font-weight: 500;
			}
		}
	}

	section {
		padding: 3rem 0;
		text-align: center;

		h2, h3 {
			display: inline-block;
			font-size: 1.75rem;
			color: $main-color;
		}

		&:nth-child(odd)
		{
			background-color: #F8F5F0;

			h2 {
				color: #555555;
			}
		}

		&:nth-child(even)
		{
			background-color: #fff;
		}
	}
}

#news .content {
	padding: 1.5rem;

	ul {
		background-color: #fff;
		margin-top: 2rem;
		padding: 1rem 2rem 1rem;
		width: 50%;
		display: inline-block;
		text-align: left;
		list-style-type: none;

		li {
			line-height: 3rem;
			border-bottom: 1px solid #ccc;

			&:last-child {
				text-align: center;

				a {
					display: block;
					color: #ccc;
					text-decoration: none;
				}
			}
		}
	}
}

#tutorial .content {
	ul {
		padding: 0;
		list-style-type: none;

		li {
			display: inline-block;

			a {
				display: block;
				margin: 0 2rem;
				box-shadow: 7px 7px 0 #454545;

				img {
					vertical-align: bottom;
				}
			}
		}
	}
}

#participation, #community .content {
	text-align: center;
	
	ul {
		padding: 0 0 2rem;
		margin: 0 auto;
		list-style-type: none;

		&.distro li {
			display: inline-block;
			margin: .5rem;
			min-width: 12.5%;

			a {
				display: block;
				padding: 1rem;
				text-decoration: none;
				
				div	strong {
					font-size: 1.5rem;
				}
			}
		}

		&.community, &.other {
			width: 50%;
			text-align: left;

			li {
				border-bottom: 1px solid #ccc;
				margin: 0 1rem;

				&:first-child {
					border-top: 1px solid #ccc;
				}
				

				a {
					display: block;
					padding: 1rem;
					font-size: 1.25rem;
					line-height: 1.5rem;
					text-decoration: none;

					.title {
						color: darken($main-color, 5%);
						font-weight: 600;
					}

					.description {
						color: #454545;

					}
				}
			}
		}
	}
}

#about {
	ul {
		display: inline-block;
		text-align: left;
	}
	a {
		color: $main-color;
	}
}