Update

404.php

@@ -1,60 +1,20 @@
 <?php
-/**
- * The template for displaying 404 pages (not found)
- *
- * @link https://codex.wordpress.org/Creating_an_Error_404_Page
- *
- * @package mkdevops.se
- */
 
 get_header();
-?>
-
-	<main id="primary" class="site-main">
-
-		<section class="error-404 not-found">
-			<header class="page-header">
-				<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', 'mkdevops-se' ); ?></h1>
-			</header><!-- .page-header -->
-
-			<div class="page-content">
-				<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', 'mkdevops-se' ); ?></p>
 
-					<?php
-					get_search_form();
-
-					the_widget( 'WP_Widget_Recent_Posts' );
-					?>
-
-					<div class="widget widget_categories">
-						<h2 class="widget-title"><?php esc_html_e( 'Most Used Categories', 'mkdevops-se' ); ?></h2>
-						<ul>
-							<?php
-							wp_list_categories(
-								array(
-									'orderby'    => 'count',
-									'order'      => 'DESC',
-									'show_count' => 1,
-									'title_li'   => '',
-									'number'     => 10,
-								)
-							);
-							?>
-						</ul>
-					</div><!-- .widget -->
-
-					<?php
-					/* translators: %1$s: smiley */
-					$mkdevops_se_archive_content = '<p>' . sprintf( esc_html__( 'Try looking in the monthly archives. %1$s', 'mkdevops-se' ), convert_smilies( ':)' ) ) . '</p>';
-					the_widget( 'WP_Widget_Archives', 'dropdown=1', "after_title=</h2>$mkdevops_se_archive_content" );
+?>
 
-					the_widget( 'WP_Widget_Tag_Cloud' );
-					?>
+	<div id="primary" class="content-area">
+		<main id="main" class="site-main">
 
-			</div><!-- .page-content -->
-		</section><!-- .error-404 -->
+            <section>
+                <p>
+                    <?php esc_attr_e('Error 404, Ooops ! Cette page n’existe pas !','textdomaintomodify'); ?>
+                </p>
+            </section>
 
-	</main><!-- #main -->
+		</main><!-- #main -->
+	</div><!-- #primary -->
 
 <?php
 get_footer();

README.md

@@ -1 +1,32 @@
+# WordPress Gulp and Webpack starter theme
 
+![](screenshot.png)
+
+## Under the hood
+
+- [ES6](https://github.com/lukehoban/es6features#readme) for JavaScript (transpiling with [Babel](https://babeljs.io/) and linting with [ESLint](https://eslint.org/))
+- [SASS](http://sass-lang.com/) preprocessor for CSS following [SASS Guidelines](https://sass-guidelin.es/#the-7-1-pattern)
+- [Bootstrap 5](https://getbootstrap.com/docs/5.1/getting-started/introduction/) as CSS framework ([customizable with SASS](https://getbootstrap.com/docs/5.1/customize/sass/))
+- [Gulp 4](https://gulpjs.com/) & [Webpack 5](https://webpack.js.org/) to manage, compile and optimize theme assets
+- SVG Sprite : create a folder containing all your SVGs like `assets/src/svg/sprite` and run your watch or build
+
+## Requirements
+
+* [Node](https://nodejs.org/)
+* [Gulp](https://gulpjs.com/docs/en/getting-started/quick-start)
+
+## Usage
+
+First, clone this repository in your WordPress themes directory.
+
+Then, run the following commands in the theme's directory :
+
+	npm install
+
+Launch your watch for assets with :
+
+	npm run start
+
+For production sites, create your build with :
+
+	npm run build

assets/src/js/_langSwitch.js

@@ -0,0 +1,39 @@
+class LangSwitch {
+	constructor() {
+		this.switchLang();
+	}
+
+	// eslint-disable-next-line class-methods-use-this
+	switchLang() {
+		// script for lang switching
+
+		const switcher = document.getElementById('lang-switch');
+		const langLinks = document.querySelectorAll('.lang-link');
+
+
+		const child = switcher.children;
+		const eng = child[1];
+
+		let isShow = false;
+
+		switcher.addEventListener('click', (event) => {
+			if (!isShow) {
+				event.preventDefault();
+				eng.classList.add('show');
+				eng.style.display = 'list-item';
+				eng.style.marginTop = '10px';
+				// eslint-disable-next-line no-restricted-syntax
+				for (const link of langLinks) {
+					link.style.pointerEvents = 'auto';
+				}
+				isShow = true;
+			} else {
+				eng.classList.remove('show');
+				eng.style.display = 'none';
+				isShow = false;
+			}
+		});
+	}
+}
+
+export default LangSwitch;

assets/src/js/main.js

@@ -0,0 +1,24 @@
+// eslint-disable-next-line import/no-unresolved
+// eslint-disable-next-line import/no-unresolved
+// eslint-disable-next-line import/no-unresolved
+// eslint-disable-next-line import/no-unresolved,import/extensions
+import LangSwitch from './_langSwitch';
+
+const App = {
+
+	/**
+	 * App.init
+	 */
+	init() {
+		// scripts
+		function initLangSwitch() {
+			return new LangSwitch();
+		}
+		initLangSwitch();
+	}
+
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+	App.init();
+});

assets/src/scss/abstracts/_variables.scss

@@ -0,0 +1,52 @@
+//colors
+$primary: #EB5C28;
+$secondary: #5D8240;
+$black: #202020;
+$white: #FFFFFF;
+
+//font
+
+$montserrat: 'Montserrat', sans-serif;
+$orbitron: 'Orbitron', sans-serif;
+
+//font-weight
+
+$medium: 500;
+$semibold: 600;
+$bold: 700;
+
+//font-size
+
+$h1: 150px;
+$h2: 45px;
+$text: 35px;
+$nav: 22px;
+
+//font-line-height
+
+$h1-lh: 188px;
+$h2-lh: 56px;
+$text-lh: 60px;
+$nav-lh: 27px;
+
+//mixins
+
+@mixin font($font-family-variable, $font-weight-variable, $font-size-variable, $line-height-variable, $color-variable) {
+  font-family: $font-family-variable;
+  font-weight: $font-weight-variable;
+  font-size: $font-size-variable;
+  line-height: $line-height-variable;
+  color: $color-variable;
+}
+
+@mixin link {
+  cursor: pointer;
+  color: $primary;
+  text-decoration: underline;
+}
+
+@mixin linkGreen {
+  cursor: pointer;
+  color: $secondary;
+  text-decoration: underline;
+}

assets/src/scss/base/_core.scss

@@ -0,0 +1,31 @@
+header {
+  padding-top: 27px;
+}
+
+footer {
+  padding-bottom: 27px;
+}
+
+.wrapper {
+  max-width: 1680px;
+  margin: 0 auto;
+  //desktop
+  @media screen and (max-width: 1680px){
+    padding-left: 120px;
+    padding-right: 120px;
+  }
+  @media screen and (max-width: 1336px) {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  //tablet
+  @media screen and (max-width: 1199px) {
+    padding-left: 34px;
+    padding-right: 34px;
+  }
+  //mobile
+  @media screen and (max-width: 767px) {
+    padding-left: 19px;
+    padding-right: 19px;
+  }
+}

assets/src/scss/base/_minireset.scss

@@ -0,0 +1,80 @@
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: normal;
+}
+
+ul {
+  list-style: none;
+}
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+img,
+embed,
+iframe,
+object,
+audio,
+video {
+  height: auto;
+  max-width: 100%;
+}
+
+iframe {
+  border: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+  text-align: left;
+}

assets/src/scss/main.scss

@@ -0,0 +1,12 @@
+
+// abstracts
+@import "abstracts/variables";
+
+// base
+@import "base/core",
+        "base/minireset";
+
+//views
+
+@import "views/consulting",
+        "views/it-services";