pixelfed-design-demos/assets/scss/main.scss

body {margin: 0; font-family: Inter;}
a {text-decoration: none; color: unset}
.container {
	padding: 0 1em;
	margin: 0 auto;
	max-width: 80em;}
.section {padding: 2em 0;}
@media (min-width: 40em) {
	.container {
		padding: 0 2em;
	}
}
p {line-height: 1.4;}
.site-title {
	display: flex; align-items: center;
	img {width: 4em; height: 4em}
	h1 {
		margin: 0;
		margin-left: 0.25em;
		font-size: 1.5em}
}
.site-header .container {
	display: flex;
	justify-content: space-between;}
.site-nav, .site-nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	}
.site-nav a {height: 3em; width: 3em}
.site-nav a {margin-left: 1em}
.site-nav a:first-child {margin-left: 0}
.site-nav a.primary {background: steelblue; color: white}
.site-nav i {
	font-size: 1.5em;
}
.site-nav {
	padding: 0 1em;
}
.site-header {
	background: black;
	color: white;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}
body {margin-top: 4em;
	min-height: calc(100vh - 4em);
	display: flex;
	flex-flow: column;
}
main {flex-grow: 1;}
@media (max-width: 40em) {
	.site-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: black;
		color: white;
		padding: 0;
		i {
			font-size: 1.5em;
		}
	}
	.site-header {
		h1 {font-size: 1.5em;}
		img {height: 3em; width: 3em;}
	}
	body {
		margin-bottom: 3em;
		margin-top: 3em;
		min-height: calc(100vh - 3em - 3em)}
}




.site-footer {
	background: #ddd;
	padding: 1em 0;
}
.site-footer .links {
	list-style: none;
	padding: 0;
	display: flex;
	flex-flow: column;
	flex-basis: 100%;
	padding-bottom: 1em;
}
.site-footer .container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.site-footer .credit {
	display: flex;
	align-items: center;
}
.site-footer .version {
	display: flex;
	margin: 0;
}



.hero h1 {font-size: clamp(2em, 10vw, 5em);margin: 0;}
.entry .button {
	display: inline-block;
	padding: 1em;
	border: 1px solid #ddd;
	box-shadow: 2px 2px 6px #ddd;
	border-radius: 4px;
}
.login.button {
	background: green;
	color: white;
}
.signup.button {
	background: steelblue;
	color: white;
}
.pwreset.button {
	background: salmon;
	color: white;
}
.entry .container {
	display: flex;
	flex-flow: column;
	gap: 0.5em;
	.button {
		max-width: 10em;
	}
}




.features {
	display: grid;
	gap: 2em;
	grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
	@media (max-width: 22em) {
		display: flex;
		flex-flow: column;
	}
}
.feature {}



.index header > .container {
	display: grid;
	grid-template-areas: "hero info" "entry info";
	grid-template-columns: 1fr auto;
	grid-template-rows: auto 1fr;
	.nodeinfo {
		grid-area: info;
		display: flex;
		flex-flow: column;
		justify-content: center;
	}
	.hero {grid-area: hero}
	.entry {
		grid-area: entry;
		align-self: end;
	}
	@media (max-width: 52.5em) {
		display: unset;
		.nodeinfo {padding: unset;}
	}
	@media (min-width: 52.5em) {
		.container {
			padding: 0;
		}
		.nodeinfo {
			padding: 2em;
			background: #eee;
		}
		.entry {
			padding: 0;
		}
	}
}
.nodeinfo .account {
	display: inline-grid;
	grid-template-areas: "pic name" "pic url";
	grid-template-columns: 4em 1fr;
	grid-template-rows: 1fr 1fr;
	.displayname {grid-area: name; align-self: end; margin: 0 2em 0 1em}
	.username {grid-area: url; margin: 0 2em 0 1em;}
	img {grid-area: pic; width: 100%; height: 100%; background: #333;}
	background: #eee;
	border-radius: 100em;
	img {border-radius: 100em;}
	width: 18em;
}




form.login {
	display: flex;
	flex-flow: column;
	max-width: 40ch;
	label {
		font-size: 1.5em;
		font-weight: 700;
		margin-bottom: 1em;
	}
	input {
		font-size: 1.4em;
		padding: 0.25em;
		margin-bottom: 2em;
	}
	.username {

	}
	.password {

	}
	.login {
		padding: 1em;
		background: rgb(37, 182, 37);
		color: white;
	}
}





#home {
	background: #eee;
	display: flex;
	flex-flow: column;
}
.post {
	background: white;
	max-width: 600px;
	.post-header {
		padding: 1em;
		.icon {
			width: 3em;
		}
		.username {
			font-weight: 700;
		}
		.domain {
			opacity: 0.5;
		}
	}
	.post-image {
		width: 100%;
		object-fit: contain;
	}
	.post-body {
		.author {
			padding: 1em;
			display: flex;
			align-items: center;
			.avatar {
				width: 3em;
				border-radius: 100em;
				margin-right: 1em;
			}
			.name {
				font-weight: 700;
			}
		}
		.description {
			padding: 0 1em;
			p {
			}
		}
	}
	.post-comment {
		border-top: 1px solid #ddd;
		padding: 1em;
		display: flex;
		flex-flow: column;
		.author {
			display: flex;
			align-items: center;
			.avatar {
				width: 3em;
				background: pink;
				border-radius: 100em;
				margin-right: 1em;
			}
			.name {
				font-weight: 700;
				margin-right: 1em;
			}
		}

		.comment {
			
		}
	}
	.post-actions {
		padding: 1em;
		display: flex;
		justify-content: space-between;
		button {
			background: none;
			border: none;
		}
		.primary {

		}
		.secondary {

		}
		.comment {
			display: flex;
			align-items: center;
			@media (max-width: 25em) {
				.hint {display: none;}
			}
			i {
				margin-left: 0.5em;
			}
		}
	}
}