yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 04:09:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

building grid for mobile v.

Browse Source
This commit is contained in:
Kostya
2023-11-26 18:15:34 +03:00
parent 5ea14bc077
commit b246e5adb6
2 changed files with 46 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css Normal file
View File

@@ -0,0 +1,35 @@
.content-grid__mobile-home {
display: grid;
grid-auto-columns: 1fr;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr repeat(2, 0.5fr) 1fr;
gap: 0px 0px;
grid-template-areas:
"header-mobile header-mobile header-mobile header-mobile"
"main-mobile main-mobile main-mobile main-mobile"
"main-mobile main-mobile main-mobile main-mobile"
"footer-mobile footer-mobile footer-mobile footer-mobile";
height: 100%;
width: 100%;
}
.header-mobile {
grid-area: header-mobile;
width: 100%;
height: 100%;
background: #000;
}
.main-mobile {
grid-area: main-mobile;
width: 100%;
height: 100%;
background: #983838;
}
.footer-mobile {
grid-area: footer-mobile;
width: 100%;
height: 100%;
background: #73ce36;
}

12
luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
View File

@@ -1,10 +1,20 @@
<template> <template>
<div class="content-grid__mobile-home"> <div class="content-grid__mobile-home">
<h1>mobile</h1> <header class="header-mobile">
<h1>header</h1>
</header>
<main class="main-mobile">
<h1>main</h1>
</main>
<footer class="footer-mobile">
<h1>footer</h1>
</footer>
</div> </div>
</template> </template>
<script> <script>
import '@/assets/css/PagesStyles/adaptive-pages/homemobile.css'
export default { export default {
} }