Pure HTML/CSS BASH logo (WIP)

dabblet.css

/**
 * Pure HTML/CSS BASH logo (WIP)
 */
@import url('-https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap');

html {
	transform: scale(0.5)
}

body {
	align-items: center;
	display: flex;
	font-family: 'Roboto Mono', monospace;
	justify-content: center;
	width: 1200px;
}

.bash-logo {
	--color: #293137;
/	--color: #0F03;
	--text-shadow:
		 1px  1px 2px var(--color),
		-1px -1px 2px var(--color),
		 1px -1px 2px var(--color),
		-1px  1px 2px var(--color),
		 1px  1px 2px var(--color)
	;
	background-image: url(-https://bashlogo.com/img/logo/jpg/full_colored_dark.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 506px;
	position: relative;
	width: 1168px;
	overflow: visible;
}

.bash-logo h1 {
	text-shadow: var(--text-shadow);
	color: var(--color);
	font-size:275px;
	left: 476px;
	letter-spacing: 10px;
	line-height: 0;
	position: absolute;
	top: 64px;
}

.bash-logo small {
	display: block;
	font-size: 40px;
	left: 20px;
	letter-spacing: 6.75px;
	position: relative;
	text-transform: uppercase;
	top: 156px;
	white-space: nowrap;
	--word-spacing: 10px;
}

.bash-logo p {
	line-height: 0;
}

.bash-logo p:before {
	color: #FFF9;
	content: "\2B22";
	display: block;
	font-size: 575px;
	position: absolute;
	top: 220px;
	left: -30px;
	display: block;
	text-shadow:
		 2px  2px 5px var(--color),
		-2px -2px 5px var(--color),  
		 2px -2px 5px var(--color),
		-2px  2px 5px var(--color),
		 2px  2px 5px var(--color)
	;
}

/* ================================================================================= */
.bash-logo -p {
    width: 208px;
    height: 120px;
    background-color: #6C6;
    position: relative;
    left: 10px;
    top: 20px;
    --height: 60px;
    --width: 104px;
  box-shadow: -1px 1px 1 #000,
  		 1px  1px 2px var(--color),
		-1px -1px 2px var(--color),  
		 1px -1px 2px var(--color),
		-1px  1px 2px var(--color),
		 1px  1px 2px var(--color)
  ;
}

.bash-logo -p:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: calc( -1 * var(--height));
  	left: 0;
    border-top: var(--height) solid #6C6;
    border-left: var(--width) solid transparent;
    border-right: var(--width) solid transparent;
}

.bash-logo -p:before {
    content: " ";
    width: 0;
    height: 0;
    border-bottom: var(--height) solid #6C6;
    border-left: var(--width) solid transparent;
    border-right: var(--width) solid transparent;
    position: absolute;
    top: calc( -1 * var(--height));
}

/*EOF*/

dabblet.html

<div class="bash-logo">
	<h1>BASH <small>The Bourne-Again Shell</small></h1>
	<p class="hexagon">$<span>_</span></p> 
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}