89 lines
1.5 KiB
CSS
89 lines
1.5 KiB
CSS
:root {
|
|
--tech-gap: 4svw;
|
|
}
|
|
.tech-cat {
|
|
border: 1px solid salmon;
|
|
display: flex;
|
|
flex-flow: column wrap;
|
|
padding: 0px 2svw;
|
|
padding-bottom: 2svh;
|
|
margin-bottom: 3svh;
|
|
column-gap: var(--tech-gap);
|
|
flex: 1 1 30%;
|
|
min-width: clamp(250px, 33%, 100%);
|
|
|
|
/* flex: 0 1 calc((100% - 2 * 2svw) / 3); */
|
|
}
|
|
|
|
.tech-cat h3 {
|
|
display: flex;
|
|
/* flex: 0 1 100%; */
|
|
border-bottom: var(--underlineTitle);
|
|
margin: 2svh 1svw;
|
|
|
|
padding-left: 2svw;
|
|
padding-bottom: 1svh;
|
|
}
|
|
|
|
.tech-row {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
column-gap: 2svw;
|
|
row-gap: 4svh;
|
|
justify-content: space-between;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.tech-card {
|
|
border: 1px solid whitesmoke;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
padding-bottom: 1svh;
|
|
flex: 0 1 calc((100% - 2 * var(--tech-gap)) / 4);
|
|
text-decoration: none;
|
|
color: inherit;
|
|
padding: 0px 1svw;
|
|
padding-top: 2svh;
|
|
}
|
|
|
|
.tech-card img {
|
|
width: calc(100%- 2svw);
|
|
max-height: 40svh;
|
|
min-height: 50px;
|
|
min-width: 50px;
|
|
aspect-ratio: 1;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.tech-card progress {
|
|
width: 90%;
|
|
margin-bottom: 0.5svh;
|
|
overflow: hidden;
|
|
appearance: none;
|
|
border-radius: 999px;
|
|
justify-self: flex-end;
|
|
align-self: center;
|
|
}
|
|
|
|
.tech-card h4 {
|
|
margin: 2svh 0px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* for chromium browsers */
|
|
.tech-card progress::-webkit-progress-value {
|
|
background-color: steelblue;
|
|
/* border-radius: 999px; */
|
|
}
|
|
|
|
/* for firefox browsers */
|
|
.tech-card progress::-moz-progress-bar {
|
|
background-color: steelblue;
|
|
/* border-radius: 999px; */
|
|
}
|
|
|
|
/* 48.19 , 68.58*/
|