public-mirrors/Kokoro-FastAPI
1
0
Fork 0
mirror of https://github.com/remsky/Kokoro-FastAPI.git synced 2025-04-13 09:39:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add badges for and adjust header styles for better layout

Browse source
This commit is contained in:
remsky 2025-01-23 02:10:01 -07:00
parent 8e8f120a3e
commit a8e6a3d2d9
4 changed files with 45 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
web/index.html
View file

@ -14,14 +14,24 @@
<link rel="stylesheet" href="styles/forms.css"> <link rel="stylesheet" href="styles/forms.css">
<link rel="stylesheet" href="styles/player.css"> <link rel="stylesheet" href="styles/player.css">
<link rel="stylesheet" href="styles/responsive.css"> <link rel="stylesheet" href="styles/responsive.css">
<link rel="stylesheet" href="styles/badges.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js"></script>
<script src="siriwave.js"></script> <script src="siriwave.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head> </head>
<body> <body>
<div class="sun"> <div class="sun">
<div class="scanline"></div> <div class="scanline"></div>
</div> </div>
<div class="overlay"></div> <div class="overlay"></div>
<div class="badges-container">
<a href="https://huggingface.co/hexgrad/Kokoro-82M" target="_blank" class="badge">
<img src="https://img.shields.io/badge/HexGrad%2FKokoro--82M-grey?logo=huggingface&logoColor=white&labelColor=grey&style=for-the-badge" alt="HexGrad/Kokoro-82M on Hugging Face">
</a>
<div class="badge">
<a class="github-button" href="https://github.com/remsky/Kokoro-FastAPI" data-color-scheme="dark" data-size="large" data-show-count="true" aria-label="Star remsky/Kokoro-FastAPI on GitHub">Kokoro-FastAPI</a>
</div>
</div>
<div class="container"> <div class="container">
<header> <header>
<div class="logo-container"> <div class="logo-container">

30
web/styles/badges.css Normal file
View file

@ -0,0 +1,30 @@
.badges-container {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 0.5rem 1rem;
display: flex;
justify-content: space-between;
z-index: 2;
}
.badge {
height: 28px;
display: flex;
align-items: center;
transition: opacity 0.2s ease;
}
.badge iframe {
height: 28px !important;
}
.badge:hover {
opacity: 0.9;
}
.badge img {
height: 100%;
border-radius: 4px;
}

5
web/styles/header.css
View file

@ -1,6 +1,7 @@
header { header {
margin-bottom: 3rem; margin-bottom: 2rem;
text-align: center; text-align: center;
padding-top: 0.5rem;
} }
.logo-container { .logo-container {
@ -8,12 +9,14 @@ header {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 20px; gap: 20px;
margin-bottom: 0.25rem;
} }
h1 { h1 {
font-size: 5rem; font-size: 5rem;
font-weight: 700; font-weight: 700;
margin: 0; margin: 0;
line-height: 1.1;
background: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), background: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 10px 10px; background-size: 10px 10px;

2
web/styles/layout.css
View file

@ -1,7 +1,7 @@
.container { .container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 4rem 1.5rem; padding: 2rem 1.5rem;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }