refactor: convert page width to css var

resources/mixins.less

@@ -11,7 +11,7 @@
 
 // Set content to be at the center
 .content-center() {
-	max-width: @page-width;
+	max-width: var( --width-layout );
 	margin-right: auto;
 	margin-left: auto;
 }

resources/skins.citizen.styles/Pagetools.less

@@ -2,7 +2,7 @@
 	position: absolute;
 	z-index: 1;
 	display: flex;
-	transform: translateX( ~'calc( (100vw - @{page-width}) / 2 - @{margin-side} * 2 - 100%)' ); // magic
+	transform: translate3d( ~'calc( (100vw - var( --width-layout )) / 2 - var( --padding-page ) * 2 - 100%)', 0, 0 ); // magic
 
 	ul {
 		display: flex;

resources/skins.citizen.styles/common/content.less

@@ -257,7 +257,7 @@
 			> div.tnone,
 			> div.floatnone,
 			> table.floatnone {
-				margin: 0.6rem ~'calc((100vw - @{page-width}) / -2)';
+				margin: 0.6rem ~'calc((100vw - var( --width-layout )) / -2)';
 
 				a.image,
 				a.image > img {

resources/skins.citizen.styles/common/rootvariables.less

@@ -9,7 +9,6 @@
  * Base theme
  */
 :root {
-	/* == Colors == */
 	/* Background Colors */
 	--background-color-dp-00: @background-color-dp-00;
 	--background-color-dp-01: @background-color-dp-01;
@@ -62,10 +61,6 @@
 
 	/* Size */
 	--size-icon: @size-icon;
-	--height-header: @height-header;
-
-	/* Paddings */
-	--padding-page: @padding-page;
 
 	/* Border Colors */
 	--border-color-base: @border-color-base;
@@ -75,11 +70,19 @@
 	--border-color-input--hover: @border-color-input--hover;
 }
 
+html {
+	/* Size */
+	--height-header: @height-header;
+	--width-layout: @width-layout;
+
+	/* Paddings */
+	--padding-page: @padding-page;
+}
+
 /**
  * Dark theme
  */
 :root.skin-citizen-dark {
-	/* == Colors == */
 	/* Background Colors */
 	--background-color-dp-00: @dark-background-color-dp-00;
 	--background-color-dp-01: @dark-background-color-dp-01;

resources/variables.less

@@ -102,6 +102,7 @@
 /* `--*size` variables are used for `*width` & `*height` properties. */
 @size-icon:		20px;
 @height-header:	56px;
+@width-layout:	860px;
 
 /* Paddings */
 @padding-page:	20px;