Benjamin Yule Bädorf
4e0d44af35
This commit adds the links to the most important services back to the homepage, and makes the titles of the services on the services overview page links to that web service. The reason for this is that I've noticed a bunch of people trying to navigate to e.g. Nextcloud and just getting lost on the homepage.
125 lines
1.9 KiB
SCSS
125 lines
1.9 KiB
SCSS
.ps-service {
|
|
margin-top: 2rem;
|
|
margin-right: 1rem;
|
|
|
|
&--header {
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 0.25rem solid black;
|
|
};
|
|
|
|
& &--title-link {
|
|
border-bottom: 0;
|
|
|
|
&:hover {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&--title {
|
|
margin: 0;
|
|
}
|
|
|
|
&--links {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
flex-wrap: wrap;
|
|
flex-basis: 8rem;
|
|
flex-grow: 1;
|
|
max-width: 16rem;
|
|
|
|
> * {
|
|
margin-left: 2rem;
|
|
}
|
|
}
|
|
|
|
&--description {
|
|
margin: 0;
|
|
|
|
> * {
|
|
margin: 0;
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
&--badges {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
margin-top: 1rem;
|
|
|
|
@media screen and (min-width: 700px) {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-gap: 0.5rem 1rem;
|
|
}
|
|
}
|
|
|
|
&--badge {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-left: 0.25rem solid var(--accent);
|
|
padding-left: 1rem;
|
|
|
|
@media screen and (min-width: 700px) {
|
|
flex-basis: 50%;
|
|
}
|
|
|
|
&_yes,
|
|
&_fully-automated {
|
|
border-left-color: #009d11;
|
|
}
|
|
|
|
&_partial,
|
|
&_untested {
|
|
border-left-color: #ff8f00;
|
|
}
|
|
|
|
&_not-applicable {
|
|
border-left-color: #555;
|
|
}
|
|
|
|
&_no {
|
|
border-left-color: var(--accent);
|
|
}
|
|
}
|
|
|
|
&--badge-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&--badge-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
&--badge-status {
|
|
display: inline-flex;
|
|
}
|
|
|
|
$b: &;
|
|
|
|
&--badge {
|
|
&_yes #{$b}--badge-status,
|
|
&_fully-automated #{$b}--badge-status {
|
|
color: #007d0e;
|
|
}
|
|
|
|
&_partial #{$b}--badge-status,
|
|
&_untested #{$b}--badge-status {
|
|
color: #ac6100;
|
|
}
|
|
|
|
&_not-applicable #{$b}--badge-status {
|
|
color: #555;
|
|
}
|
|
|
|
&_no #{$b}--badge-status {
|
|
color: var(--accent);
|
|
}
|
|
}
|
|
}
|