Pierwsza wersja generowanych obrazków do postów (#19)

* Pierwsza wersja generownych obrazków * CSS changes Add vertical align & new background * Zmiana tła * Cofnięty tymczasowy image Co-authored-by: Agnieszka Cent <[email protected]> Co-authored-by: Maciej Gos <[email protected]>
AzureCommunityPL · Jan 2, 2021 · a63bc41 · a63bc41
1 parent 7649c58
commit a63bc41
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 19 deletions.
diff --git a/_layouts/og-image.html b/_layouts/og-image.html
@@ -4,27 +4,35 @@
 <head>
 
     {%- include head.html -%}
-
+    <link rel="stylesheet" href="/assets/css/og-image.css">
 </head>
 
 <body>
-
-    <!-- page wrapper start -->
-
-    <div class="page-wrapper">
-
-        <!--content here start-->
-        <h1 class="text-dark">{{ page.title | escape }}</h1>
-        {% for author in page.author %}
-        {% assign person = site.data.authors[author] %}
-        {{ person.name }}
-        <img class="img-fluid rounded-circle" alt="image" src="{{ person.image }}">
-        {% endfor %}
-        <!--content end-->
-
-    </div>
-
-    <!-- page wrapper end -->
+    <div class="content">
+        <div class="content-inside">
+            <div class="container">
+                <img src="/assets/images/logo.png" class="logo" alt="logo" />
+                <div class="row">
+                    <div class="col-10">
+                      <h1 class="text-dark bold">{{ page.title | escape }}</h1>
+                    </div>
+                </div>
+
+                <authors class="authors">
+                    {% for author in page.author %}
+                    <div>
+                        {% assign person = site.data.authors[author] %}
+                        <img class="img-fluid rounded-circle" alt="{{ person.name }}" src="{{ person.image }}">
+                        <h3>{{ person.name }}</h3>                    
+                    </div>
+                    {% endfor %}
+                </authors>
+            </div>
+        </div>
+        <footer class="footer">
+           <i>Powered by <b>Microsoft Azure User Group Poland</b></i>
+        </footer>
+      </div>
 
     <!-- inject js start -->
 

diff --git a/_posts/2020-10-22-azure-solutions-architect-qa-secure-network.md b/_posts/2020-10-22-azure-solutions-architect-qa-secure-network.md
@@ -44,7 +44,7 @@ istotna jest analiza wdrożenia innych usług hostowanych na Azure w przyszłoś
 #### Private link
 ![Schemat architektury - Private Link](../assets/images/posts/2020-10-22/private_link.png)
 #### Service endpoints
-![Schemat architectury - Service endpotins](../assets/images/posts/2020-10-22/service_endpoint.png)
+![Schemat architektury - Service endpoints](../assets/images/posts/2020-10-22/service_endpoint.png)
 
 ## Q&A
 - miesięczny koszt rozwiązania opartego o Private Link to ok. $9. Przy załozeniu transferu inbound/outbound na poziomie 100GB, oraz wykorzystaniu jednego "link" dla usług!!!

diff --git a/assets/css/og-image.css b/assets/css/og-image.css
@@ -0,0 +1,61 @@
+html, body {
+    height: 100%;
+    margin: 0;
+  }
+
+  .content {
+    max-width: 1200px; 
+    height: 630px; 
+    background-color: rgb(255, 255, 255); 
+    position: relative;
+    background-image: url('/assets/images/bg/05.jpg');
+    background-size: 1200px 630px;
+  }
+
+  .content-inside {
+    padding: 20px;
+    padding-bottom: 50px;
+    margin-bottom: 50px;
+
+  }
+
+  .footer {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: rgb(11, 10, 27);
+    color: white;
+    text-align: center;
+    font-size: 1.5rem;
+  }
+
+  .logo {
+      max-height: 120px;
+      position: absolute;
+      right: 0;
+      margin-right: 20px;
+  }
+
+  h1 {
+      font-size: 4.5rem;
+  }
+
+  .authors {
+      position: absolute; 
+      bottom: 55px;
+  }
+
+  .authors div {
+      display: inline-block; 
+      margin-right: 20px;
+  }
+
+  .authors img {
+      max-height: 50px;
+  }
+
+  .authors h3 {
+      display:inline-block;
+      vertical-align: -webkit-baseline-middle;
+  }
diff --git a/assets/images/bg/03.png b/assets/images/bg/03.png
diff --git a/assets/images/bg/04.png b/assets/images/bg/04.png
diff --git a/assets/images/bg/05.jpg b/assets/images/bg/05.jpg
diff --git a/assets/images/logo.png b/assets/images/logo.png