working on sections

This commit is contained in:
Nicolas Constant 2019-07-12 02:09:12 -04:00
parent c991a8a387
commit c1dd3bba3f
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
6 changed files with 123 additions and 4 deletions

View File

@ -146,9 +146,45 @@ body {
width: 6rem;
height: 6rem; }
.section {
font-family: 'Open Sans', sans-serif; }
.section-about {
min-height: 10rem;
background-color: #141414;
color: whitesmoke;
padding: 7rem 0; }
.section-about__about {
font-weight: 300;
font-family: 'Open Sans', sans-serif;
margin: auto;
text-align: center;
font-size: 2.5rem; }
.section-clear {
font-weight: 300;
font-family: 'Open Sans', sans-serif;
min-height: 20rem;
background-color: whitesmoke;
padding: 1rem; }
.section-clear__title {
font-weight: 400;
font-size: 2.5rem;
color: #141414;
margin-left: 15vw; }
.section-clear__subtitle {
font-weight: 400;
font-size: 2rem;
color: #141414;
margin-left: 1rem;
font-style: italic; }
.section-separator {
height: .5rem;
background-color: #141414;
background-color: white; }
.footer {
text-align: center;
background-color: #141414;
background-color: #141414;
color: white;
height: 18rem;
padding-top: 4em; }

View File

@ -25,4 +25,8 @@ $default-font-size: 1.6rem;
$grid-width: 114rem;
$gutter-vertical: 1rem;
$gutter-vertical-small: 1rem;
$gutter-horizontal: 1rem;
$gutter-horizontal: 1rem;
//COLOR
$dark-background: rgb(20, 20, 20);

View File

@ -1,6 +1,7 @@
.footer {
text-align: center;
background-color: rgb(20, 20, 20);
background-color: $dark-background;
color: white;
height: 18rem;
padding-top: 4em;

View File

@ -0,0 +1,49 @@
.section {
font-family: 'Open Sans', sans-serif;
&-about {
min-height: 10rem;
background-color: $dark-background;
color: whitesmoke;
padding: 7rem 0;
&__about {
font-weight: 300;
font-family: 'Open Sans', sans-serif;
margin: auto;
text-align: center;
font-size: 2.5rem;
}
}
&-clear {
font-weight: 300;
font-family: 'Open Sans', sans-serif;
min-height: 20rem;
background-color: whitesmoke;
padding: 1rem;
&__title {
font-weight: 400;
font-size: 2.5rem;
color: $dark-background;
margin-left: 15vw;
// text-align: center;
}
&__subtitle{
font-weight: 400;
font-size: 2rem;
color: $dark-background;
margin-left: 1rem;
font-style: italic;
}
}
&-separator {
height: .5rem;
background-color: $dark-background;
background-color: rgb(255, 255, 255);
}
}

View File

@ -5,4 +5,5 @@
@import "./layout/grid";
@import "./layout/header";
@import "./layout/section";
@import "./layout/footer";

View File

@ -75,7 +75,8 @@
</div>
<div>
<a class="header__old-releases" href="https://github.com/NicolasConstant/sengi/releases/">browse previous releases</a>
<a class="header__old-releases" href="https://github.com/NicolasConstant/sengi/releases/">browse
previous releases</a>
</div>
</div>
</div>
@ -85,13 +86,40 @@
<main>
<section class="section-about">
<!-- <p>Sengi is a </p> -->
<div class="section-about__about">
<p>Sengi is a multi-account desktop client.<br />
<br />
Its aim is to let you use all your accounts<br /> easily and seamlessly.<br />
</p>
</div>
</section>
<section class="section-about">
<section class="section-separator"></section>
<section class="section-clear">
<h3 class="section-clear__title">Quick Overview</h3>
</section>
<section class="section-separator"></section>
<section class="section-clear">
<h3 class="section-clear__title">Functionalities</h3>
<h4 class="section-clear__subtitle">Labels</h4>
<h4 class="section-clear__subtitle">Seamless account switch</h4>
<h4 class="section-clear__subtitle">Display globaly, interact precisely</h4>
<h4 class="section-clear__subtitle">Autoremove Thread's Content-Warnings</h4>
</section>
<section class="section-separator"></section>
</main>
<footer class="footer">
<h3 class="footer__title">Let's keep in touch!</h3>