feat: class Styler;to fix: About bottom figures, vert long tablet overflow

Author: proger-coder

Classes/Styler.js

@@ -0,0 +1,41 @@
+export class Styler {
+    pics = [];
+
+    fillPicsArray(className){
+        document.querySelectorAll(className).forEach(el => {
+            this.pics.push(el)
+        })
+    };
+
+    calcStyles(elData1,elData2,screenWidthFresh = document.documentElement.clientWidth){
+        let wider,narrower,taller,lower;
+        let sumOfWi = elData1.width + elData2.width;
+
+        if (sumOfWi > screenWidthFresh){
+            console.log(sumOfWi, 'wader!! than', screenWidthFresh);
+            let k1 = elData1.width / sumOfWi;
+            let k2 = elData2.width / sumOfWi;
+            elData1.el.style.width = `${k1 * screenWidthFresh}px`;
+            elData2.el.style.width = `${k2 * screenWidthFresh}px`;
+        } else console.log(sumOfWi, 'NOT wader than', screenWidthFresh)
+
+    };
+
+    getParam(stylesObj, param){
+        return  +stylesObj[param]
+            .slice(0,stylesObj[param]
+                .indexOf('px'));
+    };
+
+    findNGive(id){
+        let elData = {}
+        elData.el = document.getElementById(id);
+        elData.id = id;
+        elData.initStyles = window.getComputedStyle(elData.el);
+        elData.height = this.getParam(elData.initStyles,'height');
+        elData.width = this.getParam(elData.initStyles,'width');
+        elData.ratio = elData.width / elData.height;
+        console.log(elData)
+        return elData
+    }
+}

Routes/About.js

@@ -8,10 +8,12 @@ export const About = {
         <div class="About-figures" id="medievalPics">
            <figure>
                 <img src="./pics/Morignoni_Desenciano.jpg" alt="portrait of young tailor Morignoni Desenciano ">
+<!--                <img src="https://1.bp.blogspot.com/-QSd1Uh3-HDM/WJTSc3Po-lI/AAAAAAAActg/bQGmNlSDTTUvIbb8tTae2VHKQVXrXI4XwCLcB/s1600/giovanni_battista_moroni_-_the_tailor_il_tagliapanni_-_google_art_project.jpg" alt="portrait of young tailor Morignoni Desenciano ">-->
                 <figcaption> Портрет Маринони Дезенцано, Лондон, 1525г.</figcaption>
            </figure>
            <figure>
-                <img src="./pics/Henry_8_compressed.jpeg" alt="portrait of King Henry VIII">
+                    <img src="./pics/Henry_8.jpeg" alt="portrait of King Henry VIII">
+<!--                <img src="http://4.bp.blogspot.com/-rYu2nmHFoS0/VDxjMn1xzxI/AAAAAAAAAMA/QkeJqI9rJaw/s1600/henry8petworth.jpg" alt="portrait of King Henry VIII">-->
                 <figcaption> Портрет Короля Генриха VIII, Лондон, 1528г.</figcaption>
            </figure>            
         </div>
@@ -45,5 +47,21 @@ export const About = {
         дочерний филиал, который в дальнейшем выделится в отдельный бренд,  сменит хозяина и станет известен как <a href="https://aeronauticamilitare.eu/">Aeronautica Militare</a>.    
         
         </p>
-    </div>`
+    </div>`,
+    data(){
+        return{
+    }},
+    mounted(){
+
+    },
+    created(){
+
+    },
+    methods:{
+
+    },
+    computed:{
+
+    },
+
 }

pics/spring.jpg

@@ -628,16 +628,19 @@ footer{
 /*=====================about раздел========================*/
 /*для ПеКА*/
 @media screen and (min-width: 1201px) {
-    .About-figures{
 
+    .About-figures {   /*Див с 2мя Figures*/
+        display:flex;
+        flex-direction:row;
     }
 
-    .About-figures figure{
-
+    .About-figures figure{ /*фигура = картинка+подпись*/
+        padding:0 10px;
     }
 
-    .About-figures img{
-
+    .About-whole-container img{ /*сама картинка*/
+        width:100%;
+        height:100%;
     }
 
 }
@@ -666,24 +669,20 @@ footer{
 }
 /*-------------общее-------------*/
 .About-whole-container{ /* весь контейнер */
-    display:flex;
-    flex-direction:column;
+    /*display:flex;*/
+    /*flex-direction:column;*/
 }
 
 .About-figures { /* ящик с 2-мя фигурами */
-    display:flex;
-    flex-direction: row;
 
 }
 
 .About-figures figure{ /* фигура - фото и подпись */
-    display:flex;
-    flex-direction: column;
-    align-items: center;
+
 }
 
 .About-figures img{ /* фото в фигуре */
-    width:90%;
+
 }
 
 .About-figures figcaption{
@@ -693,7 +692,6 @@ footer{
 .About-description{
     margin:10px 20px;
     text-align:left;
-
 }
 
 .About-description a{