86 lines
1.5 KiB
CSS
86 lines
1.5 KiB
CSS
:root {
|
|
--tech-gap: 4svw;
|
|
}
|
|
.tech-cat {
|
|
/* border: 1px solid salmon; */
|
|
padding: 0px 1svw;
|
|
padding-bottom: 2svh;
|
|
margin-bottom: 3svh;
|
|
flex: 1 1 auto;
|
|
background-color: var(--card-background-color);
|
|
border-radius: var(--card-border-radius);
|
|
}
|
|
|
|
.tech-cat h3 {
|
|
border-bottom: var(--underlineTitle);
|
|
border-radius: var(--underlineTitleBorderRadius);
|
|
margin: 2svh 1svw;
|
|
|
|
padding-left: 2svw;
|
|
padding-bottom: 1svh;
|
|
}
|
|
|
|
.tech-row {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-evenly;
|
|
/* column-gap: 0.5svw; */
|
|
row-gap: 1svh;
|
|
}
|
|
|
|
.tech-card {
|
|
/* border: 1px solid whitesmoke; */
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
|
|
flex: 0 1 70px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
padding: 0px 0.5svw;
|
|
padding-top: 2svh;
|
|
padding-bottom: 0.5svh;
|
|
background-color: var(--card-background-color);
|
|
border-radius: var(--card-border-radius);
|
|
}
|
|
|
|
.tech-card img {
|
|
width: 32px;
|
|
height: 32px;
|
|
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: 1svh 0.5svw;
|
|
width: 80px;
|
|
text-align: center;
|
|
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*/
|