These are the projects for the JavaScript Level 2 module in Learn JS the Hard Way.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

201 lines
3.4 KiB

:root {
--color-border: hsl(0, 0%, 50%);
--border-radius: 5px;
--value0: hsl(0, 0%, 0%);
--value1: hsl(0, 0%, 11%);
--value2: hsl(0, 0%, 22%);
--value3: hsl(0, 0%, 33%);
--value4: hsl(0, 0%, 44%);
--value5: hsl(0, 0%, 55%);
--value6: hsl(0, 0%, 66%);
--value7: hsl(0, 0%, 77%);
--value8: hsl(0, 0%, 88%);
--value9: hsl(0, 0%, 100%);
--text: 0;
}
body {
color: hsl(0, 0%, calc(var(--text) * 11%));
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0px;
margin: 0px;
}
content {
display: flex;
flex-direction: column;
}
a {
color: hsl(0, 0%, calc(var(--text) * 11%));
}
block {
color: hsl(0, 0%, calc(var(--text) * 11%));
display: flex;
--spacing: space-evenly;
justify-content: var(--spacing);
flex-direction: column;
}
block > * {
color: hsl(0, 0%, calc(var(--text) * 11%));
display: flex;
flex: 1 1 auto;
--spacing: flex-start;
justify-content: var(--spacing);
align-self: stretch;
flex-direction: column;
margin: 2px;
}
.wide {
width: 100%;
}
.no-flex {
display: block;
flex: unset;
flex-direction: unset;
align-self: unset;
}
.center {
justify-content: center;
align-items: center;
align-self: center;
}
.center-text > * {
text-align: center;
}
.center-self {
align-self: center;
}
.vertical {
flex-direction: column;
}
.horizontal {
flex-direction: row;
}
grid {
--cols: 1fr 1fr;
--rows: auto;
--gap: 0.5rem;
color: hsl(0, 0%, calc(var(--text) * 11%));
display: grid;
grid-gap: var(--gap);
grid-template-columns: var(--cols);
grid-template-rows: var(--rows);
}
stack {
color: hsl(0, 0%, calc(var(--text) * 11%));
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
grid-template-areas: "cover";
}
stack > * {
color: hsl(0, 0%, calc(var(--text) * 11%));
width: 100%;
height: 100%;
position: relative;
grid-area: cover;
}
stack > .top {
z-index: 10;
}
hr {
--height: 1rem;
min-height: var(--height);
visibility: hidden;
}
hr.huge {
--height: 3rem;
}
shape {
--w: 100%;
--h: 100%;
--value: 4;
color: hsl(0, 0%, calc(var(--text) * 11%));
background-color: hsl(0, 0%, calc(var(--value) * 11%));
display: flex;
width: var(--w);
min-width: var(--w);
max-width: var(--w);
height: var(--h);
min-height: var(--h);
max-height: var(--h);
text-align: center;
justify-content: center;
align-items: center;
align-self: center;
}
.debug {
border: 1px solid red;
}
.debug > * {
border: 1px solid blue;
}
.pad {
--pad: 1rem;
padding: var(--pad);
}
.sized {
--w: 100%;
--h: 100%;
width: var(--w);
min-width: var(--w);
max-width: var(--w);
height: var(--h);
min-height: var(--h);
max-height: var(--h);
}
.border {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
}
.solid {
--value: 8;
background-color: hsl(0, 0%, calc(var(--value) * 11%));
}
.dots {
--pat-val: 7;
background-image: radial-gradient(hsl(0, 0%, calc(var(--pat-val) * 11%)) 1px, transparent 1px);
background-size: calc(10 * 1px) calc(10 * 1px);
}
.lines {
--pat-val: 7;
background-image: linear-gradient(hsl(0, 0%, calc(var(--pat-val) * 11%)) 1px, transparent 1px), linear-gradient(to right, hsl(0, 0%, calc(var(--pat-val) * 11%)) 1px, transparent 1px);
background-size: 10px 10px;
}
.stripes {
--pat-val: 7;
background-image: linear-gradient(90deg, transparent 50%, hsl(0, 0%, calc(var(--pat-val) * 11%)) 50%);
background-size: 10px 10px;
}