<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/css?family=Roboto&display=swap');

* {
    border: 0px black solid;
}


.row_title {
    font-size: 30px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: "Open Sans", sans-serif;
    text-align: center;
    padding-top: 45px;
    padding-bottom: 10px;
    letter-spacing: inherit;

}

@media (max-width: 575px) {
  .row_title {
    writing-mode: horizontal-tb;
  }
  .item_title {
    padding-top: 40px;
    padding-bottom: 15px;
  }

}

.item_title {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  padding-top: 20px;
  padding-bottom: 10px;
  text-align: center;


}
#myname {
  font-size: 30px;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  padding-top: 80px;
}

#repo {
  width: 110%;
}
a:hover {
  color: hotpink;
  text-decoration: none;

}

a {
  color: black;
}

.items {
  padding-top: 30px;
  padding-bottom: 40px;

}
#relearn {
  width: 60%;
}

#reading {
  width: 85%;
}
.img-fluid:hover {
  webkit-filter: blur(4px);
  filter: blur(4px);
}

.bg {
  height: 100%;
  width: 100%;
  }
.bg::before {
  content: "";
  background-image: url("");
  background-repeat: repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  }

</style>

<template>

<div>
  <MenuBar/>
  <div class="bg">
<b-container fluid>
<b-row class="text-center">
  <b-col md="4" offset-md="4">
  <p id='myname'>
    Alice Strete
  </p>
    </b-col>
</b-row>
</b-container>

<b-container fluid>
<b-row class="items">
  <b-col md="1">
    <p class="row_title">P R O J E C T S</p>
  </b-col>
  <b-col md="10">
    <b-row>
      <b-col md="3">
        <p class="item_title"><b-link to="/atnofs" >ATNOFS</b-link></p>
        <b-link to="/atnofs" ><b-img class="img-fluid" src="media/mserver.png"></b-img></b-link>
      </b-col>
  <b-col md="3">
    <p class="item_title"><b-link to="/relearn">Relearn 2021</b-link></p>
    <b-link to="/relearn"><b-img class="img-fluid" id="relearn" center src="media/relearn.png"></b-img></b-link>

  </b-col>
  <b-col md="3">
    <p class="item_title"><b-link to="/TimeCard">Is it time to eat, or is there no more time to eat?</b-link></p>
    <b-link to="/TimeCard"><b-img class="img-fluid" center src="media/making_huel.gif"></b-img></b-link>
  </b-col>
  <b-col md="3">
    <p class="item_title"><b-link to="/HappinessPage">The Happiness Project</b-link></p>
    <b-link to="/HappinessPage"><b-img class="img-fluid" center src="media/privilege.JPG"></b-img></b-link>
  </b-col>


</b-row>
<b-row>
  <b-col md="3">
    <p class="item_title"><b-link to="/xppl" >XPPL</b-link></p>
    <b-link to="/xppl" ><b-img class="img-fluid" src="media/xppl_main.png"></b-img></b-link>
  </b-col>
  <b-col md="3">
    <p class="item_title"><b-link to="/tab">Temporary Autonomous Bureau</b-link></p>
    <b-link to="/tab"><b-img class="img-fluid" src="media/tab.jpg"></b-img></b-link>
  </b-col>
</b-row>
</b-col>
</b-row>
</b-container>



<b-container fluid>
<b-row class="items">
  <b-col md="1">
    <p class="row_title">P U B L I C A T I O N S</p>
  </b-col>
  <b-col md="10">
<b-row>
  <b-col md="3">
    <p class="item_title"><b-link to="/magiun3">Magiun #3</b-link></p>
    <b-link to="/magiun3"><b-img class="img-fluid" src="media/cover3blur.png"></b-img></b-link>
  </b-col>
  <b-col md="3">
    <p class="item_title"><b-link to="/magiun2">Magiun #2</b-link></p>
    <b-link to="/magiun2"><b-img class="img-fluid" src="media/scan.png"></b-img></b-link>
  </b-col>
  <b-col md="3">
    <p class="item_title"><b-link to="/magiun">Magiun #1</b-link></p>
    <b-link to="/magiun"><b-img class="img-fluid" src="media/magiun_scan_test2.jpg"></b-img></b-link>
  </b-col>
  <b-col md="3">
    <p class="item_title"><b-link to="/upsetting">Upsetting Settings, Collected Works</b-link></p>
    <b-link to="/upsetting"><b-img class="img-fluid" src="media/upsetting_settings_book.png"></b-img></b-link>
  </b-col>



</b-row>


<b-row>
    <b-row>
      <b-col md="3">
        <p class="item_title"><b-link to="/catalogue">Upsetting Settings Catalogue</b-link></p>
        <b-link to="/catalogue"><b-img class="img-fluid" src="media/catalogue.png"></b-img></b-link>
      </b-col>
      <b-col md="3">
        <p class="item_title"><b-link to="/xeno">Techno/Cyber/Xeno-Feminism</b-link></p>
        <b-link to="/xeno"><b-img class="img-fluid" src="media/Xeno.png"></b-img></b-link>
      </b-col>
      <b-col md="3">
        <p class="item_title"><b-link to="/overunder">Over/Under</b-link></p>
        <b-link to="/overunder"><b-img class="img-fluid" src="media/overunder.png"></b-img></b-link>
      </b-col>
  <b-col md="3">
    <p class="item_title"><b-link to="/codeart">Code::art Journal</b-link></p>
    <b-link to="/codeart"><b-img class="img-fluid" src="media/codeart.png"></b-img></b-link>
  </b-col>

</b-row>

</b-row>


<b-row>
  <b-col md="3">
    <p class="item_title"><b-link to="/bedchairtable">A Bed, a Chair and a Table</b-link></p>
    <b-link to="/bedchairtable"><b-img class="img-fluid" src="media/bed.png"></b-img></b-link>
  </b-col>

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

<b-container fluid>
<b-row class="items">
  <b-col md="1">
    <p class="row_title">E X T R A</p>
  </b-col>
  <b-col md="10">
    <b-row>

  <b-col md="3">
    <p class="item_title"><b-link to="/fst">Feminist Search Tools</b-link></p>
    <b-link to="/fst"><b-img class="img-fluid" src="media/fst/blobs.png"></b-img></b-link>
  </b-col>
  <b-col md="3">
    <p class="item_title"><b-link to="/surveillance">Surveillance Stories</b-link></p>
    <b-link to="/surveillance"><b-img class="img-fluid" src="media/surveillance.png"></b-img></b-link>
  </b-col>
  <b-col md="3">
    <p class="item_title"><b-link to="/ann">A Nourishing Network</b-link></p>
    <b-link to="/ann"><b-img class="img-fluid" src="media/ann_envelopes.JPG"></b-img></b-link>
  </b-col>
  <b-col md="3">
    <p class="item_title"><b-link to="/fst">Wells of Knowledge</b-link></p>
    <b-link to="/wells"><b-img class="img-fluid" src="media/wells/wells2.png"></b-img></b-link>
  </b-col>

</b-row>
    <b-row>
  <b-col md="3">
    <p class="item_title"><b-link to="/ror">Recipes on the Radio</b-link></p>
    <b-link to="/ror"><b-img class="img-fluid" src="media/ROR.png"></b-img></b-link>
  </b-col>

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

<b-container fluid>
<b-row class="items">
  <b-col md="1">
    <p class="row_title">W O R K S H O P S</p>
  </b-col>
  <b-col md="10">
    <b-row>
      <b-col md="3">
        <p class="item_title"><b-link to="/amrotimes">AMRO Times</b-link></p>
        <b-link to="/amrotimes"><b-img class="img-fluid" src="media/amrotimes.png"></b-img></b-link>
      </b-col>
      <b-col md="3">
        <p class="item_title"><b-link to="/readingfood">Reading Food</b-link></p>
        <b-link to="/readingfood"><b-img class="img-fluid" id="reading" src="media/readingfood.png"></b-img></b-link>
      </b-col>
  <b-col md="3">
    <p class="item_title"><b-link to="/zinemachines">Zine Machines</b-link></p>
    <b-link to="/zinemachines"><b-img class="img-fluid" src="media/zinemachines.png"></b-img></b-link>
  </b-col>
  <b-col md="3">
    <p class="item_title"><b-link to="/unpacking">Unpacking Gender Roles</b-link></p>
    <b-link to="/unpacking"><b-img class="img-fluid" src="media/unpacking.png"></b-img></b-link>
  </b-col>


</b-row>
<b-row>
<b-col md="3">
<p class="item_title"><b-link to="/femtools">Repository of Feminist Search Strategies</b-link></p>
<b-link to="/femtools"><b-img class="img-fluid" src="media/femrepo.gif"></b-img></b-link>
</b-col>

</b-row>
</b-col>
</b-row>
</b-container>
</div>
</div>

</template>

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

</script>
