added block positions and illustration image
This commit is contained in:
Nicolas Constant
parent
54182172f3
commit
726246ee7c
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
// See https://go.microsoft.com/fwlink/?LinkId=733558
|
||||
// for the documentation about the tasks.json format
|
||||
"version": "2.0.0",
|
||||
"tasks": [
|
||||
{
|
||||
"type": "gulp",
|
||||
"task": "default",
|
||||
"problemMatcher": []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: inherit; }
|
||||
|
||||
html {
|
||||
font-size: 62.5%; }
|
||||
@media (max-width: 78em) {
|
||||
html {
|
||||
font-size: 56.25%; } }
|
||||
@media (max-width: 56.25em) {
|
||||
html {
|
||||
font-size: 50%; } }
|
||||
@media (min-width: 112.5em) {
|
||||
html {
|
||||
font-size: 75%; } }
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
padding: 3rem; }
|
||||
@media (max-width: 56.25em) {
|
||||
body {
|
||||
padding: 0rem; } }
|
||||
|
||||
.row {
|
||||
margin: 0 auto; }
|
||||
.row:not(:last-child) {
|
||||
margin-bottom: 1rem; }
|
||||
@media (max-width: 56.25em) {
|
||||
.row:not(:last-child) {
|
||||
margin-bottom: 1rem; } }
|
||||
@media (max-width: 56.25em) {
|
||||
.row {
|
||||
padding: 0 1rem; } }
|
||||
.row::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.row [class^="col-"] {
|
||||
float: left; }
|
||||
.row [class^="col-"]:not(:last-child) {
|
||||
margin-right: 1rem; }
|
||||
@media (max-width: 56.25em) {
|
||||
.row [class^="col-"]:not(:last-child) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 1rem; } }
|
||||
@media (max-width: 56.25em) {
|
||||
.row [class^="col-"] {
|
||||
width: 100% !important; } }
|
||||
.row .col-1-of-2 {
|
||||
width: calc((100% - 1rem) / 2); }
|
||||
.row .col-1-of-3 {
|
||||
width: calc((100% - 2 * 1rem) / 3); }
|
||||
.row .col-2-of-3 {
|
||||
width: calc(2*(100% - 2 * 1rem) / 3 + 1rem); }
|
||||
.row .col-1-of-4 {
|
||||
width: calc((100% - 3 * 1rem) / 4); }
|
||||
.row .col-2-of-4 {
|
||||
width: calc(2 * (100% - 3 * 1rem) / 4 + 1rem); }
|
||||
.row .col-3-of-4 {
|
||||
width: calc(3 * (100% - 3 * 1rem) / 4 + 2 * 1rem); }
|
||||
|
||||
.header {
|
||||
background-color: #f7f7f7;
|
||||
height: calc(100vh - 3rem);
|
||||
overflow: hidden; }
|
||||
.header__image {
|
||||
display: block;
|
||||
margin: 8vh auto 0 auto; }
|
||||
@media (max-width: 56.25em) {
|
||||
.header__image {
|
||||
display: none; } }
|
||||
.header__download-box {
|
||||
outline: 1px solid green;
|
||||
margin: 30vh auto 0 auto;
|
||||
width: 30vw; }
|
||||
@media (max-width: 56.25em) {
|
||||
.header__download-box {
|
||||
width: 70vw; } }
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: inherit; }
|
||||
|
||||
html {
|
||||
font-size: 62.5%; }
|
||||
@media (max-width: 78em) {
|
||||
html {
|
||||
font-size: 56.25%; } }
|
||||
@media (max-width: 56.25em) {
|
||||
html {
|
||||
font-size: 50%; } }
|
||||
@media (min-width: 112.5em) {
|
||||
html {
|
||||
font-size: 75%; } }
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
padding: 3rem; }
|
||||
@media (max-width: 56.25em) {
|
||||
body {
|
||||
padding: 0rem; } }
|
||||
|
||||
.header {
|
||||
background-color: #f7f7f7;
|
||||
height: calc(100vh - 3rem); }
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
// COLORS
|
||||
// $color-primary: #55c57a;
|
||||
// $color-primary-light: #7ed56f;
|
||||
// $color-primary-dark: #28b485;
|
||||
|
||||
// $color-secondary-light: #ffb900;
|
||||
// $color-secondary-dark: #ff7730;
|
||||
|
||||
// $color-tertiary-light: #2998ff;
|
||||
// $color-tertiary-dark: #5643fa;
|
||||
|
||||
// $color-grey-light-1: #f7f7f7;
|
||||
// $color-grey-light-2: #eee;
|
||||
|
||||
// $color-grey-dark: #777;
|
||||
// $color-grey-dark-2: #999;
|
||||
// $color-grey-dark-3: #333;
|
||||
// $color-white: #fff;
|
||||
// $color-black: #000;
|
||||
|
||||
//FONT
|
||||
$default-font-size: 1.6rem;
|
||||
|
||||
// GRID
|
||||
$grid-width: 114rem;
|
||||
$gutter-vertical: 1rem;
|
||||
$gutter-vertical-small: 1rem;
|
||||
$gutter-horizontal: 1rem;
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
.row {
|
||||
// max-width: $grid-width;
|
||||
margin: 0 auto;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $gutter-vertical;
|
||||
|
||||
@include respond(tab-port){
|
||||
margin-bottom: $gutter-vertical-small;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond(tab-port){
|
||||
//max-width: 50rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@include clearfix;
|
||||
|
||||
[class^="col-"] {
|
||||
// background-color: orangered;
|
||||
float: left;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $gutter-horizontal;
|
||||
|
||||
@include respond(tab-port){
|
||||
margin-right: 0;
|
||||
margin-bottom: $gutter-vertical-small;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond(tab-port){
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.col-1-of-2 {
|
||||
width: calc((100% - #{$gutter-horizontal}) / 2);
|
||||
}
|
||||
|
||||
.col-1-of-3 {
|
||||
width: calc((100% - 2 * #{$gutter-horizontal}) / 3);
|
||||
}
|
||||
|
||||
.col-2-of-3 {
|
||||
width: calc(2*(100% - 2 * #{$gutter-horizontal}) / 3 + #{$gutter-horizontal});
|
||||
}
|
||||
|
||||
.col-1-of-4 {
|
||||
width: calc((100% - 3 * #{$gutter-horizontal}) / 4);
|
||||
}
|
||||
|
||||
.col-2-of-4 {
|
||||
width: calc(2 * (100% - 3 * #{$gutter-horizontal}) / 4 + #{$gutter-horizontal});
|
||||
}
|
||||
|
||||
.col-3-of-4 {
|
||||
width: calc(3 * (100% - 3 * #{$gutter-horizontal}) / 4 + 2 * #{$gutter-horizontal});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,33 @@
|
|||
.header {
|
||||
background-color: rgb(247, 247, 247);
|
||||
height: calc(100vh - 3rem);
|
||||
overflow: hidden;
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
margin: 8vh auto 0 auto;
|
||||
|
||||
@include respond(tab-port){
|
||||
display: none;
|
||||
}
|
||||
// @include respond(phone){
|
||||
// display: none;
|
||||
// }
|
||||
}
|
||||
|
||||
&__download-box {
|
||||
// display: inline-block;
|
||||
outline: 1px solid green;
|
||||
margin: 30vh auto 0 auto;
|
||||
width: 30vw;
|
||||
|
||||
@include respond(tab-port){
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
// position: relative;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
@import "./abstracts/mixins";
|
||||
@import "./abstracts/variables";
|
||||
|
||||
@import "./base/base";
|
||||
|
||||
@import "./layout/grid";
|
||||
@import "./layout/header";
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// Sass configuration
|
||||
var gulp = require('gulp');
|
||||
var run = require('gulp-run');
|
||||
|
||||
gulp.task('npmsass', function () {
|
||||
// setTimeout(function () {
|
||||
run('npm start').exec();
|
||||
// }, 300);
|
||||
});
|
||||
|
||||
gulp.task('default', ['npmsass'], function () {
|
||||
gulp.watch('./assets/sass/**/*.scss', ['npmsass']);
|
||||
})
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
|
|
@ -5,7 +5,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="assets/css/main.css">
|
||||
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
|
||||
|
||||
<title>Discover Sengi</title>
|
||||
|
|
@ -13,27 +13,32 @@
|
|||
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="header__logo-box">
|
||||
<div class="row">
|
||||
<div class="col-1-of-2">
|
||||
<img class="header__image" src="images/sengi_image.png" />
|
||||
</div>
|
||||
<div class="col-1-of-2">
|
||||
<div class="header__download-box">
|
||||
<h1 class="header__download-box--title">
|
||||
Discover Sengi
|
||||
</h1>
|
||||
|
||||
<div class="header__download-box--description">
|
||||
A FLOSS multi-account Mastodon and Pleroma desktop client
|
||||
</div>
|
||||
|
||||
<a href="#"
|
||||
onClick="window.open('http://sengi.nicolas-constant.com'+'?qt='+ (new Date()).getTime(),'Sengi','toolbar=no,location=no,status=no,menubar=no,scrollbars=no, resizable=yes,width=377,height=800'); return false;"
|
||||
class="button">Launch web client</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header__app-image-box">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="header__download-box">
|
||||
<h1 class="header__download-box--title">
|
||||
Discover Sengi
|
||||
</h1>
|
||||
|
||||
<div class="header__download-box--description">
|
||||
A FLOSS multi-account Mastodon and Pleroma desktop client
|
||||
</div>
|
||||
|
||||
<a href="#"
|
||||
onClick="window.open('http://sengi.nicolas-constant.com'+'?qt='+ (new Date()).getTime(),'Sengi','toolbar=no,location=no,status=no,menubar=no,scrollbars=no, resizable=yes,width=377,height=800'); return false;"
|
||||
class="button">Launch web client</a>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="section-about">
|
||||
|
|
@ -45,7 +50,7 @@
|
|||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,13 +4,16 @@
|
|||
"description": "The Project Page of Sengi",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"compile:sass": "node-sass ./assets/sass/main.scss ./assets/css/style.css"
|
||||
"start": "node-sass ./assets/sass/main.scss ./assets/css/main.css"
|
||||
},
|
||||
"author": "Nicolas Constant",
|
||||
"license": "WTFPL",
|
||||
"devDependencies": {
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-sass": "^4.0.2",
|
||||
"node-sass": "^4.11.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"gulp": "~3.9.1",
|
||||
"gulp-run": "^1.7.1",
|
||||
"gulp-sass": "^4.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue