latest additions

master
alicestrt 6 years ago
parent 02cc8e6968
commit 20354bfc5f

2
.gitignore vendored

@ -21,4 +21,4 @@ yarn-error.log*
*.sw? *.sw?
#static files #static files
public/topics/* static/*

1942
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,66 @@
<style scoped>
.about-text {
font-size: 18px;
color: #212322;
text-align: justify;
}
h3 {
font-family: "Open Sans", sans-serif;
font-size: 30px;
}
p {
font-family: "Inconsolata", monospace;
}
</style>
<template>
<div>
<MenuBar/>
<b-row class="about-text" align-h="center">
<b-col cols="8">
<h3>
About the project</h3>
<p class="about-text">
I'm Alice. This website is part of my graduation project for the Master of Arts in Fine Art and Design: Experimental Publishing, in which I look at the way techno-solutionism is applied in food. More specifically, I'm deconstructing what I've identified
as the meal-replacement phenomenon, an ideology, culture, community and, ultimately, range of products that have emerged out of Silicon Valley in the past 5 years and have spread out across the Western world.
</p>
</b-col>
</b-row>
<b-row align-h="center">
<b-col cols="8">
<h3>About the essay</h3>
<p class="about-text">
"Your Body Will Make Itself Heard" represents my masters' thesis, and takes a broader look at the historical, cultural and technological development of meal replacements.
</p>
</b-col>
</b-row>
<b-row class="about-text" align-h="center">
<b-col cols="8">
<h3>About the video</h3>
<p class="about-text">
"Is It Time to Eat, or Is there No More Time to Eat" is a video essay that complements my research on meal replacements. As opposed to a broader look on the topic, the video essay focuses on the issue of solving problems through the means of techno-solutionism. It's built in the form of a vlog which responds to and exists in the same space as the sea of reviews, unpacking and tasting videos that exist around meal replacements.
</p>
</b-col>
</b-row>
</div>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'AboutPage',
components: {
MenuBar
}
}
</script>

@ -7,6 +7,8 @@
p { p {
text-align: justify; text-align: justify;
font-size: 18px; font-size: 18px;
color: #212322;
font-family: 'Inconsolata', monospace;
} }
</style> </style>
@ -17,6 +19,7 @@ p {
<b-row align-h="center"> <b-row align-h="center">
<b-col cols="10"> <b-col cols="10">
<div class="card_content"> <div class="card_content">
<p style="text-align: center; font-weight: bold;">We love food, we hate having to cook it</p>
<p> <p>
There is a <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="theory_of_evolution" title="Theory of evolution ">theory of evolution</span> that says the following: the development of the Homo Sapiens brain happened There is a <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="theory_of_evolution" title="Theory of evolution ">theory of evolution</span> that says the following: the development of the Homo Sapiens brain happened
mainly due to the discovery of fire, and subsequently cooking. By using less energy to hunt, and spending less time chewing raw food, the human brain had increasingly more space and time to develop new activities, ponder upon its surroundings mainly due to the discovery of fire, and subsequently cooking. By using less energy to hunt, and spending less time chewing raw food, the human brain had increasingly more space and time to develop new activities, ponder upon its surroundings
@ -27,7 +30,7 @@ p {
<p> <p>
Women have been pushed towards domestic work ever since the evolution from more equal hunter-gatherer societies to settled agricultural societies (Smith, 1997). Traditionally, men provided the food, earned at first by hunting, and later on through their Women have been pushed towards domestic work ever since the evolution from more equal hunter-gatherer societies to settled agricultural societies (Smith, 1997). Traditionally, men provided the food, earned at first by hunting, and later on through their
paid job. Women would be in charge of preparing food for everyone, and that role rarely changed. Throughout time, cooking as a means of caregiving became a practice identified more with women, while cooking for entertainment or skill paid job. Women would be in charge of preparing food for everyone, and that role rarely changed. Throughout time, cooking as a means of caregiving became a practice identified more with women, while cooking for entertainment or skill
display was, and still is, associated with men (Cairns et al. 2010). In many households it is still often considered a special occasion when the man of the house cooks. This view was reinforced in cooking advice from the 20th century; display was, and still is, associated with men (Cairns et al. 2010). In many households it is still often considered a special occasion when <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="man_cooking" title="The cooking man">the man of the house cooks</span>. This view was reinforced in cooking advice from the 20th century;
men do not cook on a daily basis, but when they do, they cook dishes that best display their talents (Vester, 2015). men do not cook on a daily basis, but when they do, they cook dishes that best display their talents (Vester, 2015).
</p> </p>
<p> <p>
@ -47,7 +50,7 @@ p {
A womans place is in the home, and as long shes in the home, she might as well be in the kitchen. Women do alright when they have all the modern conveniences, but us men are better at this rugged type of outdoor cooking. Sort of A womans place is in the home, and as long shes in the home, she might as well be in the kitchen. Women do alright when they have all the modern conveniences, but us men are better at this rugged type of outdoor cooking. Sort of
a throwback to cavemen days. (Leave it to Beaver, 1957). His last remark reinforces the idea that gender roles have an evolutionary development, are part of human nature and should not be questioned. a throwback to cavemen days. (Leave it to Beaver, 1957). His last remark reinforces the idea that gender roles have an evolutionary development, are part of human nature and should not be questioned.
<p> <p>
A brilliant example of the portrayal of women in the kitchen, from a womans perspective, is Martha Roslers Semiotics of the Kitchen. In this performance piece, set in a typical kitchen, Martha Rosler manipulates kitchen tools with sudden, violent gestures, A brilliant example of the portrayal of women in the kitchen, from a womans perspective, is <span style='border-bottom: 2px black dashed;' v-b-popover.click.html="martha_rosler" title="Martha Rosler">Martha Roslers Semiotics of the Kitchen</span>. In this performance piece, set in a typical kitchen, Martha Rosler manipulates kitchen tools with sudden, violent gestures,
sometimes even performing useless tasks such as pretending to throw the contents of a spoon over her shoulder. Her piece is meant to express the frustration of women being stuck doing domestic labour, which is taken for granted. sometimes even performing useless tasks such as pretending to throw the contents of a spoon over her shoulder. Her piece is meant to express the frustration of women being stuck doing domestic labour, which is taken for granted.
It is also a parody of the cooking shows of the time, particularly the one hosted by an always cheerful Julia Child. In her mock culinary show, she is no longer a cheerful performer, but uses the tools that have been assigned to It is also a parody of the cooking shows of the time, particularly the one hosted by an always cheerful Julia Child. In her mock culinary show, she is no longer a cheerful performer, but uses the tools that have been assigned to
her as an expression of anger and frustration: when the woman speaks, she names her own oppression (Rosler, 1975). Her piece shows that gender roles enforced traditionally within the household can be oppressive, especially when her as an expression of anger and frustration: when the woman speaks, she names her own oppression (Rosler, 1975). Her piece shows that gender roles enforced traditionally within the household can be oppressive, especially when
@ -79,8 +82,10 @@ export default {
return { return {
theory_of_evolution: '<a href="https://www.scientificamerican.com/article/cooking-up-bigger-brains/?redirect=1"> A theory developed by Richard Wrangham, biological anthropologist at Harvard University</a>', theory_of_evolution: '<a href="https://www.scientificamerican.com/article/cooking-up-bigger-brains/?redirect=1"> A theory developed by Richard Wrangham, biological anthropologist at Harvard University</a>',
woman_place: '<a href="https://www.barrypopik.com/index.php/new_york_city/entry/a_womans_place_is_in_the_kitchen/"> The origins of the phrase </a>', woman_place: '<a href="https://www.barrypopik.com/index.php/new_york_city/entry/a_womans_place_is_in_the_kitchen/"> The origins of the phrase </a>',
leave_it: '<iframe width="560" height="315" src="https://www.youtube.com/embed/MXhlTQJcgbc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>', leave_it: '<iframe width="200" height="200" src="https://www.youtube.com/embed/MXhlTQJcgbc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
mental_load: '<iframe width="560" height="315" src="https://i.guim.co.uk/img/media/e916cc0a952d793c9f82dcd6954afcac63d68c87/0_0_2000_2000/master/2000.png?width=1920&quality=85&auto=format&fit=max&s=a2b1fc7a0500118c9bf17bc660b566b9"></iframe>' mental_load: '<iframe width="560" height="315" src="https://i.guim.co.uk/img/media/e916cc0a952d793c9f82dcd6954afcac63d68c87/0_0_2000_2000/master/2000.png?width=1920&quality=85&auto=format&fit=max&s=a2b1fc7a0500118c9bf17bc660b566b9"></iframe>',
martha_rosler: '<img width="300" height="200" src="./static/topics/gender_in_food/images/martha.jpg"></img>',
man_cooking: '<iframe src="https://archive.org/embed/Wordtoth1955" width="200" height="2000" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>'
} }
}, },
} }

@ -0,0 +1,33 @@
<template>
<div>
<MenuBar/>
<h3>Your Body Will Make Itself Heard</h3>
<p>Download the full text of my thesis.</p>
</div>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'FullTextPage',
components: {
MenuBar}
}
</script>
<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');
#header{
margin-top: 40px;
}
p {
text-align: justify;
}
#introduction{
margin-top: 30px;
}
</style>

@ -7,6 +7,8 @@
p { p {
text-align: justify; text-align: justify;
font-size: 18px; font-size: 18px;
color: #212322;
font-family: 'Inconsolata', monospace;
} }
</style> </style>

@ -0,0 +1,25 @@
<template>
<div>
Glossary of terms
</div>
</template>
<script>
export default {
name: 'GlossaryPage',
}
</script>
<style scoped>
#header{
margin-top: 40px;
}
p {
text-align: justify;
}
#introduction{
margin-top: 30px;
}
</style>

@ -0,0 +1,38 @@
<template>
<b-row class="mb-5-menu">
<b-col md="8">
<b-button variant="light"><router-link to='/' class='routerlink'>Home</router-link></b-button>
<b-button variant="light"><router-link to='/about' class='routerlink'>About</router-link></b-button>
<b-button variant="light"><router-link to='/review' class='routerlink'>Review</router-link></b-button>
<!-- <b-button variant="light"><router-link to='/glossary' class='routerlink'>Glossary</router-link></b-button> -->
<b-button variant="light"><router-link to='/fulltext' class='routerlink'>Full text</router-link></b-button>
<b-button variant="light"><router-link to='/video' class='routerlink'>Full video</router-link></b-button>
</b-col>
</b-row>
</template>
<script>
export default {
name: 'MenuBar',
}
</script>
<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');
.mb-5-menu {
border-bottom: 1px solid #D3D3D3;
font-size: 18px;
margin-bottom: 40px;
box-shadow: 0.5px 0.5px 10px grey;
font-family: 'Open Sans', sans-serif;
text-decoration: none;
color: #D3D3D3;
}
.routerlink {
display: block;
color: #212322;
font-family: 'Open Sans', sans-serif;
}
</style>

@ -1,7 +1,15 @@
<style scoped> <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');
* { * {
border: 0px black solid; border: 1px black solid;
}
b-card {
border: 0px;
} }
.fade-enter-active, .fade-enter-active,
@ -17,9 +25,51 @@
opacity: 0; opacity: 0;
} }
.intro_review { .intro_text {
text-align: justify; text-align: justify;
font-size: 20px; font-size: 16px;
color: #212322;
font-family: 'Inconsolata', monospace;
}
.review_block {
border-bottom: 1px solid #D3D3D3;
box-shadow: 0 4px 8px -2px gray;
}
.icon_dropdown {
margin-top: 10px;
margin-bottom: 10px;
}
.card-text {
font-family: 'Inconsolata', monospace;
font-size: 14px;
}
.card-title {
font-family: 'Open sans', sans-serif;
font-size: 16px;
font-weight: bold;
}
.read-button {
text-decoration: none;
color: #212322;
font-size: 14px;
}
.main-cards {
margin-top: 20px;
}
#intro_title {
font-weight: bold;
text-align: center;
font-size: 25px;
color: #212322;
font-family: 'Open Sans', sans-serif;
} }
</style> </style>
@ -28,92 +78,93 @@
<div> <div>
<b-row class="mb-5"> <MenuBar/>
<b-col md="8" offset-md="9">
<b-button variant="light">About</b-button>
<b-button variant="light">Glossary</b-button>
<b-button variant="light">Full text</b-button>
<b-button variant="light">Full video</b-button>
</b-col>
</b-row>
<!-- End of top menu--> <!-- End of top menu-->
<div class="review_block">
<b-row align-h="center" class="mb-2">
<b-row align-h="center" class="mb-5"> <b-col cols="10" md-10 justify-text-center>
<p id="intro_title">THE REVIEW</p>
<b-col cols="8" md-10 justify-text-center class="intro_review"> <div class="intro_text">
<p> <p>
... this is more than just a simple review. Instead of just discussing the physical characteristics of one product or another, my analysis focuses on the broader context in which these products have developed. I've become interested in meal replacements ... this is more than just a default product review. Instead of simply discussing the physical characteristics of one product or another, my analysis focuses on the broader context in which these products have developed, highlights the patterns of techno-solutionism
because the concept of rejecting food as inefficient, and replacing it with an ultra-processed powder, however many nutrients it contained, intrigued me. I found the idea to be completely alien, so far removed from my values and desires, that I've identified as problematic, and deconstructs their benefit claims and potential for becoming increasingly relevant in today's Western societies.
that I had to look deeper. I ended up writing an essay, following the historical path and cultural patterns that led to the growth of a culture, an ideology, a community around the act of replacing one of the most basic human habits. </p>
</p> <p>
<p> I've become interested in meal replacements because the concept of rejecting food as inefficient, and replacing it with an ultra-processed powder, however many nutrients it contained, intrigued me. I found the idea to be completely alien, so far removed
Below, you will find excerpts of my essay, split into the main topics covered in my research. Scattered throughout the text are images, references, articles, quotes and video snippets, some even extracted from my own video essay, that together build a from my values and desires, that I had to look deeper. I ended up writing an essay, following the historical path and cultural patterns that led to the growth of a culture, an ideology, a community around the act of replacing one
complex image of the world of meal replacements. of the most basic human habits.
</p> </p>
</b-col> <p>
</b-row> Below, you will find excerpts of my essay, split into the main topics covered in my research. Scattered throughout the text are images, references, articles, quotes and video snippets, some extracted from my own video essay, which together build
a complex image of the world of meal replacements.
</p>
</div>
</b-col>
</b-row>
</div>
<!-- End of description--> <!-- End of description-->
<b-row align-h="center" class="mb-5"> <b-row align-h="center" class="icon_dropdown">
<b-col cols="2" class="text-center"> <b-col cols="2" class="text-center">
<b-dropdown id="dropdown-2" class="m-md-2" variant="outline-dark" @click="onClick" no-caret> <b-dropdown id="dropdown-1" dropright variant="light" @click="onClick" no-caret>
<span slot="text"> <font-awesome-icon icon="stroopwafel" size="3x" /></span> <span slot="text"> <font-awesome-icon icon="stroopwafel" size="3x" /></span>
<b-card title="Replacing cooking" class="mb-2"> <b-card title="Replacing cooking" style="width: 120%; height: 120%;">
<b-card-text> <b-card-text class="card-text">
Meal replacements aim to replace food with food-like substances, which means there's no need to cook. But what do people have against cooking in the first place? When did cooking become important for humans? Meal replacements aim to replace food with food-like substances, removing the need to cook. But what do people have against cooking in the first place?
</b-card-text> </b-card-text>
<b-dropdown-item-button v-on:click="showCookingCard = !showCookingCard" href="#" variant="primary">Keep reading</b-dropdown-item-button> <b-dropdown-item-button v-on:click="resetShowCookingCard(showCookingCard)" href="#" variant="primary" class="read-button">Keep reading</b-dropdown-item-button>
</b-card> </b-card>
</b-dropdown> </b-dropdown>
</b-col> </b-col>
<b-col cols="2" class="text-center"> <b-col cols="2" class="text-center">
<b-dropdown id="dropdown-2" class="m-md-2" variant="outline-dark" @click="onClick" no-caret> <b-dropdown id="dropdown-2" dropright class="m-md-2" variant="light" @click="onClick" no-caret>
<span slot="text"> <font-awesome-icon icon="stopwatch" size="3x" /></span> <span slot="text"> <font-awesome-icon icon="stopwatch" size="3x" /></span>
<b-card title="Saving time" class="mb-2"> <b-card title="Saving time" style="width: 120%; height: 120%;">
<b-card-text> <b-card-text class="card-text">
When you have no time to eat throughout the day, you have to reconsider your priorities. sometimes, that can mean eating your meals in liquid form, on the go. When you have no time to eat throughout the day, you have to reconsider your priorities. Sometimes, that can mean eating your meals in liquid form.
</b-card-text> </b-card-text>
<b-dropdown-item-button v-on:click="showTimeCard = !showTimeCard" href="#" variant="primary">Keep reading</b-dropdown-item-button> <b-dropdown-item-button v-on:click="resetShowTimeCard(showTimeCard)" href="#" variant="primary" class="read-button">Keep reading</b-dropdown-item-button>
</b-card> </b-card>
</b-dropdown> </b-dropdown>
</b-col> </b-col>
<b-col cols="2" class="text-center"> <b-col cols="2" class="text-center">
<b-dropdown id="dropdown-3" class="m-md-2" variant="outline-dark" @click="onClick" no-caret> <b-dropdown id="dropdown-3" dropright class="m-md-2" variant="light" @click="onClick" no-caret>
<span slot="text"> <font-awesome-icon icon="code" size="3x" /></span> <span slot="text"> <font-awesome-icon icon="code" size="3x" /></span>
<b-card title="Providing solutions" class="mb-2"> <b-card title="Providing solutions" style="width: 120%; height: 120%; max-width: 40rem;">
<b-card-text> <b-card-text class="card-text">
The food system has plenty of problems, from food waste to world hunger. Most meal replacement brands claim to tackle some of these issues through their products. But I don't think that's working very well. The food system has plenty of problems, from food waste to world hunger. Most meal replacement brands claim to tackle some of these issues through their products.
</b-card-text> </b-card-text>
<b-dropdown-item-button v-on:click="showSolutionsCard = !showSolutionsCard" href="#" variant="primary">Keep reading</b-dropdown-item-button> <b-dropdown-item-button v-on:click="resetShowSolutionsCard(showSolutionsCard)" href="#" variant="primary" class="read-button">Keep reading</b-dropdown-item-button>
</b-card> </b-card>
</b-dropdown> </b-dropdown>
</b-col> </b-col>
<b-col cols="2" class="text-center"> <b-col cols="2" class="text-center">
<b-dropdown id="dropdown-4" class="m-md-2" variant="outline-dark" @click="onClick" no-caret> <b-dropdown id="dropdown-4" dropright class="m-md-2" variant="light" @click="onClick" no-caret>
<span slot="text"> <font-awesome-icon icon="search-dollar" size="3x" /></span> <span slot="text"> <font-awesome-icon icon="search-dollar" size="3x" /></span>
<b-card title="Adding value" class="mb-2"> <b-card title="Adding value" style="width: 120%; height: 120%;">
<b-card-text> <b-card-text class="card-text">
If food is inefficient in keeping humans alive, what makes meal replacements, or complete foods, an appropriate alternative? If food is inefficient in keeping humans alive, what makes meal replacements an appropriate alternative?
</b-card-text> </b-card-text>
<b-dropdown-item-button v-on:click="showValueCard = !showValueCard" href="#" variant="primary">Keep reading</b-dropdown-item-button> <b-dropdown-item-button v-on:click="resetShowValueCard(showValueCard)" href="#" variant="primary" class="read-button">Keep reading</b-dropdown-item-button>
</b-card> </b-card>
</b-dropdown> </b-dropdown>
</b-col> </b-col>
<b-col cols="2" class="text-center"> <b-col cols="2" class="text-center">
<b-dropdown id="dropdown-5" class="m-md-2" variant="outline-dark" @click="onClick" no-caret> <b-dropdown id="dropdown-5" dropright class="m-md-2" variant="light" @click="onClick" no-caret>
<span slot="text"> <font-awesome-icon icon="seedling" size="3x" /></span> <span slot="text"> <font-awesome-icon icon="seedling" size="3x" /></span>
<b-card title="Saving the future" class="mb-2"> <b-card title="Saving the future" style="width: 120%; height: 120%;">
<b-card-text> <b-card-text class="card-text">
In the future, we will probably have to change the ways in which we relate to food. Will future food be purely functional? Will agriculture change drastically, as well as our reliance on it? In the future, we will probably have to change the ways in which we relate to food. Will future food be purely functional? Will agriculture change drastically, as well as our reliance on it?
</b-card-text> </b-card-text>
<b-dropdown-item-button v-on:click="showFutureCard = !showFutureCard" href="#" variant="primary">Keep reading</b-dropdown-item-button> <b-dropdown-item-button v-on:click="resetShowFutureCard(showFutureCard)" href="#" variant="primary" class="read-button">Keep reading</b-dropdown-item-button>
</b-card> </b-card>
</b-dropdown> </b-dropdown>
@ -122,7 +173,7 @@
</b-row> </b-row>
<b-row align-h="center"> <b-row align-h="center">
<b-col cols="8" class="text-center"> <b-col cols="8" class="main-cards">
<transition name="fade"> <transition name="fade">
<div v-if="showCookingCard"> <div v-if="showCookingCard">
<CookingCard/> <CookingCard/>
@ -154,10 +205,12 @@ import TimeCard from './TimeCard'
import SolutionsCard from './SolutionsCard' import SolutionsCard from './SolutionsCard'
import ValueCard from './ValueCard' import ValueCard from './ValueCard'
import FutureCard from './FutureCard' import FutureCard from './FutureCard'
import MenuBar from './MenuBar'
export default { export default {
name: 'ReviewPage', name: 'ReviewPage',
components: { components: {
CookingCard, TimeCard, SolutionsCard, ValueCard, FutureCard, CookingCard, TimeCard, SolutionsCard, ValueCard, FutureCard, MenuBar
}, },
data: function() { data: function() {
return { return {
@ -170,9 +223,45 @@ export default {
}, },
methods: { methods: {
onClick() { onClick() {
// Close the menu and (by passing true) return focus to the toggle button this.$refs.dropdown.hide(false)
this.$refs.dropdown.hide(false) },
} // because we don't know how to program JS
resetShowCookingCard(currentValue) {
this.showCookingCard = !currentValue
this.showTimeCard = false
this.showSolutionsCard = false
this.showValueCard = false
this.showFutureCard = false
},
resetShowTimeCard(currentValue) {
this.showCookingCard = false
this.showTimeCard = !currentValue
this.showSolutionsCard = false
this.showValueCard = false
this.showFutureCard = false
},
resetShowSolutionsCard(currentValue) {
this.showCookingCard = false
this.showTimeCard = false
this.showSolutionsCard = !currentValue
this.showValueCard = false
this.showFutureCard = false
},
resetShowValueCard(currentValue) {
this.showCookingCard = false
this.showTimeCard = false
this.showSolutionsCard = false
this.showValueCard = !currentValue
this.showFutureCard = false
},
resetShowFutureCard(currentValue) {
this.showCookingCard = false
this.showTimeCard = false
this.showSolutionsCard = false
this.showValueCard = false
this.showFutureCard = !currentValue
},
} }
} }

@ -7,6 +7,8 @@
p { p {
text-align: justify; text-align: justify;
font-size: 18px; font-size: 18px;
color: #212322;
font-family: 'Inconsolata', monospace;
} }
</style> </style>

@ -1,108 +1,159 @@
<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');
* {
border: 1px solid black;
}
h3 {
margin-top: 40px;
font-family: 'Open Sans', sans-serif;
font-size: 30px;
font-weight: bold;
text-align: center;
}
p {
text-align: justify;
}
#introduction {
margin-top: 20px;
font-family: 'Inconsolata', monospace;
}
#short-review {
font-family: 'Inconsolata', monospace;
}
#review-title {
font-family: 'Open Sans', sans-serif;
}
#review-end {
font-family: 'Open Sans', sans-serif;
}
#icon-text {
font-family: 'Open Sans', sans-serif;
}
#why {
font-size: 20px;
font-weight: bold;
text-align: center;
}
</style>
<template> <template>
<div> <div>
<div class="row justify-content-center"> <b-row align-h="center">
<div class="col-md-12 text-center" id="header"> <b-col cols="4">
<h2>A resource for the meal-replacement curious</h2> <h3>A critical resource for the meal-replacement curious</h3>
</div> </b-col>
</div> <!--end header --> </b-row>
<!--end header -->
<div class="row justify-content-center" style="border-bottom: 1px solid #D3D3D3;">
<div class="col-md-10 text-left" id="introduction"> <b-row class="row justify-content-center" style="border-bottom: 1px solid #D3D3D3;">
<p> <b-col cols="10" id="introduction">
<p>
Throughout this past year, Ive become fascinated with meal replacements. From their surprising form and aspiration to replace normal food, to the entire growing culture and community base around them, Ive delved deep into the rabbit hole. I have now spent more than 6 months learning everything I could about them. I think I am ready to leave my review.
Throughout this past year, Ive become fascinated with meal replacements. From their surprising form and aspiration to replace normal food, to the entire growing culture and community base around them, Ive delved deep into the rabbit hole. I have now
</p> spent more than 6 months learning everything I could about them. I think I am ready to leave my review.
</p>
<p>
If you're in any way curious about this growing trend of replacing traditional food with tech food, you might find this useful. My personal opinion is based on an extensive research that has developed into a video essay, a written essay and a collection of material in various media that illustrates my views.
</p> <p>
</div> If you're in any way curious about this growing trend of replacing traditional food with tech food, you might find this useful. My personal opinion is based on an extensive research that has developed into a video essay, a written essay and a collection
</div> <!--end introduction --> of material in various media that illustrates my views.
</p>
<div class="row justify-content-center mt-5"> </b-col>
<div class="col-md-4 text-center"> </b-row>
<font-awesome-icon icon="stroopwafel" size="5x"/> <!--end introduction -->
<p style="text-align:center;"> <b-row align-h="center">
Replacing cooking <b-col cols="3" id="why">
</p> Why meal replacements?
</div> </b-col>
<div class="col-md-4 text-center"> </b-row>
<font-awesome-icon icon="stopwatch" size="5x"/> <b-row align-h="center">
<p style="text-align:center;"> <b-col cols="2" style="text-align:center;">
Saving time <font-awesome-icon icon="stroopwafel" size="4x" />
</p> <p id="icon-text" style="text-align:center;">
</div> Replacing cooking
<div class="col-md-4 text-center"> </p>
<font-awesome-icon icon="code" size="5x"/> </b-col>
<p style="text-align:center;"> <b-col cols="3" style="text-align:center;">
Providing solutions <font-awesome-icon icon="stopwatch" size="4x" />
</p> <p id="icon-text" style="text-align:center;">
</div> Saving time
</div> <!-- end first row of icons--> </p>
</b-col>
<b-col cols="2" style="text-align:center;">
<div class="row justify-content-center mt-5" style="border-bottom: 1px solid #D3D3D3;"> <font-awesome-icon icon="code" size="4x" />
<div class="col-md-2 text-center"> </div> <p id="icon-text" style="text-align:center;">
<div class="col-md-4 text-center"> Providing solutions
<font-awesome-icon icon="search-dollar" size="5x" /> </p>
<p style="text-align:center;"> </b-col>
Adding value </b-row>
</p> <!-- end first row of icons-->
</div>
<div class="col-md-4 text-center">
<font-awesome-icon icon="seedling" size="5x" /> <b-row align-h="center">
<p style="text-align:center;"> <b-col cols="2" style="text-align:center;">
Changing the future <font-awesome-icon icon="search-dollar" size="4x" />
</p> <p id="icon-text" style="text-align:center;">
</div> Adding value
<div class="col-md-2 text-center"> </div> </p>
</div> <!-- end second row of icons--> </b-col>
<b-col cols="2" style="text-align:center;">
<div class="row justify-content-between mt-5"> <font-awesome-icon icon="seedling" size="4x" />
<div class="col-md-2"> <p id="icon-text" style="text-align:center;">
<p style="text-align: right;"> Changing the future
Alice says: </p>
</p> </b-col>
<p style="font-size: 12px; text-align: right;"> </b-row>
Verified user <!-- end second row of icons-->
<font-awesome-icon icon="user-check" style="color: green" />
</p> <b-row class="row justify-content-between mt-5" style="border-top: 1px solid #D3D3D3;">
</div> <b-col id="review_end">
<div class="col-md-8"> <p style="text-align: right;">
<p style="font-weight: bold;"> Alice says:
I have so many thoughts! <font-awesome-icon icon="star" />
</p> <font-awesome-icon icon="star-half-alt" />
<p> </p>
I tried meal replacements, got sucked into the culture, and Ive come out with many thoughts. First of all... <p style="font-size: 12px; text-align: right;">
</p> Verified user
</div> <font-awesome-icon icon="user-check" style="color: green" />
<div class="col-md-2"> </p>
<b-button variant="light"><router-link to='/review'>Read full review</router-link></b-button> </b-col>
<b-col class="col-md-8">
<p id='review-title' style="font-weight: bold;">
</div> I have so many thoughts!
</div> </p>
<p id='short-review'>
I tried meal replacements, got sucked into the culture, and Ive come out with many thoughts. First of all...
</p>
</b-col>
<b-col class="col-md-2">
<b-button variant="light">
<router-link to='/review'>Read full review</router-link>
</b-button>
</b-col>
</b-row>
</div> </div>
</template> </template>
<script> <script>
export default {
name: 'SplashPage',
}
</script>
<style scoped>
#header{
margin-top: 40px;
}
p {
text-align: justify;
}
#introduction{
margin-top: 30px;
export default {
name: 'SplashPage',
} }
</style> </script>

@ -7,6 +7,8 @@
p { p {
text-align: justify; text-align: justify;
font-size: 18px; font-size: 18px;
color: #212322;
font-family: 'Inconsolata', monospace;
} }
</style> </style>
@ -54,7 +56,7 @@ export default {
data: function() { data: function() {
return { return {
post_mom_economy: '<img width="300" height="200" src="./topics/post-mom_economy/images/post_mom.png"></img>', post_mom_economy: '<img width="300" height="200" src="/static/topics/post-mom_economy/images/post_mom.png"></img>',
lot_2046: '<a href="https://www.lot2046.com/">LOT is a subscription-based service which distributes a basic set of clothing, footwear, essential self-care products, accessories, and media content.</a>' lot_2046: '<a href="https://www.lot2046.com/">LOT is a subscription-based service which distributes a basic set of clothing, footwear, essential self-care products, accessories, and media content.</a>'
} }

@ -7,6 +7,8 @@
p { p {
text-align: justify; text-align: justify;
font-size: 18px; font-size: 18px;
color: #212322;
font-family: 'Inconsolata', monospace;
} }
</style> </style>

@ -0,0 +1,53 @@
<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');
#header {
margin-top: 40px;
}
p {
text-align: justify;
}
#introduction {
margin-top: 30px;
}
h3 {
text-align: center;
font-family: "Open Sans", sans-serif;
font-weight: bold;
}
</style>
<template>
<div>
<MenuBar/>
<b-row align-h="center">
<b-col cols="4">
<h3>Is it time to eat, or is there no more time to eat</h3>
</b-col>
</b-row>
<b-row>
<b-col>
Video iframe
</b-col>
</b-row>
</div>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'VideoPage',
components: {
MenuBar
}
}
</script>

@ -6,7 +6,7 @@ import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css' import 'bootstrap-vue/dist/bootstrap-vue.css'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { faCarBattery, faSeedling, faStroopwafel, faBrain, faStopwatch, faChartLine, faCode, faUserCheck, faSearchDollar } from '@fortawesome/free-solid-svg-icons' import { faCarBattery, faSeedling, faStroopwafel, faBrain, faStopwatch, faChartLine, faCode, faUserCheck, faSearchDollar, faStar, faStarHalfAlt } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { VBPopover } from 'bootstrap-vue/es/directives' import { VBPopover } from 'bootstrap-vue/es/directives'
@ -15,12 +15,16 @@ import VueRouter from 'vue-router'
// Note: Vue automatically prefixes the directive name with 'v-' // Note: Vue automatically prefixes the directive name with 'v-'
Vue.directive('b-popover', VBPopover) Vue.directive('b-popover', VBPopover)
library.add(faCarBattery, faSeedling, faStroopwafel, faBrain, faStopwatch, faChartLine, faCode, faUserCheck, faSearchDollar) library.add(faCarBattery, faSeedling, faStroopwafel, faStar, faStarHalfAlt, faBrain, faStopwatch, faChartLine, faCode, faUserCheck, faSearchDollar)
Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.component('font-awesome-icon', FontAwesomeIcon)
import SplashPage from './components/SplashPage' import SplashPage from './components/SplashPage'
import ReviewPage from './components/ReviewPage' import ReviewPage from './components/ReviewPage'
import AboutPage from './components/AboutPage'
import GlossaryPage from './components/GlossaryPage'
import FullTextPage from './components/FullTextPage'
import VideoPage from './components/VideoPage'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(BootstrapVue) Vue.use(BootstrapVue)
@ -30,7 +34,11 @@ const router = new VueRouter({
mode: 'history', mode: 'history',
routes: [ routes: [
{ path: '/', component: SplashPage }, { path: '/', component: SplashPage },
{ path: '/review', component: ReviewPage } { path: '/review', component: ReviewPage },
{ path: '/about', component: AboutPage },
{ path: '/glossary', component: GlossaryPage },
{ path: '/fulltext', component: FullTextPage },
{ path: '/video', component: VideoPage },
] ]
}) })

Loading…
Cancel
Save