📱 Responsive desktop

This commit is contained in:
Freeze455
2021-10-06 20:19:16 +02:00
parent c0b37c9943
commit 482a1cc4dd
4 changed files with 5 additions and 5 deletions

View File

@@ -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"

View File

@@ -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>

View File

@@ -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">

View File

@@ -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;
} }