website/assets/css/main.css

494 lines
7.4 KiB
CSS
Raw Normal View History

2019-11-16 21:04:54 +00:00
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");
2019-11-19 06:52:41 +00:00
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
2019-11-15 16:51:24 +00:00
body {
background-color: black;
color: white;
}
2019-11-19 06:52:41 +00:00
.light {
color: black !important;
background: white !important;
}
2019-11-15 16:51:24 +00:00
* {
margin: 0;
padding: 0;
2019-11-19 06:52:41 +00:00
font-family: 'Roboto', sans-serif;
}
.title {
font-size: 13vh;
margin: 0;
2019-11-30 13:14:32 +00:00
}
.subtitle {
font-size: 3vh;
bottom: 50px;
text-align: center;
2019-11-28 19:03:30 +00:00
cursor: -webkit-grab;
cursor: grab;
2019-11-19 06:52:41 +00:00
}
sub {
font-size: 1vh;
}
.center {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
a {
text-decoration: none;
color: white;
display: inline-block;
}
svg {
margin: 0;
padding: 0;
2019-11-19 06:52:41 +00:00
}
body.light a {
color: black;
2019-11-15 16:51:24 +00:00
}
#box {
position: absolute;
z-index: 999;
2019-11-30 13:14:32 +00:00
border: 3vh solid black;
2019-11-15 16:51:24 +00:00
-webkit-box-sizing: border-box;
box-sizing: border-box;
2019-11-16 21:04:54 +00:00
top: 0;
left: 0;
2019-11-15 16:51:24 +00:00
right: 0;
bottom: 0;
pointer-events: none;
-webkit-transition: border-color 0.5s ease-in-out;
transition: border-color 0.5s ease-in-out;
}
2019-11-19 06:52:41 +00:00
body.light #box {
position: absolute;
z-index: 999;
2019-11-30 13:14:32 +00:00
border: 3vh solid white;
2019-11-19 06:52:41 +00:00
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
-webkit-transition: border-color 0.5s ease-in-out;
transition: border-color 0.5s ease-in-out;
2019-11-16 21:04:54 +00:00
}
2019-12-08 22:52:31 +00:00
.twitter:hover #box,
.twitter:focus #box {
border-color: #1da1f2;
}
2019-11-30 13:14:32 +00:00
a.twitter {
fill: #1da1f2 !important;
2019-12-08 22:52:31 +00:00
color: #1da1f2 !important;
2019-11-30 13:14:32 +00:00
}
a.twitter.light {
fill: #1da1f2 !important;
2019-12-08 22:52:31 +00:00
color: #1da1f2 !important;
}
.twitter::-moz-selection {
color: white;
background-color: #1da1f2;
}
.twitter::selection {
color: white;
background-color: #1da1f2;
}
body.light .twitter::-moz-selection {
color: black;
background-color: #37bbff;
}
body.light .twitter::selection {
color: black;
background-color: #37bbff;
}
.keybase:hover #box,
.keybase:focus #box {
border-color: #33a0ff;
2019-11-30 13:14:32 +00:00
}
a.keybase {
fill: #33a0ff !important;
2019-12-08 22:52:31 +00:00
color: #33a0ff !important;
2019-11-30 13:14:32 +00:00
}
a.keybase.light {
fill: #33a0ff !important;
2019-12-08 22:52:31 +00:00
color: #33a0ff !important;
}
.keybase::-moz-selection {
color: white;
background-color: #33a0ff;
}
.keybase::selection {
color: white;
background-color: #33a0ff;
}
body.light .keybase::-moz-selection {
color: black;
background-color: #4dbaff;
}
body.light .keybase::selection {
color: black;
background-color: #4dbaff;
}
.discord:hover #box,
.discord:focus #box {
border-color: #7289da;
2019-11-30 13:14:32 +00:00
}
a.discord {
fill: #7289da !important;
2019-12-08 22:52:31 +00:00
color: #7289da !important;
2019-11-30 13:14:32 +00:00
}
a.discord.light {
fill: #7289da !important;
2019-12-08 22:52:31 +00:00
color: #7289da !important;
}
.discord::-moz-selection {
color: white;
background-color: #7289da;
}
.discord::selection {
color: white;
background-color: #7289da;
}
body.light .discord::-moz-selection {
color: black;
background-color: #8ca3f4;
}
body.light .discord::selection {
color: black;
background-color: #8ca3f4;
}
.mastodon:hover #box,
.mastodon:focus #box {
border-color: #3088d4;
2019-11-30 13:14:32 +00:00
}
a.mastodon {
fill: #3088d4 !important;
2019-12-08 22:52:31 +00:00
color: #3088d4 !important;
2019-11-30 13:14:32 +00:00
}
a.mastodon.light {
fill: #3088d4 !important;
2019-12-08 22:52:31 +00:00
color: #3088d4 !important;
}
.mastodon::-moz-selection {
color: white;
background-color: #3088d4;
}
.mastodon::selection {
color: white;
background-color: #3088d4;
}
body.light .mastodon::-moz-selection {
color: black;
background-color: #4aa2ee;
}
body.light .mastodon::selection {
color: black;
background-color: #4aa2ee;
}
.twitch:hover #box,
.twitch:focus #box {
border-color: #6441a4;
2019-11-30 13:14:32 +00:00
}
a.twitch {
fill: #6441a4 !important;
2019-12-08 22:52:31 +00:00
color: #6441a4 !important;
2019-11-30 13:14:32 +00:00
}
a.twitch.light {
fill: #6441a4 !important;
2019-12-08 22:52:31 +00:00
color: #6441a4 !important;
}
.twitch::-moz-selection {
color: white;
background-color: #6441a4;
}
.twitch::selection {
color: white;
background-color: #6441a4;
}
body.light .twitch::-moz-selection {
color: black;
background-color: #7e5bbe;
}
body.light .twitch::selection {
color: black;
background-color: #7e5bbe;
}
.gitdab:hover #box,
.gitdab:focus #box {
border-color: #faacb7;
2019-11-30 13:14:32 +00:00
}
a.gitdab {
fill: #faacb7 !important;
2019-12-08 22:52:31 +00:00
color: #faacb7 !important;
2019-11-30 13:14:32 +00:00
}
a.gitdab.light {
fill: #faacb7 !important;
2019-12-08 22:52:31 +00:00
color: #faacb7 !important;
}
.gitdab::-moz-selection {
color: white;
background-color: #faacb7;
}
.gitdab::selection {
color: white;
background-color: #faacb7;
}
body.light .gitdab::-moz-selection {
color: black;
background-color: #ffc6d1;
}
body.light .gitdab::selection {
color: black;
background-color: #ffc6d1;
}
.github:hover #box,
.github:focus #box {
border-color: #333;
2019-11-30 13:14:32 +00:00
}
a.github {
fill: #333 !important;
2019-12-08 22:52:31 +00:00
color: #333 !important;
2019-11-30 13:14:32 +00:00
}
a.github.light {
fill: #333 !important;
2019-12-08 22:52:31 +00:00
color: #333 !important;
}
.github::-moz-selection {
color: white;
background-color: #333;
}
.github::selection {
color: white;
background-color: #333;
}
body.light .github::-moz-selection {
color: black;
background-color: #4d4d4d;
}
body.light .github::selection {
color: black;
background-color: #4d4d4d;
}
.gitlab:hover #box,
.gitlab:focus #box {
border-color: #e24329;
2019-11-30 13:14:32 +00:00
}
a.gitlab {
fill: #e24329 !important;
2019-12-08 22:52:31 +00:00
color: #e24329 !important;
2019-11-30 13:14:32 +00:00
}
a.gitlab.light {
fill: #e24329 !important;
2019-12-08 22:52:31 +00:00
color: #e24329 !important;
}
.gitlab::-moz-selection {
color: white;
background-color: #e24329;
}
.gitlab::selection {
color: white;
background-color: #e24329;
}
body.light .gitlab::-moz-selection {
color: black;
background-color: #fc5d43;
}
body.light .gitlab::selection {
color: black;
background-color: #fc5d43;
}
a svg {
max-width: 4ch;
2019-11-30 13:14:32 +00:00
}
.socials {
font-size: 2vh;
2019-11-30 13:14:32 +00:00
text-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
2019-11-30 13:14:32 +00:00
}
divide {
display: block;
height: 1vh;
border: 0;
border-top: 0px solid rgba(204, 204, 204, 0);
margin: 1vh 0;
padding: 1vh;
}
2019-11-16 21:04:54 +00:00
.portfolio:hover {
color: #ff6a5f;
2019-11-15 16:51:24 +00:00
}
2019-11-16 21:04:54 +00:00
.portfolio:hover ~ #box {
border-color: #ff6a5f;
2019-11-15 16:51:24 +00:00
}
2019-11-19 06:52:41 +00:00
.portfolio::-moz-selection {
color: white;
background-color: #ff6a5f;
}
.portfolio::selection {
color: white;
background-color: #ff6a5f;
}
body.light .portfolio::-moz-selection {
color: black;
background-color: #ff8479;
}
body.light .portfolio::selection {
color: black;
background-color: #ff8479;
}
2019-11-30 13:14:32 +00:00
.portfolio {
font-size: 6vh;
}
2019-11-16 21:04:54 +00:00
.lore:hover {
color: #92a9f3;
}
.lore:hover ~ #box {
border-color: #92a9f3;
}
2019-11-19 06:52:41 +00:00
.lore::-moz-selection {
color: white;
background-color: #92a9f3;
}
.lore::selection {
color: white;
background-color: #92a9f3;
}
body.light .lore::-moz-selection {
color: black;
background-color: #acc3ff;
}
body.light .lore::selection {
color: black;
background-color: #acc3ff;
}
2019-11-30 13:14:32 +00:00
.lore {
font-size: 6vh;
}
2019-11-16 21:04:54 +00:00
.art:hover {
color: #c974da;
}
.art:hover ~ #box {
border-color: #c974da;
}
2019-11-19 06:52:41 +00:00
.art::-moz-selection {
color: white;
background-color: #c974da;
}
.art::selection {
color: white;
background-color: #c974da;
}
body.light .art::-moz-selection {
color: black;
background-color: #e38ef4;
}
body.light .art::selection {
color: black;
background-color: #e38ef4;
}
2019-11-15 16:51:24 +00:00
.art {
2019-11-16 21:04:54 +00:00
font-size: 6vh;
2019-11-15 16:51:24 +00:00
}
/*# sourceMappingURL=main.css.map */