Skip to content

Commit 961f767

Browse files
robertmorellirobertmorelli
committed
update syntax, remove redundant display: grids, add example of floating reset
1 parent 28fbfdb commit 961f767

File tree

2 files changed

+104
-125
lines changed

2 files changed

+104
-125
lines changed

‎index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,15 @@
102102
<div>badge</div>
103103
</div>
104104

105+
<div id="floating-reset">
106+
<form>
107+
<div>
108+
input with floating reset
109+
</div>
110+
<input type="text"/>
111+
<input type="reset" value="X"/>
112+
</form>
113+
</div>
105114
</body>
106115

107116
</html>

‎styles.css‎

Lines changed: 95 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -14,169 +14,139 @@ body * {
1414
}
1515

1616
#title-bar {
17-
display: grid;
1817
grid-template: min-content 1fr / 1fr;
18+
>div:last-child {
19+
grid-template-columns: 1fr;
20+
grid-auto-rows: 1fr;
21+
}
1922
}
2023

21-
#title-bar>div:last-child {
22-
display: grid;
23-
grid-template-columns: 1fr;
24-
grid-auto-rows: 1fr;
25-
}
26-
27-
2824
#title-bar-and-footer {
29-
display: grid;
3025
grid-template: min-content 1fr min-content / 1fr;
26+
>div:nth-child(2) {
27+
grid-template-columns: 1fr;
28+
grid-auto-rows: 1fr;
29+
}
3130
}
32-
33-
#title-bar-and-footer>div:nth-child(2) {
34-
display: grid;
35-
grid-template-columns: 1fr;
36-
grid-auto-rows: 1fr;
37-
}
38-
3931
#title-bar-and-footer-scroll {
40-
display: grid;
4132
grid-template: min-content minmax(0,1fr) min-content / 1fr;
42-
}
43-
44-
#title-bar-and-footer-scroll>div:nth-child(2) {
45-
overflow: auto;
46-
display: grid;
47-
grid-template-columns: 1fr;
48-
grid-auto-rows: 4rem;
33+
>div:nth-child(2) {
34+
overflow: auto;
35+
grid-template-columns: 1fr;
36+
grid-auto-rows: 4rem;
37+
}
4938
}
5039

5140
#evenly-spaced-rows>div {
52-
display: grid;
5341
grid-template-rows: 1fr;
5442
grid-auto-rows: 1fr;
43+
>div:nth-child(3) {
44+
font-size: 2rem;
45+
}
5546
}
5647

57-
#evenly-spaced-rows>div>div:nth-child(3) {
58-
font-size: 2rem;
59-
}
60-
61-
62-
#fill-parent {
63-
display: grid;
64-
}
65-
66-
6748
#square-at-top {
68-
display: grid;
6949
grid-template: min-content 1fr / 1fr;
70-
}
71-
72-
#square-at-top>#square {
73-
aspect-ratio: 1 / 1;
50+
>#square {
51+
aspect-ratio: 1 / 1;
52+
}
7453
}
7554

7655
#center-text {
77-
display: grid;
7856
align-items: center;
7957
justify-content: center;
8058
}
8159

8260
#masonry {
83-
display: grid;
8461
grid-template-columns: repeat(3, 1fr);
8562
grid-template-rows: masonry;
86-
}
87-
88-
#masonry>div:nth-child(3n+1) {
89-
height: 8rem;
90-
}
91-
92-
#masonry>div:nth-child(3n+2) {
93-
height: 4rem;
94-
}
95-
96-
#masonry>div:nth-child(3n+3) {
97-
height: 6rem;
63+
>div:nth-child(3n+1) {
64+
height: 8rem;
65+
}
66+
>div:nth-child(3n+2) {
67+
height: 4rem;
68+
}
69+
>div:nth-child(3n+3) {
70+
height: 6rem;
71+
}
9872
}
9973

10074
#overlap-menu {
101-
display: grid;
10275
grid-template-columns: repeat(3, 1fr);
10376
grid-template-rows: 1fr min-content 4fr;
104-
}
105-
106-
#overlap-menu>div:nth-child(1) {
107-
grid-column: 1 / span 3;
108-
grid-row: 1 / span 2;
109-
}
110-
111-
#overlap-menu>label:nth-of-type(1) {
112-
grid-row-start: 2;
113-
grid-column-start: 1;
114-
border-radius: 1rem 1rem 0rem 0rem;
115-
}
116-
117-
#overlap-menu>label:nth-of-type(2) {
118-
grid-row-start: 2;
119-
grid-column-start: 2;
120-
border-radius: 1rem 1rem 0rem 0rem;
121-
}
122-
123-
#overlap-menu>label:nth-of-type(3) {
124-
grid-row-start: 2;
125-
grid-column-start: 3;
126-
border-radius: 1rem 1rem 0rem 0rem;
127-
}
128-
129-
#overlap-menu>article {
130-
grid-row: 3 / last;
131-
grid-column: 1 / span 3;
132-
}
133-
134-
#overlap-menu>input {
135-
display: none;
136-
}
137-
138-
#overlap-menu>article {
139-
transition: opacity 0.5s;
140-
}
141-
142-
#overlap-menu>input:checked~article {
143-
opacity: 1;
144-
z-index: 10;
145-
}
146-
147-
#overlap-menu>input:not(:checked)+article {
148-
opacity: 0;
149-
z-index: 0;
77+
>div:nth-child(1) {
78+
grid-column: 1 / span 3;
79+
grid-row: 1 / span 2;
80+
}
81+
>label:nth-of-type(1) {
82+
grid-row-start: 2;
83+
grid-column-start: 1;
84+
border-radius: 1rem 1rem 0rem 0rem;
85+
}
86+
>label:nth-of-type(2) {
87+
grid-row-start: 2;
88+
grid-column-start: 2;
89+
border-radius: 1rem 1rem 0rem 0rem;
90+
}
91+
>label:nth-of-type(3) {
92+
grid-row-start: 2;
93+
grid-column-start: 3;
94+
border-radius: 1rem 1rem 0rem 0rem;
95+
}
96+
>article {
97+
grid-row: 3 / last;
98+
grid-column: 1 / span 3;
99+
transition: opacity 0.5s;
100+
}
101+
>input {
102+
display: none;
103+
}
104+
>input:checked~article {
105+
opacity: 1;
106+
z-index: 10;
107+
}
108+
>input:not(:checked)+article {
109+
opacity: 0;
110+
z-index: 0;
111+
}
150112
}
151113

152114
#overlap {
153-
display: grid;
154115
grid-template: 1fr/1fr;
155-
}
156-
157-
#overlap>div {
158-
grid-row-start: 1;
159-
grid-column-start: 1;
116+
>div {
117+
grid-row-start: 1;
118+
grid-column-start: 1;
119+
}
160120
}
161121

162122
#badge {
163-
display: grid;
164123
grid-template: 1fr/1fr;
165-
}
166-
167-
#badge>div {
168-
grid-row-start: 1;
169-
grid-column-start: 1;
170-
}
171-
172-
#badge>div:nth-child(2) {
173-
align-self: start;
174-
justify-self: end;
175-
}
176-
177-
178-
179-
180-
#pull {
181-
grid-template: min-content auto/1fr;
124+
>div {
125+
grid-row-start: 1;
126+
grid-column-start: 1;
127+
&:nth-child(2) {
128+
align-self: start;
129+
justify-self: end;
130+
margin: 0.8rem;
131+
}
132+
}
133+
}
134+
135+
#floating-reset>form{
136+
width: 90%;
137+
align-self: center;
138+
justify-self: center;
139+
>input {
140+
grid-row: 2 / 2;
141+
grid-column: 1 / 1;
142+
&[type="text"]{
143+
text-align: start;
144+
}
145+
&[type="reset"]{
146+
background-color: #225;
147+
color: #aaa;
148+
justify-self: end;
149+
margin: 1rem;
150+
}
151+
}
182152
}

0 commit comments

Comments
 (0)