mirror of
https://github.com/PretendoNetwork/website.git
synced 2025-04-02 11:11:50 -04:00
428 lines
8.5 KiB
CSS
428 lines
8.5 KiB
CSS
html,
|
|
body,
|
|
div.main-body {
|
|
height: 100%;
|
|
background: var(--bg-shade-0);
|
|
}
|
|
|
|
a.logo-link {
|
|
margin: auto;
|
|
margin-left: 36px;
|
|
height: 40px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button#openSidebar {
|
|
display: none;
|
|
}
|
|
|
|
.docs-wrapper .content:not(.search) a {
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
color: var(--accent-shade-1);
|
|
}
|
|
|
|
.docs-wrapper header {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
margin: 20px;
|
|
margin-left: 0;
|
|
}
|
|
.docs-wrapper header::before {
|
|
content: none;
|
|
background: none;
|
|
pointer-events: none;
|
|
}
|
|
.docs-wrapper header a.logo-link {
|
|
display: none;
|
|
}
|
|
.docs-wrapper header nav a:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.docs-wrapper {
|
|
display: grid;
|
|
grid-template-columns: fit-content(100%) auto;
|
|
grid-template-rows: fit-content(100%) auto;
|
|
height: 100%;
|
|
}
|
|
|
|
.docs-wrapper .sidebar {
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
width: clamp(270px, 25vw, 500px);
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
min-height: 100%;
|
|
}
|
|
.docs-wrapper .sidebar .section {
|
|
display: flex;
|
|
flex-flow: column;
|
|
width: 200px;
|
|
margin-left: clamp(60px, 10vw, 138px);
|
|
margin-bottom: 72px;
|
|
}
|
|
.docs-wrapper .sidebar .section:first-child {
|
|
margin-top: 72px;
|
|
}
|
|
.docs-wrapper .sidebar .section h5 {
|
|
margin: 0;
|
|
font-weight: normal;
|
|
text-transform: uppercase;
|
|
color: var(--text-shade-0);
|
|
margin-bottom: 12px;
|
|
}
|
|
.docs-wrapper .sidebar .section a {
|
|
position: relative;
|
|
text-decoration: none;
|
|
color: var(--text-shade-1);
|
|
width: fit-content;
|
|
margin-bottom: 12px;
|
|
}
|
|
.docs-wrapper .sidebar .section a.active,
|
|
.docs-wrapper .sidebar .section a:hover {
|
|
color: var(--text-shade-3);
|
|
}
|
|
.docs-wrapper .sidebar .section a.active::before {
|
|
/* This filter thing is jank, if anyone knows a better way to do this please fix */
|
|
filter: invert(51%) sepia(12%) saturate(2930%) hue-rotate(218deg)
|
|
brightness(99%) contrast(92%);
|
|
position: absolute;
|
|
left: -30px;
|
|
content: url(../images/docs/arrow-right.svg);
|
|
}
|
|
|
|
.docs-wrapper .content {
|
|
background: var(--bg-shade-1);
|
|
padding: 72px;
|
|
max-height: 100%;
|
|
overflow-y: scroll;
|
|
border-top-left-radius: 8px;
|
|
}
|
|
.docs-wrapper .content-inner {
|
|
max-width: 900px;
|
|
}
|
|
.docs-wrapper .content p {
|
|
color: var(--text-shade-1);
|
|
}
|
|
.docs-wrapper .content h1:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.docs-wrapper .content .quick-links-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-gap: 24px;
|
|
margin-bottom: 60px;
|
|
}
|
|
.docs-wrapper .quick-links-grid a {
|
|
text-decoration: none;
|
|
background: var(--bg-shade-2);
|
|
border-radius: 6px;
|
|
color: var(--text-shade-1);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
.docs-wrapper .quick-links-grid svg:first-child {
|
|
height: 36px;
|
|
margin-right: 24px;
|
|
margin-left: 4px;
|
|
color: var(--accent-shade-2);
|
|
}
|
|
.docs-wrapper .quick-links-grid p.header {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: var(--text-shade-3);
|
|
margin: 0;
|
|
}
|
|
.docs-wrapper .quick-links-grid p {
|
|
margin: 0;
|
|
}
|
|
.docs-wrapper .quick-links-grid svg:last-child {
|
|
height: 36px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.docs-wrapper .content-inner div.tip {
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 36px;
|
|
background: var(--bg-shade-2);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: var(--accent-shade-2);
|
|
margin: 24px 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.docs-wrapper .content-inner div.tip::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 12px;
|
|
background: var(--accent-shade-2);
|
|
opacity: 1;
|
|
}
|
|
.docs-wrapper .content-inner div.tip.yellow::after {
|
|
background: var(--yellow-shade-1);
|
|
}
|
|
.docs-wrapper .content-inner div.tip.red::after {
|
|
background: var(--red-shade-1);
|
|
}
|
|
.docs-wrapper .content-inner div.tip.green::after {
|
|
background: var(--green-shade-1);
|
|
}
|
|
|
|
.docs-wrapper .content .missing-in-locale-notice {
|
|
background: var(--bg-shade-2);
|
|
padding: 24px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.search .purple-card {
|
|
padding: 36px;
|
|
}
|
|
.search .purple-card h1 {
|
|
margin-top: 0;
|
|
}
|
|
.search .purple-card p {
|
|
margin-bottom: 2em;
|
|
}
|
|
.search .purple-card input::placeholder {
|
|
color: var(--text-shade-0);
|
|
}
|
|
.search .purple-card input:focus {
|
|
background-color: var(--bg-shade-4);
|
|
color: #fff;
|
|
transition: 200ms;
|
|
outline: none;
|
|
}
|
|
|
|
.search .input-wrapper {
|
|
position: relative;
|
|
margin-top: 8px;
|
|
}
|
|
.search .input-wrapper .matches {
|
|
display: flex;
|
|
flex-flow: column;
|
|
font-size: 1rem;
|
|
background-color: var(--bg-shade-2);
|
|
border: none;
|
|
border-radius: 0 0 4px 4px;
|
|
max-height: 204px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
.search .input-wrapper .matches * {
|
|
padding: 12px;
|
|
margin: 0;
|
|
text-decoration: none;
|
|
color: var(--text-shade-3);
|
|
}
|
|
.search .input-wrapper .matches a:hover {
|
|
background-color: var(--bg-shade-1);
|
|
}
|
|
.search input.has-matches {
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
|
|
.platform-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24px;
|
|
margin-top: 36px;
|
|
}
|
|
|
|
.docs-wrapper .platform-grid a {
|
|
text-decoration: none;
|
|
background: var(--bg-shade-3);
|
|
border-radius: 12px;
|
|
color: var(--text-shade-4) !important;
|
|
display: grid;
|
|
grid-template-rows: auto fit-content(100%);
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 36px;
|
|
padding-bottom: 24px;
|
|
gap: 24px;
|
|
}
|
|
|
|
.platform-grid a img {
|
|
width: 180px;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
.platform-grid a span {
|
|
margin-top: auto;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
@media screen and (max-width: 1296px) {
|
|
.docs-wrapper .content {
|
|
padding: 48px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1080px) {
|
|
.docs-wrapper .header-wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
width: 100vw;
|
|
}
|
|
|
|
button#openSidebar {
|
|
display: block;
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-left: 20px;
|
|
background: none;
|
|
}
|
|
|
|
.docs-wrapper header {
|
|
margin-left: 20px;
|
|
width: 100%;
|
|
left: 0;
|
|
}
|
|
|
|
.docs-wrapper {
|
|
margin-top: 80px;
|
|
height: calc(100% - 80px);
|
|
}
|
|
|
|
a.logo-link {
|
|
display: none;
|
|
}
|
|
.docs-wrapper header a.logo-link {
|
|
display: block;
|
|
height: 40px;
|
|
margin: 0;
|
|
margin-right: 34px;
|
|
}
|
|
|
|
.docs-wrapper .sidebar {
|
|
grid-column: 1 / span 1;
|
|
grid-row: 2 / span 1;
|
|
width: 0;
|
|
transition: width 250ms;
|
|
}
|
|
|
|
.docs-wrapper .sidebar.open {
|
|
width: min(300px, 100vw);
|
|
}
|
|
|
|
.docs-wrapper .content {
|
|
width: 100vw;
|
|
box-sizing: border-box;
|
|
border-top-left-radius: 0;
|
|
grid-column: 2 / span 1;
|
|
grid-row: 2 / span 1;
|
|
}
|
|
.docs-wrapper .content.open-sidebar {
|
|
border-top-left-radius: 8px;
|
|
}
|
|
.docs-wrapper .content-inner {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
.docs-wrapper header button.dropdown-button#mobile-button {
|
|
display: none;
|
|
}
|
|
.docs-wrapper header .logo-link svg text {
|
|
display: block;
|
|
}
|
|
.docs-wrapper header .logo-link svg {
|
|
width: 120px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 820px) {
|
|
.docs-wrapper .content .quick-links-grid,
|
|
.platform-grid {
|
|
grid-template-columns: 1fr;
|
|
grid-auto-rows: 1fr;
|
|
}
|
|
|
|
.docs-wrapper header a.logo-link {
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 576px) {
|
|
.docs-wrapper header div.dropdown {
|
|
left: calc(-39.876px - 6px - 30px - 40px);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 492px) {
|
|
.docs-wrapper .content {
|
|
padding: 36px;
|
|
}
|
|
|
|
header .logo-link svg text {
|
|
display: none;
|
|
}
|
|
header .logo-link svg {
|
|
width: 39.876px;
|
|
}
|
|
.docs-wrapper header a.logo-link {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 360px) {
|
|
.docs-wrapper .content {
|
|
padding: 24px;
|
|
}
|
|
}
|
|
|
|
/* Scrollbar styling 'cause it's fancy */
|
|
.docs-wrapper .sidebar::-webkit-scrollbar,
|
|
.docs-wrapper .content::-webkit-scrollbar,
|
|
.docs-wrapper .content pre code::-webkit-scrollbar,
|
|
.search .input-wrapper .matches::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
.docs-wrapper .sidebar::-webkit-scrollbar-track,
|
|
.docs-wrapper .content::-webkit-scrollbar-track,
|
|
.docs-wrapper .content pre code::-webkit-scrollbar-track,
|
|
.search .input-wrapper .matches::-webkit-scrollbar-track {
|
|
background: none;
|
|
}
|
|
.docs-wrapper .sidebar::-webkit-scrollbar-thumb,
|
|
.docs-wrapper .content::-webkit-scrollbar-thumb,
|
|
.docs-wrapper .content pre code::-webkit-scrollbar-thumb,
|
|
.search .input-wrapper .matches::-webkit-scrollbar-thumb {
|
|
background-color: var(--text-shade-0);
|
|
border-radius: 24px;
|
|
border: 3px solid var(--bg-shade-0);
|
|
}
|
|
.docs-wrapper .content::-webkit-scrollbar-thumb {
|
|
border: 3px solid var(--bg-shade-1);
|
|
}
|
|
.docs-wrapper .content pre code::-webkit-scrollbar-thumb,
|
|
.search .input-wrapper .matches::-webkit-scrollbar-thumb {
|
|
border: 3px solid var(--bg-shade-2);
|
|
}
|
|
|
|
.docs-wrapper .sidebar,
|
|
.search .input-wrapper .matches {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--text-shade-0) var(--bg-shade-1);
|
|
}
|
|
.docs-wrapper .content {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--text-shade-0) var(--bg-shade-1);
|
|
}
|
|
.docs-wrapper .content pre code {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--text-shade-0) var(--bg-shade-0);
|
|
}
|