Skip to content

Commit 871fc26

Browse files
committed
Move mg-card styling over from main site
1 parent 53c2d08 commit 871fc26

File tree

1 file changed

+75
-0
lines changed

1 file changed

+75
-0
lines changed

templates/monogame/public/main.css

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,4 +97,79 @@ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
9797
.mg-social-link:hover,
9898
.mg-social-link:focus {
9999
filter: brightness(120%);
100+
}
101+
102+
.mg-card {
103+
border: 1px solid;
104+
border-color: var(--bs-body-color);
105+
border-radius: .5rem;
106+
position: relative;
107+
overflow: hidden;
108+
height: 100%;
109+
}
110+
111+
.mg-card-thumbnail {
112+
aspect-ratio: 16/9;
113+
filter: brightness(100%);
114+
border-radius: 7px;
115+
background-position: center;
116+
background-size: cover;
117+
background-repeat: no-repeat;
118+
background-color: var(--bs-body);
119+
-webkit-transition: filter 0.1s ease-in-out, transform 0.25s ease-in-out;
120+
-moz-transition: filter 0.1s ease-in-out, transform 0.25s ease-in-out;
121+
-ms-transition: filter 0.1s ease-in-out, transform 0.25s ease-in-out;
122+
-o-transition: filter 0.1s ease-in-out, transform 0.25s ease-in-out;
123+
transition: filter 0.1s ease-in-out, transform 0.25s ease-in-out;
124+
125+
}
126+
127+
.mg-card-thumbnail-overlay {
128+
position: absolute;
129+
width: 100%;
130+
height: 100%;
131+
top: 0;
132+
left: 0;
133+
right: 0;
134+
bottom: 0;
135+
z-index: 999;
136+
background-repeat: no-repeat;
137+
background-position: center center;
138+
filter: drop-shadow(6px 6px 6px #000C);
139+
}
140+
141+
.mg-card:hover .mg-card-thumbnail,
142+
.mg-card:focus .mg-card-thumbnail {
143+
filter: brightness(110%);
144+
transform: scale(1.1);
145+
}
146+
147+
@media (prefers-reduced-motion) {
148+
.mg-card:hover .mg-card-thumbnail,
149+
.mg-card:focus .mg-card-thumbnail {
150+
transform: none;
151+
}
152+
}
153+
154+
.mg-card-body {
155+
padding-inline: 2rem;
156+
padding-block: 1rem;
157+
}
158+
159+
.mg-card-title {
160+
font-size: 22px;
161+
font-weight: 700;
162+
}
163+
164+
.mg-card-excerpt {
165+
display: -webkit-box;
166+
-webkit-line-clamp: 3;
167+
-webkit-box-orient: vertical;
168+
overflow: hidden;
169+
font-style: italic;
170+
}
171+
172+
.mg-no-link {
173+
text-decoration: none;
174+
color: var(--bs-body-color);
100175
}

0 commit comments

Comments
 (0)