123456789101112131415161718192021222324252627282930313233343536373839404142 |
- $breakpoint-phone: 600px;
- $breakpoint-tablet: 900px;
- $breakpoint-normal-screen: 1200px;
- $breakpoint-big-screen: 1800px;
- body {
- margin:0;
- padding:0;
- background: #000001;
- color: #37ffad;
- font-family: monospace;
- main{
- article{
- max-width:42em;
- margin:auto;
- }
- }
- section{
- background-color: lawngreen;
- }
- @media screen and (max-width: $breakpoint-phone) {
- main{
- margin: 0 5% 0 5%;
- }
- }
- @media screen and (min-width: $breakpoint-phone) {
- main{
- margin: 0 20% 0 20%;
- }
- }
- @media screen and (min-width: $breakpoint-tablet) {
- main{
- margin: 0 25% 0 25%;
- }
- }
- }
- header {
- background-color: yellow;
- }
|