@ -1,7 +1,10 @@
< style scoped > < style scoped >
* { @ import url ( 'https://fonts.googleapis.com/css?family=Inconsolata&display=swap' ) ;
border : 0 px black solid ;
@ import url ( 'https://fonts.googleapis.com/css?family=Open+Sans&display=swap' ) ;
b - card {
border : 0 px ;
} }
. fade - enter - active , . fade - enter - active ,
@ -17,9 +20,51 @@
opacity : 0 ;
opacity : 0 ;
} }
. intro _review { . intro _text {
text - align : justify ;
text - align : justify ;
font - size : 20 px ;
font - size : 16 px ;
color : # 212322 ;
font - family : 'Inconsolata' , monospace ;
}
. review _block {
border - bottom : 1 px solid # D3D3D3 ;
box - shadow : 0 4 px 8 px - 2 px gray ;
}
. icon _dropdown {
margin - top : 10 px ;
margin - bottom : 10 px ;
}
. card - text {
font - family : 'Inconsolata' , monospace ;
font - size : 14 px ;
}
. card - title {
font - family : 'Open sans' , sans - serif ;
font - size : 16 px ;
font - weight : bold ;
}
. read - button {
text - decoration : none ;
color : # 212322 ;
font - size : 14 px ;
}
. main - cards {
margin - top : 20 px ;
}
# intro _title {
font - weight : bold ;
text - align : center ;
font - size : 25 px ;
color : # 212322 ;
font - family : 'Open Sans' , sans - serif ;
} }
< / style > < / style >
@ -28,92 +73,93 @@
< div > < div >
< b -row class = "mb-5" >
< MenuBar / >
< b -col md = "8" offset -md = " 9 " >
< b -button variant = "light" > About < / b - b u t t o n >
< b -button variant = "light" > Glossary < / b - b u t t o n >
< b -button variant = "light" > Full text < / b - b u t t o n >
< b -button variant = "light" > Full video < / b - b u t t o n >
< / b - c o l >
< / b - r o w >
<!-- 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 - c o l >
< p >
< / b - r o w >
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 - c o l >
< / b - r o w >
< / 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 dropup variant = "light " @click ="onClick" no -caret class = "m-2" >
< 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 -dropdown -text style = "width: 240px;" >
< b -card -text >
Meal replacements aim to replace food with food - like substances , removing the need to cook .
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 ?
But what do people have against cooking in the first place ?
< / b - c a r d - t e x t >
< b -dropdown -item -button v -on : click = "showCookingCard = !showCookingCard" href = "#" variant = "primary" > Keep reading < / b - d r o p d o w n - i t e m - b u t t o n >
< / b - d r o p d o w n - t e x t >
< / b - c a r d >
< b -dropdown -divider > < / b - d r o p d o w n - d i v i d e r >
< b -dropdown -item v -on :click ="resetShowCookingCard(showCookingCard)" href = "#" variant = "primary" class = "read-button" > Keep reading < / b - d r o p d o w n - i t e m >
< / b - d r o p d o w n >
< / b - d r o p d o w n >
< / b - c o l >
< / b - c o l >
< b -col cols = "2" class = "text-center" >
< b -col cols = "2" class = "text-center" >
< b -dropdown id = "dropdown-2" = "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 . s ometimes, 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 . S ometimes, that can mean eating your meals in liquid form .
< / b - c a r d - t e x t >
< / b - c a r d - t e x t >
< b -dropdown -item -button v -on : click = "showTimeCard = !showTimeCard href = "#" variant = "primary "> Keep reading < / b - d r o p d o w n - i t e m - b u t t o n >
< b -dropdown -item -button v -on :click ="resetShowTimeCard(showTimeCard) href = "#" variant = "primary " class = "read-button "> Keep reading < / b - d r o p d o w n - i t e m - b u t t o n >
< / b - c a r d >
< / b - c a r d >
< / b - d r o p d o w n >
< / b - d r o p d o w n >
< / b - c o l >
< / b - c o l >
< b -col cols = "2" class = "text-center" >
< b -col cols = "2" class = "text-center" >
< b -dropdown id = "dropdown-3" = "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 - c a r d - t e x t >
< / b - c a r d - t e x t >
< b -dropdown -item -button v -on : click = "showSolutionsCard = !showSolutionsCard href = "#" variant = "primary "> Keep reading < / b - d r o p d o w n - i t e m - b u t t o n >
< b -dropdown -item -button v -on :click ="resetShowSolutionsCard(showSolutionsCard) href = "#" variant = "primary " class = "read-button "> Keep reading < / b - d r o p d o w n - i t e m - b u t t o n >
< / b - c a r d >
< / b - c a r d >
< / b - d r o p d o w n >
< / b - d r o p d o w n >
< / b - c o l >
< / b - c o l >
< b -col cols = "2" class = "text-center" >
< b -col cols = "2" class = "text-center" >
< b -dropdown id = "dropdown-4" = "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 - c a r d - t e x t >
< / b - c a r d - t e x t >
< b -dropdown -item -button v -on : click = "showValueCard = !showValueCard href = "#" variant = "primary "> Keep reading < / b - d r o p d o w n - i t e m - b u t t o n >
< b -dropdown -item -button v -on :click ="resetShowValueCard(showValueCard) href = "#" variant = "primary " class = "read-button "> Keep reading < / b - d r o p d o w n - i t e m - b u t t o n >
< / b - c a r d >
< / b - c a r d >
< / b - d r o p d o w n >
< / b - d r o p d o w n >
< / b - c o l >
< / b - c o l >
< b -col cols = "2" class = "text-center" >
< b -col cols = "2" class = "text-center" >
< b -dropdown id = "dropdown-5" = "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 - c a r d - t e x t >
< / b - c a r d - t e x t >
< b -dropdown -item -button v -on : click = "showFutureCard = !showFutureCard href = "#" variant = "primary "> Keep reading < / b - d r o p d o w n - i t e m - b u t t o n >
< b -dropdown -item -button v -on :click ="resetShowFutureCard(showFutureCard) href = "#" variant = "primary " class = "read-button "> Keep reading < / b - d r o p d o w n - i t e m - b u t t o n >
< / b - c a r d >
< / b - c a r d >
< / b - d r o p d o w n >
< / b - d r o p d o w n >
@ -122,7 +168,7 @@
< / b - r o w >
< / b - r o w >
< 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 +200,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 +218,45 @@ export default {
} ,
} ,
methods : {
methods : {
onClick ( ) {
onClick ( ) {
/ / C l o s e t h e m e n u a n d ( b y p a s s i n g t r u e ) r e t u r n f o c u s t o t h e t o g g l e b u t t o n
this . $refs . dropdown . hide ( false )
this . $refs . dropdown . hide ( false )
} ,
}
/ / b e c a u s e w e d o n ' t k n o w h o w t o p r o g r a m J S
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
} ,
}
}
} }
alicestrt