upd

agentyzmin · Mar 13, 2024 · 4eefed9 · 4eefed9
1 parent 24d4206
commit 4eefed9
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 44 deletions.
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -43,6 +43,12 @@ a {
   text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.50);
 
 }
+@media (max-width: 768px) {
+  .masonry-section .loud {
+    font-size: calc(100vw/6);
+    width: 90vw;
+  }
+}
 
 /*.section h1, p  {
   margin: 25px 20px 0px;
@@ -77,6 +83,16 @@ a {
   align-items: start;
   height: 100vh;
 }
+@media (max-width: 768px) {
+  .wrapper {
+    grid-template-areas:
+      "a a a a b b b b"
+      "c f f f f f f d"
+      "c f f f f f f d"
+      "c c c e e d d d";
+  }
+}
+
 
 .item{
 /*  background-color: dimgrey;*/
@@ -226,11 +242,16 @@ a {
 .col-3 {
   padding: 1em 3em 1em 2em;
   display: grid;
-  grid-template-rows: 100px repeat(4, 120px);
+  grid-template-rows: 100px repeat(3, 120px);
   grid-template-columns: 2;
   grid-gap: 50px;
   grid-auto-flow: column;
 }
+@media (max-width: 768px) {
+  .col-3 {
+    display: block;
+  }
+}
 
 .col-3 p {
   margin-block: 0;
@@ -266,8 +287,8 @@ a {
 .fw400 {font-weight: 400;}
 .fw500 {font-weight: 500;}
 .fw700 {font-weight: 700;}
-.fw800 {font-weight: 800;}
-.fw900 {font-weight: 900;}
+/*.fw800 {font-weight: 800;}
+.fw900 {font-weight: 900;}*/
 
 
 .masonry-container {
@@ -281,6 +302,14 @@ a {
 
 /*  position: relative;*/
 }
+@media (max-width: 768px) {
+.masonry-container {
+  -webkit-column-count: 3;
+     -moz-column-count: 3;
+          column-count: 3;
+
+  }
+}
 
 .masonry-item {
   display: inline-block;
@@ -314,3 +343,43 @@ a {
         opacity: 1;
     }
 }
+
+
+#glyph-preview {
+  font-size: 40px;
+  margin: 30px;
+  line-height: 1.5;
+}
+
+.glyph-container {
+  display: inline-block;
+  margin: 5px;
+  text-align: center;
+}
+
+.glyph-name {
+    font-size: 9px;
+    margin-top: 4px;
+}
+
+.glyph {
+    display: inline-block;
+    margin: 2px;
+    border: 1px solid #ddd;
+  border-radius: 4px;
+    padding: 4px;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  #glyph-preview {
+    font-size: 40px;
+    margin: 10px;
+    line-height: 1.5;
+  }
+  .glyph-container {
+    margin: 3px;
+  }
+}
diff --git a/docs/index.html b/docs/index.html
@@ -2,7 +2,8 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <!-- <meta name="viewport" content="width=device-width" initial-scale="1.0"> -->
   <title>Proba Nav2 — київський навігаційний шрифт — Mint Type, Агенти змін</title>
 
 
@@ -181,53 +182,17 @@ <h1>Накреслення</h1>
     <p class="fw400 preview"><span class="fontname">RoadUA Regular — 400</span> <br> З’їв аґрусу — та ягода цілюща б’є жах інфекцій шипучим «ь». </p>
     <p class="fw500 preview"><span class="fontname">RoadUA Medium — 500</span>      <br> Щурячий бугай із їжаком-харцизом в’ючись підписали ґешефт у єнах.</p>
     <p class="fw700 preview"><span class="fontname">RoadUA Bold — 700</span>    <br> Юнкерський джинґл, що при безхліб’ї чує фашист, це ловця гімн. </p>
-    <p class="fw800 preview"><span class="fontname">RoadUA ExtraBold — 800</span>   <br> Фабрикуймо гідність, лящім їжею, ґав хапаймо, з’єднавці чаш! </p>
-    <p class="fw900 preview"><span class="fontname">RoadUA Black — 900</span>     <br> Щастям б’єш жук їх глицю в фон й ґедзь пріч. </p>
+    <!-- <p class="fw800 preview"><span class="fontname">RoadUA ExtraBold — 800</span>   <br> Фабрикуймо гідність, лящім їжею, ґав хапаймо, з’єднавці чаш! </p> -->
+    <!-- <p class="fw900 preview"><span class="fontname">RoadUA Black — 900</span>     <br> Щастям б’єш жук їх глицю в фон й ґедзь пріч. </p> -->
 
 </div>
 
 
-
-
-
 <div class="section bg-white">
-
-    <style>
-      #glyph-preview {
-            font-size: 40px;
-            margin: 30px;
-            line-height: 1.5;
-
-        }
-
-        .glyph-container {
-            display: inline-block;
-            margin: 5px;
-          text-align: center;
-        }
-
-
-        .glyph-name {
-            font-size: 9px;
-            margin-top: 4px;
-/*          font-family: "Inter";*/
-        }
-
-        .glyph {
-            display: inline-block;
-            margin: 2px;
-            border: 1px solid #ddd;
-          border-radius: 4px;
-            padding: 4px;
-          width: 60px;
-          height: 60px;
-          text-align: center;
-        }
-
-    </style>
-    <h1>Гліфи</h1>
     <div id="glyph-preview"></div>
 </div>
+
+
 <!-- <div class="section bg-fontdrop">
   <h1>Гліфи</h1>
   <img src="i/assets/glyphs.jpeg" class="w-100">