gotosocial/web/source/css/pages/index.css

.index-page {
	.activitypub-logo-wrapper {
		display: flex;
		flex-direction: column;
		max-width: fit-content;
		gap: 0.5rem;

		.activitypub-logo {
			background: $fg;
			box-shadow: $boxshadow;
			border-radius: $br;	
			max-width: 100%;
		}
	}

	.apps {
		align-self: start;

		.applist {
			margin: 0;
			padding: 0;

			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 0.5rem;
			align-content: start;

			.applist-entry {
				display: grid;
				grid-template-columns: 25% 1fr;
				grid-template-areas: "logo text";
				gap: 1.5rem;
				padding: 0.5rem;

				.applist-logo {
					grid-area: logo;
					align-self: center;
					justify-self: center;
					width: 100%;
					object-fit: contain;
					flex: 1 1 auto;
				}

				.applist-logo.redraw {
					fill: $fg;
					stroke: $fg;
				}

				.applist-text {
					grid-area: text;
				
					a {
						font-weight: bold;
					}
				}
			}
		}
	}

	@media screen and (max-width: 600px) {
		.apps .applist {
			grid-template-columns: 1fr;
		}
	}
}