Skip to content

Commit 130227c

Browse files
VenefilynVenefilyn
committed
Overview styling with mobile view
1 parent 71f7cf5 commit 130227c

File tree

1 file changed

+106
-106
lines changed

1 file changed

+106
-106
lines changed

‎pkg/systemd/overview.scss

+106-106
Original file line numberDiff line numberDiff line change
@@ -64,127 +64,127 @@
6464
}
6565
}
6666

67-
// .pf-v6-l-gallery.ct-system-overview {
68-
// --cards: 2;
69-
// --pf-v6-l-gallery--GridTemplateColumns: repeat(var(--cards), 1fr);
67+
.pf-v6-l-gallery.ct-system-overview {
68+
--cards: 2;
69+
--pf-v6-l-gallery--GridTemplateColumns: repeat(var(--cards), 1fr);
7070

71-
// // Small mobile: Reduce spacing
72-
// @media (max-width: 320px) {
73-
// // --pf-v5-l-gallery--m-gutter--GridGap: 0.25rem;
74-
// }
71+
// Small mobile: Reduce spacing
72+
@media (max-width: 320px) {
73+
--pf-v6-l-gallery--m-gutter--GridGap: 0.25rem;
74+
}
7575

76-
// // Mobile: reduce to 1 card wide and minimize spacing
77-
// @media (max-width: 680px) {
78-
// --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--sm);
79-
// --cards: 1;
80-
// }
76+
// Mobile: reduce to 1 card wide and minimize spacing
77+
@media (max-width: 680px) {
78+
--pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--sm);
79+
--cards: 1;
80+
}
8181

82-
// // Large desktop: Jump up to 4 cards wide
83-
// @media (min-width: 1400px) {
84-
// --cards: 4;
85-
// }
82+
// Large desktop: Jump up to 4 cards wide
83+
@media (min-width: 1400px) {
84+
--cards: 4;
85+
}
8686

87-
// // Extra large desktop: Let cards align to the left at an optimal size
88-
// @media (min-width: 110rem) {
89-
// --pf-v6-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(min-content, 26rem));
90-
// }
87+
// Extra large desktop: Let cards align to the left at an optimal size
88+
@media (min-width: 113rem) {
89+
--pf-v6-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(min-content, 26rem));
90+
}
9191

92-
// // VMs @ 1024x768; add a little leeway For titlebars, start bar, etc.
93-
// @media (orientation: landscape) and (min-width: 684px) and (max-width: 832px) and (max-height: 703px) {
94-
// --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--sm);
92+
// VMs @ 1024x768; add a little leeway For titlebars, start bar, etc.
93+
@media (orientation: landscape) and (min-width: 684px) and (max-width: 832px) and (max-height: 703px) {
94+
--pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--sm);
9595

96-
// // Also skim off some vertical space for the cards
97-
// .pf-v6-c-card {
98-
// --pf-v6-c-card--first-child--PaddingTop: var(--pf-t--global--spacer--md);
99-
// --pf-v6-c-card--child--PaddingRight: var(--pf-t--global--spacer--md);
100-
// }
101-
// }
96+
// Also skim off some vertical space for the cards
97+
.pf-v6-c-card {
98+
--pf-v6-c-card--first-child--PaddingTop: var(--pf-t--global--spacer--md);
99+
--pf-v6-c-card--child--PaddingRight: var(--pf-t--global--spacer--md);
100+
}
101+
}
102102

103-
// .motd-box {
104-
// grid-column: 1 / -1;
105-
// }
103+
.motd-box {
104+
grid-column: 1 / -1;
105+
}
106106

107-
// .pf-v6-c-card {
108-
// &__title-text {
109-
// font-size: var(--pf-t--global--font--size--xl);
110-
// font-weight: var(--pf-t--global--font--weight--body);
111-
// }
107+
.pf-v6-c-card {
108+
&__title-text {
109+
font-size: var(--pf-t--global--font--size--xl);
110+
font-weight: var(--pf-t--global--font--weight--body);
111+
}
112112

113-
// &__body {
114-
// &:last-child .pf-v6-c-table:last-child tr:last-child {
115-
// /* Remove the border of tables when it's the last item in a card and there isn't a card footer */
116-
// border-block-end: none;
117-
// }
118-
119-
// p {
120-
// + p,
121-
// + button {
122-
// margin-block-start: calc(var(--pf-t--global--font--line-height--body) * 1rem);
123-
// }
124-
// }
125-
126-
// td {
127-
// vertical-align: middle;
128-
// }
129-
130-
// th {
131-
// font-size: var(--pf-t--global--font--size--sm);
132-
// }
133-
// }
134-
// }
113+
&__body {
114+
&:last-child .pf-v6-c-table:last-child tr:last-child {
115+
/* Remove the border of tables when it's the last item in a card and there isn't a card footer */
116+
border-block-end: none;
117+
}
118+
119+
p {
120+
+ p,
121+
+ button {
122+
margin-block-start: calc(var(--pf-t--global--font--line-height--body) * 1rem);
123+
}
124+
}
125+
126+
td {
127+
vertical-align: middle;
128+
}
129+
130+
th {
131+
font-size: var(--pf-t--global--font--size--sm);
132+
}
133+
}
134+
}
135135

136-
// .pf-v6-c-progress {
137-
// &__status {
138-
// display: flex;
139-
// align-items: baseline;
136+
.pf-v6-c-progress {
137+
&__status {
138+
display: flex;
139+
align-items: baseline;
140140

141-
// &-icon {
142-
// display: flex;
143-
// align-self: center;
144-
// }
145-
// }
146-
// }
141+
&-icon {
142+
display: flex;
143+
align-self: center;
144+
}
145+
}
146+
}
147147

148-
// .pf-m-compact {
149-
// th, td {
150-
// &:first-child {
151-
// :not([dir="rtl"]) & {
152-
// padding-inline-start: 0;
153-
// }
154-
155-
// [dir="rtl"] & {
156-
// padding-inline-end: 0;
157-
// }
158-
// }
159-
160-
// &:last-child {
161-
// :not([dir="rtl"]) & {
162-
// padding-inline-end: 0;
163-
// }
164-
165-
// [dir="rtl"] & {
166-
// padding-inline-start: 0;
167-
// }
168-
// }
169-
// }
170-
// }
171-
// }
148+
.pf-m-compact {
149+
th, td {
150+
&:first-child {
151+
:not([dir="rtl"]) & {
152+
padding-inline-start: 0;
153+
}
154+
155+
[dir="rtl"] & {
156+
padding-inline-end: 0;
157+
}
158+
}
159+
160+
&:last-child {
161+
:not([dir="rtl"]) & {
162+
padding-inline-end: 0;
163+
}
164+
165+
[dir="rtl"] & {
166+
padding-inline-start: 0;
167+
}
168+
}
169+
}
170+
}
171+
}
172172

173-
// @media (max-width: 779px) {
174-
// /* Reduce gutter & padding on smaller widths, for desktop & mobile */
173+
@media (max-width: 779px) {
174+
/* Reduce gutter & padding on smaller widths, for desktop & mobile */
175175

176-
// // .pf-v6-l-gallery.ct-system-overview {
177-
// // --pf-v6-l-gallery--m-gutter--GridGap: calc(var(--pf-v5-global--gutter--md)/2);
178-
// // // }
176+
.pf-v6-l-gallery.ct-system-overview {
177+
--pf-v6-l-gallery--m-gutter--GridGap: calc(var(--pf-t--global--spacer--md)/2);
178+
}
179179

180-
// // .pf-v6-c-card {
181-
// // --pf-v5-c-card--first-child--PaddingTop: var(--pf-t--global--spacer--md);
182-
// // --pf-v5-c-card--child--PaddingRight: var(--pf-t--global--spacer--md);
183-
// // --pf-v5-c-card--child--PaddingBottom: var(--pf-t--global--spacer--md);
184-
// // --pf-v5-c-card--child--PaddingLeft: var(--pf-t--global--spacer--md);
185-
// // --pf-v5-c-card__title--not-last-child--PaddingBottom: var(--pf-t--global--spacer--sm);
186-
// // }
187-
// }
180+
.pf-v6-c-card {
181+
--pf-v6-c-card--first-child--PaddingTop: var(--pf-t--global--spacer--md);
182+
--pf-v6-c-card--child--PaddingRight: var(--pf-t--global--spacer--md);
183+
--pf-v6-c-card--child--PaddingBottom: var(--pf-t--global--spacer--md);
184+
--pf-v6-c-card--child--PaddingLeft: var(--pf-t--global--spacer--md);
185+
--pf-v6-c-card__title--not-last-child--PaddingBottom: var(--pf-t--global--spacer--sm);
186+
}
187+
}
188188

189189
@media (min-width: 780px) {
190190
/* Embiggen subheading & card headings when there's space */

0 commit comments

Comments
 (0)