📱 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>
<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">
<Collapse
: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="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">
<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>

View File

@@ -1,7 +1,7 @@
<!-- This example requires Tailwind CSS v2.0+ -->
<template>
<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="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">

View File

@@ -26,13 +26,13 @@ onMounted(async () => {
.markdown-viewer {
display: block !important;
& > 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 {
@apply md:w-1/3;
}
& > p {
@apply md:flex-wrap md:space-x-2 overflow-x-scroll;
@apply md:flex-wrap md:space-x-2 overflow-x-auto;
code {
@apply bg-red-500;
}