pub.solar/_includes/styles/page.scss

140 lines
2.4 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;
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;
}
2022-10-03 00:26:43 +00:00
&_home {
padding: 5vw;
}
2022-10-03 00:02:47 +00:00
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 {
2022-10-03 00:26:43 +00:00
margin: 5vw;
2022-10-03 00:30:20 +00:00
margin-bottom: 0;
2022-10-03 00:17:10 +00:00
font-weight: 500;
2022-10-20 23:48:27 +00:00
line-height: 1.4;
2022-10-03 00:10:53 +00:00
2022-10-03 00:30:20 +00:00
&:last-child {
margin-bottom: 5vw;
}
2022-10-03 00:10:53 +00:00
pre,
code {
background-color: var(--background-alt);
border-radius: 4px;
padding: 4px;
}
2022-10-03 00:17:10 +00:00
> * {
margin-bottom: 0;
2022-10-03 02:47:39 +00:00
margin-top: 8px;
2022-10-03 00:17:10 +00:00
}
> h1, h2 {
margin-top: 32px;
line-height: 1.5;
}
2022-10-03 00:10:53 +00:00
}
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;
}
}
}