From 91b6b3af89374c4bd8802b23ab3ec320151d8f09 Mon Sep 17 00:00:00 2001 From: Philip Peterson <1326208+philip-peterson@users.noreply.github.com> Date: Wed, 27 May 2026 23:42:59 -0700 Subject: [PATCH] Fix styling --- Makefile | 47 +++++++ build.sh | 7 +- web/modules/custom/riverside_pt/css/app.css | 120 ++++++++++++++++++ .../templates/riverside-pt-home.html.twig | 16 +-- 4 files changed, 181 insertions(+), 9 deletions(-) mode change 100644 => 100755 build.sh diff --git a/Makefile b/Makefile index 1691e5d..ca7182b 100644 --- a/Makefile +++ b/Makefile @@ -6,3 +6,50 @@ drush: %: @: + +# ============================================================================= +# Docker build & publish targets +# Target registry: forge.quinefoundation.com/ironmagma/riverside +# ============================================================================= + +REGISTRY ?= forge.quinefoundation.com/ironmagma +IMAGE ?= riverside +TAG ?= latest +PLATFORM ?= linux/amd64,linux/arm64 + +IMAGE_NAME := $(REGISTRY)/$(IMAGE):$(TAG) + +.PHONY: docker-build docker-push docker-push-latest help + +# Build the multi-arch image locally (does NOT push) +docker-build: + docker buildx build --platform $(PLATFORM) -t $(IMAGE_NAME) . + +# Build (if needed) + push to the registry +docker-push: + docker buildx build --platform $(PLATFORM) -t $(IMAGE_NAME) --push . + +# Convenience: push the :latest tag to Forge (will build if necessary) +docker-push-latest: + $(MAKE) docker-push TAG=latest + +# Two-step workflow example: +# 1. make docker-build # build locally first +# 2. make docker-push-latest # then push to forge.../riverside:latest + +help: + @echo "Docker image targets (pushes to $(REGISTRY)/$(IMAGE))" + @echo "" + @echo " make docker-build Build multi-arch image locally (no push)" + @echo " make docker-push Build + push $(IMAGE_NAME)" + @echo " make docker-push-latest Push to $(REGISTRY)/$(IMAGE):latest" + @echo "" + @echo "Two-step workflow (build first, then push to latest):" + @echo " make docker-build" + @echo " make docker-push-latest" + @echo "" + @echo "Variables (can be overridden):" + @echo " REGISTRY=$(REGISTRY)" + @echo " IMAGE=$(IMAGE)" + @echo " TAG=$(TAG)" + @echo " PLATFORM=$(PLATFORM)" diff --git a/build.sh b/build.sh old mode 100644 new mode 100755 index db1e8ed..fcb2190 --- a/build.sh +++ b/build.sh @@ -1 +1,6 @@ - docker buildx build --platform linux/amd64,linux/arm64 -t forge.quinefoundation.com/ironmagma/riverside:latest --push . +#!/usr/bin/env bash +# Convenience wrapper for the Makefile +set -euo pipefail + +make docker-build-push "$@" + diff --git a/web/modules/custom/riverside_pt/css/app.css b/web/modules/custom/riverside_pt/css/app.css index cf64dba..b924c38 100644 --- a/web/modules/custom/riverside_pt/css/app.css +++ b/web/modules/custom/riverside_pt/css/app.css @@ -635,6 +635,10 @@ video { position: static; } +.fixed{ + position: fixed; +} + .absolute{ position: absolute; } @@ -768,6 +772,10 @@ video { height: 100%; } +.max-h-\[90\%\]{ + max-height: 90%; +} + .min-h-\[480px\]{ min-height: 480px; } @@ -982,6 +990,11 @@ video { border-color: rgb(255 255 255 / 0.6); } +.border-white{ + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); +} + .bg-\[\#1e3a5f\]{ --tw-bg-opacity: 1; background-color: rgb(30 58 95 / var(--tw-bg-opacity, 1)); @@ -1014,6 +1027,11 @@ video { background-color: rgb(255 255 255 / 0.9); } +.bg-\[\#86AAB6\]{ + --tw-bg-opacity: 1; + background-color: rgb(134 170 182 / var(--tw-bg-opacity, 1)); +} + .bg-\[linear-gradient\(180deg\2c \#83A1A1_0\%\2c \#86AAB6_100\%\)\]{ background-image: linear-gradient(180deg,#83A1A1 0%,#86AAB6 100%); } @@ -1047,6 +1065,11 @@ video { object-position: center 0%; } +.object-center{ + -o-object-position: center; + object-position: center; +} + .p-0{ padding: 0px; } @@ -1157,6 +1180,10 @@ video { padding-top: 1px; } +.pt-2{ + padding-top: 0.5rem; +} + .text-center{ text-align: center; } @@ -1235,6 +1262,54 @@ video { line-height: 1rem; } +.text-\[clamp\(1rem\2c 2vw\2c 1\.5vw\)\]{ + font-size: clamp(1rem, 2vw, 1.5vw); +} + +.text-\[clamp\(1rem\2c 1\.5vw\2c 1\.25vw\)\]{ + font-size: clamp(1rem, 1.5vw, 1.25vw); +} + +.text-\[clamp\(1rem\2c 1\.4vw\2c 1\.5vw\)\]{ + font-size: clamp(1rem, 1.4vw, 1.5vw); +} + +.text-\[clamp\(1rem\2c 1\.2vw\2c 1\.3vw\)\]{ + font-size: clamp(1rem, 1.2vw, 1.3vw); +} + +.text-\[clamp\(0\.9rem\2c 1\.05vw\2c 1\.25vw\)\]{ + font-size: clamp(0.9rem, 1.05vw, 1.25vw); +} + +.text-\[clamp\(0\.75rem\2c 1vw\2c 1\.25vw\)\]{ + font-size: clamp(0.75rem, 1vw, 1.25vw); +} + +.text-\[clamp\(0\.55rem\2c 1vw\2c 1\.25vw\)\]{ + font-size: clamp(0.55rem, 1vw, 1.25vw); +} + +.text-\[clamp\(0\.5rem\2c 1vw\2c 1\.25vw\)\]{ + font-size: clamp(0.5rem, 1vw, 1.25vw); +} + +.text-\[clamp\(0\.45rem\2c 1vw\2c 1\.25vw\)\]{ + font-size: clamp(0.45rem, 1vw, 1.25vw); +} + +.text-\[clamp\(0\.4rem\2c 1vw\2c 1\.25vw\)\]{ + font-size: clamp(0.4rem, 1vw, 1.25vw); +} + +.text-\[clamp\(0\.25rem\2c 1vw\2c 1\.25vw\)\]{ + font-size: clamp(0.25rem, 1vw, 1.25vw); +} + +.text-\[clamp\(0\.2rem\2c 1vw\2c 1\.25vw\)\]{ + font-size: clamp(0.2rem, 1vw, 1.25vw); +} + .font-bold{ font-weight: 700; } @@ -1415,6 +1490,11 @@ video { background-color: rgb(255 255 255 / 0.1); } +.hover\:bg-\[\#6f8f96\]:hover{ + --tw-bg-opacity: 1; + background-color: rgb(111 143 150 / var(--tw-bg-opacity, 1)); +} + .hover\:text-\[\#1e3a8a\]:hover{ --tw-text-opacity: 1; color: rgb(30 58 138 / var(--tw-text-opacity, 1)); @@ -1434,6 +1514,18 @@ video { opacity: 0.3; } +@media not all and (min-width: 768px){ + .max-sm\:text-base{ + font-size: 1rem; + line-height: 1.5rem; + } + + .max-sm\:text-sm{ + font-size: 0.875rem; + line-height: 1.25rem; + } +} + @media (min-width: 768px){ .sm\:block{ display: block; @@ -1487,6 +1579,10 @@ video { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .sm\:items-center{ + align-items: center; + } + .sm\:justify-center{ justify-content: center; } @@ -1499,6 +1595,26 @@ video { .sm\:pb-0{ padding-bottom: 0px; } + + .sm\:pb-8{ + padding-bottom: 2rem; + } + + .sm\:pt-2{ + padding-top: 0.5rem; + } + + .sm\:pt-8{ + padding-top: 2rem; + } + + .sm\:text-\[clamp\(0\.2rem\2c 1vw\2c 1\.25vw\)\]{ + font-size: clamp(0.2rem, 1vw, 1.25vw); + } + + .sm\:text-\[clamp\(0\.25rem\2c 1vw\2c 1\.25vw\)\]{ + font-size: clamp(0.25rem, 1vw, 1.25vw); + } } @media (min-width: 1024px){ @@ -1522,6 +1638,10 @@ video { z-index: 50; } + .md\:mt-\[78px\]{ + margin-top: 78px; + } + .md\:hidden{ display: none; } diff --git a/web/modules/custom/riverside_pt/templates/riverside-pt-home.html.twig b/web/modules/custom/riverside_pt/templates/riverside-pt-home.html.twig index 2c63669..818a1ab 100644 --- a/web/modules/custom/riverside_pt/templates/riverside-pt-home.html.twig +++ b/web/modules/custom/riverside_pt/templates/riverside-pt-home.html.twig @@ -1,12 +1,12 @@
{# Box 1: Image — full-bleed on mobile, offset on sm+ #} -
+
{# Box 2: Text — spacer 50% | text 40% | spacer 10% #} -
+

Restore your strength.
Reclaim your life.

-

Every new patient starts with a comprehensive diagnostic assessment. From there we build a personalized plan that may include sports rehabilitation, pre- or post-surgical recovery, or neurological physical therapy.

+

Every new patient starts with a comprehensive diagnostic assessment. From there we build a personalized plan that may include sports rehabilitation, pre- or post-surgical recovery, or neurological physical therapy.

Book An Appointment