FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Updating ExampleList and refactoring styles. · processing/processing-website@4c54812 · GitHub

  1. processing
  2. processing-website

Repository navigation

Commit 4c54812

Browse files
ejsandoval
committed
Updating ExampleList and refactoring styles.
1 parent 32f2079 commit 4c54812

18 files changed

Lines changed: 115 additions & 124 deletions

‎src/components/CategoryNav.module.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
.root {
22
margin-bottom: calc(var(--margin) * 2);
33
justify-content: center;
4+
45
& ul {
5-
columns: 6;
6-
list-style: none;
76
padding: 0;
87
margin: 0;
8+
columns: 6;
9+
list-style: none;
910
}
11+
1012
& a {
1113
text-decoration: none;
1214
}
15+
1316
& h3 {
1417
text-transform: capitalize;
1518
}

‎src/components/ExamplesList.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,20 @@ const ExamplesList = ({ data }) => {
1515
<div className={classnames(css.root)}>
1616
{data.map((category, key) => (
1717
<ul
18-
className={classnames(grid.col8, grid.nest)}
18+
className={classnames(grid.nest, css.category)}
1919
key={`category-${key}`}>
20-
<h2>{category.name}</h2>
21-
<p>Lorem ipsum</p>
22-
<ul>
20+
<h2 className={grid.col8}>{category.name}</h2>
21+
<p className={classnames(grid.col4, grid.pull4)}>Lorem ipsum</p>
22+
<ul className={classnames(grid.col8, grid.nest)}>
2323
{category.children.map((subcategory, key) => (
24-
<div key={`subcategory-${key}`} className={css.sub}>
24+
<div key={`subcategory-${key}`} className={css.subcategory}>
2525
<h3 className={grid.col1}>{subcategory.name}</h3>
2626
<ul className={classnames(grid.col6, grid.nest)}>
2727
{subcategory.children.map((node, key) => (
2828
<li key={`item-${key}`} className={grid.col1}>
29-
<Link to={node.slug} language={locale}>
29+
<Link to={`${node.slug}.html`} language={locale}>
3030
{node.img && <Image />}
31-
<h4>{node.title}</h4>
31+
<h4>{node.name}</h4>
3232
</Link>
3333
</li>
3434
))}

‎src/components/ExamplesList.module.css‎

Lines changed: 6 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,66 +2,30 @@
22
margin-bottom: 60px;
33

44
& h2 {
5-
padding-left: var(--gutter);
6-
font-size: var(--text-xlarge);
7-
text-transform: capitalize;
8-
border-right: solid 7px var(--lightgray);
95
margin-bottom: 0;
10-
}
11-
12-
& p {
13-
padding-left: var(--gutter);
6+
text-transform: capitalize;
147
}
158

169
& ul div:last-child {
1710
margin-bottom: 0;
1811
}
1912
}
2013

21-
.sub {
14+
.subcategory {
2215
display: flex;
2316
flex-direction: row;
2417
margin-bottom: 30px;
18+
width: 100%;
2519

2620
& h3 {
21+
margin: 0;
22+
border-right: solid 6px var(--lightgray);
2723
font-size: var(--text-medium);
2824
text-transform: capitalize;
29-
border-right: solid 6px var(--lightgray);
30-
margin: 0;
31-
}
32-
33-
& li {
34-
list-style: none;
35-
margin-bottom: 30px;
36-
}
37-
38-
& ul {
39-
display: flex;
40-
flex-direction: row;
41-
flex-wrap: wrap;
42-
}
43-
44-
& ul li:last-child {
45-
margin-bottom: 0;
46-
}
47-
48-
& li > * {
49-
display: inline-block;
50-
text-decoration: none;
5125
}
5226

5327
& h4 {
28+
font-size: var(--text-regular);
5429
font-weight: 400;
5530
}
5631
}
57-
58-
.subgrid {
59-
display: flex;
60-
align-items: baseline;
61-
}
62-
63-
.functionName {
64-
color: var(--processing-blue-dark);
65-
font-size: var(--text-medium);
66-
text-decoration: none;
67-
}

‎src/components/Footer.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
.root {
2+
z-index: 1000;
23
width: 100%;
34
padding: 22px;
45
background-color: var(--processing-blue-dark);
56
color: white;
6-
z-index: 1000;
77
}
88

99
.span {

‎src/components/Header.module.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@
44
.root h1 {
55
margin: 0;
66
}
7+
78
.root a {
89
color: inherit;
910
text-decoration: none;
11+
1012
&:focus {
1113
color: var(--processing-blue-dark);
1214
}
15+
1316
&:hover {
1417
color: var(--processing-blue-dark);
1518
}

‎src/components/Navbar.module.css‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515

1616
.item {
1717
display: inline-block;
18-
color: var(--processing-blue-dark);
1918
cursor: pointer;
19+
color: var(--processing-blue-dark);
2020
font-size: var(--text-medium);
2121
font-weight: 700;
2222
}
@@ -31,39 +31,40 @@
3131

3232
.subitem {
3333
display: inline-block;
34-
color: var(--processing-blue-dark);
35-
cursor: pointer;
36-
font-size: var(--text-regular);
37-
font-weight: 700;
3834
margin-right: 2rem;
3935
padding-left: 0.6rem;
36+
cursor: pointer;
4037
border-left: solid 4px var(--lightgray);
38+
color: var(--processing-blue-dark);
39+
font-size: var(--text-regular);
40+
font-weight: 700;
4141
}
4242

4343
.subitem:hover {
44-
color: var(--processing-blue-mid);
4544
border-left: solid 4px var(--processing-blue-mid);
45+
color: var(--processing-blue-mid);
46+
4647
& a:hover {
4748
color: var(--processing-blue-mid);
4849
}
4950
}
5051

5152
.subitem:active {
52-
color: var(--processing-blue-dark);
5353
border-left: solid 4px var(--processing-blue-dark);
54+
color: var(--processing-blue-dark);
5455
& a:hover {
5556
color: var(--processing-blue-dark);
5657
}
5758
}
5859

5960
.submenu {
6061
position: absolute;
61-
margin: 0;
6262
z-index: 30;
63-
list-style: none;
64-
max-height: 0;
65-
overflow: hidden;
6663
opacity: 0;
64+
overflow: hidden;
65+
margin: 0;
66+
max-height: 0;
67+
list-style: none;
6768
}
6869

6970
.hasSubmenu:hover {

‎src/components/ReferenceList.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const ReferenceList = ({ data }) => {
99
return (
1010
<div className={css.root}>
1111
{data.map((category, key) => (
12-
<div
12+
<ul
1313
className={classnames(grid.nest, css.category)}
1414
key={`category-${key}`}>
1515
<h2 className={classnames(grid.col8)}>{category.name}</h2>
@@ -25,16 +25,16 @@ const ReferenceList = ({ data }) => {
2525
<ul className={classnames(grid.col6andhalf, grid.nest)}>
2626
{subcategory.children.map((item, key) => {
2727
return (
28-
<li key={key} className={css.subgrid}>
28+
<li key={key} className={css.itemLine}>
2929
<Link
3030
className={classnames(
31-
grid.col1,
32-
css.functionName
31+
grid.col1andhalf,
32+
css.itemName
3333
)}
3434
to={`/reference/${item.slug}.html`}>
3535
<span>{item.name}</span>
3636
</Link>
37-
<div className={grid.col5andhalf}>
37+
<div className={grid.col5}>
3838
<p
3939
dangerouslySetInnerHTML={{
4040
__html: item.brief,
@@ -50,7 +50,7 @@ const ReferenceList = ({ data }) => {
5050
);
5151
})}
5252
</ul>
53-
</div>
53+
</ul>
5454
))}
5555
</div>
5656
);

‎src/components/ReferenceList.module.css‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,20 @@
2727
flex-direction: row;
2828
margin-bottom: 30px;
2929
width: 100%;
30+
3031
& h3 {
31-
font-size: var(--text-medium);
32-
text-transform: capitalize;
33-
border-right: solid 3px var(--lightgray);
3432
margin: 0;
35-
padding: 0 calc(var(--gutter) * 2);
33+
border-right: solid 3px var(--lightgray);
3634
height: 100%;
35+
padding: 0 calc(var(--gutter) * 2);
36+
font-size: var(--text-medium);
37+
text-transform: capitalize;
3738
}
3839

3940
& li {
40-
list-style: none;
4141
margin-bottom: 8px;
4242
width: 100%;
43+
list-style: none;
4344
}
4445

4546
& ul li:last-child {
@@ -58,18 +59,19 @@
5859
.verticalSeparator {
5960
position: absolute;
6061
left: var(--gutter);
62+
border-left: solid 7px var(--lightgray);
6163
height: 100%;
6264
width: 0;
63-
border-left: solid 7px var(--lightgray);
6465
}
6566

66-
.subgrid {
67+
.itemLine {
6768
display: flex;
6869
align-items: baseline;
6970
}
7071

71-
.functionName {
72-
color: var(--processing-blue-dark);
72+
.itemName {
73+
font-family: var(--font-mono);
7374
font-size: var(--text-medium);
7475
text-decoration: none;
76+
color: var(--processing-blue-dark);
7577
}

‎src/components/SearchBarSmall.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.root {
2-
padding: 0 20px;
32
margin-top: 1em;
3+
padding: 0 20px;
44
}
55

66
.input {

‎src/components/Searchbar.module.css‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66
width: 100%;
77
}
88
& input {
9-
font-size: var(--text-medium);
10-
color: var(--darkgray);
119
border: none;
10+
transition: color 0.2s, border-color 0.2s;
11+
border-bottom: 1.5px solid var(--darkgray);
1212
width: 100%;
1313
padding-left: 30px;
14-
border-bottom: 1.5px solid var(--darkgray);
15-
transition: color 0.2s, border-color 0.2s;
1614
background-color: var(--lightgray);
15+
font-size: var(--text-medium);
16+
color: var(--darkgray);
1717
}
1818

1919
& input:focus {
@@ -23,14 +23,14 @@
2323
}
2424

2525
& input::placeholder {
26-
color: var(--darkgray);
2726
opacity: 1;
2827
transition: color 0.2s, opacity 0.2s;
28+
color: var(--darkgray);
2929
}
3030

3131
& input:focus::placeholder {
32-
color: var(--black);
3332
opacity: 1;
33+
color: var(--black);
3434
}
3535
justify-content: center;
3636
& form {
@@ -40,28 +40,29 @@
4040

4141
.root:hover {
4242
& input {
43-
color: var(--darkgray);
44-
border-color: 3px solid var(--darkgray);
4543
opacity: 0.8;
44+
border-color: 3px solid var(--darkgray);
45+
color: var(--darkgray);
4646
}
4747
& input::placeholder {
48-
color: var(--darkgray);
4948
opacity: 0.8;
49+
color: var(--darkgray);
5050
}
5151
}
5252

5353
.large {
5454
margin-top: var(--margin);
5555
margin-bottom: var(--margin);
56+
5657
& input {
57-
font-size: var(--text-xlarge);
58-
color: var(--gray);
59-
background-color: white;
58+
transition: color 0.2s, border-color 0.2s;
6059
border: none;
60+
border-bottom: 3px solid var(--gray);
6161
width: 100%;
6262
padding: 0 60px 12px;
63-
border-bottom: 3px solid var(--gray);
64-
transition: color 0.2s, border-color 0.2s;
63+
background-color: white;
64+
font-size: var(--text-xlarge);
65+
color: var(--gray);
6566
}
6667

6768
& input:focus {
@@ -71,13 +72,13 @@
7172
}
7273

7374
& input::placeholder {
74-
color: var(--gray);
7575
opacity: 1;
7676
transition: color 0.2s, opacity 0.2s;
77+
color: var(--gray);
7778
}
7879

7980
& input:focus::placeholder {
80-
color: var(--black);
8181
opacity: 1;
82+
color: var(--black);
8283
}
8384
}

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL