danremollino/form-validation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

added demo site

Browse Source
This commit is contained in:
Dan Remollino
2025-04-03 17:45:27 -04:00
parent 3a0ad9d804
commit 50af7ae33a
15 changed files with 1732 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
demo/css/grid.css Normal file
View File

@ -0,0 +1,105 @@
/* temp */
section {
/* background: gray; */
margin-block: var(--space);
}
:where(header, section, footer) > * {
background-image: url('https://res.cloudinary.com/demo/image/upload/cashew_chicken.jpg');
background-size: cover;
color: var(--color-01);
/* text-shadow: 1px 1px 3px var(--color-02); */
}
:where(header, section, footer) {
display: grid;
row-gap: var(--content-gap);
grid-template-columns:
[viewport-start] 1fr
[site-padding-start] var(--site-padding)
[content-padding-start] var(--content-padding)
[content-start]
minmax(0, calc(var(--max-content-width) / 12))
[one-twelfth]
minmax(0, calc(var(--max-content-width) / 12))
[two-twelfths one-sixth]
minmax(0, calc(var(--max-content-width) / 12))
[three-twelfths one-fourth fourth one-quarter]
minmax(0, calc(var(--max-content-width) / 12))
[four-twelfths one-third]
minmax(0, calc(var(--max-content-width) / 12))
[five-twelfths]
minmax(0, calc(var(--max-content-width) / 12))
[six-twelfths one-half half]
minmax(0, calc(var(--max-content-width) / 12))
[seven-twelfths]
minmax(0, calc(var(--max-content-width) / 12))
[eight-twelfths two-thirds]
minmax(0, calc(var(--max-content-width) / 12))
[nine-twelfths three-fourths third three-quarters]
minmax(0, calc(var(--max-content-width) / 12))
[ten-twelfths five-sixths]
minmax(0, calc(var(--max-content-width) / 12))
[eleven-twelfths]
minmax(0, calc(var(--max-content-width) / 12))
[content-end twelve-twelfths]
var(--content-padding) [content-padding-end]
var(--site-padding) [site-padding-end]
1fr [viewport-end];
> * {
display: grid;
grid-column: content-padding;
grid-template-columns: subgrid;
padding: var(--content-padding) 0;
> * { grid-column: content; }
&.full-viewport { grid-column: viewport !important; }
&.half-content-left {
grid-column-end: half !important;
padding: var(--content-padding) var(--content-padding) var(--content-padding) 0;
}
&.half-content-right {
grid-column-start: half !important;
padding: var(--content-padding) 0 var(--content-padding) var(--content-padding);
> * { grid-column-start: inherit; }
}
&.half-viewport-left {
grid-column: viewport-start / half !important;
padding: var(--content-padding) var(--content-padding) var(--content-padding) 0;
}
&.half-viewport-right {
grid-column: half / viewport-end !important;
padding: var(--content-padding) 0 var(--content-padding) var(--content-padding);
> * { grid-column-start: inherit; }
}
&.remove-padding {
grid-column: content;
padding: 0;
}
&.remove-inline-padding {
grid-column: content;
padding: var(--content-padding) 0;
}
@media (max-width: 1240px) {
&[class*="-left"] { grid-column-end: three-quarters !important; }
&[class*="-right"] { grid-column-start: one-quarter !important; }
}
@media (max-width: 940px) {
&[class*="-left"] { grid-column-end: five-sixths !important; }
&[class*="-right"] { grid-column-start: one-sixth !important; }
}
@media (max-width: 640px) {
&[class*="-left"] { grid-column-end: content-end !important; }
&[class*="-right"] { grid-column-start: content-start !important; }
}
}
}