go-http-skeleton/web/static/css/site.screen.css
Jan Eitzinger f15d6b2163
Initial checkin of templ skeleton
HTML based on Jason Knight HTML template code
2024-08-03 08:51:30 +02:00

764 lines
12 KiB
CSS

:root {
--flowColor:#024;
--flowBg:#FFF;
--flowAltBg:#CDF;
--flowAltBorder:0.0625rem solid #04F;
--flowAnchorNormal:#04F;
--flowAnchorVisited:#000;
--flowAnchorHover:#069;
--flowMarker:#080;
--flyoutColor:#36C;
--flyoutBgColor:#ACE;
--chromeColor:#000;
--chromeBg:var(--flowBg);
--chromeAnchorNormal:var(--chromeColor);
--chromeAnchorVisited:var(--chromeColor);
--chromeAnchorHover:#369;
--mainHeadingColor:#356;
--modalOuterBg:#ACEC;
--modalOuterShadow:inset 0 0 16em #68A;
--modalInnerBg:#DEF;
--modalInputBg:#FFF;
--modalInputBorder:0.125rem solid #048;
--modalHeadingBg:#ACE;
--modalButtonColor:#FFF;
--modalButtonBg:#048;
--modalShadow:0.5rem 0.5rem 2rem #0247;
--actionColor:#039;
--actionBg:#FFF;
--actionBorder:0.125rem solid var(--actionColor);
--actionHoverColor:#FFF;
--actionHoverBg:#05A;
--heroColor:#FFF;
--heroBgColor:#05A;
--heroBg:linear-gradient(20deg, #05A, #012);
--heroTextShadow:
0 0 2rem #000,
0.25rem 0.25rem 1rem #000;
--heroActionColor:#FFF;
--heroActionBg:transparent;
--heroActionHoverColor:#036;
--heroActionHoverBg:#8CF;
--borderColor:#048;
--standardBorder:0.125rem solid var(--borderColor);
--horzPad:clamp(0.5rem, 4vw, 2rem);
--vertPad:clamp(1rem, min(8vw, 10vh), 4rem);
--standardPad:var(--vertPad) var(--horzPad);
--chromePad:1rem var(--horzPad);
--heroPad:clamp(1rem, 3vh, 6rem) var(--horzPad);
}
html,body,div,p,h1,h2,h3,h4,h5,h6,figure,
ul,ol,li,dl,dt,dd,form,fieldset,caption,legend,
table,tr,td,th,address,blockquote,img {
margin:0;
padding:0;
}
img, fieldset {
border:none;
}
blockquote, q {
quotes:none;
}
body *, *:after, *:before {
box-sizing:border-box;
}
legend {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display:block;
}
button, label, summary {
cursor:pointer;
}
html, body {
height:100%;
}
body, button, input, table, textarea, select {
font-size:1rem;
line-height:1.75;
font-family:flowtext,sans-serif;
color:var(--flowColor);
background:var(--flowBg);
}
a {
color:var(--flowAnchorNormal);
transition:color 0.3s, background 0.3s, scale 0.3s;
}
a:visited {
color:var(--flowAnchorVisited);
}
a:active,
a:focus,
a:hover {
color:var(--flowAnchorHover);
}
input,
select,
textarea {
padding:0.25rem 0.5rem;
}
#fauxBody,
.modal,
.modal > .modalClose {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
scroll-behavior:smooth;
}
.modal,
#top,
.cards,
.hasPlate,
#fauxBody > footer {
position:relative;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
}
.modalClose span,
.mainMenuOpen span,
#fauxBody > footer h2.optional {
position:fixed;
right:999em;
top:0;
opacity:0;
}
.modal {
left:-200vw;
background:var(--modalOuterBg);
box-shadow:var(--modalOuterShadow);
opacity:0;
transition:left 0s 0.5s, opacity 0.5s;
}
.modal:target {
left:0;
opacity:1;
transition:opacity 0.5s;
}
.modal > div {
/*
depth sort over outer .modalClose
*/
position:relative;
/*
if you don't auto margin, scrolling at small screen heights is messed.
*/
margin:auto 1rem;
overflow:hidden;
background:var(--modalInnerBg);
color:var(--flowColor);
box-shadow:var(--modalShadow);
border:var(--standardBorder);
border-radius:1rem;
scale:0;
transition:scale 0.5s;
}
.modal:target > div {
scale:1;
}
.modal .modalClose,
#mainMenu .modalClose {
position:absolute;
text-decoration:none;
}
.modal:target .modalClose {
display:block;
}
.modal > * > .modalClose,
#mainMenu > * > .modalClose {
top:0.5rem;
right:1rem;
font-size:2rem;
line-height:1;
color:var(--flowColor);
}
.modal > * > .modalClose:focus,
.modal > * > .modalClose:hover {
scale:1.2;
}
.modal h2 {
font-size:1.25rem;
padding:0.5rem 4rem 0.5rem 1rem;
margin-bottom:1rem;
background:var(--modalHeadingBg);
border-bottom:var(--standardBorder);
}
.modal h2 ~ * {
margin:1rem;
}
#top,
#fauxBody > footer {
max-width:72rem;
margin:0 auto;
padding:var(--chromePad);
background:var(--chromeBgColor);
color:var(--chromeColor);
}
#fauxBody > footer {
z-index:800;
}
#fauxBody > footer p span {
display:inline-block;
}
#top {
justify-content:space-between;
gap:2rem;
z-index:900;
}
#top a,
#fauxBody > footer a {
color:var(--chromeAnchorNormal);
text-decoration:none;
}
#top > a:first-child {
display:block;
overflow:hidden;
flex-grow:0;
font-size:0.875rem;
line-height:1.1;
}
h1 {
font-size:2rem;
text-transform:uppercase;
transform-origin:center left;
letter-spacing:0.125rem;
scale:1.15 1;
color:var(--mainHeadingColor);
}
#mainMenu {
flex-grow:1;
text-align:right;
}
#mainMenu li {
list-style:none;
display:inline;
margin-right:1.5rem;
}
#mainMenu li a {
display:inline-block;
font-size:1.125rem;
}
#mainMenu li a:focus,
#mainMenu li a:hover,
.socialMenu a:focus,
.socialMenu a:hover,
.mainMenuOpen:focus,
.mainMenuOpen:hover {
color:var(--chromeAnchorHover);
scale:1.2;
}
#fauxBody > footer > section:first-child {
width:1%;
flex-grow:1;
}
.socialMenu {
list-style:none;
display:flex;
gap:1.5rem;
}
.socialMenu a {
position:relative;
display:block;
}
.socialMenu a:before {
font-size:2.5rem;
transition:color 0.3s, scale 0.3s;
}
.socialMenu a:focus:before,
.socialMenu a:hover:before {
scale:1.375;
}
.socialMenu a span,
#backToTop span {
position:absolute;
font-size:0.875rem;
color:var(--flyoutColor);
background:var(--flyoutBgColor);
border:0.125rem solid var(--flyoutColor);
}
.socialMenu a span {
bottom:3.5rem;
right:999em;
padding:0.25rem 0.75rem;
white-space:nowrap;
border-radius:1rem;
transition:right 0s 0.3s, opacity 0.3s;
opacity:0;
}
.socialMenu a span:after {
content:"";
position:absolute;
bottom:-0.5625rem;
right:1rem;
width:1rem;
height:1rem;
background:var(--flyoutBgColor);
border:solid var(--flyoutColor);
border-width:0 0.125rem 0.125rem 0;
rotate:45deg;
}
.socialMenu a:focus span,
.socialMenu a:hover span {
right:-0.5rem;
opacity:1;
transition:opacity 0.3s;
}
main > section:not(.hero),
.hero > div,
.hasCards > header,
.hasPlate {
max-width:56rem;
margin:0 auto;
}
main > section:not(.hero),
.hero > div,
.hasPlate {
padding:var(--standardPad);
}
.hasPlate {
padding-top:0;
}
main > section:not(.hero) {
border-bottom:var(--flowAltBorder);
}
main > section > header:not(.hasPlate) {
text-align:center;
}
main > section:not(.hero):nth-child(odd) {
background:var(--flowAltBg);
}
main h2 {
font-size:clamp(1.75rem, 5vw, 2.5rem);
font-weight:normal;
}
main h2 span {
display:inline-block; /* soft keep-together */
}
main h3 {
font-size:clamp(1.25rem, 3vw, 2rem);
font-weight:normal;
}
main p {
max-width:40em;
margin:1em 0;
}
main section > header p {
font-size:1.125rem;
}
main > section > header:not(.hasPlate) p {
margin:1em auto;
}
main > section.hasCards {
max-width:100%;
}
.cards,
.hasPlate {
gap:2rem;
}
.cards {
margin:2rem auto 0;
align-items:stretch;
gap:2rem 4rem;
}
#whatIDo .cards {
max-width:68em;
}
.cards > * {
flex-grow:1;
width:1%;
min-width:min(20rem, 100%);
max-width:24rem;
}
#whatIDo .cards > * {
min-width:min(24rem, 100%);
max-width:40rem;
}
.cards h3[class*="icon_"]:before {
font-size:4rem;
margin-right:1rem;
}
.cards li {
list-style:none;
position:Relative;
margin-bottom:0.5rem;
padding-left:2rem;
}
.cards li:before {
content:"\F058";
position:absolute;
top:0;
left:0.5rem;
color:var(--flowMarker);
font-family:interface;
}
.hasPlate > div {
flex-grow:1;
width:1%;
min-width:min(20rem, 100%);
}
.hasPlate.trailing > figure,
.hasPlate.trailing > picture {
position:relative;
flex-grow:0;
width:30%;
max-width:16rem;
text-align:center;
}
figure img,
figure picture {
width:100%;
height:auto;
border-radius:1rem;
}
.note {
text-align:center;
}
.action {
display:inline-block;
position:relative;
overflow:hidden;
margin-top:1rem;
z-index:1;
text-decoration:none;
padding:0.75rem 1.5rem;
color:var(--actionColor);
background:var(--actionBg);
border:var(--actionBorder);
border-radius:0.5em;
transition:color 0.3s, text-shadow 0.3s;
}
.action:focus,
.action:hover {
color:var(--actionHoverColor);
text-shadow:none;
}
.action:after {
content:"";
position:absolute;
z-index:-1;
top:50%;
left:50%;
width:100%;
height:100%;
border-radius:0.5rem;
translate:-50% -50%;
scale:0;
opacity:0;
background:var(--actionHoverBg);
transition:scale 0.3s, opacity 0.3s;
}
.action:focus:after,
.action:hover:after {
scale:1.1;
opacity:1;
}
.hero {
padding:var(--heroPad);
background-color:var(--heroBgColor);
color:var(--heroColor);
text-shadow:var(--heroTextShadow);
}
.hero .action {
color:var(--heroActionColor);
background:var(--heroActionBg);
border-color:var(--heroActionColor);
}
.hero .action:focus,
.hero .action:hover {
color:var(--heroActionHoverColor);
}
.hero .action:after {
background:var(--heroActionHoverBg);
}
.hero header {
margin-bottom:1.5rem;
line-height:1.2;
}
.hero header p {
margin:0.25rem 0 1.5rem;
font-size:1.5rem;
}
#semanticEasy {
background-image:url(images/heroBg.avif), var(--heroBg);
background-position:center;
background-size:cover;
}
section:not(.hero) h2,
section:not(.hero) h3 {
color:var(--mainHeadingColor);
}
#testimonials > header {
margin-bottom:var(--vertPad);
}
#testimonials > .cards {
max-width:76rem;
margin:0 auto;
}
#testimonials figcaption {
font-size:1.25rem;
font-style:italic;
}
#testimonials figcaption img {
display:inline-block;
vertical-align:middle;
width:4rem;
height:4rem;
margin-right:0.5rem;
border-radius:50%;
}
#backToTop {
display:block;
position:sticky;
z-index:600;
bottom:0;
width:2.5rem;
height:3.5rem;
padding-bottom:1rem;
margin:-3.5rem 1rem 0 auto;
opacity:0.6;
transition:opacity 0.3s;
}
#backToTop.hide {
opacity:0;
}
#backToTop:not(.hide):focus,
#backToTop:not(.hide):hover {
opacity:1;
}
#backToTop span {
right:1.5rem;
top:0.25rem;
padding:0.125rem 2rem 0.125rem 1rem;
white-space:nowrap;
border-radius:1.5rem 0 0 1.5rem;
transform-origin:center right;
transition:scale 0.3s;
scale:0 1;
}
#backToTop:focus span,
#backToTop:hover span {
scale:1;
}
#backToTop:after {
content:"\F102";
position:relative;
display:block;
width:2.5rem;
height:2.5rem;
text-align:center;
font-family:interface;
font-size:1.5rem;
line-height:2rem;
border:0.25rem solid var(--flyoutColor);
border-radius:50%;
background:var(--heroBgColor);
color:var(--heroColor);
}
@media (max-width:56rem) {
/*
It sucks to have to repeat all this,
one of the few cases where native mixins
would be a godsend.
*/
#mainMenu,
#mainMenu > .modalClose {
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
scroll-behavior:smooth;
}
#mainMenu {
position:fixed;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
left:-200vw;
background:var(--modalOuterBg);
box-shadow:var(--modalOuterShadow);
opacity:0;
transition:left 0s 0.5s, opacity 0.5s;
}
#mainMenu:target {
left:0;
opacity:1;
transition:opacity 0.5s;
}
#mainMenu > div {
position:relative;
margin:auto 1rem;
overflow:hidden;
background:var(--modalInnerBg);
color:var(--flowColor);
box-shadow:var(--modalShadow);
border:var(--standardBorder);
border-radius:1rem;
scale:0;
transition:scale 0.5s;
}
#mainMenu:target > div {
scale:1;
}
#mainMenu:target .modalClose {
display:block;
}
#mainMenu > * > .modalClose:focus,
#mainMenu > * > .modalClose:hover {
scale:1.2;
}
#mainMenu > div:before {
content:attr(data-modalTitle);
display:block;
font-size:1.25rem;
padding:0.5rem 4rem 0.5rem 1rem;
margin-bottom:1rem;
background:var(--modalHeadingBg);
border-bottom:var(--standardBorder);
}
#mainMenu ul {
margin:1rem;
}
#mainMenu li {
display:block;
text-align:center;
margin:0.5rem 0;
}
.mainMenuOpen {
display:block;
width:2.5rem;
height:2rem;
background:linear-gradient(
#000 20%,
transparent 20% 40%,
#000 40% 60%,
transparent 60% 80%,
#000 80%
);
}
} /* max-width:56rem */