mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 08:45:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add padding to container for all viewports

Browse source
This commit is contained in:
Yohn 2025-02-05 19:33:59 -05:00
parent 9847f55020
commit b0dca0677f
2 changed files with 90 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/index.html
View file

@ -24,7 +24,7 @@
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
<!-- Pico.css --> <!-- Pico.css -->
<link rel="stylesheet" href="pico.css" id="theme-color-ss"> <link rel="stylesheet" href="pico.min.css" id="theme-color-ss">
<link rel="stylesheet" href="pico.colors.min.css"> <link rel="stylesheet" href="pico.colors.min.css">
<!-- <!--
Yohn's Simple CSS Class helpers Yohn's Simple CSS Class helpers
@ -238,7 +238,7 @@
</footer> </footer>
</article> </article>
<hr> <hr>
<article id="tables"> <iv id="tables">
<header> <header>
<h2>Tables</h2> <h2>Tables</h2>
<h6 class="fw-n">Striped rows require .striped class</h6> <h6 class="fw-n">Striped rows require .striped class</h6>
@ -257,6 +257,7 @@
Hidden Rows</button></li> Hidden Rows</button></li>
</ul> </ul>
</nav> </nav>
<div class="overflow-auto">
<table class="striped" id="hidden-row-example"> <table class="striped" id="hidden-row-example">
<caption> Solar System Planets </caption> <caption> Solar System Planets </caption>
<thead> <thead>
@ -335,6 +336,7 @@
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div>
</article> </article>
<hr> <hr>
<article id="tabs"> <article id="tabs">

19
scss/layout/_container.scss
View file

@ -9,24 +9,21 @@
#{$parent-selector} .container, #{$parent-selector} .container,
#{$parent-selector} .container-fluid { #{$parent-selector} .container-fluid {
width: 100%; width: 100%;
margin-right: auto; margin-inline: auto;
margin-left: auto; padding-inline: var(#{$css-var-prefix}block-spacing-horizontal);
} }
#{$parent-selector} .container { #{$parent-selector} .container {
$first-breakpoint: true; //$first-breakpoint: true;
@each $key, $values in $breakpoints { @each $key, $values in $breakpoints {
@if $values { @if $values {
@media (min-width: map.get($values, "breakpoint")) { @media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport"); max-width: map.get($values, "viewport");
@if $first-breakpoint { //@if $first-breakpoint {
$first-breakpoint: false; // $first-breakpoint: false;
padding-right: 0; // padding-right: 0;
padding-left: 0; // padding-left: 0;
} @else { //}
padding-right: var(#{$css-var-prefix}spacing);
padding-left: var(#{$css-var-prefix}spacing);
}
} }
} }
} }