update grid system

This commit is contained in:
jinhojang6
2023-05-31 22:06:47 +09:00
parent 1b4c17557b
commit 793cc1aa90
2 changed files with 91 additions and 135 deletions
@@ -249,106 +249,6 @@ svg * {
gap: 16px;
}
.grid-item {
grid-column: span 4;
&.w-1 {
grid-column: span 1;
}
&.w-2 {
grid-column: span 2;
}
&.w-3 {
grid-column: span 3;
}
&.w-4 {
grid-column: span 4;
}
&.w-5 {
grid-column: span 4;
}
&.w-6 {
grid-column: span 6;
}
&.w-7 {
grid-column: span 7;
}
&.w-8 {
grid-column: span 8;
}
&.w-9 {
grid-column: span 8;
}
&.w-10 {
grid-column: span 10;
}
&.w-11 {
grid-column: span 10;
}
&.w-12 {
grid-column: span 12;
}
&.w-13 {
grid-column: span 12;
}
&.w-14 {
grid-column: span 14;
}
&.w-15 {
grid-column: span 14;
}
&.w-16 {
grid-column: span 16;
}
&.w-17 {
grid-column: span 17;
}
&.w-18 {
grid-column: span 18;
}
&.w-19 {
grid-column: span 18;
}
&.w-20 {
grid-column: span 18;
}
&.w-21 {
grid-column: span 18;
}
&.w-22 {
grid-column: span 18;
}
&.w-23 {
grid-column: span 18;
}
&.w-24 {
grid-column: span 24;
}
}
.table-of-contents__link--active {
color: rgb(var(--lsd-text-primary)) !important;
}
@@ -667,23 +567,54 @@ div.w-10 > a:not(:last-child) {
}
}
.main-wrapper {
padding: 0;
@include utils.responsive('lg', 'up') {
.main-wrapper {
padding: 0;
& > div {
display: grid;
grid-template-columns: repeat(18, 1fr);
gap: 1rem;
aside {
width: auto;
grid-column: 1 / 4;
border: none;
main > .container {
padding-inline: 0 !important;
}
main {
grid-column: 5 / 19;
max-width: none;
& > div {
display: grid;
grid-template-columns: repeat(16, 1fr);
gap: 1rem;
padding-inline: 16px;
aside {
width: auto;
grid-column: 1 / 5;
border: none;
}
main {
grid-column: 6 / 17;
max-width: none;
}
}
}
}
@include utils.responsive('xl', 'up') {
.main-wrapper {
padding: 0;
& > div {
display: grid;
grid-template-columns: repeat(24, 1fr);
gap: 1rem;
padding-inline: 0;
aside {
width: auto;
grid-column: 1 / 5;
border: none;
}
main {
grid-column: 6 / 25;
max-width: none;
}
}
}
}
@@ -818,9 +749,6 @@ div.w-10 > a:not(:last-child) {
.navbar__left-items {
flex: 1 0;
}
.navbar__right-items {
}
}
@include utils.responsive('xl', 'up') {
@@ -856,4 +784,12 @@ div.w-10 > a:not(:last-child) {
> main {
}
}
.main-wrapper {
// website pages
main > .container {
padding-inline: 0 !important;
}
}
}
@@ -5,45 +5,53 @@
margin-top: 0;
}
.docItemCol {
grid-column: span 10;
}
.docItemGrid {
display: grid;
grid-template-columns: repeat(14, 1fr);
gap: 16px;
}
.toc {
grid-column: span 3;
}
.gap1 {
grid-column: span 1;
}
.tocMobile {
display: none;
.toc {
grid-column: span 4;
}
.tocMobile {
& > div {
display: block !important;
}
}
@include utils.responsive('xl', 'up') {
.tocMobile {
display: none;
@include utils.responsive('lg', 'up') {
.docItemGrid {
display: grid;
grid-template-columns: repeat(11, 1fr);
gap: 16px;
}
.docItemCol {
grid-column: span 11;
}
}
@include utils.responsive('xl', 'down') {
.tocMobile {
display: block;
@include utils.responsive('xl', 'up') {
.docItemGrid {
display: grid;
grid-template-columns: repeat(19, 1fr);
gap: 16px;
}
.toc {
display: none;
.docItemCol {
grid-column: span 14;
}
}
@include utils.responsive('lg', 'down') {
.tocMobile {
display: block;
}
.docItemGrid {
@@ -56,3 +64,15 @@
grid-column: span 2;
}
}
@include utils.responsive('xl', 'up') {
.tocMobile {
display: none;
}
}
@include utils.responsive('xl', 'down') {
.toc {
display: none;
}
}