quat1024/index.html

## index.html
<html>
  <head>
    <title>Start</title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
  </head>
  <body>
    <div class="grid">
      <div class="square new">
        <div>New Tab.</div>
      </div>
      <div class="square steam">
        <a target="_blank" href="http://steamcommunity.com/id/quaternary/home/">Steam</a>
      </div>
      <div class="square twit">
        <a target="_blank" href="https://twitter.com/">Twitter</a>
      </div>
      <div class="square cybre">
        <a target="_blank" href="https://cybre.space/">Cybre</a>
      </div>
      <div class="square disc">
        <a target="_blank" href="https://discordapp.com/channels/@me">Discord</a>
      </div>
      <div class="square yt">
        <a target="_blank" href="https://www.youtube.com/feed/subscriptions">Youtube</a>
      </div>
      <div class="square at">
        <a target="_blank" href="https://www.audiotool.com/browse/latest-from-followees">Audiotool</a>
      </div>
      <div class="square reddit">
        <a target="_blank" href="https://www.reddit.com/">Reddit</a>
      </div>
    </div>
  </body>
</html>

## style.css
html, body {
  margin: 0;
  padding: 0;
  background-color: #050505;
  font-family: sans-serif;
}

body {
  height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
}

.grid {
  height: 100%;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: repeat(5, 175px);
  grid-auto-rows: 175px;
  gap: 1em;

  transform: rotate(2deg);
  /* Seems to trick FF into antialiasing the rotated edges more */
  filter: blur(0px);
}

.square {
  height: 100%;
  box-sizing: border-box;

  color: transparent;
  font-size: 36px;
  font-weight: bold;

  /*
  clip-path: polygon(
    0% 0%,
    100% 0,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    0% 100%
  );
  */
}

.square:not(.new):hover {
  background-color: transparent;
  color: white;
  outline: 3px solid white;

  clip-path: unset;
}

.square * {
  display: inline-block;
  box-sizing: border-box;

  width: 100%;
  height: 100%;
  padding: 10px;
}

a {
  color: inherit;
  text-decoration: none;
}

.new {
  font-size: 72px;
  color: white;
  grid-row: 1 / 2;
  grid-column: 1 / 3;

  display: grid;
  justify-content: end;
  align-content: end;

  clip-path: unset;

  outline: 3px solid white;
}

.new * { padding-bottom: 0; }

.steam {
  background-color: #171a21;
  grid-row: 2 / 3;
  grid-column: 4 / 5;
}

.twit {
  background-color: #1da1f2;
  grid-row: 1 / 2;
  grid-column: 3 / 5;
}

.cybre {
  background-color: #1ea21e;
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.disc {
  background-color: #7289da;
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

.yt {
  background-color: #ff0000;
  grid-row: 1 / 3;
  grid-column: 5 / 6;
}

.at {
  background-color: #0ec5ff;
  grid-row: 3 / 4;
  grid-column: 4 / 6;
}

.reddit {
  background-color: #ff4500;
  grid-row: 3 / 4;
  grid-column: 1 / 4;
}
	<html>
	<head>
	<title>Start</title>
	<link rel="stylesheet" type="text/css" href="./style.css" />
	</head>
	<body>
	<div class="grid">
	<div class="square new">
	<div>New Tab.</div>
	</div>
	<div class="square steam">
	<a target="_blank" href="http://steamcommunity.com/id/quaternary/home/">Steam</a>
	</div>
	<div class="square twit">
	<a target="_blank" href="https://twitter.com/">Twitter</a>
	</div>
	<div class="square cybre">
	<a target="_blank" href="https://cybre.space/">Cybre</a>
	</div>
	<div class="square disc">
	<a target="_blank" href="https://discordapp.com/channels/@me">Discord</a>
	</div>
	<div class="square yt">
	<a target="_blank" href="https://www.youtube.com/feed/subscriptions">Youtube</a>
	</div>
	<div class="square at">
	<a target="_blank" href="https://www.audiotool.com/browse/latest-from-followees">Audiotool</a>
	</div>
	<div class="square reddit">
	<a target="_blank" href="https://www.reddit.com/">Reddit</a>
	</div>
	</div>
	</body>
	</html>
	html, body {
	margin: 0;
	padding: 0;
	background-color: #050505;
	font-family: sans-serif;
	}

	body {
	height: 100vh;
	display: grid;
	justify-content: center;
	align-content: center;
	}

	.grid {
	height: 100%;
	box-sizing: border-box;

	display: grid;
	grid-template-columns: repeat(5, 175px);
	grid-auto-rows: 175px;
	gap: 1em;

	transform: rotate(2deg);
	/* Seems to trick FF into antialiasing the rotated edges more */
	filter: blur(0px);
	}

	.square {
	height: 100%;
	box-sizing: border-box;

	color: transparent;
	font-size: 36px;
	font-weight: bold;

	/*
	clip-path: polygon(
	0% 0%,
	100% 0,
	100% calc(100% - 20px),
	calc(100% - 20px) 100%,
	0% 100%
	);
	*/
	}

	.square:not(.new):hover {
	background-color: transparent;
	color: white;
	outline: 3px solid white;

	clip-path: unset;
	}

	.square * {
	display: inline-block;
	box-sizing: border-box;

	width: 100%;
	height: 100%;
	padding: 10px;
	}

	a {
	color: inherit;
	text-decoration: none;
	}

	.new {
	font-size: 72px;
	color: white;
	grid-row: 1 / 2;
	grid-column: 1 / 3;

	display: grid;
	justify-content: end;
	align-content: end;

	clip-path: unset;

	outline: 3px solid white;
	}

	.new * { padding-bottom: 0; }

	.steam {
	background-color: #171a21;
	grid-row: 2 / 3;
	grid-column: 4 / 5;
	}

	.twit {
	background-color: #1da1f2;
	grid-row: 1 / 2;
	grid-column: 3 / 5;
	}

	.cybre {
	background-color: #1ea21e;
	grid-row: 2 / 3;
	grid-column: 1 / 2;
	}

	.disc {
	background-color: #7289da;
	grid-row: 2 / 3;
	grid-column: 2 / 4;
	}

	.yt {
	background-color: #ff0000;
	grid-row: 1 / 3;
	grid-column: 5 / 6;
	}

	.at {
	background-color: #0ec5ff;
	grid-row: 3 / 4;
	grid-column: 4 / 6;
	}

	.reddit {
	background-color: #ff4500;
	grid-row: 3 / 4;
	grid-column: 1 / 4;
	}