Hugging Face's logo

Spaces:
f64k
/
1
Running

App Files Community
f64 commited on
Commit
89d3f1f
·
1 Parent(s): 800794e

1

Browse files
Files changed (2) hide show
  1. index.html +33 -18
  2. style.css +242 -28
index.html CHANGED
@@ -1,19 +1,34 @@
1
  <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!doctype html>
2
+ <html >
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width" />
7
+ <title>huggingface static space 1</title>
8
+ <link rel="stylesheet" href="style.css" />
9
+ </head>
10
+
11
+ <body class="noise_00">
12
+ <header class="noise_29"><span class="block-title">https://huggingface.co/spaces/f64k/1</span> Пример шума из SVG </header>
13
+ <nav class="nav-menu noise_19">
14
+ </nav>
15
+ <aside class="aside-left noise_03">
16
+ <div class="block-title">aside left</div>
17
+ <div>пороги CSS на 270 и 600 px</div>
18
+ </aside>
19
+ <main class="noise_0">
20
+ <div>main</div>
21
+
22
+ </main>
23
+ <aside class="aside-right noise_04">
24
+ <div class="block-title">aside right</div>
25
+ <ul>
26
+ <li><a href="https://codepen.io/cjimmy/pen/RwVmgGR?editors=1100">SVG for CSS noise gradient</a></li>
27
+ <li><a href="https://yoksel.github.io/url-encoder/">URL-encoder for SVG</a></li>
28
+ <li><a href="https://css-tricks.com/creating-patterns-with-svg-filters/">patterns-with-svg</a></li>
29
+ </ul>
30
+ </aside>
31
+ <footer class="noise_19">footer</footer>
32
+ </body>
33
+
34
+ </html>
style.css CHANGED
@@ -1,28 +1,242 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Basic page style resets */
2
+ html,
3
+ body {
4
+ margin: 0;
5
+ border: 0;
6
+ min-height: 100% !important;
7
+ height: 100%;
8
+ overflow: hidden;
9
+ }
10
+
11
+ *,
12
+ *:after,
13
+ *:before {
14
+ box-sizing: border-box;
15
+ }
16
+
17
+ [hidden] {
18
+ display: none !important;
19
+ }
20
+
21
+ /*https://codepen.io/cjimmy/pen/RwVmgGR?editors=1100*/
22
+ /*https://yoksel.github.io/url-encoder/*/
23
+ .noise_004 {
24
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
25
+ }
26
+
27
+ .noise_00 {
28
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
29
+ background-blend-mode: color;
30
+ background-color: #f8f8f8;
31
+ }
32
+
33
+ .noise_02 {
34
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
35
+ }
36
+
37
+ .noise_03 {
38
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
39
+ background-blend-mode: hard-light;
40
+ background-color: #BBB;
41
+ }
42
+
43
+ .noise_04 {
44
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
45
+ /* https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode */
46
+ /* */
47
+ background-blend-mode: luminosity;
48
+ /*
49
+ background-blend-mode: luminosity;
50
+ background-blend-mode: screen;
51
+ background-blend-mode: multiply;
52
+ background-blend-mode: hard-light;
53
+ background-blend-mode: difference;
54
+ */
55
+ background-color: #DDD;
56
+ }
57
+
58
+ .noise_09 {
59
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
60
+ }
61
+
62
+ .noise_19 {
63
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.19' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
64
+ background-blend-mode: multiply;
65
+ background-color: #FFF;
66
+ }
67
+
68
+ .noise_29 {
69
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.29' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
70
+ }
71
+
72
+ .linear_background_1 {
73
+ background: linear-gradient(-45deg,
74
+ hsla(110, 90%, 20%, 0.1),
75
+ hsla(310, 90%, 20%, 0.1));
76
+ }
77
+
78
+ body {
79
+ background-color: #999;
80
+
81
+ display: grid;
82
+ row-gap: 0.2em;
83
+ column-gap: 0.3em;
84
+ padding: 0.2em;
85
+ font-family: Geneva, Verdana, Tahoma, Arial, Helvetica, sans-serif;
86
+
87
+ header,
88
+ footer,
89
+ nav,
90
+ main,
91
+ aside {
92
+ box-shadow: inset 0 0 9px #0005;
93
+ border-radius: 0.4em;
94
+ padding: 0.3em;
95
+ }
96
+ }
97
+
98
+ body {
99
+ grid-template-columns: auto 1fr auto;
100
+ grid-template-rows: auto auto 1fr auto auto;
101
+
102
+ header {
103
+ grid-column: 1 / span 3;
104
+ grid-row: 1;
105
+ }
106
+
107
+ .nav-menu {
108
+ grid-column: 1 / span 3;
109
+ grid-row: 2;
110
+ }
111
+
112
+ .aside-left {
113
+ grid-column: 1;
114
+ grid-row: 3;
115
+ }
116
+
117
+ .aside-right {
118
+ grid-column: 3;
119
+ grid-row: 3;
120
+ }
121
+
122
+ footer {
123
+ grid-column: 1 / span 3;
124
+ grid-row: 5;
125
+ }
126
+ }
127
+
128
+ @media screen and (max-width: 800px) {
129
+ body {
130
+ grid-template-columns: auto 1fr;
131
+ grid-template-rows: auto 1fr 1fr auto;
132
+
133
+ header {
134
+ grid-column: 1;
135
+ grid-row: 1;
136
+ }
137
+
138
+ .nav-menu {
139
+ grid-column: 2;
140
+ grid-row: 1;
141
+ }
142
+
143
+ .aside-left {
144
+ grid-column: 1;
145
+ grid-row: 2;
146
+ }
147
+
148
+ main {
149
+ grid-row: span 2;
150
+ }
151
+
152
+ .aside-right {
153
+ grid-column: 1;
154
+ grid-row: 3;
155
+ }
156
+
157
+ footer {
158
+ grid-column: 1 / span 2;
159
+ grid-row: 5;
160
+ }
161
+ }
162
+ }
163
+
164
+ @media screen and (max-width: 370px) {
165
+ body {
166
+ grid-template-columns: 1fr;
167
+ grid-template-rows: auto auto auto 1fr auto auto;
168
+
169
+ header {
170
+ grid-column: 1;
171
+ grid-row: 1;
172
+ }
173
+
174
+ .nav-menu {
175
+ grid-column: 1;
176
+ grid-row: 2;
177
+ }
178
+
179
+ .aside-left {
180
+ grid-column: 1;
181
+ grid-row: 3;
182
+ }
183
+
184
+ main {
185
+ grid-row: 4;
186
+ }
187
+
188
+ .aside-right {
189
+ grid-column: 1;
190
+ grid-row: 5;
191
+ }
192
+
193
+ footer {
194
+ grid-column: 1;
195
+ grid-row: 6;
196
+ }
197
+ }
198
+ }
199
+
200
+ @media (hover: hover) {
201
+
202
+ header:hover,
203
+ footer:hover,
204
+ nav:hover,
205
+ main:hover,
206
+ aside:hover {
207
+ box-shadow: inset 0 0 9px #0007;
208
+ transition-duration: 0.5s;
209
+ }
210
+ }
211
+
212
+ .block-main {
213
+ height: 100%;
214
+ }
215
+
216
+ .aside-left {
217
+ padding: 0.5em;
218
+ word-break: break-word;
219
+ /*на будущее*/
220
+ }
221
+
222
+ .aside-right {
223
+ padding: 0.5em;
224
+ overflow: auto;
225
+
226
+ a {
227
+ background-color: #FFFF;
228
+ color: darkblue;
229
+ text-decoration: none;
230
+ }
231
+ }
232
+
233
+ .nav-menu {
234
+ /*background-color: hsl(270, 34%, 85%);*/
235
+ background-color: #0004;
236
+ }
237
+
238
+ .block-title {
239
+ font-size: 19px;
240
+ background: linear-gradient(hsla(270, 90%, 20%, 0.2),
241
+ hsla(100, 90%, 20%, 0.2));
242
+ }