Fix styling
This commit is contained in:
Philip Peterson
parent
ba4b140d94
commit
91b6b3af89
4 changed files with 181 additions and 9 deletions
47
Makefile
47
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)"
|
||||
|
|
|
|||
7
build.sh
Normal file → Executable file
7
build.sh
Normal file → Executable file
|
|
@ -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 "$@"
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<div class="bg-[linear-gradient(180deg,#83A1A1_0%,#86AAB6_100%)] pt-px">
|
||||
<section class="
|
||||
relative mt-[78px] min-h-[480px]
|
||||
relative md:mt-[78px] min-h-[480px]
|
||||
|
||||
/* This number, 78px is supposed to match the header height */
|
||||
/* This number, 78px is supposed to match the header height (only when header is fixed) */
|
||||
">
|
||||
|
||||
{# Box 1: Image — full-bleed on mobile, offset on sm+ #}
|
||||
<div class="absolute inset-0 flex pt-8 pb-8">
|
||||
<div class="absolute inset-0 flex sm:pt-8 sm:pb-8">
|
||||
<div class="hidden sm:block sm:basis-[8%] sm:grow-[2]"></div>
|
||||
<img
|
||||
src="/modules/custom/riverside_pt/images/hero.jpg"
|
||||
|
|
@ -19,23 +19,23 @@
|
|||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent sm:hidden"></div>
|
||||
|
||||
{# Box 2: Text — spacer 50% | text 40% | spacer 10% #}
|
||||
<div class="relative flex min-h-[480px] py-4">
|
||||
<div class="relative flex min-h-[480px] pt-0 pb-4">
|
||||
<div class="hidden sm:block sm:basis-[50%] sm:grow-[2]"></div>
|
||||
<div class="basis-full sm:basis-[40%] sm:grow flex flex-col justify-end sm:justify-center px-6 sm:px-0 sm:pb-0 gap-[1vw]">
|
||||
<h1
|
||||
class="mt-0 mb-[1vw] text-[clamp(1.5rem,3.5vw,3.25rem)] font-serif font-normal text-white leading-tight [text-shadow:-56.21px_2.55px_10.22px_#0000001A]"
|
||||
class="mt-0 mb-[1vw] text-[clamp(1.5rem,3.5vw,3.25rem)] font-serif font-normal text-white leading-none [text-shadow:-56.21px_2.55px_10.22px_#0000001A]"
|
||||
>
|
||||
Restore your strength.<br>Reclaim your life.
|
||||
</h1>
|
||||
<p class="text-white/80 leading-tight text-[1.5vw]">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.</p>
|
||||
<p class="text-white/80 leading-tight text-[clamp(1rem,2vw,1.5vw)]">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.</p>
|
||||
<div class="flex gap-4 flex-wrap items-center mt-[2vw]">
|
||||
<a
|
||||
href="/schedule"
|
||||
class="w-full sm:w-auto text-center text-[1vw] px-[4em] py-[1em] bg-[#306f8e] text-white font-medium no-underline transition-colors hover:bg-[#1f5a6e]"
|
||||
class="w-full sm:w-auto text-center max-sm:text-sm sm:text-[clamp(0.25rem,1vw,1.25vw)] px-[4em] py-[1em] bg-[#306f8e] text-white font-medium no-underline transition-colors border-2 border-[#306f8e] hover:bg-[#1f5a6e] hover:border-[#1f5a6e]"
|
||||
>Book An Appointment</a>
|
||||
<a
|
||||
href="/services"
|
||||
class="hidden sm:inline-block text-[1vw] px-[4em] py-[1em] border border-white/60 text-white font-medium no-underline transition-colors hover:bg-white/10"
|
||||
class="hidden sm:inline-block text-[clamp(0.25rem,1vw,1.25vw)] px-[4em] py-[1em] bg-[#86AAB6] text-white font-medium no-underline transition-colors border-2 border-white hover:bg-[#6f8f96]"
|
||||
>View Our Services</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue