From acb75bb036cccc89d711488ce8ac2413d216876d Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 13 May 2020 16:07:00 +0300
Subject: [PATCH] Styling for architecture page

---
 src/assets/styles/app/_content.scss |  5 +++++
 src/views/theming/Theming.vue       | 21 ++++++++++++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/assets/styles/app/_content.scss b/src/assets/styles/app/_content.scss
index 7611b870d..6da862bf5 100644
--- a/src/assets/styles/app/_content.scss
+++ b/src/assets/styles/app/_content.scss
@@ -72,6 +72,11 @@
                 font-size: 1.5rem;
                 font-weight: 500;
                 color: var(--text-color);
+
+                &:first-child,
+                &.first {
+                    margin-top: 0;
+                }
             }
 
             a {
diff --git a/src/views/theming/Theming.vue b/src/views/theming/Theming.vue
index dde6b1732..afb98b77a 100755
--- a/src/views/theming/Theming.vue
+++ b/src/views/theming/Theming.vue
@@ -8,8 +8,8 @@
         </div>
 
         <div class="content-section documentation">
-            <h3 style="margin-top:0">Architecture</h3>
-            <img alt="Architecture" src="../../assets/images/architecture.jpg" style="width: 100%; margin-top:16px;" />
+            <h3>Architecture</h3>
+            <img alt="Architecture" src="../../assets/images/architecture.jpg" class="architecture-image"/>
             <p>PrimeVue is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been
                 separated into core and theme. Core resides inside PrimeVue to implement the structure of the components such as positioning whereas theme brings the colors, paddings
                 and margins.</p>
@@ -129,9 +129,20 @@ export default {
 }
 </script>
 
-<style scoped>
-.designer-image {
+<style lang="scss" scoped>
+.designer-image,
+.architecture-image {
+    width: 75%;
+    margin: 0 auto;
     display: block;
-    margin-top: 30px;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+}
+
+@media screen and (max-width: 960px) {
+    .designer-image,
+    .architecture-image {
+        width: 100%;
+    }
 }
 </style>