glax/Tranga
2
0
Fork 0
Code

But I like this! #1

Browse Source
This commit is contained in:
glax 2023-05-23 00:12:30 +02:00
parent e2b8888130
commit 9c267f395f
2 changed files with 68 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
Website/index.html
View File

@ -13,7 +13,7 @@
</titlebox> </titlebox>
<spacer></spacer> <spacer></spacer>
<searchdiv> <searchdiv>
<input id="searchbox" placeholder="Search" type="text"> <input id="searchbox" placeholder="Filter" type="text">
</searchdiv> </searchdiv>
<img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog"> <img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
</topbar> </topbar>
@ -21,15 +21,19 @@
<sidebar> <sidebar>
<background-placeholder></background-placeholder> <background-placeholder></background-placeholder>
<spacer></spacer>
<p style="text-align: center">Made with Blåhaj 🦈</p>
</sidebar> </sidebar>
<content> <content>
<background-placeholder></background-placeholder> <div id="addPublication">
<publication id="addPublication">
<p>+</p> <p>+</p>
</publication> </div>
<publication> <publication>
<connector-name class="pill">Connector Name</connector-name> <img src="media/cover.jpg">
<publication-name>Publication Name</publication-name> <publication-information>
<connector-name class="pill">MangaDex</connector-name>
<publication-name>Tensei Pandemic</publication-name>
</publication-information>
</publication> </publication>
</content> </content>
</viewport> </viewport>

73
Website/style.css
View File

@ -1,8 +1,9 @@
:root{ :root{
--background-color: #5bcefa; --background-color: #eee;
--second-background-color: #000; --second-background-color: #fff;
--primary-color: #f5a9b8; --primary-color: #f5a9b8;
--secondary-color: #fff; --secondary-color: #5bcefa;
--accent-color: #fff;
--topbar-height: 60px; --topbar-height: 60px;
box-sizing: content-box; box-sizing: content-box;
} }
@ -21,18 +22,19 @@ body{
background-placeholder{ background-placeholder{
background-color: var(--second-background-color); background-color: var(--second-background-color);
opacity: 0.05; opacity: 1;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 5px; border-radius: 0 0 5px 0;
z-index: -1;
} }
topbar { topbar {
display: flex; display: flex;
align-items: center; align-items: center;
height: var(--topbar-height); height: var(--topbar-height);
margin: 5px; background-color: var(--secondary-color);
} }
titlebox { titlebox {
@ -47,7 +49,7 @@ titlebox {
titlebox span{ titlebox span{
font-size: 24pt; font-size: 24pt;
font-weight: bold; font-weight: bold;
background: linear-gradient(120deg, var(--primary-color), var(--secondary-color)); background: linear-gradient(150deg, var(--primary-color), var(--accent-color));
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
margin-left: 20px; margin-left: 20px;
@ -92,8 +94,11 @@ viewport {
sidebar{ sidebar{
position: relative; position: relative;
width: 20rem; width: 20rem;
margin-bottom: 10px; margin-bottom: 20px;
border-radius: 0 5px 5px 0; border-radius: 0 0 5px 0;
display: flex;
flex-direction: column;
} }
content { content {
@ -119,16 +124,14 @@ settingstab{
border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;
} }
publication{ #addPublication {
background-color: var(--secondary-color); background-color: var(--secondary-color);
width: 180px; width: 180px;
height: 300px; height: 300px;
border-radius: 5px; border-radius: 5px;
margin: 10px 10px; margin: 10px 10px;
display: flex;
flex-direction: column;
justify-content: start;
padding: 15px 20px; padding: 15px 20px;
position: relative;
} }
#addPublication p{ #addPublication p{
@ -138,24 +141,64 @@ publication{
vertical-align: middle; vertical-align: middle;
line-height: 300px; line-height: 300px;
margin: 0; margin: 0;
color: var(--accent-color);
} }
.pill { .pill {
flex-grow: 0; flex-grow: 0;
height: 14pt; height: 14pt;
font-size: 12pt; font-size: 12pt;
border-radius: 7pt; border-radius: 9pt;
background-color: var(--primary-color); background-color: var(--primary-color);
padding: 1pt 15px; padding: 2pt 20px;
}
publication{
background-color: var(--secondary-color);
width: 180px;
height: 300px;
border-radius: 5px;
margin: 10px 10px;
padding: 15px 20px;
position: relative;
}
publication::after{
content: '';
position: absolute;
left: 0; top: 0;
border-radius: 5px;
width: 100%; height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.1));
}
publication-information {
display: flex;
flex-direction: column;
justify-content: start;
background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73))
z-index: 1;
} }
connector-name{ connector-name{
width: fit-content; width: fit-content;
margin: 10px 0; margin: 10px 0;
z-index: 2;
} }
publication-name{ publication-name{
width: fit-content; width: fit-content;
font-size: 16pt; font-size: 16pt;
font-weight: bold; font-weight: bold;
z-index: 2;
color: var(--accent-color);
}
publication img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
} }