diff --git a/GanjooRazor/wwwroot/css/p8.css b/GanjooRazor/wwwroot/css/p8.css index cfa8419e..3c2d6de9 100644 --- a/GanjooRazor/wwwroot/css/p8.css +++ b/GanjooRazor/wwwroot/css/p8.css @@ -1743,13 +1743,14 @@ ol { .footer-contents { display: grid; + grid-template-columns: repeat(3, 1fr); grid-gap: 50px; margin-top: 5px; margin-bottom: 5px; } .link-list-internals { - grid-column: 1/3; + grid-column: 1/2; grid-row: 1/1; } @@ -1759,10 +1760,38 @@ ol { } .link-list-about { - grid-column: 3/3; + grid-column: 3/4; grid-row: 1/1; } +@media (max-width: 768px) { + .footer-contents { + grid-template-columns: 1fr 1fr; + grid-gap: 20px; + } + + .link-list-internals { + grid-column: 1/2; + grid-row: auto; + } + + .link-list-tools { + grid-column: 2/3; + grid-row: auto; + } + + .link-list-about { + grid-column: 1/3; + grid-row: auto; + column-count: 2; + column-gap: 20px; + } + + .link-list-about li { + break-inside: avoid; + } +} + #footer { background: var(--card-inner); border: 1.5px solid var(--border-gold); @@ -1795,9 +1824,11 @@ ol { border-bottom: 2px solid var(--accent-border); } +@media (min-width: 769px) { #footer .link-list-tools li { padding-right: 50px; } +} .recitaion-info { }