luca/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

changes to post css and added test content

Browse source
This commit is contained in:
Luca Junge 2023-04-10 15:55:26 +02:00
parent a087ec4eb3
commit 74ce9fef9c
6 changed files with 65 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/_includes/model-preview.njk
View file

@ -7,7 +7,7 @@
<!-- The model title and description -->
<div class="model-info text-gray-100 backdrop-blur-sm p-5 pb-16 absolute bottom-0 left-0 right-0 bg-black/40 group-hover:bg-black/50 transition ease-in-out rounded-b-lg">
<h5 class="text-2xl font-bold">{{post.data.title}}</h5>
<h5 class="text-2xl not-italic uppercase font-bold">{{post.data.title}}</h5>
<p>{{post.data.alt}}</p>
</div>
</a>

2
src/_includes/partials/nav.njk
View file

@ -2,7 +2,7 @@
<div class="container flex flex-wrap justify-center xs:justify-between items-center mx-auto">
<div class="flex flex-wrap items-center grow justify-between">
<span class="font-bold text-xl md:text-md">Luca Junge</span>
<span class="font-bold text-xl md:text-md"></span>
</div>
<div class="flex flex-wrap items-center justify-between space-x-3 md:space-x-4">

18
src/_includes/post.njk
View file

@ -8,18 +8,26 @@
<link rel="stylesheet" href="/assets/fontawesome/css/all.css">
<title>{{ title }}</title>
</head>
<body class="bg-gray-800 text-gray-100">
<body class="bg-gray-800 text-gray-100 post-style">
{% include "partials/nav.njk" %}
<aside class="container mx-auto py-5 px-5">
<aside class="container max-w-5xl mx-auto pt-5 pb-0 px-5">
<a onclick="history.back()" class="cursor-pointer inline-flex items-center py-3 px-3 text-sm font-bold text-center text-white bg-gray-700 rounded-lg hover:bg-gray-600 transition ease-in-out">
<i class="fa fa-solid fa-angle-left mr-2"></i>Zurück
<i class="fa fa-solid fa-angle-left mr-2 no-underline"></i>Zurück
</a>
<h1 class="mt-6 text-center">{{ title }}</h1>
{% if header %}
<div class="header-image mt-5">
<img src="{{ header }}" class="rounded-lg w-full max-h-56 object-cover" alt="{{ title }}">
</div>
{% endif %}
<h1 class="mt-10 text-center">{{ title }}</h1>
<span class="block text-gray-500 text-center">{{ page.date | readableDate }}</span>
</aside>
<div class="container mx-auto py-5 px-5">
<div id="content" class="container max-w-5xl mx-auto py-5 px-5">
{{ content | safe }}
</div>
{% include "partials/footer.njk" %}

38
src/css/tailwind.css
View file

@ -2,20 +2,26 @@
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply mb-2 text-2xl font-bold;
}
h2 {
@apply mb-1 text-xl font-bold;
}
h3 {
@apply mb-1 text-lg font-bold;
}
ul {
@apply ml-4 list-inside list-disc;
}
.post-style h1 {
@apply mt-6 mb-6 text-4xl font-bold;
}
.post-style h2 {
@apply mb-3 mt-10 text-3xl font-bold;
}
.post-style h3 {
@apply mb-3 mt-10 text-2xl font-bold;
}
.post-style h4 {
@apply mb-3 mt-10 text-2xl font-bold italic;
}
.post-style h5 {
@apply mb-3 mt-10 text-xl italic;
}
.post-style h6 {
@apply mb-3 mt-10 text-sm italic;
}

BIN
src/posts/awesome-open-source-tools/header.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 644 KiB

32
src/posts/awesome-open-source-tools/index.md
View file

@ -1,16 +1,34 @@
---
title: Awesome Open Source tools
header: header.jpg
---
Here's a list of open source tools that are almost too good to be true.
I'm a huge fan of all things open-source. I've spent many hours exploring open-source software, and I've discovered so many fantastic tools and apps that have improved my workflows in so many ways. I want to share my personal favorites with this blog post.
These are the open-source gems that I believe deserve a spot on everyone's computer. I hope you'll enjoy them as much as I do! Let's get started!
## Design
## Design & Prototyping
For the few times that I need to design something or prototype something visually, I found that using open-source tools helps me in saving costs for subscriptions or software itself.
### Penpot
Penpot can be found [here](https://github.com/penpot/penpot)
One of the open-source tools I've fallen in love with is [Penpot](https://github.com/penpot/penpot), a fantastic web-based design and prototyping tool that's perfect for UI and UX designers. It's a real game-changer for those of us who want an alternative to popular subscription-based design tools like Sketch and Figma.
## GameDev
The thing I adore about Penpot is that it's not just powerful, but also user-friendly and incredibly versatile. You can design beautiful interfaces, create interactive prototypes, and even collaborate with your team in real-time - all from within your web browser! Plus, it supports all major vector and raster file formats, so you won't have to worry about compatibility issues.
Another fantastic aspect of Penpot is the active and supportive community behind it. They're always working on improvements and adding new features, making sure we have the best possible experience.
If you're a designer looking to dip your toes into the open-source world or just searching for a budget-friendly design tool, Penpot is definitely one to check out! Trust me, you won't be disappointed!
### Excalidraw
I've been loving Excalidraw lately, a fun and easy-to-use open-source whiteboard app that's perfect for brainstorming and sketching ideas. With its minimalistic interface, you can quickly create hand-drawn-like shapes, lines, and text, making your ideas come to life in no time.
Despite its simplicity, Excalidraw offers powerful features, like real-time collaboration and easy sharing in various formats. Its open-source nature and supportive community ensure continuous improvements, making it an excellent choice for students, teachers, and professionals alike.
If you're after a fun, user-friendly, and effective tool for visualizing your thoughts, Excalidraw is definitely worth a try!
## Game Development
- Godot
- Aseprite
@ -30,3 +48,9 @@ Penpot can be found [here](https://github.com/penpot/penpot)
- Typst
## Other notable mentions
#### Hello this
##### is a test
###### ok