mirror of
https://github.com/DiscordFactory/website-documentation.git
synced 2026-01-14 17:34:22 +01:00
📱 Responsive desktop
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="px-5 sm:px-0 flex flex-col sm:flex-row space-y-5 sm:space-y-0 sm:space-x-5">
|
<div class="px-5 lg:px-0 flex flex-col sm:flex-row space-y-5 sm:space-y-0 sm:space-x-5">
|
||||||
<div class="sm:w-1/2">
|
<div class="sm:w-1/2">
|
||||||
<Collapse
|
<Collapse
|
||||||
:items="collapseHighlighting"
|
:items="collapseHighlighting"
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<div class="relative z-10 lg:col-start-1 lg:row-start-1 lg:col-span-4 lg:py-16 lg:bg-transparent">
|
<div class="relative z-10 lg:col-start-1 lg:row-start-1 lg:col-span-4 lg:py-16 lg:bg-transparent">
|
||||||
<div class="max-w-md mx-auto px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:p-0">
|
<div class="max-w-md mx-auto px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:p-0">
|
||||||
<div class="bg-blue-900 rounded-xl aspect-w-10 aspect-h-6 sm:aspect-w-2 sm:aspect-h-1 lg:aspect-w-1.5">
|
<div class="bg-blue-900 rounded-xl aspect-w-10 aspect-h-6 sm:aspect-w-2 sm:aspect-h-1 lg:aspect-w-1.5">
|
||||||
<img class="rounded-md" src="../assets/discord-banner.jpg" alt="Workflow" />
|
<img class="rounded-md object-cover" src="../assets/discord-banner.jpg" alt="Workflow" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||||
<template>
|
<template>
|
||||||
<div class="relative bg-gray-800 rounded-xl overflow-hidden">
|
<div class="relative bg-gray-800 rounded-xl overflow-hidden">
|
||||||
<img class="absolute" src="../assets/discord-background.png" alt="Workflow" />
|
<img class="absolute w-full h-full object-cover" src="../assets/discord-background.png" alt="Workflow" />
|
||||||
<div class="absolute inset-0 bg-black opacity-25"></div>
|
<div class="absolute inset-0 bg-black opacity-25"></div>
|
||||||
<div class="relative z-10 max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8 lg:py-20">
|
<div class="relative z-10 max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8 lg:py-20">
|
||||||
<div class="max-w-4xl mx-auto text-center">
|
<div class="max-w-4xl mx-auto text-center">
|
||||||
|
|||||||
@@ -26,13 +26,13 @@ onMounted(async () => {
|
|||||||
.markdown-viewer {
|
.markdown-viewer {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
& > p:nth-child(2), & > p:last-child, & > p:nth-last-child(3) {
|
& > p:nth-child(2), & > p:last-child, & > p:nth-last-child(3) {
|
||||||
@apply flex md:flex-wrap md:space-x-2 overflow-x-scroll;
|
@apply flex md:flex-wrap md:space-x-2 overflow-x-auto;
|
||||||
}
|
}
|
||||||
& > img {
|
& > img {
|
||||||
@apply md:w-1/3;
|
@apply md:w-1/3;
|
||||||
}
|
}
|
||||||
& > p {
|
& > p {
|
||||||
@apply md:flex-wrap md:space-x-2 overflow-x-scroll;
|
@apply md:flex-wrap md:space-x-2 overflow-x-auto;
|
||||||
code {
|
code {
|
||||||
@apply bg-red-500;
|
@apply bg-red-500;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user