webfussel/wf4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

FIX: mobile layout for easy skills

Browse source 
Better layout for easily explained skills
This commit is contained in:
webfussel 2025-02-21 20:34:08 +01:00
parent d8593a7280
commit 9ecafeba02
6 changed files with 75 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/assets/css/global.css
View file

@ -178,6 +178,10 @@ span.chip {
margin-top: 6rem;
}
.place-bottom {
margin-top: auto;
}
.flex-row {
display: flex;
flex-direction: row;

46
app/assets/css/skills.css
View file

@ -17,4 +17,50 @@
& .bottom {
align-items: center;
}
& .image-container {
display: flex;
align-items: center;
justify-content: center;
}
& .skill-card {
display: flex;
flex-direction: row;
align-items: center;
&.reverse {
flex-direction: row-reverse;
}
}
}
@media (width <= 1601px) {
.Skills {
& .skill-container {
flex-wrap: wrap;
flex-direction: row;
}
& .skill-card.reverse,
& .skill-card {
flex: 1 0 300px;
flex-direction: column;
text-align: center;
justify-content: start;
}
& .skill-card h3 {
text-align: center;
}
& .text-container,
& .text-container main {
height: 100%;
}
& .image-container img {
width: 100%;
}
}
}