76 lines
1.2 KiB
CSS
76 lines
1.2 KiB
CSS
.titleContainer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
padding-bottom: calc(32rem / 16);
|
|
border-bottom: calc(1rem / 16) solid var(--border);
|
|
}
|
|
|
|
.title {
|
|
padding-right: calc(40rem / 16);
|
|
color: var(--primary-title);
|
|
}
|
|
|
|
.adviceBarContainer {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding-top: calc(24rem / 16);
|
|
}
|
|
|
|
.adviceBarContainer > a {
|
|
margin-right: calc(48rem / 16);
|
|
color: var(--text);
|
|
}
|
|
|
|
.adviceBarContainer a:link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.currentAdvice {
|
|
color: var(--primary-accent);
|
|
}
|
|
|
|
.adviceBarContainer a:hover {
|
|
color: var(--link-hover);
|
|
}
|
|
|
|
.content {
|
|
padding-bottom: calc(48rem / 16);
|
|
}
|
|
|
|
.content h3 {
|
|
color: var(--primary-subtitle);
|
|
}
|
|
|
|
.content h4 {
|
|
color: var(--secondary-subtitle);
|
|
}
|
|
|
|
@media only screen and (max-width: calc(768rem / 16)) {
|
|
.titleContainer {
|
|
flex-direction: column-reverse;
|
|
align-items: center;
|
|
padding-bottom: unset;
|
|
}
|
|
|
|
.title {
|
|
padding-right: unset;
|
|
text-align: center;
|
|
}
|
|
|
|
.adviceBarContainer {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.adviceBarContainer > a {
|
|
margin: unset;
|
|
}
|
|
|
|
.codey {
|
|
width: calc(140rem / 16);
|
|
}
|
|
}
|