abdullahtarawneh.com/assets/scss/code/index.scss

#code {
	.page-header {
		
	}
	.page-title {
		margin-bottom: 1em;
	}
	.title {
		font-size: 2em;
		font-weight: 700;
		margin-bottom: 1em;
	}
	.explainer {
		text-decoration: none;
		color: inherit;
		display: flex;
		align-items: center;
		gap: 1em;
		margin: 0 auto;
		.image {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 4em;
			height: 4em;
			flex-shrink: 0;
			border-radius: 100em;
		}
		i {
			font-size: 2em;
		}
		p {
			line-height: 1.4;
			font-size: 1em;
		}
	}
	#gitea {
		margin-top: 4em;
		i {margin-left: 0em; margin-top: 0.0625em}
		.image {
			background-color: #609926;
			color: white;
		}
	}
	#github {
		margin-top: 2em;
		.image {
			background: black;
			color: white
		}
	}
	#liberapay {
		margin-top: 2em;
		.image {
			background: #F6C915;
			color: white;
		}
	}
	#patreon {
		margin-top: 2em;
		i {margin-left: 0.125em;}
		.image {
			background: #F23F4A;
			color: white;
		}
	}
	#paypal {
		margin-top: 2em;
		.image {
			background: #002F85;
			color: white;
		}
	}
	#cashapp {
		margin-top: 2em;
		.image {
			background: #00D72E;
			color: white;
		}
	}
	#projects {
		.container {

		}
		.project-list {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
			gap: 3em;
			margin-top: 4em;
		}
		.project {

			&__link {
				display: contents;
			}
			&__image {
				width: 100%;
				height: auto;
			}
			&__title {
				font-weight: 700;
				grid-area: title;
				text-decoration: underline;
				font-size: 1.5em;
				margin: 1.5em 0 0.5em;
			}
			&__summary {
				line-height: 1.4;
				grid-area: summary;
				max-width: 70ch;
				margin-bottom: 0.5em;
			}
			&__date {
				display: block;
				margin-bottom: 1em;
			}

		}
		@media (min-width: 35em) and (max-width: 847px) {
			.codemastomods, .codecertbot-namecheap {
				grid-column: span 2;
				display: grid;
				grid-template-areas: "cover title" "cover summary" "cover date";
				grid-template-columns: 1fr 38ch;
				grid-template-rows: auto auto 1fr;
				height: max-content;
				align-self: start;
				.project__image {
					grid-area: cover;
				}
				.project__title {
					margin: 0;
					margin-left: 1rem;
					margin-bottom: 0.5em;
				}
				.project__summary {
					margin-left: 1rem;
				}
				.project__date {
					margin-left: 1rem;
				}
			}
		}
		@media (min-width: 53em) {
			.codecertbot-namecheap {
				grid-column: span 3;
			}
		}
	}
	#contributions {
		.container {

		}
		.contribution-list {
			display: flex;
			flex-flow: column;
			gap: 2em;
			margin-top: 3em;
		}
		.pr {
			display: grid;
			grid-template-areas: "icon title" "icon summary";
			grid-template-columns: 3em 1fr;
			&__link {
				text-decoration: none;
				display: contents;
			}
			&__icon {
				grid-area: icon;
				width: 2em;
				height: 2em;
				path {
					fill: #9A6BEA;
				}
			}
			&__title {
				font-weight: 700;
				grid-area: title;
				text-decoration: underline;
			}
			&__summary {
				line-height: 1.4;
				grid-area: summary;
				max-width: 70ch;
			}
		}
		.commit {
			display: grid;
			grid-template-areas: "icon title . summary";
			grid-template-columns: 3em auto 0.5em 1fr;
			align-items: center;
			&__link {
				display: contents;
			}
			&__icon {
				grid-area: icon;
				width: 2em;
				height: 2em;
				margin-top: 0.325em;
				path {
					fill: #8B949E;
				}
			}
			&__title {
				font-weight: 700;
				grid-area: title;
				text-decoration: underline;
			}
			&__summary {
				line-height: 1.4;
				grid-area: summary;
				max-width: 70ch;
			}
		}
	}
	#support {
		.container > p {
			line-height: 1.4;
			font-size: 1.2em;
		}
	}
	b {font-weight: 700;}
}