Skip to content

Instantly share code, notes, and snippets.

@quat1024

quat1024/index.html

Last active May 24, 2020 18:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save quat1024/638a3d886551fd4f8fbffaa13d04924d to your computer and use it in GitHub Desktop.
Save quat1024/638a3d886551fd4f8fbffaa13d04924d to your computer and use it in GitHub Desktop.
Download ZIP
new incarnation of the start page...
Raw
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>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment