magiun_website/src/components/SecondEditionPage.vue

<style scoped>

@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Raleway&family=Work+Sans:wght@900&display=swap');


* {
    border: 0px black solid;
    background-color: #fff5f5 !important;

}

body {
  background-color: #fff5f5;
  min-height: 100vh;
}



#magi {
  width: 100%;
  z-index: -1;
}

#mag_title {
  font-size: 120px;
  color: #333042;
  font-family: 'Work Sans', sans-serif;
   text-align: center;
   padding-top: 30%;
   z-index: 1;

}

#mag_subtitle {
  font-size: 40px;
  font-family: 'Work Sans', sans-serif;
  color: #333042;
  text-align: center;

}


.icons img {
  width: 60%;
}

.icons p {
  text-align: center;
  font-size: 20px;
  font-family: 'Poppins', sans-serif;
  color: #333042;
  padding-top: 25%;
  text-decoration: 2px underline #ffcccc;
}

.icons {
  padding-bottom: 40px;
}

.container_width {
  max-width: 100%;
}

#toc {
  color: #333042;
  font-family: 'Work Sans', sans-serif;
   text-align: center;
   font-size: 50px;
   padding-top: 40px;
   padding-bottom: 20px;
}

@media (max-width: 1217px) {
  #mag_title {
    font-size: 30px;
    padding-top: 10px;
    padding-left: 20px;
  }
  #mag_subtitle {
    font-size: 15px;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (max-width: 575px) {
  #mag_title {
    font-size: 60px;
    padding-top: 10px;
    padding-left: 20px;
  }
  #mag_subtitle {
    font-size: 18px;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .icons img {
    width: 50%;
  }
  .icons p {
    padding-top: 0px;
  }
  #magi {
padding-left: 20px;
padding-right: 20px;

 }
}

a:hover {
  color: #ff4c2b;
  text-decoration: none;

}

a {
  color: #333042;
}

#main_container {
  padding-top: 100px;
  padding-bottom: 120px;
  border-bottom: 2px #ffcccc solid;

}

#print {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  color: #333042;
  padding-top: 10px;
}

.glow {
  font-family: 'Poppins', sans-serif;
  font-size: 30px;
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}
</style>

<template>

<div>
  <MenuBar/>
<b-container fluid class="p-0">

  <b-row id="main_container">
    <b-col md="6">
      <b-row>
        <b-col md="8" offset-md="3">

      <a href="/about"><p id="mag_title">Magiun</p></a>
    </b-col>

    </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>
      </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>
      <b-col md="2"></b-col>

    </b-row>
    </b-col>
  </b-row>

<b-row>
<b-col md="4" offset-md="4">
  <p id="toc">Inside</p>
</b-col>
</b-row>

<b-row class="icons">
  <b-col md="2" offset-md="3">
  </b-col>

  <b-col md="2">
    <p>first</p>

  </b-col>

</b-row>


<b-row class="icons">

  <b-col md="2" offset-md="5" order="1" order-sm="0">
<p>second</p>

  </b-col>
  <b-col md="2" order="0" order-sm="1">

  </b-col>

</b-row>
</b-container>



</div>

</template>

<script>
import MenuBar from './MenuBar'
export default {
    name: 'SplashPage',
    components: {
        MenuBar
    }
}

</script>