Initial commit: TechCare Hugo site
Hugo site scaffold with blog and hardware pages, layouts, styles, fonts, and image assets.
This commit is contained in:
@@ -0,0 +1,251 @@
|
||||
@font-face{font-family:Vollkorn;font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/vollkorn.woff2) format('woff2')}
|
||||
@font-face{font-family:Vollkorn;font-style:italic;font-weight:400 900;font-display:swap;src:url(/fonts/vollkorn-italic.woff2) format('woff2')}
|
||||
@font-face{font-family:"Fira Code";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/firacode.woff2) format('woff2')}
|
||||
|
||||
:root{
|
||||
--base:#E2E2E2;
|
||||
--contrast:#3B3B3B;
|
||||
--ink:#191919;
|
||||
--amber:#ffb43c;
|
||||
--orange:#e68b14;
|
||||
/* live's #a65a00 is only 2.9:1 on the amber hero; this darker shade keeps the
|
||||
hue and clears AA for body-size text */
|
||||
--rust:#7a4200;
|
||||
--purple:#650DD4;
|
||||
--line:#3B3B3B33;
|
||||
--pad:clamp(1.25rem,5vw,3.125rem);
|
||||
}
|
||||
|
||||
*,*::before,*::after{box-sizing:border-box}
|
||||
html{-webkit-text-size-adjust:100%}
|
||||
body{
|
||||
margin:0;
|
||||
background:var(--base);
|
||||
color:var(--contrast);
|
||||
font-family:"Fira Code",monospace;
|
||||
font-size:clamp(1rem,1rem + ((1vw - .2rem) * .196),1.125rem);
|
||||
font-weight:300;
|
||||
line-height:1.5;
|
||||
letter-spacing:-.18px;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
color:var(--ink);
|
||||
font-family:Vollkorn,serif;
|
||||
font-weight:400;
|
||||
line-height:1.125;
|
||||
letter-spacing:-.1px;
|
||||
margin:0 0 .5em;
|
||||
}
|
||||
h1{font-size:clamp(2.15rem,2.15rem + ((1vw - 3.2px) * 1.333),3rem);letter-spacing:-.96px}
|
||||
h2{font-size:clamp(1.75rem,1.75rem + ((1vw - 3.2px) * .392),2rem);letter-spacing:-.96px}
|
||||
h3{font-size:clamp(1.25rem,1.25rem + ((1vw - 3.2px) * 1.176),2rem);letter-spacing:-.64px}
|
||||
h4{font-size:1.25rem}
|
||||
p{margin:0 0 1.2em}
|
||||
p:last-child{margin-bottom:0}
|
||||
a{color:var(--purple);text-decoration-thickness:1px;text-underline-offset:.1em}
|
||||
a:hover{text-decoration-thickness:2px}
|
||||
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
|
||||
img{max-width:100%;height:auto}
|
||||
figure{margin:0}
|
||||
code{font-family:"Fira Code",monospace}
|
||||
ul,ol{margin:0 0 1.2em;padding-left:1.4em}
|
||||
li{margin:.35em 0}
|
||||
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
|
||||
blockquote{margin:0 0 1.2em;padding-left:1em;border-left:3px solid var(--line)}
|
||||
|
||||
.wrap{max-width:1340px;margin-inline:auto;padding-inline:var(--pad)}
|
||||
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
|
||||
.skip{position:absolute;left:-9999px}
|
||||
.skip:focus{left:1rem;top:1rem;z-index:10;background:#fff;color:#000;padding:.75rem}
|
||||
|
||||
/* header */
|
||||
.site-head{background:#000}
|
||||
.site-head__inner{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding-block:1.5rem}
|
||||
.site-title{margin:0;font-size:inherit;line-height:inherit}
|
||||
.site-title a{
|
||||
color:#fff;
|
||||
font-family:Vollkorn,serif;
|
||||
font-size:clamp(1.75rem,1.75rem + ((1vw - 3.2px) * .392),2rem);
|
||||
font-weight:700;
|
||||
letter-spacing:-.5px;
|
||||
text-decoration:none;
|
||||
}
|
||||
.site-title a:hover{text-decoration:underline}
|
||||
.site-head nav ul{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0}
|
||||
.site-head nav a{color:#fff;text-decoration:none}
|
||||
.site-head nav a:hover,.site-head nav a[aria-current]{text-decoration:underline}
|
||||
|
||||
/* hero */
|
||||
.hero{padding:clamp(2.5rem,6vw,5rem) var(--pad);margin-bottom:clamp(2rem,5vw,3.5rem)}
|
||||
.hero--amber{background:var(--amber);min-height:66vh;display:grid;align-content:center}
|
||||
.hero--orange{background:var(--orange);padding:clamp(3rem,7vw,7rem) var(--pad)}
|
||||
.hero--photo{
|
||||
background:var(--amber) var(--hero-sm,none) center 43%/cover no-repeat;
|
||||
color:#fff;
|
||||
min-height:30vh;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
}
|
||||
.hero--photo::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)}
|
||||
.hero--photo{position:relative}
|
||||
.hero--photo>*{position:relative}
|
||||
.hero__title{
|
||||
color:var(--ink);
|
||||
font-family:Vollkorn,serif;
|
||||
font-size:clamp(3rem,3rem + ((1vw - 3.2px) * 4.766),6.125rem);
|
||||
font-weight:700;
|
||||
letter-spacing:-2px;
|
||||
line-height:.9;
|
||||
text-transform:uppercase;
|
||||
margin:0 0 .25em;
|
||||
}
|
||||
.hero--photo .hero__title{color:#fff}
|
||||
.hero__title--light{color:#fff}
|
||||
.hero__title mark{color:var(--rust);background:none}
|
||||
.hero__sub{
|
||||
color:var(--rust);
|
||||
font-size:clamp(1.5rem,1.5rem + ((1vw - 3.2px) * 1.565),2.5rem);
|
||||
font-style:italic;
|
||||
font-weight:200;
|
||||
line-height:.9;
|
||||
text-transform:uppercase;
|
||||
text-align:center;
|
||||
margin:0;
|
||||
}
|
||||
.hero--orange .hero__title{
|
||||
text-align:right;
|
||||
font-size:clamp(67.975px,4.248rem + ((1vw - 3.2px) * 7.846),148px);
|
||||
letter-spacing:-4px;
|
||||
line-height:.8;
|
||||
}
|
||||
|
||||
/* about */
|
||||
.about{
|
||||
display:grid;
|
||||
grid-template-columns:1fr 1fr;
|
||||
gap:clamp(1.5rem,4vw,3rem);
|
||||
align-items:center;
|
||||
margin-bottom:clamp(2.5rem,7vw,5rem);
|
||||
}
|
||||
.about__art{position:relative}
|
||||
.about__art img{width:100%}
|
||||
.about__art .flower-grid{position:absolute;bottom:-4rem;right:-3rem;width:202px;border:6px solid var(--base)}
|
||||
@media (max-width:781px){.about{grid-template-columns:1fr}.about__art .flower-grid{width:120px;bottom:-2rem;right:0}}
|
||||
|
||||
/* services + cards */
|
||||
.services{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(3,1fr);
|
||||
gap:clamp(1.5rem,4vw,3rem);
|
||||
margin-bottom:clamp(2.5rem,5vw,3.5rem);
|
||||
}
|
||||
@media (max-width:781px){.services{grid-template-columns:1fr}}
|
||||
.services__img{aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:1.5rem}
|
||||
|
||||
.cards{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
|
||||
gap:clamp(1.25rem,3vw,2.5rem);
|
||||
margin-bottom:clamp(2.5rem,5vw,3.5rem);
|
||||
}
|
||||
.card{
|
||||
border:1px solid var(--line);
|
||||
border-radius:10px;
|
||||
padding:clamp(1.25rem,4vw,3.125rem);
|
||||
}
|
||||
.card h3{margin-top:0}
|
||||
.card p:last-child{margin-bottom:0}
|
||||
.cards ul{list-style:none;padding:0 0 .625rem;margin:0}
|
||||
.cards li{padding-inline-start:1.6ch;text-indent:-1.6ch;font-size:.875rem}
|
||||
.cards li::before{content:"✓\00a0";color:var(--purple)}
|
||||
|
||||
/* bordered card look, applied to pricing blocks */
|
||||
.split{
|
||||
display:grid;
|
||||
grid-template-columns:1fr 1fr;
|
||||
gap:clamp(1.5rem,4vw,3rem);
|
||||
align-items:center;
|
||||
margin-bottom:clamp(2.5rem,5vw,3.5rem);
|
||||
}
|
||||
@media (max-width:781px){.split{grid-template-columns:1fr}}
|
||||
.split__img{width:100%;aspect-ratio:4/3;object-fit:cover}
|
||||
|
||||
/* tables */
|
||||
/* live renders these spec tables with no cell borders and no header row */
|
||||
table{border-collapse:collapse;width:100%;margin:0 0 1.5em}
|
||||
table th,table td{padding:.4em .6em .4em 0;text-align:left;vertical-align:top}
|
||||
/* GFM needs a header row; live has none, so drop ours when it is empty */
|
||||
table thead:has(tr:only-child th:empty){display:none}
|
||||
|
||||
/* pill */
|
||||
.pill{
|
||||
display:inline-block;
|
||||
background:var(--purple);
|
||||
color:var(--base);
|
||||
border-radius:16px;
|
||||
font-size:1.125rem;
|
||||
padding:.2rem .6rem .25rem;
|
||||
}
|
||||
|
||||
/* qr */
|
||||
.qr{
|
||||
display:block;
|
||||
margin-inline:auto;
|
||||
max-width:100%;
|
||||
height:auto;
|
||||
border-radius:100px;
|
||||
}
|
||||
/* home crops the code into a rounded square, matching live */
|
||||
.qr--crop{width:min(425px,100%);aspect-ratio:1;object-fit:cover}
|
||||
/* hardware shows the full portrait code, matching live */
|
||||
.qr--full{width:min(459px,100%)}
|
||||
|
||||
/* posts */
|
||||
.posts{display:grid;gap:2.5rem;padding-bottom:clamp(2rem,5vw,3rem)}
|
||||
.post{border-bottom:1px solid var(--line);padding-bottom:2rem}
|
||||
.post:last-child{border-bottom:0}
|
||||
.post__date{color:var(--contrast);font-size:.875rem;margin:0 0 .35em}
|
||||
.post__title{margin:0 0 .5em}
|
||||
.post__title a{color:var(--ink);text-decoration:none}
|
||||
.post__title a:hover{text-decoration:underline}
|
||||
/* listing thumbnail; only the makeover post has one, matching live */
|
||||
.post__thumb{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;margin:0 0 1em}
|
||||
.post__excerpt{margin:0 0 .5em}
|
||||
.post__more{display:inline-block}
|
||||
.entry{max-width:52rem;margin-inline:auto;padding-bottom:2rem}
|
||||
.entry__title{margin:0 0 .75em}
|
||||
.entry img{border-radius:8px;margin-bottom:1.5em}
|
||||
/* post sections are h2/apps h3 for a clean outline; sizes match live's
|
||||
48px section / 38px app scale rather than the shared 32px defaults */
|
||||
.entry h2{font-size:clamp(2.15rem,2.15rem + ((1vw - 3.2px) * 1.333),3rem);letter-spacing:-.96px;margin-top:2em}
|
||||
.entry h3{font-size:clamp(1.75rem,1.75rem + ((1vw - 3.2px) * .622),2.375rem);letter-spacing:-.96px;margin-top:1.6em}
|
||||
/* the makeover featured image is full-width at 3/2, matching live */
|
||||
.post__figure{width:100%;aspect-ratio:3/2;object-fit:cover}
|
||||
.app-icon{width:120px;height:auto;margin:0 0 .5em}
|
||||
.post-hero{width:223px;max-width:100%;height:auto}
|
||||
.entry-img{width:383px;max-width:100%;height:auto}
|
||||
|
||||
/* footer */
|
||||
.site-foot{background:var(--ink);color:var(--base);margin-top:clamp(2rem,5vw,3.5rem)}
|
||||
.site-foot .wrap{padding-block:1.5rem;text-align:center}
|
||||
.social{display:flex;gap:1rem;justify-content:center;list-style:none;margin:0 0 .5rem;padding:0}
|
||||
.social a{
|
||||
display:flex;
|
||||
padding:.4rem;
|
||||
border-radius:9999px;
|
||||
background:#f0f0f0;
|
||||
color:#444;
|
||||
}
|
||||
.social a:hover{transform:scale(1.1)}
|
||||
.social svg{fill:currentColor;height:1.25em;width:1.25em}
|
||||
.foot-note{margin:0;font-size:.875rem}
|
||||
.site-foot a{color:var(--base)}
|
||||
|
||||
@media (prefers-reduced-motion:no-preference){
|
||||
html{scroll-behavior:smooth}
|
||||
.social a{transition:transform .1s ease}
|
||||
}
|
||||
|
||||
@media (min-width:801px){
|
||||
.hero--photo{background-image:var(--hero-lg,none)}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Reference in New Issue
Block a user