Cloonar/dialog-relations-website
2
0
Fork 0
Code Pull Requests Actions Activity

feat: many changes

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2025-04-20 12:03:59 +02:00
parent 6c9d8966b0
commit 983436da32
6 changed files with 224 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
flake.nix Normal file
View File

@@ -0,0 +1,83 @@
{
description = "Dialog Relations VSCode workspace";
inputs = {
nixpkgs.url = "github:nixos/nixpkgs/nixpkgs-unstable";
mcp-servers-nix = {
url = "github:natsukium/mcp-servers-nix";
inputs.nixpkgs.follows = "nixpkgs";
};
};
outputs =
{
nixpkgs,
mcp-servers-nix,
...
}:
let
inherit (nixpkgs) lib;
forAllSystems = lib.genAttrs [
"aarch64-darwin"
"aarch64-linux"
"x86_64-darwin"
"x86_64-linux"
];
in
{
devShells = forAllSystems (
system:
let
pkgs = import nixpkgs {
inherit system;
config.allowUnfree = true;
};
in
{
default = pkgs.mkShell {
packages = with pkgs; [ vscode ];
shellHook =
let
config = mcp-servers-nix.lib.mkConfig pkgs {
fileName = "mcp.json";
flavor = "vscode-workspace";
programs = {
filesystem = {
enable = true;
args = [
# NOTE: Using builtins.getEnv requires running `nix develop` with --impure flag
"${toString (builtins.getEnv "PWD")}"
];
};
fetch = {
enable = true;
};
# github = {
# enable = true;
# env = {
# GITHUB_PERSONAL_ACCESS_TOKEN = ''''${input:github_token}'';
# };
# };
};
settings.inputs = [
# {
# type = "promptString";
# id = "github_token";
# description = "GitHub Personal Access Token";
# password = true;
# }
];
};
in
''
if [ -L ".vscode/mcp.json" ]; then
unlink .vscode/mcp.json
fi
mkdir -p .vscode
ln -sf ${config} .vscode/mcp.json
'';
};
}
);
};
}

122
packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
View File

@@ -1,58 +1,114 @@
<f:layout name="Default" /> <f:layout name="FullWidth" />
<!-- No extra heading from the parent layout -->
<f:section name="Header" /> <f:section name="Header" />
<f:section name="Main"> <f:section name="Main">
<div class="py-12 px-4 max-w-6xl mx-auto"> <div class="md:flex">
<div class="flex flex-col items-start lg:grid lg:grid-cols-[1fr_auto_auto] lg:grid-rows-[auto_auto_1fr] lg:gap-x-8 lg:items-start lg:justify-items-start lg:text-left">
<h2 class="text-3xl text-primary mb-0 leading-none lg:text-5xl lg:col-start-1 lg:row-start-1">{data.subheader}</h2> <!-- LEFT: blue background + image -->
<h1 class="uppercase text-6xl text-primary leading-none mb-8 lg:text-7xl lg:col-start-1 lg:row-start-2">{data.header}</h1> <div class="relative bg-primary md:w-3/5 py-16 flex justify-end">
<div class="text-base text-gray-700 leading-snug mb-4 max-w-[45ch] lg:text-base lg:max-w-[40ch] lg:mb-6 lg:col-start-1 lg:row-start-3"> <!-- picture wrapper for relative positioning -->
<f:format.html>{data.bodytext}</f:format.html> <div class="relative w-3/4">
</div>
<div class="flex gap-2 mb-4 lg:flex-col lg:gap-4 lg:mb-0 lg:items-start lg:self-center lg:col-start-3 lg:row-start-1 lg:row-span-3">
<a href="https://www.instagram.com/lena.ats/" target="_blank" aria-label="Lena Schillings Instagram" class="btn inline-flex items-center justify-center text-base p-4 rounded-full transition duration-300 bg-yellow text-primary hover:bg-primary-light hover:text-white md:p-6 md:text-3xl"><i class="ci ci-instagram"></i></a>
<a href="https://www.tiktok.com/@dieschilling" target="_blank" aria-label="Lena Schillings TikTok" class="btn inline-flex items-center justify-center text-base p-4 rounded-full transition duration-300 bg-yellow text-primary hover:bg-primary-light hover:text-white md:p-6 md:text-3xl"><i class="ci ci-tiktok"></i></a>
</div>
<div class="mt-4 self-end w-full lg:mt-0 lg:flex lg:items-center lg:justify-center lg:col-start-2 lg:row-start-1 lg:row-span-3">
<f:if condition="{data.image}"> <f:if condition="{data.image}">
<f:then> <f:then>
<figure> <picture class="block w-full object-cover">
<!-- WEBP source --> <!-- webp / fallback sources as before… -->
<source <source
type="image/webp" type="image/webp"
srcset=" srcset="
{f:uri.image(image:data.image.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w, {f:uri.image(image:data.image.0, width:'320c', fileExtension:'webp')} 320w,
{f:uri.image(image:data.image.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w, {f:uri.image(image:data.image.0, width:'768c', fileExtension:'webp')} 768w,
{f:uri.image(image:data.image.0, width:'430c', cropVariant:'default', fileExtension:'webp')} 1024w" {f:uri.image(image:data.image.0, width:'1024c', fileExtension:'webp')} 1024w"
sizes="(max-width: 320px) 80vw, sizes="(max-width: 768px) 80vw, 430px" />
(max-width: 768px) 80px,
430px" />
<!-- Fallback source -->
<source <source
srcset=" srcset="
{f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w, {f:uri.image(image:data.image.0, width:'320c')} 320w,
{f:uri.image(image:data.image.0, width:'600c', cropVariant:'default')} 600w, {f:uri.image(image:data.image.0, width:'768c')} 768w,
{f:uri.image(image:data.image.0, width:'430c', cropVariant:'default')} 1024w" {f:uri.image(image:data.image.0, width:'1024c')} 1024w"
sizes="(max-width: 320px) 80vw, sizes="(max-width: 768px) 80vw, 430px" />
(max-width: 768px) 80vw,
430px" />
<f:image <f:image
image="{data.image.0}" image="{data.image.0}"
treatIdAsReference="1" treatIdAsReference="1"
fetchpriority="high" fetchpriority="high"
cropVariant="default" cropVariant="default"
width="430c" width="1024c"
alt="Hero Image" alt="Hero Image"
loading="lazy" loading="lazy"
class="w-full h-auto rounded-lg" /> class="w-full h-auto"
</figure> />
</picture>
</f:then> </f:then>
<f:else> <f:else>
<p>No image available</p> <p class="w-full text-center text-white">No image available</p>
</f:else> </f:else>
</f:if> </f:if>
<!-- arrow: half‑out on right edge -->
<div class="absolute top-1/2 -translate-y-1/2 right-[-2rem] z-20">
<a href="#next-section"
class="bg-primary border-4 border-white rounded-full p-5 inline-flex items-center justify-center hover:bg-opacity-90">
<span class="sr-only">Scroll down</span>
<svg xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19 9l-7 7-7-7" />
</svg>
</a>
</div>
</div>
</div>
<!-- RIGHT: text & socials -->
<div class="md:w-2/5 px-6 py-12 md:py-0 md:px-16 flex flex-col justify-center">
<!-- Mobile: simple centered intro -->
<div class="block md:hidden text-center space-y-2 mb-8">
<div class="text-sm uppercase tracking-wide text-gray-600">
Hallo, wir sind
</div>
<h1 class="text-3xl font-extrabold">
Dialog Relations
</h1>
<p class="text-base text-gray-800">
Sorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
</p>
</div>
<!-- Desktop: line + intro -->
<div class="hidden md:block space-y-4">
<!-- horizontal line + text -->
<div class="flex items-center space-x-3 mb-2">
<span class="block h-px w-10 bg-gray-600"></span>
<div class="text-sm uppercase tracking-wide text-gray-600">
Hallo, wir sind
</div>
</div>
<h1 class="text-5xl font-extrabold">
Dialog Relations
</h1>
<p class="text-lg text-gray-800 max-w-md">
Sorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
</p>
</div>
<!-- Social icons -->
<div class="mt-8 flex justify-center md:justify-start space-x-4">
<a href="#" class="bg-primary text-white p-3 rounded-full">
<span class="sr-only">LinkedIn</span>
<svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
</a>
<a href="#" class="bg-primary text-white p-3 rounded-full">
<span class="sr-only">Instagram</span>
<svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
</a>
<a href="#" class="bg-primary text-white p-3 rounded-full">
<span class="sr-only">Facebook</span>
<svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
</a>
</div> </div>
</div> </div>
</div> </div>

9
packages/base/Resources/Private/ContentElements/Layouts/FullWidth.html Normal file
View File

@@ -0,0 +1,9 @@
<div class="frame frame-type-{data.CType}">
<f:render section="Header" optional="true" />
<f:render section="Main" optional="true" />
</div>
<f:section name="Header">
<div class="header">
<h2>{data.header}</h2>
</div>
</f:section>

28
packages/base/Resources/Private/PageView/Partials/Navigation/Main.html
View File

@@ -1,23 +1,29 @@
<nav class="main-nav" id="mainNav"> <nav class="main-nav group sticky top-0 z-50 bg-repeat" id="mainNav">
<div class="container"> <div class="container flex items-center h-full mx-auto px-4">
<a href="/" class="nav-logo"> <a href="/" class="nav-logo">
<f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Logo" /> <f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Logo" class="block max-h-[50px] h-auto w-auto" />
</a> </a>
<button class="nav-toggle" id="navToggle" aria-label="Toggle Menu"> <button class="nav-toggle group lg:hidden relative w-[30px] h-[30px] cursor-pointer ml-auto bg-none border-none" id="navToggle" aria-label="Toggle Menu">
<span class="nav-toggle-icon"></span> <span class="nav-toggle-icon block relative w-full h-[2px] bg-primary transition-all duration-300
before:content-[''] before:block before:absolute before:w-full before:h-[2px] before:bg-primary before:left-0 before:-top-[8px] before:transition-all before:duration-300
after:content-[''] after:block after:absolute after:w-full after:h-[2px] after:bg-primary after:left-0 after:top-[8px] after:transition-all after:duration-300
group-[.active]:bg-transparent group-[.active]:before:rotate-45 group-[.active]:before:translate-x-[5px] group-[.active]:before:translate-y-[5px]
group-[.active]:after:-rotate-45 group-[.active]:after:translate-x-[5px] group-[.active]:after:-translate-y-[5px]"></span>
</button> </button>
<ul class="nav-links" id="navLinks"> <ul class="nav-links flex items-center list-none mx-auto font-hajime text-primary
lg:flex lg:relative lg:top-auto lg:left-auto lg:right-auto lg:flex-row lg:max-h-full lg:overflow-visible lg:bg-transparent
absolute top-full left-0 right-0 flex-col max-h-0 overflow-hidden bg-white transition-max-height duration-400 ease-in-out group-[.open]:max-h-[500px]" id="navLinks">
<f:for each="{mainnavigation}" as="mainnavigationItem"> <f:for each="{mainnavigation}" as="mainnavigationItem">
<li class="nav-item{f:if(condition: mainnavigationItem.active, then:' active')}{f:if(condition: mainnavigationItem.children, then:' has-submenu')}"> <li class="nav-item lg:mx-4 lg:my-0 lg:p-0 lg:border-0 mx-0 my-0 p-4 border-t border-black/10 first:border-t-0 {f:if(condition: mainnavigationItem.active, then:' active')}{f:if(condition: mainnavigationItem.children, then:' has-submenu')}">
<a href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}"> <a href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}" class="nav-link block lg:inline-block no-underline text-primary font-bold uppercase tracking-[0.05em] text-sm transition-colors duration-300 hover:text-brand">
{mainnavigationItem.title} {mainnavigationItem.title}
</a> </a>
<f:if condition="{mainnavigationItem.children}"> <f:if condition="{mainnavigationItem.children}">
<ul class="sub-menu"> <ul class="sub-menu hidden lg:absolute lg:block lg:opacity-0 lg:invisible lg:group-hover:opacity-100 lg:group-hover:visible lg:bg-white lg:shadow-md lg:mt-2 lg:py-2 lg:rounded lg:border lg:border-gray-200">
<f:for each="{mainnavigationItem.children}" as="child"> <f:for each="{mainnavigationItem.children}" as="child">
<li class="{f:if(condition: child.active, then:'active')}"> <li class="{f:if(condition: child.active, then:'active')} lg:px-4 lg:py-2 hover:bg-gray-100">
<a class="nav-link" href="{child.link}" target="{child.target}" title="{child.title}"> <a class="nav-link block text-sm text-primary hover:text-brand" href="{child.link}" target="{child.target}" title="{child.title}">
{child.title} {child.title}
</a> </a>
</li> </li>

2
packages/base/Resources/Public/Scss/components/_navigation.scss
View File

@@ -15,8 +15,6 @@ body > header {
} }
.main-nav { .main-nav {
background: url('../Images/background.jpg') repeat;
.container { .container {
display: flex; display: flex;
align-items: center; align-items: center;

11
tailwind.config.js
View File

@@ -10,18 +10,27 @@ module.exports = {
], ],
theme: { theme: {
extend: { extend: {
transitionProperty: {
'max-height': 'max-height' // Add max-height to transition properties
},
fontFamily: { fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans], sans: ['Inter', ...defaultTheme.fontFamily.sans],
hajime: ['"Hajime Sans"', ...defaultTheme.fontFamily.sans], hajime: ['"Hajime Sans"', ...defaultTheme.fontFamily.sans],
}, },
colors: { colors: {
primary: { primary: {
DEFAULT: '#233600', DEFAULT: '#0B197D', // Use SCSS primary color for text
dark: '#1C2B00', dark: '#1C2B00',
light: '#4E5E32', light: '#4E5E32',
'brand-blue': '#0B197D',
}, },
yellow: '#F5AE07', yellow: '#F5AE07',
'light-green': '#F4F6EC', 'light-green': '#F4F6EC',
brand: '#6B8E23', // Added brand color for hover states from SCSS
},
maxHeight: {
'0': '0',
'[500px]': '500px', // Add specific max-height for mobile menu transition
} }
}, },
}, },