Skip to content

Commit ca8b8d8

Browse files
whsiehwhsieh
committed
Rename sites-with-headers.html -> liquid-glass.html
1 parent 8fa42d2 commit ca8b8d8

File tree

2 files changed

+108
-99
lines changed

2 files changed

+108
-99
lines changed

‎examples/liquid-glass.html

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<style>
7+
body, html {
8+
font-size: 20px;
9+
font-family: system-ui;
10+
}
11+
12+
a {
13+
margin: 1em;
14+
color: blue;
15+
text-decoration: none;
16+
display: inline-block;
17+
}
18+
19+
div + div {
20+
margin-top: 0.5em 0;
21+
}
22+
23+
hr {
24+
width: 100%;
25+
height: 0.5px;
26+
background-color: #aaa;
27+
border: none;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<title>Liquid Glass • Color Sampling</title>
33+
<section>
34+
<h3>Solid color</h3>
35+
<div><a href="https://www.coffeebar.com">coffeebar.com</a></div>
36+
<div><a href="https://www.goodreads.com">goodreads.com</a></div>
37+
<div><a href="https://www.hotplate.com/bakesum">hotplate.com/bakesum</a></div>
38+
<div><a href="https://www.ground.news">ground.news</a></div>
39+
<div><a href="https://www.imgur.com">imgur.com</a></div>
40+
<div><a href="https://www.instructure.com">instructure.com</a></div>
41+
<div><a href="https://www.margaritaville.com">margaritaville.com</a></div>
42+
<div><a href="https://www.momoshop.com.tw/main/Main.jsp">momoshop.com.tw</a></div>
43+
<div><a href="https://www.science.org">science.org</a></div>
44+
<div><a href="https://www.southlakebeer.com">southlakebeer.com</a></div>
45+
<div><a href="https://www.sweetgreen.com">sweetgreen.com</a></div>
46+
<div><a href="https://news.uchicago.edu">news.uchicago.edu</a></div>
47+
<div><a href="https://www.webbtelescope.org/home">webbtelescope.org</a></div>
48+
</section>
49+
<section>
50+
<hr>
51+
<h3>Sticky headers</h3>
52+
<div><a href="https://www.espn.com">espn.com</a></div>
53+
<div><a href="https://www.premierleague.com">premierleague.com</a></div>
54+
<div><a href="https://www.bmj.com/content/389/bmj.r862">bmj.com</a></div>
55+
</section>
56+
<section>
57+
<hr>
58+
<h3>Viewport clipping</h3>
59+
<div><a href="https://www.androidauthority.com">androidauthority.com</a></div>
60+
<div><a href="https://www.amossweets.com">amossweets.com</a></div>
61+
<div><a href="https://www.arstechnica.com">arstechnica.com</a></div>
62+
<div><a href="https://www.economist.com">economist.com</a></div>
63+
</section>
64+
<section>
65+
<hr>
66+
<h3>Appears after scrolling</h3>
67+
<div><a href="https://www.amazon.com">amazon.com</a></div>
68+
<div><a href="https://www.dunekitchen.com/menu/food/">dunekitchen.com</a></div>
69+
<div><a href="https://www.mocanashville.org">mocanashville.org</a></div>
70+
<div><a href="https://www.nytimes.com/athletic/">nytimes.com/athletic/</a></div>
71+
<div><a href="https://www2.purpleair.com">www2.purpleair.com</a></div>
72+
<div><a href="https://www.theverge.com/video/663196/oh-no-i-turned-everything-into-an-ai-podcast">theverge.com</a></div>
73+
<div><a href="https://www.wallflowersanfrancisco.com">wallflowersanfrancisco.com</a></div>
74+
</section>
75+
<section>
76+
<hr>
77+
<h3>Blur filters</h3>
78+
<div><a href="https://www.apple.com">apple.com</a></div>
79+
<div><a href="https://www.vimeo.com">vimeo.com</a></div>
80+
</section>
81+
<section>
82+
<hr>
83+
<h3>Dynamic colors</h3>
84+
<div><a href="https://www.coursera.org">coursera.org</a></div>
85+
<div><a href="https://play.date">play.date</a></div>
86+
<div><a href="https://www.quantamagazine.org">quantamagazine.org</a></div>
87+
<div><a href="https://www.solidcore.com">solidcore.com</a></div>
88+
</section>
89+
<section>
90+
<hr>
91+
<h3>Static headers</h3>
92+
<div><a href="https://daringfireball.net">daringfireball.net</a></div>
93+
<div><a href="https://news.ycombinator.com">news.ycombinator.com</a></div>
94+
<div><a href="https://www.slashdot.com">slashdot.com</a></div>
95+
<div><a href="https://webkit.org">webkit.org</a></div>
96+
<div><a href="https://en.wikipedia.org/wiki/Main_Page">wikipedia.org</a></div>
97+
</section>
98+
<section>
99+
<hr>
100+
<h3>¯\_(ツ)_/¯</h3>
101+
<div><a href="http://showcase.commercialtype.com">showcase.commercialtype.com</a></div>
102+
</section>
103+
</body>
104+
</html>

‎examples/sites-with-headers.html

Lines changed: 4 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,9 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<style>
7-
body, html {
8-
font-size: 20px;
9-
font-family: system-ui;
10-
}
11-
12-
a {
13-
margin: 1em;
14-
color: blue;
15-
text-decoration: none;
16-
display: inline-block;
17-
}
18-
19-
div + div {
20-
margin-top: 0.5em 0;
21-
}
22-
23-
hr {
24-
width: 100%;
25-
height: 0.5px;
26-
background-color: #aaa;
27-
border: none;
28-
}
29-
</style>
4+
<script>
5+
location.href = "https://whsieh.github.io/examples/liquid-glass"
6+
</script>
307
</head>
31-
<body>
32-
<title>Fixed and sticky headers</title>
33-
<section>
34-
<h3>Solid color</h3>
35-
<div><a href="https://www.coffeebar.com">coffeebar.com</a></div>
36-
<div><a href="https://www.goodreads.com">goodreads.com</a></div>
37-
<div><a href="https://www.hotplate.com/bakesum">hotplate.com/bakesum</a></div>
38-
<div><a href="https://www.ground.news">ground.news</a></div>
39-
<div><a href="https://www.imgur.com">imgur.com</a></div>
40-
<div><a href="https://www.instructure.com">instructure.com</a></div>
41-
<div><a href="https://www.margaritaville.com">margaritaville.com</a></div>
42-
<div><a href="https://www.momoshop.com.tw/main/Main.jsp">momoshop.com.tw</a></div>
43-
<div><a href="https://www.science.org">science.org</a></div>
44-
<div><a href="https://www.southlakebeer.com">southlakebeer.com</a></div>
45-
<div><a href="https://www.sweetgreen.com">sweetgreen.com</a></div>
46-
<div><a href="https://news.uchicago.edu">news.uchicago.edu</a></div>
47-
<div><a href="https://www.webbtelescope.org/home">webbtelescope.org</a></div>
48-
</section>
49-
<section>
50-
<hr>
51-
<h3>Sticky headers</h3>
52-
<div><a href="https://www.espn.com">espn.com</a></div>
53-
<div><a href="https://www.premierleague.com">premierleague.com</a></div>
54-
<div><a href="https://www.bmj.com/content/389/bmj.r862">bmj.com</a></div>
55-
</section>
56-
<section>
57-
<hr>
58-
<h3>Viewport clipping</h3>
59-
<div><a href="https://www.androidauthority.com">androidauthority.com</a></div>
60-
<div><a href="https://www.amossweets.com">amossweets.com</a></div>
61-
<div><a href="https://www.arstechnica.com">arstechnica.com</a></div>
62-
<div><a href="https://www.economist.com">economist.com</a></div>
63-
</section>
64-
<section>
65-
<hr>
66-
<h3>Appears after scrolling</h3>
67-
<div><a href="https://www.amazon.com">amazon.com</a></div>
68-
<div><a href="https://www.dunekitchen.com/menu/food/">dunekitchen.com</a></div>
69-
<div><a href="https://www.mocanashville.org">mocanashville.org</a></div>
70-
<div><a href="https://www.nytimes.com/athletic/">nytimes.com/athletic/</a></div>
71-
<div><a href="https://www2.purpleair.com">www2.purpleair.com</a></div>
72-
<div><a href="https://www.theverge.com/video/663196/oh-no-i-turned-everything-into-an-ai-podcast">theverge.com</a></div>
73-
<div><a href="https://www.wallflowersanfrancisco.com">wallflowersanfrancisco.com</a></div>
74-
</section>
75-
<section>
76-
<hr>
77-
<h3>Blur filters</h3>
78-
<div><a href="https://www.apple.com">apple.com</a></div>
79-
<div><a href="https://www.vimeo.com">vimeo.com</a></div>
80-
</section>
81-
<section>
82-
<hr>
83-
<h3>Dynamic colors</h3>
84-
<div><a href="https://www.coursera.org">coursera.org</a></div>
85-
<div><a href="https://play.date">play.date</a></div>
86-
<div><a href="https://www.quantamagazine.org">quantamagazine.org</a></div>
87-
<div><a href="https://www.solidcore.com">solidcore.com</a></div>
88-
</section>
89-
<section>
90-
<hr>
91-
<h3>Static headers</h3>
92-
<div><a href="https://daringfireball.net">daringfireball.net</a></div>
93-
<div><a href="https://news.ycombinator.com">news.ycombinator.com</a></div>
94-
<div><a href="https://www.slashdot.com">slashdot.com</a></div>
95-
<div><a href="https://webkit.org">webkit.org</a></div>
96-
<div><a href="https://en.wikipedia.org/wiki/Main_Page">wikipedia.org</a></div>
97-
</section>
98-
<section>
99-
<hr>
100-
<h3>¯\_(ツ)_/¯</h3>
101-
<div><a href="http://showcase.commercialtype.com">showcase.commercialtype.com</a></div>
102-
</section>
103-
</body>
8+
<body></body>
1049
</html>

0 commit comments

Comments
 (0)