+
diff --git a/css-pattern.png b/css-pattern.png
new file mode 100644
index 0000000..039f4e9
Binary files /dev/null and b/css-pattern.png differ
diff --git a/index.html b/index.html
index bc56ffd..19498c1 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
powered by CSS gradients
+Explore 145 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns
Don't know which Pattern to use?
Let me pick one for you!
What about a nice CSS Loader?
+ + Get more CSS loaders +I also share cool CSS Tips
It takes one minute to read a tip
You are not looking for a CSS pattern?
Maybe you want a CSS Shape?
You reached the 100th Pattern 🥳
Keep scrolling or surprise yourself
I also have a collection of CSS Generators
+ Go to CSS Generators +Do you want to have some fun?
Solve a CSS Challenge
You reached the end but it's not the end!
This collection will keep growing
+
+
+
var clipboard = new ClipboardJS('section button', {
diff --git a/style.css b/style.css
index cbf3427..8e22b55 100644
--- a/style.css
+++ b/style.css
@@ -6,6 +6,9 @@ html {
font-family: system-ui,-apple-system,"Segoe UI","Roboto","Ubuntu","Cantarell","Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
scroll-snap-type: y mandatory;
}
+html:has(section:target) {
+ scroll-snap-type: none;
+}
*,
*:before,
*:after{
@@ -21,7 +24,6 @@ body section {
min-height: 50vh;
place-content: center;
scroll-snap-align: start;
- scroll-snap-stop: always;
flex: 50%;
}
@media (max-width: 750px) {
@@ -33,6 +35,9 @@ body section:target {
min-height: 100vh;
flex: 100%;
}
+html:has(section:target) section:not(:target) {
+ display: none;
+}
h1 {
font-style: normal;
font-weight: 700;
@@ -44,7 +49,6 @@ h1 {
color: #505050;
white-space: nowrap;
}
-
h1 span {
font-size: 70px;
vertical-align: middle;
@@ -86,8 +90,10 @@ body header {
position: absolute;
z-index: 9;
inset: 0 0 auto;
- background: linear-gradient(#fffe 55%,#0000);
- padding-bottom: 90px;
+ background: #fffe;
+ box-shadow: 0 0 20px 30px #fffe;
+ margin: auto;
+ width: fit-content;
}
body header > * {
margin: 5px;
@@ -97,7 +103,6 @@ body header h1 + p {
margin-top: -22px;
font-size: 15px;
}
-
section button {
border-radius: 5px;
box-shadow: 0 0.125rem 1rem rgb(27 40 50 / 4%), 0 0.125rem 2rem rgb(27 40 50 / 8%), 0 0 0 0.0625rem rgb(27 40 50 / 2%);
@@ -127,7 +132,7 @@ a.tweet {
height: 52px;
position: fixed;
left: 15px;
- bottom: 80px;
+ bottom: 124px;
box-shadow: rgb(0 0 0 / 40%) 0px 4px 8px;
}
.credit {
@@ -141,12 +146,12 @@ a.tweet {
color: #fff;
box-shadow: 0 0 0 50px #08769b;
clip-path: inset(0 -100%);
- text-decoration:none ;
+ text-decoration:none;
}
#bmc-wbtn {
position: fixed;
left: 15px;
- bottom: 15px;
+ bottom: 60px;
display: flex;
align-items: center;
justify-content: center;
@@ -159,20 +164,4 @@ a.tweet {
#bmc-wbtn img {
height: 40px;
width: 40px;
-}
-
-[data-ea-publisher] {
- position: absolute;
- top: 10px;
- right: 10px;
- z-index: 999;
-}
-[data-ea-publisher].loaded .ea-content,
-[data-ea-type].loaded .ea-content {
- background: rgb(255 255 255 / 80%)!important;
-}
-@media (max-width: 750px) {
- [data-ea-publisher] {
- display: none!important;
- }
-}
+}
\ No newline at end of file