154 lines
2.2 KiB
CSS
154 lines
2.2 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
|
|
:root {
|
|
--color-bg: #1E1E2E;
|
|
--color-fg: #D9E0EE;
|
|
--color-link: #8F9191;
|
|
--color-link-visited: #F5C2E7;
|
|
--color-link-hover: #FF79C6 ;
|
|
}
|
|
|
|
html, body {
|
|
background: var(--color-bg);
|
|
color: var(--color-fg);
|
|
font-family: "Ubuntu";
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.vapor {
|
|
border-radius: 12px;
|
|
border-style: solid;
|
|
border-color: #FF79C6;
|
|
|
|
}
|
|
|
|
.container {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"."
|
|
"right"
|
|
"left"
|
|
".";
|
|
|
|
column-gap: 80px;
|
|
min-height: 100%;
|
|
}
|
|
|
|
|
|
|
|
.left-container {
|
|
grid-area: left;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
|
|
.right-container {
|
|
grid-area: right;
|
|
width: 100%;
|
|
}
|
|
|
|
.gif img {
|
|
max-width: 350px;
|
|
max-height: 350px;
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: 40px;
|
|
padding-top: 60px;
|
|
}
|
|
|
|
.category {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 180px;
|
|
margin: auto;
|
|
}
|
|
|
|
.bookmarks {
|
|
display: grid;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.bookmarks {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1324px) {
|
|
.container {
|
|
grid-template-areas:
|
|
". left right .";
|
|
justify-items: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.bookmarks {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
li {
|
|
font-size: 16px;
|
|
list-style-type: none;
|
|
padding: 5px
|
|
}
|
|
|
|
a:link {
|
|
text-decoration: none;
|
|
color: var(--color-link);
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--color-link-visited);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-link-hover);
|
|
}
|
|
|
|
.blinking {
|
|
animation: opacity 1s ease-in-out infinite;
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes opacity {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#Date {
|
|
|
|
font-family: 'Bebas Neue';
|
|
font-size: 40px;
|
|
}
|