clacks/assets/css/clacks.scss

$sans-serif: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
$serif: "Times New Roman", serif;
$tint-color: #4b43e0;
// $link-color: blue;
$link-color: $tint-color;
$hr-color: darkgray;

body {
	font-family: $sans-serif;
	// always show scrollbar so effective page width doesn't change
	overflow-y: scroll;
}

.container {
	max-width: 720px;
	margin: 0 auto;
}

a,
button.btn-link {
	background: none;
	border: none;
	color: $link-color;
	text-decoration: none;
	padding: 0;

	&:hover {
		cursor: pointer;
		text-decoration: underline;
	}
}

input, button:not(.btn-link) {
	box-sizing: border-box;
	height: 1.75rem;
}

button[type=submit]:not(.btn-link) {
	padding: 0 2rem;
	font-family: $sans-serif;
	background-color: $tint-color;
	border: 1px solid darken($tint-color, 20%);
	color: white;

	&:hover {
		cursor: pointer;
		background-color: darken($tint-color, 10%);
	}
}

hr {
	border: 1px solid $hr-color;
	margin: 0.75rem 0;
}

input:focus, textarea:focus {
	outline: none;
	border: 2px solid $tint-color;
}

h1, h2, h3 {
	margin: 0.5rem 0;
}

header {
	nav {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
		ul {
			display: flex;
			padding: 0;

			li {
				display: inline;
				list-style: none;

				&:not(:last-child) {
					margin-right: 1rem;
				}
			}
		}
	}
}

ul.status-list {
	padding: 0;
	margin: 0;
	
	li {
		list-style: none;
		margin-bottom: 1rem;
	}
}

.pagination-link {
	text-align: center;
}

.status {
	padding: 0.5rem;
	border: 1px solid #ddd;
	background-color: #f2f2f2;

	.status-meta {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		
		.status-author-nickname,
		.status-author-username,
		.status-meta-right {
			display: inline;
			margin: 0;
			margin-right: 1rem;
			font-size: 1rem;
		}

		.status-author-username {
			font-weight: normal;
		}

		.status-meta-right {
			flex-grow: 1;
			text-align: right;
		}
	}

	.status-content {
		font-family: $serif;
		font-size: 1.2rem;
		margin: 1rem 0;

		a {
			text-decoration: underline;
		}
	}
}

.compose-status {
	textarea {
		display: block;
		min-width: 100%;
		max-width: 100%;
		min-height: 4rem;
		margin-bottom: 0.75rem;
		padding: 0.5rem;

		// we want 100% width to include the border
		box-sizing: border-box;
	}
}