add overwrite size for headline, optimize item layout

Author: uwekamper

README.md

@@ -5,12 +5,14 @@
 
 (For Windows, see more detailed instructions below)
 
-  - Install poetry (see: https://python-poetry.org/ )
+  - Install uv
   - clone this repository
-  - run `poetry install` inside the repository's root folder
+  - run `uv sync --all-extras --dev` inside the repository's root folder
+
+Lektor comes with a built-in GUI to edit the site's contents. For this, the development server is needed.
 
 To start the development server:
-  - run it directly inside the poetry virtual env: `poetry run lektor server`
+  - run it directly inside the `uv` virtual env: `uv run lektor server --browse`
   - Otherwise you can activate the virtuel env by running `poetry shell` and then run `lektor server`.
 
 
@@ -23,20 +25,22 @@ To start the development server:
 - get and install Visual Studio Code: https://code.visualstudio.com/
   - On first run, install the Microsoft Python extension via the Extensions menu (icon bar on the left side)
 
-- install Poetry via this command in the Windows PowerShell (please check https://python-poetry.org to make sure this is still the recommended method):
+- install ub via the command in the Windows PowerShell described here: https://docs.astral.sh/uv/getting-started/installation/#__tabbed_1_2
 
 ``` 
-(Invoke-WebRequest -Uri https://install.python-poetry.org -UseBasicParsing).Content | py -
+https://docs.astral.sh/uv/getting-started/installation/#__tabbed_1_2
 ```
 
+The following steps might be necessary on Windows but have not been recently tested:
+
 - Add the poetry installation directory to the PATH environment variable (German "Umgebungsvariablen"):
   - Add the following entry to %PATH%: `%APPDATA%\Python\Scripts`
-- Allow the execution of Powershell-Scripts (this is needed to activate the poetry virtualenv)
+- Allow the execution of Powershell-Scripts (this is needed to activate the virtualenv)
   ``Set-ExecutionPolicy -ExecutionPolicy Unrestriced 
 - Set the location where virtualenvs will be created to be `$project_dir/.venv`:
    - `poetry config virtualenvs.in-project true`
 - Use VS Code to clone the project to a local project directory
-- After cloning, open a new Terminal windows in VSCode and run `poetry install` in the VS Code terminal. That should create the venv.
+- After cloning, open a new Terminal windows in VSCode and run `uv sync --all-extras --dev` in the VS Code terminal. That should create the venv.
 
 ## Create `launch.json`:
 

content/30/2025-09-06-c-hike/contents.lr

@@ -10,4 +10,8 @@ body:
 - hiking 
 - and hiking, too.
 ---
-title: c-hike anniversary ed.
+title: c-hike 30th anniv. edition
+---
+title_size: 4.5rem
+---
+pate: odras

models/event.ini

@@ -10,6 +10,10 @@ type = date
 label = Title
 type = string
 
+[fields.title_size]
+label = Overwrite title size (default: 10rem)
+type = string
+
 [fields.body]
 label = Body
 type = markdown

templates/30jahre-cbase.html

@@ -65,15 +65,16 @@
         display: flex;
         width: 100%;
         flex-flow: row wrap;
-        justify-content: flex-start;
-        gap: 10px 30px;
+        justify-content: space-between;
+        gap: 20px 15px;
         margin-bottom: 200px;
     }
     .event-item {
         padding: 5px 15px;
         flex-grow: 0;
-        width: 200px;
+        width: 164px;
         min-height: 250px;
+        background: #000;
         border: #ff9900 solid 2px;
         transition-duration: 0.25s;
         transition-property: box-shadow;
@@ -110,7 +111,7 @@ <h2>Events</h2>
 
         <a href="{{ child|url }}">  
             <div class="event-item">
-                <p class="event-date">{{ child.date|dateformat("EEEE, dd.MM.YYYY", locale="de_DE") }}</p>
+                <p class="event-date">{{ child.date|dateformat("EE, dd.MM.YYYY", locale="de_DE") }}</p>
                 <h3 class="event-title">{{ child.title }}</h3>
             </div>
         </a>

templates/event.html

@@ -14,35 +14,90 @@
         margin-top: 25px;
         margin-bottom: 100px;
     }
-    .hero-title-sm {
+    .hero-title {
+        font-size: {% if this.title_size %}{{ this.title_size }}{% else %}10rem{% endif %};
         margin: 0px;
         color: rgb(255, 153, 0);
-        font-size: 10rem;
-        line-height: 0.75;
-
+        line-height: 0.8;
         font-family: "League Spartan", sans-serif;
         font-optical-sizing: auto;
         font-weight: 900;
         font-style: black;
     }
     .hero-subtitle {
+        font-size: 3rem;
         margin: 0px 0px 0px 10px;
         color: rgb(255, 153, 0);
-        font-size: 2rem;
-
         font-family: "League Spartan", sans-serif;
         font-optical-sizing: auto;
         font-weight: 900;
         font-style: black;
     }
+    @media screen and (max-width:992px) {
+        /* Zusätzliche Regeln für kleinere Monitore  */
+        .hero-title {
+            font-size: 10rem;
+        }
+        .hero-subtitle {
+            font-size: 3rem;
+        }
+    }
+    @media screen and (max-width:768px) {
+        /* Zusätzliche Regeln für kleinere Monitore  */
+        .hero-title {
+            font-size: 8rem;
+        }
+        .hero-subtitle {
+            font-size: 2rem;
+        }
+    }
+    @media screen and (max-width:450px) {
+        /* Zusätzliche Regeln noch kleinere Monitore  */
+        .hero-title {
+            font-size: 5rem;
+        }
+        .hero-subtitle {
+            font-size: 1.5rem;
+        }
+    }
+
+    .event-list {
+        display: flex;
+        width: 100%;
+        flex-flow: row wrap;
+        justify-content: flex-start;
+        gap: 10px 30px;
+        margin-bottom: 200px;
+    }
+    .event-item {
+        padding: 5px 15px;
+        flex-grow: 0;
+        width: 200px;
+        min-height: 250px;
+        border: #ff9900 solid 2px;
+        transition-duration: 0.25s;
+        transition-property: box-shadow;
+    }
+    .event-item:hover {
+        -webkit-box-shadow:0px 0px 128px 10px rgba(255,153,0,0.9);
+        -moz-box-shadow: 0px 0px 128px 10px rgba(255,153,0,0.9);
+        box-shadow: 0px 0px 128px 10px rgba(255,153,0,0.9);
+    }
+    .event-date {
+        font-size: smaller;
+    }
+    .event-title {
+        font-family: "League Spartan", sans-serif;
+    }
+    
 </style>
 {% endblock %}
 
 {% block body %}
 
 <div class="hero-wrapper">
-    <h1 class="hero-title-sm">{{ this.title }}</h1>
-    <h2 class="hero-subtitle">{{ this.date }}</h2>
+    <h1 class="hero-title">{{ this.title }}</h1>
+    <h2 class="hero-subtitle">{{ this.date|dateformat("EEEE, dd.MM.YYYY", locale="de_DE") }}</h2>
 </div>
 <div>
     <a href="/30/"><< go back</a>
@@ -54,7 +109,9 @@ <h2 class="hero-subtitle">{{ this.date }}</h2>
     Eventpat(e/in): {{ this.pate }}
 </div>
 
+{% if this.calendar_link %}
 <div>
     Event <a href="{{ this.calendar_link }}">im Kalender anzeigen</a>.
 </div>
+{% endif %}
 {% endblock %}