diff options
-rw-r--r-- | Website/layouts/default.vue | 41 | ||||
-rw-r--r-- | Website/pages/docs.vue | 64 | ||||
-rw-r--r-- | Website/pages/faq.vue | 2 | ||||
-rw-r--r-- | Website/pages/help.vue | 2 |
4 files changed, 70 insertions, 39 deletions
diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue index e8b4621..fd49a23 100644 --- a/Website/layouts/default.vue +++ b/Website/layouts/default.vue @@ -141,6 +141,9 @@ body { margin: 0.25em; } +.title-text { + font-size: 3rem; +} .topBar { padding: 0 3rem; width: fit-content !important; @@ -151,10 +154,12 @@ body { /* border: 1px solid #222; */ overflow: hidden; } -.title-text { - font-size: 3rem; -} +/* used in docs.vue */ +.flex-wrapper { + display: flex; + flex-wrap: nowrap; +} @media (max-width: 768px) { /* mobile */ .title-text { @@ -166,6 +171,35 @@ body { ) !important; /* (2rem = mx-4) 1rem on left, 1rem on right */ padding: 0; } + .flex-wrapper { + display: flex; + flex-wrap: wrap; + } +} + +/* used in docs.vue, help.vue and faq.vue */ +.width-constraint { + max-width: auto; + margin: 0 auto; +} +@media (min-width: 960px) { + /* tablet */ + .width-constraint { + width: 75vw; + } +} +@media (min-width: 1264px) { + /* desktop */ + .width-constraint { + width: 60vw; + } +} + +@media (min-width: 1904) { + /* 4k/ultrawide */ + .width-constraint { + width: 42vw; + } } /* animations and all that */ @@ -179,7 +213,6 @@ body { .swoop-right-leave-active { transition-duration: 0.1s; transition-property: opacity, transform; - overflow: hidden; } .swoop-left-enter, diff --git a/Website/pages/docs.vue b/Website/pages/docs.vue index a1ef277..335929a 100644 --- a/Website/pages/docs.vue +++ b/Website/pages/docs.vue @@ -1,48 +1,46 @@ <template> - <div class="row wrap justify-center full-width mx-auto" style="width: 80vw"> - <!-- Left Section // "Sections" Card --> - <v-card - class="col-xs-12 mx-2 elevation-0" + <!-- min-height overrides vertical centering from the parent default.vue layout --> + <div + class="width-constraint flex-wrapper" + style="min-height: calc(100vh - 10rem); position: relative" + > + <!-- docs navigation --> + <v-list + class="py-0 mr-3" style=" background: transparent; - height: max-content; position: sticky; - top: 5.5rem; - max-width: 500px; + top: 6rem; + align-self: flex-start; " > - <!-- <v-card-title style="padding-bottom: 0 !important; color: #aaa"> - Sections - </v-card-title> --> - <v-list style="background: transparent"> - <!-- Dynamically Generate Links From Below --> - <v-list-item - v-for="(item, i) in links" - :key="i" - :to="item.to" - router - class="mt-4" - color="primary" - style="overflow: hidden; border-radius: 0.75rem" - > - <v-list-item-title style="text-align: right"> - <v-list-item-title v-text="item.text" /> - </v-list-item-title> - <v-list-item-icon> - <v-icon v-text="item.icon" /> - </v-list-item-icon> - </v-list-item> - </v-list> - </v-card> + <v-list-item + v-for="(item, i) in links" + :key="i" + :to="item.to" + router + class="mb-4" + color="primary" + style="overflow: hidden !important; border-radius: 0.75rem" + > + <v-list-item-title style="text-align: right"> + <v-list-item-title v-text="item.text" /> + </v-list-item-title> + <v-list-item-icon> + <v-icon v-text="item.icon" /> + </v-list-item-icon> + </v-list-item> + </v-list> - <!-- Child Pages // Card --> + <!-- docs content --> <v-card - class="col-xs-12 col-md-6 text-left mx-2 my-6 pa-8" + class="text-left pa-8" style=" + flex-grow: 2; height: max-content; + max-width: 90vw !important; background-color: #222; border-radius: 0.75rem; - width: 90%; " > <NuxtChild /> diff --git a/Website/pages/faq.vue b/Website/pages/faq.vue index f0115fc..90f280d 100644 --- a/Website/pages/faq.vue +++ b/Website/pages/faq.vue @@ -1,5 +1,5 @@ <template> - <div class="col-xs-12 col-sm-11 col-md-9 col-lg-7 mx-auto"> + <div class="width-constraint"> <h1 class="title-text">Frequently Asked Questions</h1> <p style="color: #999; margin-top: 0.5rem; margin-bottom: 1.5rem"> Still have questions? Feel free to join our Discord! diff --git a/Website/pages/help.vue b/Website/pages/help.vue index 219ce3f..3c457e1 100644 --- a/Website/pages/help.vue +++ b/Website/pages/help.vue @@ -1,5 +1,5 @@ <template> - <div class="col-xs-12 col-sm-11 col-md-9 col-lg-7 mx-auto"> + <div class="width-constraint"> <h1 class="title-text pt-12">Troubleshooting</h1> <ol style="line-height: 3rem; color: #aaa" class="text-left"> <li> |