portfolio/src/components/molecules/Repository.module.scss

62 lines
1.2 KiB
SCSS

@import 'variables';
.repo {
padding: $spacer;
border-radius: $border-radius;
background: rgba(#fff, 0.15);
box-shadow: 0 3px 5px rgba($brand-main, 0.1),
0 5px 16px rgba($brand-main, 0.1);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
:global(.dark) & {
background: darken($body-background-color--dark, 1%);
box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.1),
0 5px 16px rgba(darken($brand-main, 20%), 0.1);
}
> * {
width: 100%;
}
p {
font-size: $font-size-small;
}
p:last-child {
margin: 0;
}
}
.repoTitle {
font-size: $font-size-h4;
margin-bottom: $spacer / 2;
}
.meta {
font-size: $font-size-small;
align-self: flex-end;
display: flex;
justify-content: space-between;
a {
display: inline-block;
color: $brand-grey-light;
font-variant-numeric: lining-nums;
&:hover,
&:focus {
color: $brand-cyan;
}
}
svg {
fill: currentColor;
width: $font-size-small;
height: $font-size-small;
margin-right: $spacer / 12;
margin-bottom: -($spacer / 12);
}
}