mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-03-21 17:24:28 -05:00
style: mobile layout, tips, minor changes
This commit is contained in:
Ash Monty
parent
4dbd8411b6
commit
976a7861aa
16
docs/en-US/install/wiiu.md
Normal file
16
docs/en-US/install/wiiu.md
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
# Wii U
|
||||
|
||||
This guide assumes your Wii U can already run Homebrew. If not, you can [follow this guide](https://wiiu.hacks.guide/) and come back here when you're done.
|
||||
|
||||
<div class="tip">
|
||||
guide lol
|
||||
</div>
|
||||
|
||||
<div class="tip green">
|
||||
guide lol
|
||||
</div>
|
||||
|
||||
<div class="tip red">
|
||||
guide lol
|
||||
</div>
|
||||
|
||||
|
|
@ -12,6 +12,16 @@ a.logo-link {
|
|||
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 {
|
||||
box-sizing: border-box;
|
||||
margin: 20px;
|
||||
|
|
@ -35,7 +45,7 @@ a.logo-link {
|
|||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
width: clamp(270px, 30vw, 500px);
|
||||
width: clamp(270px, 25vw, 500px);
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
min-height: 100%;
|
||||
|
|
@ -128,6 +138,35 @@ a.logo-link {
|
|||
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.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;
|
||||
|
|
@ -188,11 +227,11 @@ a.logo-link {
|
|||
margin-top: 36px;
|
||||
}
|
||||
|
||||
.platform-grid a {
|
||||
.docs-wrapper .platform-grid a {
|
||||
text-decoration: none;
|
||||
background: var(--bg-shade-3);
|
||||
border-radius: 12px;
|
||||
color: var(--text-shade-4);
|
||||
color: var(--text-shade-4) !important;
|
||||
display: grid;
|
||||
grid-template-rows: auto fit-content(100%);
|
||||
align-items: center;
|
||||
|
|
@ -214,14 +253,94 @@ a.logo-link {
|
|||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/*
|
||||
@media screen and (max-width: 1080px) {
|
||||
.docs-wrapper .sidebar .section {
|
||||
margin-left: 60px;
|
||||
width: 184px;
|
||||
@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%;
|
||||
}
|
||||
|
||||
.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-inner {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 820px) {
|
||||
.docs-wrapper .content .quick-links-grid,
|
||||
.platform-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
/* Scrollbar styling 'cause it's fancy */
|
||||
.docs-wrapper .sidebar::-webkit-scrollbar,
|
||||
|
|
|
|||
5
public/assets/js/docssidebarhandler.js
Normal file
5
public/assets/js/docssidebarhandler.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
const openSidebarBtn = document.querySelector('#openSidebar');
|
||||
openSidebarBtn.addEventListener('click', function() {
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
sidebar.classList.toggle('open');
|
||||
});
|
||||
|
|
@ -92,8 +92,8 @@ router.get('/:subpath/:page', async (request, response, next) => {
|
|||
|
||||
const locale = response.locals.localeString;
|
||||
const pageName = request.params.page;
|
||||
renderData.currentPage = pageName;
|
||||
const subpath = request.params.subpath;
|
||||
renderData.currentPage = `${subpath}/${pageName}`;
|
||||
|
||||
const { content, MDLocale } = getRawDocs(locale, subpath, pageName);
|
||||
if (content) {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,12 @@
|
|||
</svg>
|
||||
</a>
|
||||
|
||||
{{> header}}
|
||||
<div class="header-wrapper">
|
||||
<button id="openSidebar" class="nostyle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||||
</button>
|
||||
{{> header}}
|
||||
</div>
|
||||
|
||||
{{> docs-sidebar}}
|
||||
|
||||
|
|
@ -63,6 +68,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/assets/js/docssidebarhandler.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
|
||||
<link rel="stylesheet" href="/assets/css/highlightjs.css">
|
||||
|
|
|
|||
|
|
@ -27,7 +27,12 @@
|
|||
</svg>
|
||||
</a>
|
||||
|
||||
{{> header}}
|
||||
<div class="header-wrapper">
|
||||
<button id="openSidebar" class="nostyle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||||
</button>
|
||||
{{> header}}
|
||||
</div>
|
||||
|
||||
{{> docs-sidebar}}
|
||||
|
||||
|
|
@ -59,6 +64,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/assets/js/docssidebarhandler.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
|
||||
<link rel="stylesheet" href="/assets/css/highlightjs.css">
|
||||
|
|
|
|||
|
|
@ -27,7 +27,12 @@
|
|||
</svg>
|
||||
</a>
|
||||
|
||||
{{> header}}
|
||||
<div class="header-wrapper">
|
||||
<button id="openSidebar" class="nostyle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||||
</button>
|
||||
{{> header}}
|
||||
</div>
|
||||
|
||||
{{> docs-sidebar}}
|
||||
|
||||
|
|
@ -48,6 +53,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/assets/js/docssidebarhandler.js"></script>
|
||||
|
||||
<script id="errorList" type="application/json">
|
||||
{{{errorList}}}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,14 @@
|
|||
<a href="/docs/search">Search</a>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h5>Install</h5>
|
||||
<a href="/docs/install/wiiu">Wii U</a>
|
||||
<a href="/docs/install/3ds">3DS</a>
|
||||
<a href="/docs/install/cemu">Cemu</a>
|
||||
<a href="/docs/install/citra">Citra</a>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h5>Error codes - Juxt</h5>
|
||||
<a href="/docs/JXT-598-0000">JXT-598-0000</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user