mirror of
https://github.com/pterodactyl/documentation.git
synced 2025-12-10 21:05:59 -06:00
CSS tweaks
This commit is contained in:
Dane Everitt
parent
2c28d06fcc
commit
9d5cfc5c50
@ -1,30 +1,27 @@
|
||||
$line-numbers-width: 1rem;
|
||||
|
||||
.content {
|
||||
code {
|
||||
@apply m-0 text-sm bg-grey-lighter rounded-sm;
|
||||
padding: .2rem;
|
||||
padding: .25rem .5rem;
|
||||
}
|
||||
|
||||
pre, pre[class*="language-"] {
|
||||
@apply leading-tight overflow-auto my-4 mx-0 p-4;
|
||||
@apply .leading-normal .overflow-auto .my-4 .mx-0 .p-4;
|
||||
|
||||
code {
|
||||
@apply text-white p-0 bg-transparent;
|
||||
@apply .text-white .p-0 .bg-transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="language-"] {
|
||||
@apply relative bg-grey-darkest;
|
||||
@apply .relative .bg-grey-darkest;
|
||||
|
||||
.highlight-lines {
|
||||
@apply absolute pin-t pin-l w-full leading-tight;
|
||||
user-select: none;
|
||||
@apply .absolute .pin-t .pin-l .w-full .leading-normal .select-none;
|
||||
margin-top: 1.15rem;
|
||||
|
||||
.highlighted {
|
||||
@apply bg-grey-darker;
|
||||
@apply .bg-grey-darker;
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,37 +43,32 @@ div[class*="language-"] {
|
||||
}
|
||||
&.line-numbers-mode {
|
||||
.highlight-lines .highlighted {
|
||||
@apply relative;
|
||||
@apply .relative;
|
||||
|
||||
&:before {
|
||||
@apply absolute pin-l pin-t block h-full;
|
||||
@apply .absolute .pin-l .pin-t .block .h-full .w-4;
|
||||
content: ' ';
|
||||
width: $line-numbers-width;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
@apply align-middle;
|
||||
width: $line-numbers-width;
|
||||
@apply .align-middle .w-4;
|
||||
}
|
||||
|
||||
.line-numbers-wrapper {
|
||||
@apply absolute pin-t text-center;
|
||||
width: $line-numbers-width;
|
||||
@apply .absolute .pin-t .text-center .w-4;
|
||||
|
||||
br {
|
||||
user-select: none;
|
||||
@apply .select-none;
|
||||
}
|
||||
|
||||
.line-number {
|
||||
@apply relative;
|
||||
user-select: none;
|
||||
@apply .relative .select-none;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
@apply absolute pin-t pin-l h-full;
|
||||
@apply .absolute .pin-t .pin-l .h-full .w-4;
|
||||
content: '';
|
||||
width: $line-numbers-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -112,4 +104,4 @@ div[class~="language-python"]:before {
|
||||
}
|
||||
div[class~="language-bash"]:before {
|
||||
content: "sh";
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,4 +6,9 @@
|
||||
.content {
|
||||
@apply mx-auto p-8;
|
||||
max-width: $content-width;
|
||||
}
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
@apply .border;
|
||||
padding: 0.6rem 1rem !important;
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ $arrow-bg: #000;
|
||||
@apply fixed pin-l pin-b bg-white overflow-auto border-r border-grey-lighter py-8;
|
||||
top: $nav-height;
|
||||
width: $sidebar-width;
|
||||
font-size: 15px;
|
||||
|
||||
ul {
|
||||
@apply list-reset m-0;
|
||||
@ -15,7 +16,7 @@ $arrow-bg: #000;
|
||||
|
||||
.nav-links {
|
||||
@apply px-6;
|
||||
|
||||
|
||||
.nav-link, .repo-link {
|
||||
@apply my-2;
|
||||
}
|
||||
@ -38,7 +39,11 @@ $arrow-bg: #000;
|
||||
}
|
||||
|
||||
a.sidebar-link {
|
||||
@apply pl-8;
|
||||
@apply .pl-8;
|
||||
|
||||
&:hover {
|
||||
@apply .no-underline .text-blue-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -120,4 +125,4 @@ $arrow-bg: #000;
|
||||
.page {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,25 +1,29 @@
|
||||
body {
|
||||
@apply text-grey-darkest;
|
||||
@apply .text-grey-darkest .font-sans;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-blue font-bold no-underline;
|
||||
@apply .text-blue-light .no-underline;
|
||||
font-weight: 500;
|
||||
&:hover {
|
||||
@apply .underline;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
@apply border border-grey-lighter bg-grey-lightest;
|
||||
@apply .border .border-grey-lighter .bg-grey-lightest;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
@apply pl-8 my-2;
|
||||
@apply .pl-8 .my-2;
|
||||
}
|
||||
|
||||
strong {
|
||||
@apply font-bold;
|
||||
@apply .font-bold;
|
||||
}
|
||||
|
||||
a.header-anchor {
|
||||
@apply invisible float-left;
|
||||
@apply .invisible .float-left;
|
||||
font-size: .85em;
|
||||
width: .87em;
|
||||
margin-left: -0.87em;
|
||||
@ -27,24 +31,33 @@ a.header-anchor {
|
||||
margin-top: 0.125em;
|
||||
}
|
||||
|
||||
.content:not(.custom) {
|
||||
& > h1, h2, h3, h4, h5, h6 {
|
||||
&:first-child {
|
||||
@apply .my-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-bold mt-6;
|
||||
@apply .mt-6 .font-semibold;
|
||||
|
||||
&:hover .header-anchor {
|
||||
@apply visible;
|
||||
@apply .visible;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-5xl;
|
||||
@apply .text-4xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply pb-3 border-b;
|
||||
@apply .pb-3 .border-b;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply my-4;
|
||||
@apply .my-4;
|
||||
line-height: 1.7 !important;
|
||||
}
|
||||
|
||||
code, kbd, .line-number {
|
||||
@ -74,4 +87,4 @@ table {
|
||||
th, td {
|
||||
@apply border py-2 px-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
$sidebar-width: 15rem;
|
||||
$sidebar-width: 20rem;
|
||||
$nav-height: 48px;
|
||||
$content-width: 740px;
|
||||
$content-width: 840px;
|
||||
|
||||
90
tailwind.js
90
tailwind.js
@ -165,11 +165,6 @@ module.exports = {
|
||||
'md': '768px',
|
||||
'lg': '992px',
|
||||
'xl': '1200px',
|
||||
|
||||
'xsx': {'max': '575px'},
|
||||
'smx': {'max': '767px'},
|
||||
'mdx': {'max': '991px'},
|
||||
'lgx': {'max': '1999px'},
|
||||
},
|
||||
|
||||
|
||||
@ -193,25 +188,37 @@ module.exports = {
|
||||
|
||||
fonts: {
|
||||
'sans': [
|
||||
'"Source Sans Pro"',
|
||||
'system-ui',
|
||||
'BlinkMacSystemFont',
|
||||
'-apple-system',
|
||||
'"Helvetica Neue"',
|
||||
'Segoe UI',
|
||||
'Roboto',
|
||||
'Oxygen',
|
||||
'Ubuntu',
|
||||
'Cantarell',
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
'sans-serif',
|
||||
],
|
||||
'serif': [
|
||||
'Constantia',
|
||||
'"Lucida Bright"',
|
||||
'Lucida Bright',
|
||||
'Lucidabright',
|
||||
'"Lucida Serif"',
|
||||
'Lucida Serif',
|
||||
'Lucida',
|
||||
'DejaVu Serif',
|
||||
'Bitstream Vera Serif',
|
||||
'Liberation Serif',
|
||||
'Georgia',
|
||||
'serif',
|
||||
],
|
||||
'mono': [
|
||||
'Menlo',
|
||||
'Monaco',
|
||||
'Consolas',
|
||||
'Liberation Mono',
|
||||
'Courier New',
|
||||
'monospace',
|
||||
]
|
||||
},
|
||||
@ -406,7 +413,7 @@ module.exports = {
|
||||
|
|
||||
*/
|
||||
|
||||
borderColors: global.Object.assign({default: colors['grey-light']}, colors),
|
||||
borderColors: global.Object.assign({ default: colors['grey-light'] }, colors),
|
||||
|
||||
|
||||
/*
|
||||
@ -461,6 +468,7 @@ module.exports = {
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
@ -508,6 +516,7 @@ module.exports = {
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
@ -579,7 +588,6 @@ module.exports = {
|
||||
*/
|
||||
|
||||
maxWidth: {
|
||||
'xxs': '10rem',
|
||||
'xs': '20rem',
|
||||
'sm': '30rem',
|
||||
'md': '40rem',
|
||||
@ -635,9 +643,15 @@ module.exports = {
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
'12': '3rem',
|
||||
'16': '4rem',
|
||||
'20': '5rem',
|
||||
'24': '6rem',
|
||||
'32': '8rem',
|
||||
},
|
||||
|
||||
|
||||
@ -664,8 +678,15 @@ module.exports = {
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
'12': '3rem',
|
||||
'16': '4rem',
|
||||
'20': '5rem',
|
||||
'24': '6rem',
|
||||
'32': '8rem',
|
||||
},
|
||||
|
||||
|
||||
@ -691,8 +712,15 @@ module.exports = {
|
||||
'2': '0.5rem',
|
||||
'3': '0.75rem',
|
||||
'4': '1rem',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
'12': '3rem',
|
||||
'16': '4rem',
|
||||
'20': '5rem',
|
||||
'24': '6rem',
|
||||
'32': '8rem',
|
||||
},
|
||||
|
||||
|
||||
@ -717,6 +745,7 @@ module.exports = {
|
||||
'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
|
||||
'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
|
||||
'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
|
||||
'outline': '0 0 0 3px rgba(52,144,220,0.5)',
|
||||
'none': 'none',
|
||||
},
|
||||
|
||||
@ -827,11 +856,12 @@ module.exports = {
|
||||
modules: {
|
||||
appearance: ['responsive'],
|
||||
backgroundAttachment: ['responsive'],
|
||||
backgroundColors: ['responsive', 'hover'],
|
||||
backgroundColors: ['responsive', 'hover', 'focus'],
|
||||
backgroundPosition: ['responsive'],
|
||||
backgroundRepeat: ['responsive'],
|
||||
backgroundSize: ['responsive'],
|
||||
borderColors: ['responsive', 'hover'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
borderRadius: ['responsive'],
|
||||
borderStyle: ['responsive'],
|
||||
borderWidths: ['responsive'],
|
||||
@ -840,7 +870,7 @@ module.exports = {
|
||||
flexbox: ['responsive'],
|
||||
float: ['responsive'],
|
||||
fonts: ['responsive'],
|
||||
fontWeights: ['responsive', 'hover'],
|
||||
fontWeights: ['responsive', 'hover', 'focus'],
|
||||
height: ['responsive'],
|
||||
leading: ['responsive'],
|
||||
lists: ['responsive'],
|
||||
@ -851,18 +881,20 @@ module.exports = {
|
||||
minWidth: ['responsive'],
|
||||
negativeMargin: ['responsive'],
|
||||
opacity: ['responsive'],
|
||||
outline: ['focus'],
|
||||
overflow: ['responsive'],
|
||||
padding: ['responsive'],
|
||||
pointerEvents: ['responsive'],
|
||||
position: ['responsive'],
|
||||
resize: ['responsive'],
|
||||
shadows: ['responsive'],
|
||||
shadows: ['responsive', 'hover', 'focus'],
|
||||
svgFill: [],
|
||||
svgStroke: [],
|
||||
tableLayout: ['responsive'],
|
||||
textAlign: ['responsive'],
|
||||
textColors: ['responsive', 'hover'],
|
||||
textColors: ['responsive', 'hover', 'focus'],
|
||||
textSizes: ['responsive'],
|
||||
textStyle: ['responsive', 'hover'],
|
||||
textStyle: ['responsive', 'hover', 'focus'],
|
||||
tracking: ['responsive'],
|
||||
userSelect: ['responsive'],
|
||||
verticalAlign: ['responsive'],
|
||||
@ -872,28 +904,6 @@ module.exports = {
|
||||
zIndex: ['responsive'],
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
| Plugins https://tailwindcss.com/docs/plugins
|
||||
|-----------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you can register any plugins you'd like to use in your
|
||||
| project. Tailwind's built-in `container` plugin is enabled by default to
|
||||
| give you a Bootstrap-style responsive container component out of the box.
|
||||
|
|
||||
| Be sure to view the complete plugin documentation to learn more about how
|
||||
| the plugin system works.
|
||||
|
|
||||
*/
|
||||
|
||||
plugins: [
|
||||
require('tailwindcss/plugins/container')({
|
||||
center: true,
|
||||
}),
|
||||
],
|
||||
|
||||
|
||||
/*
|
||||
|-----------------------------------------------------------------------------
|
||||
| Advanced Options https://tailwindcss.com/docs/configuration#options
|
||||
@ -910,4 +920,4 @@ module.exports = {
|
||||
separator: ':',
|
||||
},
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user