File tree Expand file tree Collapse file tree 5 files changed +10
-8
lines changed
pages/layout-compositions Expand file tree Collapse file tree 5 files changed +10
-8
lines changed Original file line number Diff line number Diff line change 39
39
</div >
40
40
</header >
41
41
42
- <div class =" wrapper flow footer-bottom__stretch" >
42
+ <div class =" content- wrapper flow footer-bottom__stretch" >
43
43
44
44
<div class =" sidebar" data-direction =" rtl" >
45
45
59
59
</div >
60
60
61
61
<footer class =" site-foot" >
62
- <div class =" wrapper" >
62
+ <div class =" content- wrapper" >
63
63
<div class =" sidebar" data-direction =" rtl" >
64
64
<div class =" site-foot__content" >
65
65
<figure class =" site-foot__brand" >
Original file line number Diff line number Diff line change 1
- /*
2
- WRAPPER COMPOSITION
1
+ /* CONTENT WRAPPER COMPOSITION
3
2
A common wrapper/container. Usually used for the top-level elements on the page (children of `body`) to center them horizontally.
3
+
4
+ Note: This is called `.content-wrapper` only because some ad-blockers target the class `.wrapper`
4
5
*/
5
- .wrapper {
6
+ .content- wrapper {
6
7
margin-inline : auto;
7
8
width : 100% ;
8
9
max-width : var (--wrapper-max-width , 1360px );
Original file line number Diff line number Diff line change @@ -200,5 +200,6 @@ This should be used in all contexts where the content needs to be in the center
200
200
### Examples
201
201
202
202
``` html
203
- <div class =" wrapper" >I am centered and have a nice, consistent gutter.</div >
203
+
204
+ <div class =" content-wrapper" >I am centered and have a nice, consistent gutter.</div >
204
205
```
Original file line number Diff line number Diff line change 1
1
<template >
2
2
<footer class =" site-foot" >
3
- <div class =" wrapper" >
3
+ <div class =" content- wrapper" >
4
4
<div class =" sidebar" data-direction =" rtl" >
5
5
<div class =" site-foot__content" >
6
6
<figure class =" site-foot__brand" >
Original file line number Diff line number Diff line change 1
1
< footer class ="site-foot ">
2
- < div class ="wrapper ">
2
+ < div class ="content- wrapper ">
3
3
< div class ="sidebar " data-direction ="rtl ">
4
4
< div class ="site-foot__content ">
5
5
< figure class ="site-foot__brand ">
You can’t perform that action at this time.
0 commit comments