pub.solar/_includes/styles/page.scss
yuni dd5d69002a
Some checks failed
continuous-integration/drone/pr Build is failing
Revert "Add banner to announce that some services are down"
This reverts commit 68fd37a3fa.
2023-01-28 23:38:06 +01:00

152 lines
2.6 KiB
SCSS

.ps-page {
display: flex;
width: 100vw;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 0;
@media screen and (min-width: 1000px) {
pointer-events: none;
}
@media screen and (min-width: 1200px) {
padding: 1vw;
flex-direction: row;
align-items: flex-start;
}
&_home {
flex-direction: row;
flex-wrap: wrap;
}
&--section {
border: 12px solid black;
margin-top: 10vh;
margin-bottom: 10vh;
width: 100%;
max-width: 700px;
flex-basis: 100%;
font-size: 16px;
flex-shrink: 1;
pointer-events: all;
color: var(--foreground);
background: white;
word-break: break-word;
display: flex;
flex-direction: column;
@media screen and (min-width: 1200px) {
margin: 1vw;
}
&_home {
padding: 5vw;
}
a {
color: var(--accent);
border-bottom: 1px solid white;
transition: border-bottom 0.1s ease;
text-decoration: none;
&:hover {
border-bottom: 4px solid var(--accent);
}
}
img {
width: 230px;
margin-top: 1rem;
}
}
&--section-link {
position: sticky;
top: 0;
background-color: var(--background);
padding: 1rem;
display: flex;
justify-content: flex-end;
align-items: center;
text-align: right;
padding-left: 132px;
@media screen and (min-width: 1200px) {
display: none;
border-bottom: 0;
}
&-icon {
margin-left: 8px;
}
}
&--section-contents {
margin: 5vw;
margin-bottom: 0;
font-weight: 500;
line-height: 1.4;
&:last-child {
margin-bottom: 5vw;
}
pre,
code {
background-color: var(--background-alt);
border-radius: 4px;
padding: 4px;
}
pre {
display: flex;
flex-direction: row;
}
code {
overflow: scroll;
}
> * {
margin-bottom: 0;
margin-top: 8px;
}
> h1, h2 {
margin-top: 32px;
line-height: 1.5;
}
}
&--link {
pointer-events: all;
color: var(--foreground);
background: white;
text-decoration: none;
text-align: center;
font-weight: 900;
font-size: 12rem;
line-height: 1em;
padding: 0.2vw;
margin: 2vw;
text-shadow: 0.15vw 0px 0px white;
transition: text-shadow 0.1s ease;
border: 12px solid black;
&:hover {
text-shadow: 0.3vw 0px 0px var(--accent);
}
@media screen and (min-width: 700px) {
font-size: 8rem;
}
@media screen and (min-width: 1000px) {
font-size: 4rem;
}
}
}