archiwum/web
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simplify admin json by mutating name string for link, add hover state to admin card links

Browse Source
This commit is contained in:
jakubmanczak
2022-12-21 21:50:55 +01:00
parent c6ae6cdfa9
commit 75e59fce20
3 changed files with 41 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
data/administracja.json
View File

@@ -2,8 +2,7 @@
{ {
"name": "jamesen", "name": "jamesen",
"desc": "Frontendowiec nie jebany.", "desc": "Frontendowiec nie jebany.",
"img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg", "img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg"
"profilehref": "jamesen"
}, },
{ {
"name": "Mollin", "name": "Mollin",

4
pages/o-gractwie.tsx
View File

@@ -51,7 +51,9 @@ const PageInfo = () => {
return ( return (
<Link <Link
key={el.name} key={el.name}
href={el.profilehref ? `/profile/${el.profilehref}` : ""} href={`/profile/${el.name
.replaceAll(" ", "-")
.toLocaleLowerCase()}`}
> >
<article> <article>
<img src={el.img} alt={`zdjęcie profilowe ${el.name}`} /> <img src={el.img} alt={`zdjęcie profilowe ${el.name}`} />

70
styles/oGractwie.module.scss
View File

@@ -50,43 +50,47 @@
a { a {
color: inherit; color: inherit;
text-decoration: inherit; text-decoration: inherit;
}
article {
--radius: 6px;
flex: 1;
display: flex;
flex-direction: row;
background: var(--black1);
border-radius: var(--radius);
box-shadow: var(--shadow0);
img {
width: 128px;
max-width: 156px;
flex: 1;
border-top-left-radius: var(--radius);
border-bottom-left-radius: var(--radius);
// for alt text
color: var(--grey);
// for mollin's vertical picture to display well
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: 50% 35%;
}
div {
min-width: 14rem;
padding: 0 1rem;
}
}
@media screen and (max-width: 400px) {
article { article {
flex-direction: column; --radius: 6px;
width: 100%; flex: 1;
display: flex;
flex-direction: row;
background: var(--black1);
border-radius: var(--radius);
box-shadow: var(--shadow0);
transition-duration: 100ms;
img { img {
margin: 1rem auto; width: 128px;
border-radius: 8px; max-width: 156px;
flex: 1;
border-top-left-radius: var(--radius);
border-bottom-left-radius: var(--radius);
// for alt text
color: var(--grey);
// for mollin's vertical picture to display well
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: 50% 35%;
} }
div { div {
padding-bottom: 1rem; min-width: 14rem;
padding: 0 1rem;
}
&:hover {
background: var(--black2);
}
}
@media screen and (max-width: 400px) {
article {
flex-direction: column;
width: 100%;
img {
margin: 1rem auto;
border-radius: 8px;
}
div {
padding-bottom: 1rem;
}
} }
} }
} }