ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-14 20:15:05 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

media queries for generative art

Browse source
This commit is contained in:
Thomas Smith 2022-09-22 18:21:49 -04:00
parent dc1af7fa6a
commit 6efafb6f03
2 changed files with 701 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

614
src/static/css/generative-art.css
View file

@ -1,4 +1,6 @@
#gen-art-1{ @media only screen and (min-width: 1200px) {
#gen-art-1{
position:absolute; position:absolute;
width:15vw; width:15vw;
height: 12.5vw; height: 12.5vw;
@ -10,9 +12,9 @@
background-position: center; background-position: center;
background-repeat: repeat; background-repeat: repeat;
background-size: cover; background-size: cover;
} }
#gen-art-2{ #gen-art-2{
position:absolute; position:absolute;
width:17vw; width:17vw;
height: 10vw; height: 10vw;
@ -24,9 +26,9 @@
background-position: right; background-position: right;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
} }
#gen-art-3{ #gen-art-3{
background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg"); background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
background-attachment: fixed; background-attachment: fixed;
background-position: center; background-position: center;
@ -38,9 +40,9 @@
width: 29vw; width: 29vw;
height: 28vw; height: 28vw;
z-index:1; z-index:1;
} }
#gen-art-4{ #gen-art-4{
background-image: url("/Images/gen-art/gen-art-_0012_DALL·E 2022-09-01 11.14.14 - a surrealist dream-like oil painting by Salvador Dalí of a tea cup melting i.jpg"); background-image: url("/Images/gen-art/gen-art-_0012_DALL·E 2022-09-01 11.14.14 - a surrealist dream-like oil painting by Salvador Dalí of a tea cup melting i.jpg");
background-attachment: fixed; background-attachment: fixed;
background-position: left; background-position: left;
@ -52,9 +54,9 @@
width: 12.556vw; width: 12.556vw;
height: 12.556vw; height: 12.556vw;
z-index:1; z-index:1;
} }
#gen-art-5{ #gen-art-5{
position:absolute; position:absolute;
width:24.275vw; width:24.275vw;
height: 17.857vw; height: 17.857vw;
@ -66,9 +68,9 @@
background-position: right; background-position: right;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
} }
#gen-art-6{ #gen-art-6{
position:absolute; position:absolute;
width: 13.560vw; width: 13.560vw;
height: 26.897vw; height: 26.897vw;
@ -80,9 +82,9 @@
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
#gen-art-7{ #gen-art-7{
position:absolute; position:absolute;
width: 17.504vw; width: 17.504vw;
height: 26.897vw; height: 26.897vw;
@ -94,9 +96,9 @@
background-position: top; background-position: top;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
#gen-art-8{ #gen-art-8{
position:absolute; position:absolute;
width: 8.371vw; width: 8.371vw;
height: 8.371vw; height: 8.371vw;
@ -108,9 +110,9 @@
background-position: center; background-position: center;
background-repeat: repeat; background-repeat: repeat;
background-size: cover; background-size: cover;
} }
#gen-art-9{ #gen-art-9{
position:absolute; position:absolute;
width: 8.371vw; width: 8.371vw;
height: 24vw; height: 24vw;
@ -122,9 +124,9 @@
background-position: center; background-position: center;
background-repeat: repeat; background-repeat: repeat;
background-size: cover; background-size: cover;
} }
#gen-art-10{ #gen-art-10{
position:absolute; position:absolute;
width: 50vw; width: 50vw;
height: 25vw; height: 25vw;
@ -135,4 +137,578 @@
background-position: center; background-position: center;
background-repeat: repeat; background-repeat: repeat;
background-size: cover; background-size: cover;
}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
#gen-art-1{
position:absolute;
width:15vw;
height: 12.5vw;
right: 5.8vw;
top:300px;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0002_DALL·E 2022-09-01 09.50.45 - rainbow oil spill on pavement.png.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
#gen-art-2{
position:absolute;
width:17vw;
height: 10vw;
right: 16.3vw;
top:33.3vw;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0013_DALL·E 2022-09-01 11.17.52 - macro red world of pastel geometric shapes.png.jpg");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
}
#gen-art-3{
background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
position: absolute;
margin-top: 12.5vw;
right: 16.8vw;
width: 29vw;
height: 28vw;
z-index:1;
}
#gen-art-4{
background-image: url("/Images/gen-art/gen-art-_0012_DALL·E 2022-09-01 11.14.14 - a surrealist dream-like oil painting by Salvador Dalí of a tea cup melting i.jpg");
background-attachment: fixed;
background-position: left;
background-repeat: repeat;
background-size: contain;
position: absolute;
margin-top: 9.5vw;
right: 8.371vw;
width: 12.556vw;
height: 12.556vw;
z-index:1;
}
#gen-art-5{
position:absolute;
width:24.275vw;
height: 17.857vw;
margin-top: 20vw;
right: 8.371vw;
z-index: 0;
background-image: url("/Images/gen-art/glass-triangles.jpg");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
}
#gen-art-6{
position:absolute;
width: 13.560vw;
height: 26.897vw;
margin-top: 50vw;
right: 37.667vw;
z-index: 0;
background-image: url("/Images/gen-art/candy-land.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#gen-art-7{
position:absolute;
width: 17.504vw;
height: 26.897vw;
margin-top: 70vw;
left: 8.371vw;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0007_DALL·E 2022-09-01 10.00.15 - futuristic billboard of japanese writing in neon lit city.png.jpg");
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
#gen-art-8{
position:absolute;
width: 8.371vw;
height: 8.371vw;
margin-top: 90vw;
left: 20.8vw;
z-index: 0;
background-image: url("/Images/gen-art/pixel-mouth.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
#gen-art-9{
position:absolute;
width: 8.371vw;
height: 24vw;
margin-top: 70vw;
right: 8.371vw;;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0010_DALL·E 2022-09-01 10.48.33 - bright blue and green _It’s time we stop robbing Peter to pay Mark and Jeff._.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
#gen-art-10{
position:absolute;
width: 50vw;
height: 25vw;
right: 8.371vw;;
z-index: 0;
background-image: url("/Images/gen-art/colorful-sandal.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
#gen-art-1{
position:absolute;
width:15vw;
height: 12.5vw;
right: 5.8vw;
top:300px;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0002_DALL·E 2022-09-01 09.50.45 - rainbow oil spill on pavement.png.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
#gen-art-2{
position:absolute;
width:17vw;
height: 10vw;
right: 16.3vw;
top:33.3vw;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0013_DALL·E 2022-09-01 11.17.52 - macro red world of pastel geometric shapes.png.jpg");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
}
#gen-art-3{
background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
position: absolute;
margin-top: 12.5vw;
right: 16.8vw;
width: 29vw;
height: 28vw;
z-index:1;
}
#gen-art-4{
background-image: url("/Images/gen-art/gen-art-_0012_DALL·E 2022-09-01 11.14.14 - a surrealist dream-like oil painting by Salvador Dalí of a tea cup melting i.jpg");
background-attachment: fixed;
background-position: left;
background-repeat: repeat;
background-size: contain;
position: absolute;
margin-top: 9.5vw;
right: 8.371vw;
width: 12.556vw;
height: 12.556vw;
z-index:1;
}
#gen-art-5{
position:absolute;
width:24.275vw;
height: 17.857vw;
margin-top: 20vw;
right: 8.371vw;
z-index: 0;
background-image: url("/Images/gen-art/glass-triangles.jpg");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
}
#gen-art-6{
position:absolute;
width: 13.560vw;
height: 26.897vw;
margin-top: 50vw;
right: 37.667vw;
z-index: 0;
background-image: url("/Images/gen-art/candy-land.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#gen-art-7{
position:absolute;
width: 17.504vw;
height: 26.897vw;
margin-top: 70vw;
left: 8.371vw;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0007_DALL·E 2022-09-01 10.00.15 - futuristic billboard of japanese writing in neon lit city.png.jpg");
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
#gen-art-8{
position:absolute;
width: 8.371vw;
height: 8.371vw;
margin-top: 90vw;
left: 20.8vw;
z-index: 0;
background-image: url("/Images/gen-art/pixel-mouth.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
#gen-art-9{
position:absolute;
width: 8.371vw;
height: 24vw;
margin-top: 70vw;
right: 8.371vw;;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0010_DALL·E 2022-09-01 10.48.33 - bright blue and green _It’s time we stop robbing Peter to pay Mark and Jeff._.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
#gen-art-10{
position:absolute;
width: 50vw;
height: 25vw;
right: 8.371vw;;
z-index: 0;
background-image: url("/Images/gen-art/colorful-sandal.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px){
#gen-art-1{
position:absolute;
width:15vw;
height: 12.5vw;
right: 5.8vw;
top:300px;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0002_DALL·E 2022-09-01 09.50.45 - rainbow oil spill on pavement.png.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
#gen-art-2{
position:absolute;
width:17vw;
height: 10vw;
right: 16.3vw;
top:33.3vw;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0013_DALL·E 2022-09-01 11.17.52 - macro red world of pastel geometric shapes.png.jpg");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
}
#gen-art-3{
background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
position: absolute;
margin-top: 12.5vw;
right: 16.8vw;
width: 29vw;
height: 28vw;
z-index:1;
}
#gen-art-4{
background-image: url("/Images/gen-art/gen-art-_0012_DALL·E 2022-09-01 11.14.14 - a surrealist dream-like oil painting by Salvador Dalí of a tea cup melting i.jpg");
background-attachment: fixed;
background-position: left;
background-repeat: repeat;
background-size: contain;
position: absolute;
margin-top: 9.5vw;
right: 8.371vw;
width: 12.556vw;
height: 12.556vw;
z-index:1;
}
#gen-art-5{
position:absolute;
width:24.275vw;
height: 17.857vw;
margin-top: 20vw;
right: 8.371vw;
z-index: 0;
background-image: url("/Images/gen-art/glass-triangles.jpg");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
}
#gen-art-6{
position:absolute;
width: 13.560vw;
height: 26.897vw;
margin-top: 50vw;
right: 37.667vw;
z-index: 0;
background-image: url("/Images/gen-art/candy-land.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#gen-art-7{
position:absolute;
width: 17.504vw;
height: 26.897vw;
margin-top: 70vw;
left: 8.371vw;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0007_DALL·E 2022-09-01 10.00.15 - futuristic billboard of japanese writing in neon lit city.png.jpg");
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
#gen-art-8{
position:absolute;
width: 8.371vw;
height: 8.371vw;
margin-top: 90vw;
left: 20.8vw;
z-index: 0;
background-image: url("/Images/gen-art/pixel-mouth.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
#gen-art-9{
position:absolute;
width: 8.371vw;
height: 24vw;
margin-top: 70vw;
right: 8.371vw;;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0010_DALL·E 2022-09-01 10.48.33 - bright blue and green _It’s time we stop robbing Peter to pay Mark and Jeff._.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
#gen-art-10{
position:absolute;
width: 50vw;
height: 25vw;
right: 8.371vw;;
z-index: 0;
background-image: url("/Images/gen-art/colorful-sandal.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
}
@media only screen and (max-width: 576px) {
#gen-art-1{
position:absolute;
width:25vw !important;
height: 12.5vw;
right: 5.8vw;
top:300px;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0002_DALL·E 2022-09-01 09.50.45 - rainbow oil spill on pavement.png.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
#gen-art-2{
position:absolute;
width:25vw;
height: 10vw;
right: 16.3vw;
top:33.3vw;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0013_DALL·E 2022-09-01 11.17.52 - macro red world of pastel geometric shapes.png.jpg");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
}
#gen-art-3{
background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
position: absolute;
margin-top: 12.5vw;
right: 16.8vw;
width: 29vw;
height: 28vw;
z-index:1;
}
#gen-art-4{
background-image: url("/Images/gen-art/gen-art-_0012_DALL·E 2022-09-01 11.14.14 - a surrealist dream-like oil painting by Salvador Dalí of a tea cup melting i.jpg");
background-attachment: fixed;
background-position: left;
background-repeat: repeat;
background-size: contain;
position: absolute;
margin-top: 9.5vw;
right: 8.371vw;
width: 12.556vw;
height: 12.556vw;
z-index:1;
}
#gen-art-5{
position:absolute;
width:24.275vw;
height: 17.857vw;
margin-top: 20vw;
right: 8.371vw;
z-index: 0;
background-image: url("/Images/gen-art/glass-triangles.jpg");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
}
#gen-art-6{
position:absolute;
width: 13.560vw;
height: 26.897vw;
margin-top: 50vw;
right: 37.667vw;
z-index: 0;
background-image: url("/Images/gen-art/candy-land.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#gen-art-7{
position:absolute;
width: 17.504vw;
height: 26.897vw;
margin-top: 70vw;
left: 8.371vw;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0007_DALL·E 2022-09-01 10.00.15 - futuristic billboard of japanese writing in neon lit city.png.jpg");
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
#gen-art-8{
position:absolute;
width: 8.371vw;
height: 8.371vw;
margin-top: 90vw;
left: 20.8vw;
z-index: 0;
background-image: url("/Images/gen-art/pixel-mouth.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
#gen-art-9{
position:absolute;
width: 8.371vw;
height: 24vw;
margin-top: 70vw;
right: 8.371vw;;
z-index: 0;
background-image: url("/Images/gen-art/gen-art-_0010_DALL·E 2022-09-01 10.48.33 - bright blue and green _It’s time we stop robbing Peter to pay Mark and Jeff._.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
#gen-art-10{
position:absolute;
width: 50vw;
height: 25vw;
right: 8.371vw;;
z-index: 0;
background-image: url("/Images/gen-art/colorful-sandal.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
} }

2
src/static/css/typography.css
View file

@ -231,7 +231,7 @@ li{
h1{ h1{
font-size: 20vw; font-size: 20vw;
line-height: 5rem; line-height: 6rem;
} }
h2{ h2{