diff --git a/docs/.vscode/tasks.json b/docs/.vscode/tasks.json new file mode 100644 index 00000000..fb478925 --- /dev/null +++ b/docs/.vscode/tasks.json @@ -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": [] + } + ] +} \ No newline at end of file diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css new file mode 100644 index 00000000..aca82d73 --- /dev/null +++ b/docs/assets/css/main.css @@ -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; } } diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css deleted file mode 100644 index 95d3f229..00000000 --- a/docs/assets/css/style.css +++ /dev/null @@ -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); } diff --git a/docs/assets/sass/abstracts/_variables.scss b/docs/assets/sass/abstracts/_variables.scss new file mode 100644 index 00000000..30fe4710 --- /dev/null +++ b/docs/assets/sass/abstracts/_variables.scss @@ -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; \ No newline at end of file diff --git a/docs/assets/sass/layout/_grid.scss b/docs/assets/sass/layout/_grid.scss new file mode 100644 index 00000000..b7e6f9fa --- /dev/null +++ b/docs/assets/sass/layout/_grid.scss @@ -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}); + } +} diff --git a/docs/assets/sass/layout/_header.scss b/docs/assets/sass/layout/_header.scss index 61cc8823..bfcc6ea6 100644 --- a/docs/assets/sass/layout/_header.scss +++ b/docs/assets/sass/layout/_header.scss @@ -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%); + + } } \ No newline at end of file diff --git a/docs/assets/sass/main.scss b/docs/assets/sass/main.scss index edfae3fd..73266b8f 100644 --- a/docs/assets/sass/main.scss +++ b/docs/assets/sass/main.scss @@ -1,5 +1,7 @@ @import "./abstracts/mixins"; +@import "./abstracts/variables"; @import "./base/base"; +@import "./layout/grid"; @import "./layout/header"; \ No newline at end of file diff --git a/docs/gulpfile.js b/docs/gulpfile.js new file mode 100644 index 00000000..b0cf44ee --- /dev/null +++ b/docs/gulpfile.js @@ -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']); +}) \ No newline at end of file diff --git a/docs/images/sengi_image.png b/docs/images/sengi_image.png new file mode 100644 index 00000000..1ddc66d1 Binary files /dev/null and b/docs/images/sengi_image.png differ diff --git a/docs/index.html b/docs/index.html index 883ab563..30110ee3 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,7 +5,7 @@ - +