<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: 25px;
    padding-bottom: 10px;

}

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

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

a:hover {
  color: hotpink;
  text-decoration: none;

}

a {
  color: black;
}



</style>

<template>

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

<b-container fluid>
<b-row>
  <b-col md="1">
    <p class="row_title">PROJECTS</p>
  </b-col>
  <b-col md="2">
    <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="2">
    <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-col md="2">
    <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="2">
    <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-container>



<b-container fluid>
<b-row>
  <b-col md="1">
    <p class="row_title">PUBLICATIONS</p>
  </b-col>
  <b-col md="2">
    <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-col md="2">
    <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="2">
    <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="2">
    <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="2">
    <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-container>

<b-container fluid>
<b-row>
  <b-col md="1">
    <p></p>
  </b-col>
  <b-col md="2">
    <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-container>

<b-container fluid>
<b-row>
  <b-col md="1">
    <p class="row_title">WORKSHOPS</p>
  </b-col>
  <b-col md="2">
    <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="2">
    <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-container>

</div>

</template>

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

</script>
