pub.solar/_includes/styles/page.scss

121 lines
2.2 KiB
SCSS
Raw Normal View History

2022-10-03 00:02:47 +00:00
.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;
padding: 5vw;
max-width: 700px;
flex-basis: 100%;
font-size: 16px;
flex-shrink: 1;
pointer-events: all;
color: var(--foreground);
background: white;
word-break: break-word;
@media screen and (min-width: 1200px) {
margin: 1vw;
}
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;
}
}
2022-10-03 00:10:53 +00:00
&--section-contents {
font-weight: normal;
line-height: 1.75;
pre,
code {
background-color: var(--background-alt);
border-radius: 4px;
padding: 4px;
}
}
2022-10-03 00:02:47 +00:00
&--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;
}
}
}