Better support for SVGs in the cards CSS.

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

View file

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

1
assets/svg/malware.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.3 KiB

View file

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