8000 Improved user interface of the examples page (#504) · highb/pyscript@d5d855e · GitHub
[go: up one dir, main page]
Skip to content

Commit d5d855e

Browse files
Gabriel-Silverio-96pre-commit-ci[bot]
Gabriel-Silverio-96
and
pre-commit-ci[bot]
authored
Improved user interface of the examples page (pyscript#504)
* Added card components for basic examples * Added card components for mime rendering * fix anchor tag inside anchor tag * Added card components for js interaction * Added card components for visualizations e dashboards * Refactor card components responsive * Fix href Fractals with NumPy and canvas * Refactor quote format * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Added css files * Refactor card components for basic examples * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Rename global file to main * Add css variables * Refactor card components * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Refactor move css files into css folder Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
1 parent 1e09ac4 commit d5d855e

File tree

5 files changed

+382
-104
lines changed

5 files changed

+382
-104
lines changed

‎examples/assets/css/index.css

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.example {
2+
margin-bottom: 5rem;
3+
}
4+
5+
.example h2{
6+
color: #000000;
7+
font-family: "Inconsolata", monospace;
8+
font-size: 2.25rem;
9+
margin-bottom: 1rem;
10+
}
11+
12+
.card {
13+
height: 15rem;
14+
background-color: #FFFFFF;
15+
padding: 1rem;
16+
-webkit-box-shadow: var(--card-shadow);
17+
box-shadow: var(--card-shadow);
18+
}
19+
20+
.card a h2 {
21+
color: var(--color-primary);
22+
margin: 0;
23+
font-family: "Inconsolata", monospace;
24+
font-size: 2.25rem;
25+
}
26+
27+
.card-content {
28+
height: 100%;
29+
display: flex;
30+
flex-direction: column;
31+
justify-content: space-between;
32+
}
33+
34+
.container-card {
35+
max-width: 1500px;
36+
margin: 0 auto;
37+
display: grid;
38+
gap: 1rem;
39+
}
40+
41+
@media (min-width: 600px) {
42+
.container-card {
43+
grid-template-columns: repeat(2, 1fr);
44+
}
45+
}
46+
47+
@media (min-width: 900px) {
48+
.container-card {
49+
grid-template-columns: repeat(4, 1fr);
50+
}
51+
}

‎examples/assets/css/main.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap");
2+
@import "./variables.css";
3+
@import "./reset.css";
4+
5+
.container {
6+
max-width: 1510px;
7+
margin: auto;
8+
padding: 0 2rem;
9+
}
10+
11+
.title-main {
12+
color: #000000;
13+
font-size: 4.25rem;
14+
font-family: "Inconsolata", monospace;
15+
text-align: center;
16+
margin: 2rem 0;
17+
}

‎examples/assets/css/reset.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
*,
2+
*:after,
3+
*:before {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
text-decoration: none;
8+
}
9+
10+
body {
11+
font-size: 100%;
12+
list-style-type: none;
13+
}
14+
15+
p {
16+
font-family: "Inconsolata", monospace;
17+
font-weight: 400;
18+
}
19+
20+
a {
21+
text-decoration: none;
22+
}

‎examples/assets/css/variables.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:root {
2+
--color-primary: #2563eb;
3+
--card-shadow: 0px 5px 11px 0px rgb(0 0 0 / 15%);
4+
}

0 commit comments

Comments
 (0)
0