abdullahtarawneh.com/assets/scss/content/code.scss

#code {
	overflow: hidden;
	p {
		line-height: 1.4;
		font-size: 1.2em;
	}
	.title {
		font-size: 2em;
		font-weight: 700;
		&:before {
			font-size: 1em;
			font-weight: 700;
			color: #ddd;
			position: absolute;
			top: -1em;
			left: 0em;
			z-index: -1;
		}
		a {
			position: absolute;
			top: -1em;
			color: #ddd;
			display: block;
			width: 100%;
		}
		position: relative;
		margin-top: 2rem;
		margin-bottom: 2rem;
	}
	.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;
		}
	}
	#gitea {
		margin-top: 4em;
		svg {
			width: 2em;
			height: 2em;
		}
		.image {
			background-color: #609926;
			color: white;
		}
	}
	#github {
		margin-top: 2em;
		svg {
			width: 2em;
			height: 2em;
		}
		.image {
			background: #1B1F23;
			color: white
		}
	}
	#liberapay {
		margin-top: 2em;
		svg {
			width: 2em;
			height: 2em;
		}
		.image {
			background: #F6C915;
			color: white;
		}
	}
	#patreon {
		margin-top: 2em;
		svg {
			width: 2em;
			height: 2em;
			margin-left: 0.25em;
		}
		.image {
			background: #f96753;
			color: white;
		}
	}
	#paypal {
		margin-top: 2em;
		svg {
			width: 2em;
			height: 2em;
		}
		.image {
			background: #002F85;
			color: white;
		}
	}
	#cashapp {
		margin-top: 2em;
		svg {
			width: 2em;
			height: 2em;
		}
		.image {
			background: #00D72E;
			color: white;
		}
	}
	#projects {
		.title:before {content: '#projects';}
		.container {

		}
		.project-list {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
			gap: 3em;
			margin-top: 4em;
		}
		.project {
			text-decoration: none;
			@include box-shadow;
			border-radius: 0.25em;
			overflow: hidden;
			display: grid;
			grid-template-areas: "cover" "title" "summary" "footer";
			grid-template-rows: auto auto auto 1fr;
			&:link {
				color: var(--link-color);
			}
			&:visited {
				color: var(--link-visited);
			}
			&:focus {
				background: unset;
				padding: unset;
				border-radius: 0.25em;
				@include focus-outline;
			}
			
			&:hover {
				transform: scale(1.05);
				@include box-shadow-heavy;
			}
			
			&:active {
			
			}
			&__image {
				width: 100%;
				height: auto;
				grid-area: cover;
			}
			&__title {
				font-weight: 700;
				grid-area: title;
				font-size: 1.5em;
				margin: 1rem 1rem 0.5rem 1rem;
				color: initial;
			}
			&__summary {
				line-height: 1.4;
				grid-area: summary;
				max-width: 70ch;
				margin: 0 1rem;
				color: initial;
			}
			&__date, &__hint {
				align-self: end;
				justify-self: end;
				padding: 1rem 1rem;
				text-transform: uppercase;
				font-weight: 500;
			}
		}
		@media (min-width: 53em) {
			.codecertbot-namecheap {
				grid-column: span 3;
				display: grid;
				grid-template-areas: "cover title" "cover summary" "cover date";
				grid-template-columns: 20em 1fr;
				grid-template-rows: auto auto auto;
				height: max-content;
			}
		}
	}
	#contributions {
		.title:before {content: '#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;
				margin-top: -0.375em;
				path {
					fill: #9A6BEA;
				}
			}
			&__title {
				font-weight: 700;
				grid-area: title;
				text-decoration: underline;
				text-decoration-thickness: 0.125em;
				text-decoration-offset: 0.125em;
				&:hover {
					text-decoration-thickness: 0.25em;
					text-decoration-offset: 0.25em;
				}
				font-size: 1.2em;
			}
			&__summary {
				line-height: 1.4;
				grid-area: summary;
				max-width: 70ch;
			}
		}
		.commit {
			display: grid;
			grid-template-areas: "icon title" ". summary";
			grid-template-columns: 3em 1fr;
			@media (min-width: 30em) {
				grid-template-areas: "icon title . summary";
				grid-template-columns: 3em auto 0.5rem 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;
				font-size: 1.2em;
				text-decoration-thickness: 0.125em;
				text-decoration-offset: 0.125em;
				&:hover {
					text-decoration-thickness: 0.25em;
					text-decoration-offset: 0.25em;
				}
			}
			&__summary {
				line-height: 1.4;
				grid-area: summary;
				max-width: 70ch;
			}
		}
	}
	#support {
		.title:before {content: '#support';}
		.container > p {
			line-height: 1.4;
			font-size: 1.2em;
		}
	}
	b {font-weight: 700;}
}