arcHIVE-tech/arc-hive-HTML-template
arcHIVE-tech
/
arc-hive-HTML-template
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

changes in html to comply html5 and scss

This commit is contained in:
jorge-vitrubio 2021-04-23 18:43:34 +02:00
parent f3896393fd
commit 42ff451e97
9 changed files with 1843 additions and 1319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
gulpfile.babel.js
View File

@ -15,6 +15,16 @@ import named from 'vinyl-named';
import uncss from 'uncss';
import autoprefixer from 'autoprefixer';
// begin fontawesome
//
// added to have fontawesome support
//
gulp.task('icons', function() {
return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
.pipe(gulp.dest(dist+'/assets/webfonts/'));
});
// end fontawesome
// Load all Gulp plugins into one variable
const $ = plugins();

2983
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
package.json
View File

@ -11,7 +11,7 @@
"license": "MIT",
"dependencies": {
"foundation-sites": "^6.6.0",
"jquery": "^3.2.1",
"jquery": "^3.6.0",
"motion-ui": "^2.0.3",
"what-input": "^5.1.2"
},
@ -19,9 +19,10 @@
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/register": "^7.0.0",
"@fortawesome/fontawesome-free": "^5.15.3",
"autoprefixer": "^9.1.5",
"babel-loader": "^8.0.4",
"browser-sync": "^2.10.0",
"browser-sync": "^2.26.14",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^3.3.1",
@ -35,11 +36,11 @@
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-terser": "^1.2.0",
"js-yaml": "^3.4.6",
"panini": "^1.3.0",
"js-yaml": "^3.14.1",
"panini": "^1.7.1",
"rimraf": "^2.4.3",
"style-sherpa": "^1.0.0",
"uncss": "^0.16.2",
"uncss": "^0.17.3",
"vinyl-named": "^1.1.0",
"webpack": "^4.20.2",
"webpack-stream": "^5.1.1",

11
src/assets/scss/_settings.scss
View File

@ -73,7 +73,8 @@
// ---------
$global-font-size: 100%;
$global-width: rem-calc(1200);
//$global-width: rem-calc(1200);
$global-width: 100vw;
$global-lineheight: 1.5;
$foundation-palette: (
@ -505,14 +506,16 @@ $menu-margin: 0;
$menu-nested-margin: $global-menu-nested-margin;
$menu-items-padding: $global-menu-padding;
$menu-simple-margin: 1rem;
$menu-item-color-active: $white;
$menu-item-color: $black;
$menu-item-color-active: $anchor-color;
$menu-item-color-alt-active: $black;
$menu-item-background-active: get-color(primary);
$menu-item-background-active: $white;
$menu-icon-spacing: 0.25rem;
$menu-state-back-compat: true;
$menu-centered-back-compat: true;
$menu-icons-back-compat: true;
$menu-anchor-color: $black;
$menu-anchor-color-hover: $anchor-color;
// 24. Meter
// ---------

19
src/assets/scss/app.scss
View File

@ -87,9 +87,16 @@
//
// fontawesome as shown here:
// https://stackoverflow.com/questions/49195144/add-font-awesome-to-gulp-project-correctly#51491927
//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/brands";
//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/regular";
//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/solid";
//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/v4-shims";
// 1. install fortawesome
// npm install --save-dev @fortawesome/fontawesome-free
// 2. uncomment these lines
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/v4-shims";
// 3. add this to gulp
// gulp.task('icons', function() {
// return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
// .pipe(gulp.dest(dist+'/assets/webfonts/'));
// });

5
src/assets/scss/modules/_content.scss
View File

@ -0,0 +1,5 @@
@include breakpoint(small){
content{
// @include xy-grid-container();
}
}

28
src/assets/scss/modules/_header.scss
View File

@ -1,22 +1,32 @@
@include breakpoint(small){
content{
@include xy-grid-container();
header {
header {
@include xy-grid();
@include xy-gutters(0);
//@include xy-gutters(0);
//@include flex-align(spaced, middle);
min-height: 6rem;
main {
// @include xy-cell(1);
}
@include xy-cell(shrink);
@include flex-align(left, middle);
}
.site-name {
display: none;
}
.logo {
max-width: 10rem;
}
menu {
// @include xy-cell(11);
nav {
@include xy-cell(auto);
@include flex-align(right, middle);
.menu, .menu-horizontal {
justify-content: flex-end;
}
a, button {
color: $black;
&:hover {
color: $anchor-color;
}
}
}
}
}
}

47
src/assets/scss/modules/_hero.scss
View File

@ -1,18 +1,39 @@
@include breakpoint(small){
hero {
.hero {
// @include xy-grid();
// @include xy-grid-frame(true);
background-color: $secondary-color ;
slide {
min-height: 20vh;
content {
background-color: $primary-color;
color: $white;
}
figure {
background-color: $white;
main{
// @include xy-cell(12);
// @include xy-cell-block(true);
// @include xy-cell-reset(true);
// //@include flex-align(spaced,middle);
.slide {
@include xy-grid();
//min-height: 20vh;
content {
// @include xy-cell(6);
background-color: $primary-color;
color: $white;
}
figure {
// @include xy-cell(6);
background-color: $white;
}
}
}
aside {
min-height:5vh;
}
}
aside {
// @include xy-cell(12);
// @include xy-cell-block(true);
// @include xy-cell-reset(true);
//background-color: $secondary-color;
nav {
min-height: 5rem;
// @include xy-grid();
button {
// @include xy-cell(4);
}
}
}
}
}

48
src/layouts/default.html
View File

@ -22,43 +22,45 @@
<img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
</a>
</main>
<menu class="">
<!-- Content -->
<ul class="menu">
<li><a href="#">News</a></li>
<li><a href="#">Collections</a></li>
<li class="is-active"><a href="#">Digital kit</a></li>
<li><a href="#">Publishing</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Login</a></li>
<li><a href="#"><i class="fi-list"></i>Search</a></li>
</ul>
</menu>
<nav>
<menu class="">
<!-- Content -->
<ul class="menu">
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Search</a></li>
</ul>
</menu>
</nav>
</header>
{{> hero}}
<hero class="grid-y">
<section class="hero grid-y">
<main class="cell small-10">
<slide class="grid-x">
<section class="slide grid-x grid-padding-x">
<content class="cell small-6">
<p> big old hero</p>
</content>
<figure class="cell small-6">
<img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
</figure>
</slide>
</section>
</main>
<aside class="cell small-2">
<button type="button" class="button hollow"> search </button>
<button type="button" class="button hollow"> collections </button>
<nav class="grid-x grid-padding-x align-spaced align-middle">
<button type="button" class="button hollow cell-2"> search </button>
<button type="button" class="button hollow cell-2 "> collections </button>
</nav>
</aside>
</hero>
<main>
</section>
<article>
<main>
{{> body}}
</main>
<aside>
</aside>
</main>
<aside>
</aside>
</article>
{{> footer}}
<footer class="grid-x">
<div class="cell small-4">