upd all

agentyzmin · Mar 13, 2024 · 2ef4044 · 2ef4044
1 parent 1d4d4a8
commit 2ef4044
Show file tree

Hide file tree

Showing 24 changed files with 180 additions and 11 deletions.
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -1,7 +1,7 @@
 @import url("/fonts/ProbaNav2.css");
 
 :root{
-  --grid-margin: 8px;
+  --grid-margin: 20px;
 }
 
 body {
@@ -24,8 +24,6 @@ a {
   height: 100vh;
   overflow: hidden;
   position: relative;
-
-
 }
 
 .masonry-section .loud {
@@ -75,37 +73,81 @@ a {
     "a a a a b b b b"
     "c c c f f d d d"
     "c c c f f d d d"
-    "e e e e e d d d";
+    "c c c e e d d d";
   align-items: start;
   height: 100vh;
 }
 
 .item{
-  background-color: lightblue;
+/*  background-color: dimgrey;*/
   height: 100%;
   padding: 0;
   margin: 0;
+  overflow: hidden;
 /*  border-radius: 4px;*/
 }
+
+.img-row {
+  display: flex;
+/*  align-items: flex-start;*/
+  justify-content: inherit;
+  flex-wrap: nowrap;
+  gap: var(--grid-margin);
+/*  width: 600px;*/
+}
+
 .item1 {
   grid-area: a;
-  text-align: right;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: var(--grid-margin);
 }
+
 .item2 {
   grid-area: b;
+  display: flex;
+  align-items: flex-end;
+  gap: var(--grid-margin);
 }
+
+
 .item3 {
   grid-area: c;
-  text-align: right;
+  display: flex;
+/*  flex-direction: row-reverse;*/
+  flex-flow: wrap;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: var(--grid-margin);
 }
+
 .item4 {
   grid-area: d;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--grid-margin);
 }
+
 .item5 {
   grid-area: e;
+/*  display: flex;*/
+/*  grid-template-columns: fit-content(3ch) fit-content(8ch) 1fr;*/
+/*  align-items: flex-start;*/
+/*  justify-content: flex-start;*/
+/*  gap: var(--grid-margin);*/
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: var(--grid-margin);
+}
 
-  text-align: right;
+.item5 > img {
+    width:100%;
+    object-fit: cover; /* or "contain" */
 }
+
 .item6 {
   grid-area: f;
 

diff --git a/docs/i/assets/og-image-2.png b/docs/i/assets/og-image-2.png
diff --git a/docs/i/assets/og-image.png b/docs/i/assets/og-image.png
diff --git a/docs/i/designs.zip b/docs/i/designs.zip
diff --git a/docs/i/designs/2016-10-new-turnstile.png b/docs/i/designs/2016-10-new-turnstile.png
diff --git a/docs/i/designs/2017-04-EasterDay.jpeg b/docs/i/designs/2017-04-EasterDay.jpeg
diff --git a/docs/i/designs/2017-09-Kartka-kyianyna-1.jpeg b/docs/i/designs/2017-09-Kartka-kyianyna-1.jpeg
diff --git a/docs/i/designs/2018-02-Sviatoshyn-5.jpeg b/docs/i/designs/2018-02-Sviatoshyn-5.jpeg
diff --git a/docs/i/designs/2018-08-Independence.jpg b/docs/i/designs/2018-08-Independence.jpg
diff --git a/docs/i/designs/2018-12-TransportPass-Christmas-2.jpg b/docs/i/designs/2018-12-TransportPass-Christmas-2.jpg
diff --git a/docs/i/designs/2020-12-NY3.png b/docs/i/designs/2020-12-NY3.png
diff --git a/docs/i/designs/Kyiv Parking Info - 01.jpeg b/docs/i/designs/Kyiv Parking Info - 01.jpeg
diff --git a/docs/i/designs/M1-red.jpeg b/docs/i/designs/M1-red.jpeg
diff --git a/docs/i/designs/Metro-Manners-1.png b/docs/i/designs/Metro-Manners-1.png
diff --git a/docs/i/designs/Metro-Manners-3.png b/docs/i/designs/Metro-Manners-3.png
diff --git a/docs/i/designs/Tariff-28-3.jpeg b/docs/i/designs/Tariff-28-3.jpeg
diff --git a/docs/i/designs/YellowFace@4x.png b/docs/i/designs/YellowFace@4x.png
diff --git a/docs/i/designs/metro-PlasticCard-2017-averse.png b/docs/i/designs/metro-PlasticCard-2017-averse.png
diff --git a/docs/i/designs/metro-PlasticCard-2017-reverse.png b/docs/i/designs/metro-PlasticCard-2017-reverse.png
diff --git a/docs/i/designs/metromap_wagon_v1.12-660x690.png b/docs/i/designs/metromap_wagon_v1.12-660x690.png
diff --git a/docs/i/designs/street-sign-name.png b/docs/i/designs/street-sign-name.png
diff --git a/docs/i/designs/street-sign-number.png b/docs/i/designs/street-sign-number.png
diff --git a/docs/i/designs/timetable-2019-14.png b/docs/i/designs/timetable-2019-14.png
diff --git a/docs/index.html b/docs/index.html
@@ -32,6 +32,8 @@
   <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> -->
   <link rel="stylesheet" type="text/css" href="css/style.css">
 
+  <script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>
+
 </head>
 <body>
   <div class="section wrapper">
@@ -42,8 +44,14 @@
           <h1>Proba Nav2</h1>
           <p>Неофіційний шрифт київської навігації: від схем та плакатів у метро до адресних покажчиків, розкладів та навігаційних стел.</p>
           <p>Містить <a href="http://icons.a3.kyiv.ua/" target="_blank">транспортні піктограми</a>, лігатури, табличні цифри та інші opentype-фічі.</p>
-          <p style="margin-bottom: 2.5rem">Зробив Андрій Константинов (студія Mint Type) на основі свого шрифта Proba Pro, який став стандартом державних вебсайтів.</p>
+          <p style="margin-bottom: 25px">Зробив Андрій Константинов (студія Mint Type) на основі свого шрифта Proba Pro, який став стандартом державних вебсайтів.</p>
           <a class="btn" href="#">Завантажити</a>
+          <a href="#">
+            Кейс на <img src="i/assets/behance.svg" height="30"> Behance
+          </a>
+          <a href="#">
+            Кейс на <img src="i/assets/github.svg" height="26"> Github
+          </a>
         </div>
         <div class="licence">
           <div>
@@ -59,14 +67,51 @@ <h1>Proba Nav2</h1>
         </div>
     </div>
     <div class="item item1">
+      <!-- <img src="i/designs/2017-04-EasterDay.jpeg" width="300"> -->
+      <div class="img-row">
+        <img src="i/designs/street-sign-name.png" height="250"> 
+        <img src="i/designs/street-sign-number.png" height="250">
+      </div>
     </div>
     <div class="item item2">
+      <div class="img-row">
+
+      </div>
+      <div class="img-row">
+        <img src="i/designs/M1-red.jpeg" height="250">
+      </div>
     </div>
     <div class="item item3">
+      <div class="img-row">
+      <img src="i/designs/2017-09-Kartka-kyianyna-1.jpeg" height="400">
+      <img src="i/designs/Kyiv Parking Info - 01.jpeg" height="400" style="border-radius: 15px">
+      <img src="i/designs/Metro-Manners-1.png" height="400">
+      <img src="i/designs/2018-02-Sviatoshyn-5.jpeg" height="400">
+      </div>
+      <div class="img-row">
+      <!-- <img src="i/designs/Metro-Manners-1.png" width="300"> -->
+      <img src="i/designs/timetable-2019-14.png" width="800">
+      </div>
     </div>
     <div class="item item4">
+       <div class="img-row">
+          <img src="i/designs/metro-PlasticCard-2017-averse.png"   height="200">
+          <img src="i/designs/metro-PlasticCard-2017-reverse.png"  height="200">
+          <img src="i/designs/YellowFace@4x.png" height="200">
+       </div>
+       <div class="img-row">
+        <img src="i/designs/metromap_wagon_v1.12-660x690.png" width="800" style="border-radius: 10px;">
+       </div>
     </div>
     <div class="item item5">
+      <img src="i/designs/2020-12-NY3.png">
+      <img src="i/designs/2018-08-Independence.jpg">
+      <!-- <img src="i/designs/2016-10-new-turnstile.png"> -->
+      <img src="i/designs/timetable-2019-14.png" style="grid-column: span 2;">
+
+
+      <!-- <img src="i/designs/2018-12-TransportPass-Christmas-2.jpg" width="250"> -->
+      <!-- <img src="i/designs/Tariff-28-3.jpeg" width="400"> -->
     </div>
   </div>
 
@@ -124,10 +169,10 @@ <h1>Proba Nav2</h1>
 
   </div>
 
-<div class="section bg-white col-3">
+<div class=" bg-white col-3">
   <div class="" style="grid-column: span 2;">
   <h1>Накреслення</h1>
-  <p>Шрифт містить вісім накреслень: від надтокого до наджирнішого.</p>
+  <p>Шрифт містить вісім накреслень: від надтокого до найжирнішого.</p>
   </div>
 
     <p class="fw100 preview"><span class="fontname">RoadUA Thin – 100</span>      <br> Десь чув, що той фраєр привіз їхньому царю грильяж та класну шубу з пір’я ґави. </p>
@@ -140,6 +185,49 @@ <h1>Накреслення</h1>
     <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">
@@ -154,6 +242,45 @@ <h1>Альтернативні символи</h1>
 </div>
  -->
 
+<script type="text/javascript">
+      // Change the path to your font file
+        const fontPath = 'fonts/ProbaNav2-Regular.otf';
+
+        const glyphPreview = document.getElementById('glyph-preview');
+
+        // Load the font using OpenType.js
+        opentype.load(fontPath, function (err, font) {
+            if (err) {
+                console.error('Error loading font:', err);
+            } else {
+                // Display preview
+                displayAllGlyphs(font);
+            }
+        });
+
+        function displayAllGlyphs(font) {
+            glyphPreview.innerHTML = '';
+            for (let i = 4; i < font.numGlyphs; i++) {
+                const glyph = font.glyphs.get(i);
+                const glyphContainer = document.createElement('div');
+                glyphContainer.classList.add('glyph-container');
+
+                const glyphSpan = document.createElement('span');
+                glyphSpan.textContent = String.fromCodePoint(glyph.unicode || 0); // Show Unicode if available, otherwise use 0
+                glyphSpan.title = `Glyph index: ${i}, Unicode: ${glyph.unicode || 'N/A'}`;
+                glyphSpan.classList.add('glyph');
+                glyphContainer.appendChild(glyphSpan);
+
+                const glyphName = document.createElement('div');
+                glyphName.textContent = glyph.name || '';
+                glyphName.classList.add('glyph-name');
+                glyphContainer.appendChild(glyphName);
+
+                glyphPreview.appendChild(glyphContainer);
+            }
+        }
+</script>
+
 
 <script>
   document.addEventListener("DOMContentLoaded", function () {