Skip to content

Commit 02fab26

Browse files
lucagoslarlucagoslar
committed
style: icon visibility
1 parent 2a5b2ca commit 02fab26

1 file changed

Lines changed: 171 additions & 162 deletions

File tree

‎apps/example-static/index.html‎

Lines changed: 171 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -1,173 +1,182 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Examples</title>
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
font-family:
11+
system-ui,
12+
-apple-system,
13+
BlinkMacSystemFont,
14+
'Segoe UI',
15+
Roboto,
16+
Oxygen,
17+
Cantarell,
18+
'Open Sans',
19+
'Helvetica Neue',
20+
sans-serif;
21+
font-size: 16px;
22+
}
323

4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Examples</title>
8-
<style>
9-
* {
10-
box-sizing: border-box;
11-
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
12-
font-size: 16px;
13-
}
14-
15-
body {
16-
margin: 0 25px;
17-
}
18-
19-
h1 {
20-
font-weight: 500;
21-
font-size: 25px;
22-
margin: 0;
23-
line-height: 30px;
24-
}
25-
26-
h2 {
27-
font-weight: 500;
28-
font-size: 20px;
29-
margin: 0;
30-
line-height: 25px;
31-
}
32-
33-
main {
34-
display: grid;
35-
grid-template-columns: 1fr 1fr 1fr 1fr;
36-
gap: 25px;
37-
max-width: 1300px;
38-
margin: 0 auto;
39-
}
40-
41-
@media screen and (max-width: 1300px) {
42-
main {
43-
grid-template-columns: 1fr 1fr 1fr;
24+
body {
25+
margin: 0 25px;
4426
}
45-
}
4627

47-
@media screen and (max-width: 850px) {
48-
main {
49-
grid-template-columns: 1fr 1fr;
50-
gap: 15px;
28+
h1 {
29+
font-weight: 500;
30+
font-size: 25px;
31+
margin: 0;
32+
line-height: 30px;
5133
}
5234

53-
body {
54-
margin: 0 15px;
35+
h2 {
36+
font-weight: 500;
37+
font-size: 20px;
38+
margin: 0;
39+
line-height: 25px;
5540
}
56-
}
5741

58-
@media screen and (max-width: 600px) {
5942
main {
60-
grid-template-columns: 1fr;
43+
display: grid;
44+
grid-template-columns: 1fr 1fr 1fr 1fr;
45+
gap: 25px;
46+
max-width: 1300px;
47+
margin: 0 auto;
48+
}
49+
50+
@media screen and (max-width: 1300px) {
51+
main {
52+
grid-template-columns: 1fr 1fr 1fr;
53+
}
6154
}
62-
}
63-
64-
main section {
65-
display: grid;
66-
grid-template-columns: max-content 1fr;
67-
gap: 25px;
68-
width: 100%;
69-
place-items: center;
70-
padding: 15px;
71-
border: 1px solid #00000010;
72-
height: 100%;
73-
}
74-
75-
main section h2 {
76-
place-self: center start;
77-
}
78-
79-
main section img {
80-
display: block;
81-
max-width: 35px;
82-
max-height: 35px;
83-
width: 100%;
84-
}
85-
86-
main section.add {
87-
border-style: dashed;
88-
border-color: #00000020;
89-
min-height: 67px;
90-
}
91-
92-
main a {
93-
display: inline-block;
94-
color: unset;
95-
text-decoration: none;
96-
height: 100%;
97-
}
98-
99-
@media (pointer: fine) {
100-
main a:hover section {
101-
border-color: #00000050;
55+
56+
@media screen and (max-width: 850px) {
57+
main {
58+
grid-template-columns: 1fr 1fr;
59+
gap: 15px;
60+
}
61+
62+
body {
63+
margin: 0 15px;
64+
}
65+
}
66+
67+
@media screen and (max-width: 600px) {
68+
main {
69+
grid-template-columns: 1fr;
70+
}
71+
}
72+
73+
main section {
74+
display: grid;
75+
grid-template-columns: max-content 1fr;
76+
gap: 25px;
77+
width: 100%;
78+
place-items: center;
79+
padding: 15px;
80+
border: 1px solid #00000010;
81+
height: 100%;
82+
}
83+
84+
main section h2 {
85+
place-self: center start;
86+
}
87+
88+
main section img {
89+
display: block;
90+
max-width: 35px;
91+
max-height: 35px;
92+
width: 100%;
93+
height: 100%;
94+
}
95+
96+
main section.add {
97+
border-style: dashed;
98+
border-color: #00000020;
99+
min-height: 67px;
100+
}
101+
102+
main a {
103+
display: inline-block;
104+
color: unset;
105+
text-decoration: none;
106+
height: 100%;
107+
}
108+
109+
@media (pointer: fine) {
110+
main a:hover section {
111+
border-color: #00000050;
112+
}
113+
}
114+
115+
header {
116+
max-width: 1300px;
117+
margin: 25px auto;
102118
}
103-
}
104-
105-
header {
106-
max-width: 1300px;
107-
margin: 25px auto;
108-
}
109-
</style>
110-
</head>
111-
112-
<body>
113-
<header>
114-
<h1>Examples</h1>
115-
</header>
116-
<main>
117-
<a href="//astro.examples.zugriff.eu">
118-
<section>
119-
<img src="/icons/astro.svg" alt="Astro Logo">
120-
<h2>Astro</h2>
121-
</section>
122-
</a>
123-
<a href="//hono.examples.zugriff.eu">
124-
<section>
125-
<img src="/icons/hono.svg" alt="Hono Logo">
126-
<h2>Hono</h2>
127-
</section>
128-
</a>
129-
<a href="//next.examples.zugriff.eu">
130-
<section>
131-
<img src="/icons/nextjs.svg" alt="Next.js Logo">
132-
<h2>Next.js</h2>
133-
</section>
134-
</a>
135-
<a href="//nuxt.examples.zugriff.eu">
136-
<section>
137-
<img src="/icons/nuxt.svg" alt="Nuxt Logo">
138-
<h2>Nuxt</h2>
139-
</section>
140-
</a>
141-
<a href="//react-router.examples.zugriff.eu">
142-
<section>
143-
<img src="/icons/react-router.svg" alt="React Router Logo">
144-
<h2>React Router</h2>
145-
</section>
146-
</a>
147-
<a href="//remix.examples.zugriff.eu">
148-
<section>
149-
<img src="/icons/remix.svg" alt="Remix Logo">
150-
<h2>Remix</h2>
151-
</section>
152-
</a>
153-
<a href="//solid.examples.zugriff.eu">
154-
<section>
155-
<img src="/icons/solid.svg" alt="Solid Logo">
156-
<h2>Solid</h2>
157-
</section>
158-
</a>
159-
<a href="//sveltekit.examples.zugriff.eu">
160-
<section>
161-
<img src="/icons/sveltekit.svg" alt="SvelteKit Logo">
162-
<h2>SvelteKit</h2>
163-
</section>
164-
</a>
165-
<a href="//github.com/zugriffcloud/examples">
166-
<section class="add">
167-
<h2>Add Example</h2>
168-
</section>
169-
</a>
170-
</main>
171-
</body>
172-
173-
</html>
119+
</style>
120+
</head>
121+
122+
<body>
123+
<header>
124+
<h1>Examples</h1>
125+
</header>
126+
<main>
127+
<a href="//astro.examples.zugriff.eu">
128+
<section>
129+
<img src="/icons/astro.svg" alt="Astro Logo" />
130+
<h2>Astro</h2>
131+
</section>
132+
</a>
133+
<a href="//hono.examples.zugriff.eu">
134+
<section>
135+
<img src="/icons/hono.svg" alt="Hono Logo" />
136+
<h2>Hono</h2>
137+
</section>
138+
</a>
139+
<a href="//next.examples.zugriff.eu">
140+
<section>
141+
<img src="/icons/nextjs.svg" alt="Next.js Logo" />
142+
<h2>Next.js</h2>
143+
</section>
144+
</a>
145+
<a href="//nuxt.examples.zugriff.eu">
146+
<section>
147+
<img src="/icons/nuxt.svg" alt="Nuxt Logo" />
148+
<h2>Nuxt</h2>
149+
</section>
150+
</a>
151+
<a href="//react-router.examples.zugriff.eu">
152+
<section>
153+
<img src="/icons/react-router.svg" alt="React Router Logo" />
154+
<h2>React Router</h2>
155+
</section>
156+
</a>
157+
<a href="//remix.examples.zugriff.eu">
158+
<section>
159+
<img src="/icons/remix.svg" alt="Remix Logo" />
160+
<h2>Remix</h2>
161+
</section>
162+
</a>
163+
<a href="//solid.examples.zugriff.eu">
164+
<section>
165+
<img src="/icons/solid.svg" alt="Solid Logo" />
166+
<h2>Solid</h2>
167+
</section>
168+
</a>
169+
<a href="//sveltekit.examples.zugriff.eu">
170+
<section>
171+
<img src="/icons/sveltekit.svg" alt="SvelteKit Logo" />
172+
<h2>SvelteKit</h2>
173+
</section>
174+
</a>
175+
<a href="//github.com/zugriffcloud/examples">
176+
<section class="add">
177+
<h2>Add Example</h2>
178+
</section>
179+
</a>
180+
</main>
181+
</body>
182+
</html>

0 commit comments

Comments
 (0)