rnsrk/open-productive-stack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Drupal headless stack with Next.js frontend

Browse source 
- Add Next.js frontend service (nextjs) with Dockerfile and source
- Update docker-compose.yml: image names, Drupal 11.3.3, nextjs service
- Add docker-compose.override.yml.disabled for dev hot-reload
- Add install-headless-modules.sh for OAuth/JSON:API module setup
- Add README.md with full setup and configuration guide
- Update nginx/Dockerfile and nginx.conf.template for cms. subdomain
- Update drupal/Dockerfile PHP-FPM build args
- Gitignore **/.vscode/ to prevent IDE workspace files from being tracked
This commit is contained in:
rnsrk 2026-03-30 11:14:17 +02:00
parent 71a8dac389
commit f8b8f53d54
85 changed files with 7802 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

307
drupal/nextjs/app/globals.css Normal file
View file

@ -0,0 +1,307 @@
@import "tailwindcss";
:root {
--accent: var(--color-emerald-600);
--accent-hex: #e11d48;
--fluid-hero: clamp(1.75rem, 4vw + 1rem, 3.75rem);
--fluid-hero-desc: clamp(1rem, 1.5vw + 0.75rem, 1.25rem);
--fluid-section-title: clamp(1.5rem, 3vw + 0.75rem, 1.875rem);
/* Fade-in on load: About starts when hero title animation ends (~2.1s), Services after About. */
--fade-about-delay: 2.1s;
--fade-about-duration: 1.2s;
--fade-services-delay: 2.5s;
--fade-services-duration: 1.2s;
}
/* Footer link icons: tint to emerald on link hover/focus (icons are img/SVG with fixed fill). */
.group:hover .footer-icon-hover-emerald,
.group:focus-visible .footer-icon-hover-emerald {
filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(130deg) brightness(95%) contrast(101%);
}
@layer base {
a {
@apply transition-colors duration-200 ease-out;
}
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
.animate-fade-in-up {
animation: fade-in-up 0.6s ease-out forwards;
}
.animate-fade-in-on-load {
animation: fade-in var(--fade-about-duration) ease-in-out var(--fade-about-delay) both;
}
.animate-fade-in-on-load-delayed {
animation: fade-in var(--fade-services-duration) ease-in-out var(--fade-services-delay) both;
}
.animate-delay-100 {
animation-delay: 100ms;
}
.animate-delay-200 {
animation-delay: 200ms;
}
.animate-delay-300 {
animation-delay: 300ms;
}
.animate-marquee {
animation: marquee 30s linear infinite;
}
.animate-marquee-slow {
animation: marquee 60s linear infinite;
}
.home-clients-band {
mask-image: linear-gradient(
to right,
transparent 0%,
black 8%,
black 92%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
black 8%,
black 92%,
transparent 100%
);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-spin-slow {
animation: spin 8s linear infinite;
}
.animate-spin-once {
animation: spin 0.5s ease-in-out 1 forwards;
}
@keyframes coin-spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(720deg);
}
}
.animate-coin-spin {
animation: coin-spin 0.6s ease-in-out 1 forwards;
}
/* Hero title letter animations. */
@keyframes letter-from-down {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes letter-from-up {
from {
opacity: 0;
transform: translateY(-100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes letter-b-exit {
0% {
opacity: 0;
transform: translateY(-100%);
}
20% {
opacity: 1;
transform: translateY(0);
}
50% {
opacity: 1;
transform: translateY(0);
}
51% {
opacity: 0;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(0);
}
}
@keyframes letter-o-in-out {
0% {
opacity: 0;
transform: translateY(-100%);
}
20% {
opacity: 1;
transform: translateY(0);
}
70% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-100%);
}
}
@keyframes letter-e-fade-in {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* t: appears with o (Robot), stays, then slides right as r appears. */
@keyframes letter-t-slide {
0% {
opacity: 0;
transform: translateY(-100%) translateX(-0.7ch);
}
20% {
opacity: 1;
transform: translateY(-0.45em) translateX(-0.7ch);
}
55% {
opacity: 1;
transform: translateY(-0.45em) translateX(-0.7ch);
}
100% {
opacity: 1;
transform: translateY(-0.45em) translateX(2px);
}
}
.animate-letter-from-down {
animation: letter-from-down 0.5s ease-out both;
}
.animate-letter-from-up {
animation: letter-from-up 0.5s ease-out both;
}
.animate-letter-b-exit {
animation: letter-b-exit 0.9s ease-out both;
}
.animate-letter-o-in-out {
animation: letter-o-in-out 1.5s ease-out both;
}
.animate-letter-e-fade-in {
animation: letter-e-fade-in 0.5s ease-out both;
}
.animate-letter-t-slide {
animation: letter-t-slide 0.9s ease-out both;
}
.hero-letter-t {
overflow: visible;
vertical-align: baseline;
}
.hero-letter-r {
position: relative;
}
.hero-letter-r::before {
content: "B";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
animation: letter-b-exit 0.6s ease-out both;
animation-delay: var(--b-delay, 320ms);
}
.hero-letter-e {
position: relative;
padding-right: 1px;
padding-left: 1px;
}
.hero-letter-e::before {
content: "o";
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
animation: letter-o-in-out 1.5s ease-out both;
animation-delay: var(--o-delay, 760ms);
}
.layout-footer-section {
margin: 0 auto;
}