add padding to sections
This commit is contained in:
parent
1b2243bdcd
commit
81f3835060
|
@ -1,5 +1,5 @@
|
|||
<article id="about" class="l-relative l-screen-min-full">
|
||||
<div class="l-wrapper">
|
||||
<div class="l-section l-wrapper">
|
||||
<div>
|
||||
<h2>About Heading</h2>
|
||||
<p>Lorem fuga cupiditate quidem quia earum, hic. Iusto id beatae sit similique sequi! Earum veritatis mollitia iste ipsam totam deleniti Nam cupiditate recusandae tempore ab magnam! Officiis maxime incidunt asperiores?</p>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<article id="contact" class="l-relative l-screen-min-full contact-bg">
|
||||
<div class="l-wrapper">
|
||||
<div class="l-section l-wrapper">
|
||||
<h2>Contact</h2>
|
||||
<form action="https://mailthis.to/remailthis" method="POST" encType="multipart/form-data">
|
||||
<ul class="u-no-list">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<article id="services" class="l-relative l-screen-min-full services-bg">
|
||||
<div class="l-wrapper">
|
||||
<div class="l-section l-wrapper">
|
||||
<h2>Services</h2>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
|
@ -1,10 +1,22 @@
|
|||
.l-wrapper {
|
||||
width: 100%;
|
||||
max-width: 90rem;
|
||||
max-width: 70rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.l-section {
|
||||
padding: 24px 8px;
|
||||
|
||||
@media (min-width: $bp-m) {
|
||||
padding: 32px 32px;
|
||||
}
|
||||
|
||||
@media (min-width: $bp-l) {
|
||||
padding: 48px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
// #position
|
||||
|
||||
.l-absolute {
|
||||
|
@ -69,6 +81,7 @@
|
|||
justify-content: center;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
|
||||
> li {
|
||||
margin-bottom: 0;
|
||||
|
|
|
@ -1,3 +1,8 @@
|
|||
$bp-xs: 28em;
|
||||
$bp-s: 40em;
|
||||
$bp-m: 50em;
|
||||
$bp-l: 80em;
|
||||
|
||||
$z-index__header: 100;
|
||||
|
||||
:root {
|
||||
|
@ -42,6 +47,6 @@ $z-index__header: 100;
|
|||
// --accent-quaternary-100: #fffcf4;
|
||||
// --accent-quinary-100: #ffeefc;
|
||||
|
||||
--color-bg: var(--neutral-100);
|
||||
--color__body: var(--neutral-600);
|
||||
--color-bg: var(--neutral-100);
|
||||
}
|
||||
|
|
Reference in New Issue