changed Second Edition page

src/components/SecondEditionPage.vue

@@ -16,31 +16,58 @@ body {
   min-height: 100vh;
 }
 
-
-
 #magi {
   width: 100%;
   z-index: -1;
+  padding: 20px;
+  --color-stop: #fff5f5;
+  --color-bot: #333042;
+}
+
+.img-fluid {
+  fill: url(#magi) #ffcccc;
 }
 
 #mag_title {
-  font-size: 120px;
+  font-size: 600%;
+  /*color: #ffcccc;*/
   color: #333042;
   font-family: 'Work Sans', sans-serif;
-   text-align: center;
+  text-align: center;
-   padding-top: 30%;
+  z-index: 1;
-   z-index: 1;
+  border-top: 3px #ffcccc;
+  border-left: 3px #ffcccc;
+  border-style: solid dotted;
+  /*border-radius: 0px 72px;*/
+  padding: 6px;
+  /*height: auto;*/
+  /*-webkit-text-stroke: 1px #333042;*/
+  /*transition: all .1s ease;*/
+}
 
+#mag_title:hover {
+  /*border-radius: 0px 72px;*/
+  box-shadow: 6px 6px #ffcccc;
 }
 
 #mag_subtitle {
-  font-size: 40px;
+  font-size: 300%;
   font-family: 'Work Sans', sans-serif;
   color: #333042;
   text-align: center;
-
+  border-right: 3px #ffcccc;
+  border-bottom: 3px #ffcccc;
+  /*border-radius: 120px 0px;*/
+  border-style: solid dotted;
+  height: auto;
+  padding: 6px;
 }
 
+.summary {
+  border-left: 3px solid #ffcccc;
+  border-top: 3px dotted #ffcccc;
+  padding: 20px;
+}
 
 .icons img {
   width: 60%;
@@ -51,7 +78,7 @@ body {
   font-size: 20px;
   font-family: 'Poppins', sans-serif;
   color: #333042;
-  padding-top: 25%;
+  padding-top: 10%;
   text-decoration: 2px underline #ffcccc;
 }
 
@@ -59,6 +86,11 @@ body {
   padding-bottom: 40px;
 }
 
+.col-md-2 {
+  border-right: 3px dotted #ffcccc;
+  display: table;
+}
+
 .container_width {
   max-width: 100%;
 }
@@ -66,49 +98,63 @@ body {
 #toc {
   color: #333042;
   font-family: 'Work Sans', sans-serif;
-   text-align: center;
+  text-align: center;
-   font-size: 50px;
+  font-size: 300%;
-   padding-top: 40px;
+  padding-top: 20px;
-   padding-bottom: 20px;
+  padding-bottom: 20px;
+  border-top: 3px solid #ffcccc;
+  border-left: 3px dotted #ffcccc;
+}
+
+.item {
+  height: auto;
+  width: auto;
 }
 
 @media (max-width: 1217px) {
   #mag_title {
-    font-size: 30px;
+    font-size: 300%;
     padding-top: 10px;
-    padding-left: 20px;
+    padding-left: 12px;
+    padding-right: 12px;
   }
   #mag_subtitle {
-    font-size: 15px;
+    font-size: 150%;
-    padding-left: 20px;
+    padding-top: inherit;
-    padding-top: 10px;
+    /*padding-left: 20px;*/
-    padding-bottom: 10px;
   }
 }
 
 @media (max-width: 575px) {
   #mag_title {
     font-size: 60px;
-    padding-top: 10px;
+    padding-top: inherit;
-    padding-left: 20px;
+    padding-left: 12px;
+    padding-right: 12px;
   }
+
   #mag_subtitle {
-    font-size: 18px;
+    font-size: 24px;
-    padding-left: 20px;
+    padding-top: inherit;
-    padding-top: 10px;
-    padding-bottom: 10px;
   }
+
   .icons img {
-    width: 50%;
+    width: 80%;
   }
+
   .icons p {
-    padding-top: 0px;
+    padding-top: 10%;
   }
+
   #magi {
-padding-left: 20px;
+  padding: 20px;
-padding-right: 20px;
+  border: 3px double ##ffcccc;
+  border-radius: 24px 48px 72px 96px;
+  }
 
- }
+  .col-md-2 {
+  border: none;
+  }
 }
 
 a:hover {
@@ -124,7 +170,7 @@ a {
 #main_container {
   padding-top: 100px;
   padding-bottom: 120px;
-  border-bottom: 2px #ffcccc solid;
+  /*border-bottom: 2px #ffcccc solid;*/
 
 }
 
@@ -132,7 +178,8 @@ a {
   text-align: center;
   font-family: 'Poppins', sans-serif;
   color: #333042;
-  padding-top: 10px;
+  padding: 6px;
+  font-size: small;
 }
 
 .glow {
@@ -153,7 +200,8 @@ a {
 }
 
 #knife, #porcini, #cauliflower, #phone, #clothes, #lychee, #anise {
-  margin-top: 20px;
+  /*margin-top: 20px;*/
+  margin: auto;
 }
 
 @-webkit-keyframes glow {
@@ -183,26 +231,25 @@ a {
     </b-row>
     <b-row>
       <b-col md="8" offset-md="3">
-
         <p id="mag_subtitle">#2 On adapting</p>
         <p id="print">For the print version, send an <a href="mailto:hello@magiun.online">email</a>!</p>
+        <p class="summary">This second issue of Magiun focuses on...</p>
+        <p class=""
       </b-col>
-
-
     </b-row>
     </b-col>
-    <b-col md="6">
-        <b-row>
-          <b-col md="2"></b-col>
-          <b-col md="8">
-            <a href="/about"><b-img class="img-fluid" id="magi" src="media/invert.gif"></b-img></a>
     
+    <b-col md="6">
+      <b-row>
+      <b-col md="2">
+      </b-col>
+        <b-col md="8">
+          <a href="/about">
+            <b-img class="img-fluid" id="magi" src="media/magiun_outline.svg"></b-img></a>
+        </b-col>
+      </b-row>
     </b-col>
-      <b-col md="2"></b-col>
-
     </b-row>
-    </b-col>
-  </b-row>
 
 <b-row>
 <b-col md="4" offset-md="4">
@@ -215,7 +262,7 @@ a {
   </b-col>
 
   <b-col md="2">
-    <p><a href="/knife">Knife</a></p>
+    <p class="item"><a href="/knife">Knife</a></p>
 
   </b-col>
   <b-col md="2" order="0" order-sm="1">
@@ -231,7 +278,7 @@ a {
 <a href="/simmered"><b-img class="img-fluid" id="porcini" center alt="Responsive image" src="media/magiun2/porcini_small.png"></b-img></a>
   </b-col>
   <b-col md="2" order="1" order-sm="0">
-<p><a href="/simmered">Simmered Egg</a></p>
+<p class="item"><a href="/simmered">Simmered Egg</a></p>
 
   </b-col>
 
@@ -242,7 +289,7 @@ a {
   </b-col>
 
   <b-col md="2">
-    <p><a href="/soulsoup">Chicken soup for soul</a></p>
+    <p class="item"><a href="/soulsoup">Chicken soup for soul</a></p>
 
   </b-col>
   <b-col md="2" order="2" order-sm="1">
@@ -256,7 +303,7 @@ a {
   </b-col>
 
   <b-col md="2">
-    <p><a href="/phone">Christmas dinner</a></p>
+    <p class="item"><a href="/phone">Christmas dinner</a></p>
 
   </b-col>
 
@@ -264,7 +311,7 @@ a {
 <b-row class="icons">
 
   <b-col md="2" offset-md="5">
-    <p><a href="/whatwecan">We do what we can with what we have</a></p>
+    <p class="item"><a href="/whatwecan">We do what we can with what we have</a></p>
 
   </b-col>
   <b-col md="2" order="2" order-sm="1">
@@ -278,7 +325,7 @@ a {
   </b-col>
 
   <b-col md="2">
-    <p><a href="/lychee">Have you eaten yet?</a></p>
+    <p class="item"><a href="/lychee">Have you eaten yet?</a></p>
 
   </b-col>
 
@@ -288,7 +335,7 @@ a {
 
 
   <b-col md="2" offset-md="5">
-    <p><a href="/anise">Adapting to adaptations</a></p>
+    <p class="item"><a href="/anise">Adapting to adaptations</a></p>
 
   </b-col>
   <b-col md="2" order="2" order-sm="1">