tbs093a
/
curriculum.vitae
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(cv): make MiniWorkImage responsive across all breakpoints 

Move inline styles to .mini_work_image CSS class and scale down
proportionally at 768px, 500px, and 415px breakpoints.

Made-with: Cursor
master
sii42400 2026-04-16 18:04:01 +02:00
parent 71b2140f92
commit 437bce1d77
2 changed files with 75 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/index.js
View File

@ -102,25 +102,8 @@ const SimpleCaptchaWrapper = ({ onVerified, language }) => {
const MiniWorkImage = ({ image }) => {
return (
<div
style={{
width: "40px",
height: "40px",
float: "left",
marginRight: "10px",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<img
src={ image }
style={{
maxHeight: "100%",
maxWidth: "100%",
objectPosition: "center",
}}
/>
<div className="mini_work_image">
<img src={ image } />
</div>
)
}
@ -202,9 +185,16 @@ const SegmentListWork = ({ segment, tabs, borderSize }) => {
>
{
segment.image != "" ?
<MiniWorkImage
image={ segment.image }
/>
segment.content.length === 0 ?
<MiniWorkImage
image={ segment.image }
/>
:
<div className="segment_content_list_image">
<MiniWorkImage
image={ segment.image }
/>
</div>
:
""
}

76
src/styles/general.scss
View File

@ -121,6 +121,22 @@ body {
}
}
.mini_work_image {
width: 40px;
height: 40px;
float: left;
margin-right: 10px;
display: flex;
justify-content: center;
align-items: center;
img {
max-height: 100%;
max-width: 100%;
object-position: center;
}
}
.segment_title {
float: left;
width: 250px;
@ -371,6 +387,16 @@ body {
height: 30px;
}
.mini_work_image {
width: 32px;
height: 40px;
margin-right: 8px;
}
.segment_content_list_image {
margin-left: 3px;
}
.segment_content_work {
font-size: 9pt;
@ -466,6 +492,16 @@ body {
height: 33px;
}
.mini_work_image {
width: 26px;
height: 40px;
margin-right: 6px;
}
.segment_content_list_image {
margin-left: 6px;
}
.segment_content_work {
font-size: 8pt;
@ -496,12 +532,13 @@ body {
p {
margin-top: 5px;
margin-bottom: 5px;
font-size: 7pt;
font-size: 6.25pt;
}
a {
padding-left: 20.5px;
padding-right: 20.5px;
padding-left: 22px;
padding-right: 22px;
font-size: 6pt;
}
form {
@ -557,7 +594,7 @@ body {
}
.segment_description_general {
font-size: 5.5pt;
font-size: 4.5pt;
margin: 4px 4px 4px 10px;
}
}
@ -568,15 +605,28 @@ body {
height: 28px;
}
.mini_work_image {
width: 20px;
height: 27px;
margin-right: 5px;
}
.segment_content_list_image {
margin-left: 9px;
}
.segment_content_work {
font-size: 7pt;
font-size: 5pt;
.segment_content_title {
font-size: 7.5pt;
height: 17px;
margin-top: 9px;
margin-bottom: 5px;
font-size: 6pt;
}
ul {
margin-left: 14px;
margin-left: 18px;
}
ul li {
@ -584,19 +634,19 @@ body {
}
ul li::before {
margin-left: -4.25em;
margin-left: -6.5em;
}
}
.segment_description {
font-size: 6.5pt;
font-size: 4.5pt;
margin: 4px 0 4px 10px;
}
.captcha-container .captcha-form {
width: 85px;
height: 105px;
font-size: 6pt;
font-size: 3.5pt;
padding: 0 5px;
p {
@ -606,9 +656,9 @@ body {
}
a {
padding-left: 15px;
padding-right: 15px;
font-size: 6pt;
padding-left: 20px;
padding-right: 20px;
font-size: 5pt;
}
form {