diff --git a/_headers b/_headers new file mode 100644 index 0000000..889d649 --- /dev/null +++ b/_headers @@ -0,0 +1,22 @@ +# Cache-Control for static, stable-by-filename assets +/img/* + Cache-Control: public, max-age=2592000 +/favicon.svg + Cache-Control: public, max-age=2592000 +/favicon-16.png + Cache-Control: public, max-age=2592000 +/favicon-32.png + Cache-Control: public, max-age=2592000 +/apple-touch-icon.png + Cache-Control: public, max-age=2592000 + +# CSS/JS have no cache-busting hash yet; cache modestly +/css/* + Cache-Control: public, max-age=86400 +/js/* + Cache-Control: public, max-age=86400 + +# Baseline security headers on every response +/* + X-Content-Type-Options: nosniff + Referrer-Policy: strict-origin-when-cross-origin diff --git a/css/components/_grid.scss b/css/components/_grid.scss new file mode 100644 index 0000000..e07f2a8 --- /dev/null +++ b/css/components/_grid.scss @@ -0,0 +1,49 @@ +// Minimal grid & utilities — self-hosted replacement for the small subset of +// Bootstrap 4 this site used. Removes a render-blocking ~160 KB external +// stylesheet. Breakpoint lg = 992px (one past $m-break: 991px). + +.container { + width: 100%; + max-width: 1140px; + margin-left: auto; + margin-right: auto; + padding-left: 15px; + padding-right: 15px; +} + +.row { + display: flex; + flex-wrap: wrap; + margin-left: -15px; + margin-right: -15px; + + > [class*="col-"] { + position: relative; + width: 100%; + padding-left: 15px; + padding-right: 15px; + } +} + +// mobile-first: columns are full width until the lg breakpoint +[class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; } + +.align-items-center { align-items: center; } +.text-center { text-align: center; } +.mb-4 { margin-bottom: 1.5rem; } + +.table-responsive { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +@media (min-width: 992px) { + .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } + .col-lg-6 { flex: 0 0 50%; max-width: 50%; } + .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } + .order-lg-1 { order: 1; } + .order-lg-2 { order: 2; } + .mb-lg-0 { margin-bottom: 0; } +} diff --git a/css/main.css b/css/main.css index 7cf77f4..6ae1480 100644 --- a/css/main.css +++ b/css/main.css @@ -34,9 +34,71 @@ html { scroll-behavior: smooth; } p, a, li, span, div, td, th { font-family: "Lato", sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: "Libre Baskerville", serif; } -img { max-width: 100%; } +img { max-width: 100%; vertical-align: middle; } +h1, h2, h3, h4, h5, h6 { margin-top: 0; } +p { margin-top: 0; margin-bottom: 1rem; } + +/* ============================================================ + MINIMAL GRID & UTILITIES + Self-hosted replacement for the small subset of Bootstrap 4 + this site used (grid, a few utilities, button base). Removes a + render-blocking ~160 KB external stylesheet. Breakpoint lg = 992px. + ============================================================ */ +.container { + width: 100%; + max-width: 1140px; + margin-left: auto; + margin-right: auto; + padding-left: 15px; + padding-right: 15px; +} +.row { + display: flex; + flex-wrap: wrap; + margin-left: -15px; + margin-right: -15px; +} +.row > [class*="col-"] { + position: relative; + width: 100%; + padding-left: 15px; + padding-right: 15px; +} +/* mobile-first: columns are full width until the lg breakpoint */ +[class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; } + +.align-items-center { align-items: center; } +.text-center { text-align: center; } + +.mb-4 { margin-bottom: 1.5rem; } + +.table-responsive { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +@media (min-width: 992px) { + .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } + .col-lg-6 { flex: 0 0 50%; max-width: 50%; } + .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } + .order-lg-1 { order: 1; } + .order-lg-2 { order: 2; } + .mb-lg-0 { margin-bottom: 0; } +} /* ---------- Buttons ---------- */ +.btn { + display: inline-block; + vertical-align: middle; + text-align: center; + border: 1px solid transparent; + line-height: 1.5; + cursor: pointer; + text-decoration: none; + user-select: none; +} .btn { font-family: "Libre Baskerville", serif; font-size: 14px; @@ -46,10 +108,18 @@ img { max-width: 100%; } } .btn + .btn { margin-left: 0.5rem; } +.btn-light { + color: #212529; + background-color: #f8f9fa; + border-color: #f8f9fa; +} + .btn-primary { + color: var(--white); background-color: var(--gold); border-color: var(--gold); } +.btn-primary:hover { color: var(--white); } .btn-primary:hover { background-color: var(--gold-dark); border-color: var(--gold-dark); diff --git a/css/main.scss b/css/main.scss index 743abf5..69b92dc 100644 --- a/css/main.scss +++ b/css/main.scss @@ -22,9 +22,19 @@ $l-break: 1199px; * { box-sizing: border-box; } +@import 'components/grid'; + //btns .btn { @include Libre; + display: inline-block; + vertical-align: middle; + text-align: center; + border: 1px solid transparent; + line-height: 1.5; + cursor: pointer; + text-decoration: none; + user-select: none; font-size: 14px; letter-spacing: 0.3px; padding: 0.55rem 1.5rem; @@ -33,10 +43,19 @@ $l-break: 1199px; & + .btn { margin-left: 0.5rem; } } +.btn-light { + color: #212529; + background-color: #f8f9fa; + border-color: #f8f9fa; +} + .btn-primary { + color: $white; background-color: $gold; border-color: $gold; + &:hover { color: $white; } + &:hover { background-color: darken($gold, 10%); border-color: darken($gold, 10%); @@ -73,9 +92,12 @@ p, a, li, span, div, td, th { h1, h2, h3, h4, h5, h6 { @include Libre; + margin-top: 0; } -img { max-width: 100%; } +p { margin-top: 0; margin-bottom: 1rem; } + +img { max-width: 100%; vertical-align: middle; } .page-content { padding-top: 92px; diff --git a/index.html b/index.html index 9a8faf4..70b653c 100644 --- a/index.html +++ b/index.html @@ -19,8 +19,6 @@ - - @@ -87,7 +85,7 @@

Create lifelong memories with your family in a luxury, custom home within a secure and quiet community. Welcome home to Pine Creek.

- A stately custom stone home in Pine Creek + A stately custom stone home in Pine Creek
@@ -106,9 +104,9 @@
- Tuscan-style Vineyard home with terracotta tile roof - Mediterranean-style Vineyard home with terracotta tile roof - Spanish-Tuscan Vineyard estate with stucco and stone + Tuscan-style Vineyard home with terracotta tile roof + Mediterranean-style Vineyard home with terracotta tile roof + Spanish-Tuscan Vineyard estate with stucco and stone
- Map of the Pine Creek community streets + Map of the Pine Creek community streets
@@ -220,14 +218,14 @@

The town is conveniently located right off I-85, within 30 minutes of uptown Charlotte and Charlotte Douglas International Airport. With growing businesses, a vast array of shops and restaurants, a beautiful downtown, sought-after Cabarrus County and private schools, and the grandeur of the NC Research Campus, Kannapolis is a wonderful place to call home.

- Downtown Kannapolis, North Carolina + Downtown Kannapolis, North Carolina
+ loading="lazy" decoding="async" referrerpolicy="no-referrer-when-downgrade" allowfullscreen>