Files
Gabriel Kaszewski 3678f761dd Update styles and templates for improved layout and design
- Updated Tailwind CSS to version 4.0.17, introducing new color variables and adjustments to existing styles.
- Added a new section template for displaying project sections with a consistent design.
- Enhanced card shortcodes to include list styles for better readability.
- Modified sidebar links to ensure correct image paths and improved accessibility with added links for projects.
2025-05-02 23:57:34 +02:00

78 lines
2.8 KiB
HTML

<aside
class="col-span-2 aero-gradient-dark p-4 rounded-bl-2xl flex flex-col gap-2 items-stretch overflow-y-auto"
>
<section class="aero-gradient-dark text-white p-1 rounded-sm">
<p class="aero-gradient p-2 border-b border-midnight text-lg">Main</p>
<ul class="flex flex-col gap-1 justify-center">
<li class="border-b border-midnight">
<a href="/" class="flex items-center gap-2">
<img class="w-6 h-6" src="/img/icons/home.png" alt="home-icon" />
Home
</a>
</li>
<li class="border-b border-midnight flex items-center">
<a href="/cv" class="flex items-center gap-2">
<img class="w-6 h-6" src="/img/icons/cv.png" alt="cv-icon" />
CV
</a>
</li>
<li class="border-b border-midnight flex items-center gap-2">
<a href="/about" class="flex items-center gap-2">
<img class="w-6 h-6" src="/img/icons/about.png" alt="about-icon" />
About
</a>
</li>
</ul>
</section>
<section class="aero-gradient-dark text-white p-1 rounded-sm">
<a
class="aero-gradient p-2 border-b border-midnight text-lg flex items-center gap-2"
href="/projects"
>
<img src="/img/icons/folder.png" alt="folder-icon" class="w-6 h-6" />
Projects
</a>
<ul class="flex flex-col gap-1 justify-center">
<li class="border-b border-midnight">
<a href="/projects/tiny-packer">Tiny packer</a>
</li>
<li class="border-b border-midnight">Project 2</li>
<li class="border-b border-midnight">Project 3</li>
</ul>
</section>
<section class="aero-gradient-dark text-white p-1 rounded-sm">
<p
class="aero-gradient p-2 border-b border-midnight text-lg flex items-center gap-2"
>
<img class="w-6 h-6" src="/img/icons/games.png" alt="games-icon" />
Games
</p>
<ul class="flex flex-col gap-1 justify-center">
<li class="border-b border-midnight">Snake</li>
<li class="border-b border-midnight">Tetris</li>
<li class="border-b border-midnight">Wordle</li>
</ul>
</section>
<section class="aero-gradient-dark text-white p-1 rounded-sm">
<p
class="aero-gradient p-2 border-b border-midnight text-lg flex items-center gap-2"
>
<img src="/img/icons/disc.png" alt="disc-icon" class="w-6 h-6" />
Multimedia
</p>
<ul class="flex flex-col gap-1 justify-center">
<li class="border-b border-midnight flex items-center gap-2">
<a href="/podcasts" class="flex items-center gap-2">
<img
class="w-6 h-6"
src="/img/icons/podcast.png"
alt="podcast-icon"
/>
Podcasts
</a>
</li>
<li class="border-b border-midnight flex items-center gap-2">Photos</li>
</ul>
</section>
</aside>