v6 / _includes / layouts / css / base.css

:root {
  --font-family: "Archivo", system-ui, sans-serif;
  --font-heading: "Archivo", sans-serif;
  --font-heading-features: "zero";

  --background-color: #fff;
  --text-color: #333;
  --text-color-link: #082840;
  --text-color-link-active: #5f2b48;
  --text-color-link-visited: #17050f;
  --card-background: light-dark(rgb(var(--primary-50)), rgb(var(--secondary-975)));

  --accent: rgb(var(--primary-400));
  --border: hsl( from rgb(var(--secondary-900)) calc(h - 10) calc(s + 10) calc(l + 10) );

  --primary-50: 247 244 254;
  --primary-100: 239 235 252;
  --primary-200: 227 218 250;
  --primary-300: 206 189 245;
  --primary-400: 180 151 238;
  --secondary-700: 113 96 162;
  --secondary-900: 77 69 106;
  --secondary-950: 34 30 46;
  --secondary-975: 17 15 23;
}

body {
  font-family: var(--font-family);
  font-size: var(--step--1);
  color: var(--text-color);
  background-color: rgb(var(--primary-200));
	/* background-image: url("https://www.transparenttextures.com/patterns/dotnoise-light-grey.png"); */
	/* background-attachment: fixed; */
  margin: 0;
	tab-size: 4;
}


body {
  &> header,
  &> main,
  &> footer {
    padding: 0.5rem;
    margin: 0 auto;
    max-width: 48rem;

    h1:first-child {
      margin-top: 0.5rem;
    }
  }
  &> footer {
    font-style: italic;
    font-size: 0.9375em; /* 15px /16 */
  }

  &> header {
		max-width: 100%;
		background: var(--border);
		padding: 0;

	}
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-feature-settings: var(--font-heading-features);
  font-weight: 900;
  margin-bottom: 0em;
}

h1 {
  font-size: var(--step-3)
}h2 {
  font-size: var(--step-2)
}h3 {
  font-size: var(--step-1)
}h4 {
  font-size: var(--step-0)
}
h5, h6 {
	&:before {
		content: "(Please dont use h5 or h6!!!) ";
		color: red;
		font-size: 4em;
	}
}

ul.plain {
  margin: 0;
  padding: 0;

  li {
    list-style: none;
  }
}
picture {
  max-width: 100%;
  display: block;

  img {
    width: 100%;
    height: auto;
    display: block;
  }
}

.card, project-card {
  background: var(--card-background);
  border: 2px solid hsl( from rgb(var(--secondary-900)) calc(h - 10) calc(s + 10) calc(l + 10) );

  box-shadow: 0.3rem 0.5rem light-dark( hsl( from rgb(var(--secondary-900)) calc(h - 10) calc(s + 10) calc(l + 10) ), hsl( from rgb(var(--secondary-950)) calc(h + 40) calc(s + 80) calc(l - 10) ) );
}

.tag {
	display: inline-flex;
	border: 2px solid var(--border);
	padding: 0 var(--space-2xs) 0 0;


	&:before {
		content: "#";
		color: white;
		padding: 0 var(--space-2xs);
		margin-right: var(--space-2xs);
		background: var(--border);
		font-weight: 900;

	}
}


.code-lang-tag {
	display: inline-flex;
	border: 2px solid var(--border);
	padding: 0 var(--space-2xs) 0 0;
	text-transform: capitalize;

	&:before {
		content: "lang";
		color: white;
		padding: 0 var(--space-2xs);
		margin-right: var(--space-2xs);
		background: var(--border);
		font-weight: 900;
		text-transform: lowercase;
	}
}


.code-filename-tag {
	display: inline-flex;
	border: 2px solid var(--border);
	padding: 0 var(--space-2xs) 0 0;

	&:before {
		content: "file";
		color: white;
		padding: 0 var(--space-2xs);
		margin-right: var(--space-2xs);
		background: var(--border);
		font-weight: 900;
		text-transform: lowercase;
	}
}

.speech {
	background: var(--border);
	color: white;
	margin: var(--space-xs-s);
	position: relative;
}
.speech:after {
	content: '';
	position: absolute;
	top: 0px;
	left: -1rem;
	width: 0;
	height: 0;
	border-left: 1rem solid transparent;
	/* border-right: 17px solid transparent; */
	border-top: 1rem solid var(--border);
}

a {
	color: oklch(from var(--border) l calc(c) calc(h - 0.5));
	text-decoration: underline;
	text-decoration-style: solid;
	text-decoration-thickness: 2px;

	&:hover {
		color: oklch(from var(--border) l calc(c + 0.3) calc(h + 0.5));
		text-decoration-style: dotted;
	}

	&:active {
		color: oklch(from var(--border) l calc(c + 0.6) calc(h + 0.7));
		text-decoration: none;
	}
}


aside.speech-box {
	display: flex;
	align-items: end;
	margin: 1em;


	.speech-content {
		margin: 0;
		margin-bottom: 1em;
		margin-left: 2em;
		display: block;
		background: var(--border);
		color: white;
		padding: var(--space-xs-s);
		position: relative;

		a {
			color: white;
		}

		&:after {
			content: '';
			position: absolute;
			bottom: 0px;
			left: -1rem;
			width: 0;
			height: 0;
			border-left: 1rem solid transparent;
			/* border-right: 17px solid transparent; */
			border-bottom: 1rem solid var(--border);
		}
	}
}


.speech-character {
	height: 6em;
	width: 6em;
	flex-shrink: 0;
	flex-grow: 0;

	display: block;
	background: var(--border);
	position: relative;


	.glassleft {
		position: absolute;
		top: 2rem;
		left: 1rem;
	}
	.glassright {
		position: absolute;
		top: 1.7rem;
		left: 2.9rem;
	}
	.glass {
		width: 2rem;
		height: 2rem;
		background-color: goldenrod;
		clip-path: circle(1rem);
	}


	.eye {
		width: 2rem;
		height: 2rem;
		background-color: white;
		clip-path: ellipse(0.2rem 0.5rem);
		margin-left: 0.2rem;
	}

	.nose {
		position: absolute;
		top: 3.7rem;
		left: 2.8rem;
		height: 0.4rem;
		width: 0.8rem;
		clip-path: shape(from 50% 0%,line by 50% 100%,hline to 0%,line to 50% 0%,close);
		background-color: goldenrod;

	}
}

.speech-character:is(.character-blink, .character-sleep) .eye {
	clip-path: shape(from 0.7rem 1rem,
		hline by 0.8rem,
		vline by 0.2rem,
		hline by -0.8rem,
		close);

}

.nowrap {
	text-wrap: nowrap;
}