tenkuma/web
tenkuma/web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Better support for SVGs in the cards CSS.

Browse source
This commit is contained in:
Adrian Victor 2024-04-04 22:20:06 -03:00
commit 5fb34cb11b
3 changed files with 25 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

14
assets/main.css
View file

@ -48,6 +48,9 @@ nav.profile {
border-bottom: 2px solid white; border-bottom: 2px solid white;
} }
#projectsShowcase {
gap: 20px;
}
main { main {
display: flex; display: flex;
@ -124,8 +127,15 @@ main {
gap: 10px; gap: 10px;
} }
.menuEntry > img { .menuEntryHelper {
width: 200px;
height: 200px;
border: 2px solid white;
}
.menuEntryImage {
background-color: black; background-color: black;
width: 100%;
} }
.menuEntry:hover { .menuEntry:hover {
@ -143,7 +153,7 @@ main {
color: white; color: white;
} }
.menuEntry:hover > img { .menuEntry:hover img {
filter: grayscale(100%) invert(); filter: grayscale(100%) invert();
border-color: gray; border-color: gray;
} }

1
assets/svg/malware.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 8.3 KiB

8
index.html
View file

@ -15,15 +15,19 @@
<header-component></header-component> <header-component></header-component>
<main class="flex flex-column"> <main class="flex flex-column">
<h1>Home</h1> <h1>Home</h1>
<div id="projectsShowcase" class="flex flex-row">
<a class="menuEntryColor" href="https://github.com/adrianvic/haruma"> <a class="menuEntryColor" href="https://github.com/adrianvic/haruma">
<div class="flex flex-column box menuEntry flyOnHover"> <div class="flex flex-column box menuEntry flyOnHover">
<img class="thumbnail" src="./assets/img/haruma.png" width="200"> <div class="menuEntryHelper">
<img class="menuEntryImage" src="./assets/img/haruma.png">
</div>
<div class="flex flex-column"> <div class="flex flex-column">
<h2 class="noMargin">Haruma</h2> <h2 class="noMargin">Haruma</h2>
<p class="lightColor noMargin">A Discord bot.</p> <p class="lightColor noMargin">A Discord bot (and vampire).</p>
</div> </div>
</div> </div>
</a> </a>
</div>
</main> </main>
</body> </body>
</html> </html>