refactor: split html and css file

This commit is contained in:
jabuxas 2024-10-15 15:59:34 -03:00
parent 7a4d7d2e05
commit 1c62723475
2 changed files with 94 additions and 97 deletions

View File

@ -10,103 +10,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link href="style.css" rel="stylesheet" />
<style>
@font-face {
font-family: Lilex;
src: url(./fonts/Lilex-Regular.ttf) format("truetype");
}
@font-face {
font-family: "JetBrainsMono Nerd Font";
src: url("./fonts/JetBrains-Mono-Nerd-Font-Complete.ttf") format("truetype");
}
body {
font-family: Lilex;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #1e1e1e;
color: #d4d4d4;
}
.container {
display: flex;
flex-direction: column;
}
img {
width: 150px;
border-radius: 50px;
}
.top-level div {
display: flex;
align-items: center;
gap: 2em;
}
.link-item {
display: flex;
align-items: center;
gap: 15px;
}
.link-item a {
text-decoration: none;
color: #d4d4d4;
font-weight: bolder;
display: flex;
align-items: center;
}
.icon {
font-family: "JetBrainsMono Nerd Font";
}
.icon:before {
margin-right: 20px;
}
.mail-icon:before {
content: "\f42f";
font-size: 2em;
}
.github-icon:before {
content: "\f09b";
font-size: 2em;
}
.gitea-icon:before {
content: "\e702";
font-size: 2.8em;
}
.paste-icon:before {
content: "\f429";
font-size: 2em;
padding-left: 7px;
}
.blog-icon:before {
content: "\e287";
font-size: 2em;
padding-left: 4px;
}
footer {
position: absolute;
bottom: 1rem;
font-size: 0.8rem;
color: #777;
}
</style>
<link href="style.css?version=1" rel="stylesheet" />
</head>
<body>

93
dev/style.css Normal file
View File

@ -0,0 +1,93 @@
@font-face {
font-family: Lilex;
src: url(./fonts/Lilex-Regular.ttf) format("truetype");
}
@font-face {
font-family: "JetBrainsMono Nerd Font";
src: url("./fonts/JetBrains-Mono-Nerd-Font-Complete.ttf") format("truetype");
}
body {
font-family: Lilex;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #1e1e1e;
color: #d4d4d4;
}
.container {
display: flex;
flex-direction: column;
}
img {
width: 150px;
border-radius: 50px;
}
.top-level div {
display: flex;
align-items: center;
gap: 2em;
}
.link-item {
display: flex;
align-items: center;
gap: 15px;
}
.link-item a {
text-decoration: none;
color: #d4d4d4;
font-weight: bolder;
display: flex;
align-items: center;
}
.icon {
font-family: "JetBrainsMono Nerd Font";
}
.icon:before {
margin-right: 20px;
}
.mail-icon:before {
content: "\f42f";
font-size: 2em;
}
.github-icon:before {
content: "\f09b";
font-size: 2em;
}
.gitea-icon:before {
content: "\e702";
font-size: 2.8em;
}
.paste-icon:before {
content: "\f429";
font-size: 2em;
padding-left: 7px;
}
.blog-icon:before {
content: "\e287";
font-size: 2em;
padding-left: 4px;
}
footer {
position: absolute;
bottom: 1rem;
font-size: 0.8rem;
color: #777;
}