mirror of
https://github.com/IT4Change/IT4C.dev.git
synced 2025-12-13 09:25:49 +00:00
* remove empty main.css * fix tailwind to work properly with vuepress Have Headline paddings apply only to the blank layout. Change contentwidth only on blank layout. Do only partially import tailwind (ommit preflight) as it is in conflict with vuepress. * tailwind load preflight, but exclude certain styles * limit fixes to vuepress classes
57 lines
968 B
Vue
57 lines
968 B
Vue
<template>
|
|
<div class="theme-container blank-layout">
|
|
<Content />
|
|
<Footer />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'BlankLayout'
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@layer theme, base, components, utilities;
|
|
|
|
@import "tailwindcss/theme.css" layer(theme);
|
|
@import "tailwindcss/preflight.css" layer(base);
|
|
@import "tailwindcss/utilities.css" layer(utilities);
|
|
|
|
/* Conflicts with vuepress */
|
|
@layer base {
|
|
.vp-sidebar {
|
|
box-sizing: content-box;
|
|
}
|
|
.vp-nav-logo {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.blank-layout {
|
|
--content-width: 1160px;
|
|
}
|
|
|
|
.blank-layout h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-family-heading);
|
|
}
|
|
|
|
.blank-layout h1, h2 {
|
|
border-bottom: none;
|
|
padding-bottom: 2rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.blank-layout .content-width {
|
|
max-width: var(--content-width);
|
|
margin: 0 auto;
|
|
padding: 0 2.5rem;
|
|
|
|
@media (max-width: 768px) {
|
|
padding: 0 1.75rem;
|
|
}
|
|
@media (max-width: 400px) {
|
|
padding: 0 1rem;
|
|
}
|
|
}
|
|
</style> |