Date: Wed, 20 Sep 2023 13:42:52 -0700
Subject: [PATCH 2/3] New example: generated content
---
modules/generated_content.html | 26 ++++++++++++++++++++++----
1 file changed, 22 insertions(+), 4 deletions(-)
diff --git a/modules/generated_content.html b/modules/generated_content.html
index c10a5173..069941de 100644
--- a/modules/generated_content.html
+++ b/modules/generated_content.html
@@ -5,7 +5,10 @@
Generated content
- body {background-image: linear-gradient(#3a67ab, #e8f6ff 100%); height: 100vh; width: 100vw;}
+body {
+ background-image: linear-gradient(#3a67ab, #e8f6ff 100%); height: 100vh;
+ width: 100vw;
+}
div {
position: absolute;
@@ -13,11 +16,25 @@
bottom: 0;
width: 400px;
height: 400px;
- background-image: linear-gradient(115deg, transparent 48%, brown, #996600, brown, transparent 52%), linear-gradient(60deg, transparent 48%, brown, #996600, brown, transparent 52%), radial-gradient(circle 10px at 50% 50%, #333333 30%, #999999 50%, transparent 50%), radial-gradient(circle 10px at 50% 50%, #333333 30%, #999999 50%, transparent 50%), radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%), radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%), radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%);
+ background-image:
+ linear-gradient(115deg, transparent 48%, brown, #996600, brown, transparent 52%),
+ linear-gradient(60deg, transparent 48%, brown, #996600, brown, transparent 52%),
+ radial-gradient(circle 10px at 50% 50%, #333333 30%, #999999 50%, transparent 50%),
+ radial-gradient(circle 10px at 50% 50%, #333333 30%, #999999 50%, transparent 50%),
+ radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%),
+ radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%),
+ radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%);
background-repeat: no-repeat;
- background-size: 100px 100px, 100px 100px, 15px 15px, 15px 15px, 200px 200px, 300px 300px, 400px 400px;
- background-position: 95% 120px, 5% 120px,46% 80px, 54% 80px, 50% 0, 50% 90px, 50% 220px;
+ background-size:
+ 100px 100px, 100px 100px,
+ 15px 15px, 15px 15px,
+ 200px 200px, 300px 300px, 400px 400px;
+ background-position:
+ 95% 120px, 5% 120px,
+ 46% 80px, 54% 80px,
+ 50% 0, 50% 90px, 50% 220px;
}
+
div::after {
content: "";
border: transparent solid 4px;
@@ -28,6 +45,7 @@
left: 50%;
top: 100px;
}
+
div::before {
content: "Only one ";
font-size: min(6vh, 2rem);
From 373d0c34b0f44e0641e19e6da4c3426a88f51869 Mon Sep 17 00:00:00 2001
From: Jean-Yves Perrier
Date: Thu, 21 Sep 2023 08:00:02 +0200
Subject: [PATCH 3/3] Update modules/generated_content.html
---
modules/generated_content.html | 36 +++++++++++++++++-----------------
1 file changed, 18 insertions(+), 18 deletions(-)
diff --git a/modules/generated_content.html b/modules/generated_content.html
index 069941de..7dc529dd 100644
--- a/modules/generated_content.html
+++ b/modules/generated_content.html
@@ -16,7 +16,7 @@
bottom: 0;
width: 400px;
height: 400px;
- background-image:
+ background-image:
linear-gradient(115deg, transparent 48%, brown, #996600, brown, transparent 52%),
linear-gradient(60deg, transparent 48%, brown, #996600, brown, transparent 52%),
radial-gradient(circle 10px at 50% 50%, #333333 30%, #999999 50%, transparent 50%),
@@ -24,26 +24,26 @@
radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%),
radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%),
radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%);
- background-repeat: no-repeat;
- background-size:
- 100px 100px, 100px 100px,
- 15px 15px, 15px 15px,
- 200px 200px, 300px 300px, 400px 400px;
- background-position:
- 95% 120px, 5% 120px,
- 46% 80px, 54% 80px,
- 50% 0, 50% 90px, 50% 220px;
+ background-repeat: no-repeat;
+ background-size:
+ 100px 100px, 100px 100px,
+ 15px 15px, 15px 15px,
+ 200px 200px, 300px 300px, 400px 400px;
+ background-position:
+ 95% 120px, 5% 120px,
+ 46% 80px, 54% 80px,
+ 50% 0, 50% 90px, 50% 220px;
}
div::after {
- content: "";
- border: transparent solid 4px;
- border-left: orange 30px solid;
- height: 1px;
- width: 1px;
- position: absolute;
- left: 50%;
- top: 100px;
+ content: "";
+ border: transparent solid 4px;
+ border-left: orange 30px solid;
+ height: 1px;
+ width: 1px;
+ position: absolute;
+ left: 50%;
+ top: 100px;
}
div::before {