optimize for mobile part 1

master
alicestrt 5 years ago
parent 7419fa58be
commit 374b7fc79e

@ -23,9 +23,8 @@ p {
<div>
<MenuBar/>
<b-row class="about-text" align-h="center">
<b-col cols="8">
<h3>
About the project</h3>
<b-col cols="10">
<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 question the role of technology in the development of innovative 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's techno-solutionism approach to problem solving in the past 5 years, and have
@ -43,7 +42,7 @@ p {
</b-row>
<b-row align-h="center">
<b-col cols="8">
<b-col cols="10">
<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.
@ -52,7 +51,7 @@ p {
</b-row>
<b-row class="about-text" align-h="center">
<b-col cols="8">
<b-col cols="10">
<h3>About the video</h3>
<p class="about-text">
"Is It Time to Eat, Or Is There No More Time to Eat" is a short desktop film that complements my research on meal replacements. As opposed to a broader look on the topic, the video focuses on the issue of solving problems through the means of techno-solutionism.

@ -18,7 +18,7 @@ p {
<div>
<b-row align-h="center">
<b-col cols="10">
<b-col cols="12">
<div class="card_content">
<p style="text-align: center; font-weight: bold;">We love food, we hate having to cook it</p>
<p>

@ -2,6 +2,7 @@
@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;
}
@ -16,11 +17,6 @@ h3 {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
iframe {
position: absolute;
width: 800px;
height: 900px;
}
</style>
@ -29,19 +25,24 @@ iframe {
<div>
<MenuBar/>
<b-row align-h="center">
<b-col cols="6">
<b-col md="6" sm="12">
<h3>Your Body Will Make Itself Heard</h3>
</b-col>
</b-row>
<b-row align-h="center">
<b-col cols="6">
<b-col cols="10">
<p><a href="https://git.xpub.nl/alicestrt/Thesis" target="_blank">Download</a> the full text of my thesis.</p>
</b-col>
</b-row>
<b-row align-h="center">
<b-col cols="8">
<iframe style="left: 145px; right: 145px;" src="./media/thesis.pdf"></iframe>
</b-col>
<b-col cols="12">
<b-embed
type="iframe"
aspect="4by3"
src="./media/thesis.pdf"
allowfullscreen
></b-embed>
</b-col>
</b-row>
</div>

@ -1,13 +1,17 @@
<template>
<b-row class="mb-5-menu">
<b-col md="8">
<b-button variant="light" to='/'>Home</b-button>
<b-button variant="light" to='/about'>About</b-button>
<b-button variant="light" to='/review'>Review</b-button>
<b-button variant="light" to='/fulltext'>Full text</b-button>
<b-button variant="light" to='/video'>Video</b-button>
</b-col>
<b-navbar toggleable="lg">
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to='/'>Home</b-nav-item>
<b-nav-item to='/about'>About</b-nav-item>
<b-nav-item to='/review'>Review</b-nav-item>
<b-nav-item to='/fulltext'>Full text</b-nav-item>
<b-nav-item to='/video'>Video</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</b-row>
</template>

@ -80,7 +80,7 @@ b-card {
<b-container fluid>
<b-row align-h="center" class="mb-2">
<b-col cols="10" md-10 justify-text-center>
<b-col cols="10">
<p id="intro_title">THE REVIEW</p>
<div class="intro_text">
<p>
@ -109,7 +109,7 @@ b-card {
<!-- End of description-->
<b-row align-h="center" class="icon_dropdown">
<b-col cols="2" class="text-center">
<b-col md="2" sm="12" class="text-center">
<b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2">
<span slot="text"> <font-awesome-icon icon="stroopwafel" size="3x" /></span>
<b-dropdown-text style="width: 240px;">
@ -121,7 +121,7 @@ b-card {
</b-dropdown>
</b-col>
<b-col cols="2" class="text-center">
<b-col md="2" sm="12" class="text-center">
<b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2">
<span slot="text"> <font-awesome-icon icon="stopwatch" size="3x" /></span>
<b-dropdown-text style="width: 240px;">
@ -133,7 +133,7 @@ b-card {
</b-dropdown>
</b-col>
<b-col cols="2" class="text-center">
<b-col md="2" sm="12" class="text-center">
<b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2">
<span slot="text"> <font-awesome-icon icon="code" size="3x" /></span>
<b-dropdown-text style="width: 240px;">
@ -147,7 +147,7 @@ b-card {
</b-dropdown>
</b-col>
<b-col cols="2" class="text-center">
<b-col md="2" sm="12" class="text-center">
<b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2">
<span slot="text"> <font-awesome-icon icon="search-dollar" size="3x" /></span>
<b-dropdown-text style="width: 240px;">
@ -158,7 +158,7 @@ b-card {
<b-dropdown-item v-on:click="resetShowValueCard(showValueCard)" href="#" variant="primary" class="read-button">Keep reading</b-dropdown-item>
</b-dropdown>
</b-col>
<b-col cols="2" class="text-center">
<b-col md="2" sm="12" class="text-center">
<b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2">
<span slot="text"> <font-awesome-icon icon="seedling" size="3x" /></span>
<b-dropdown-text style="width: 240px;">
@ -175,7 +175,7 @@ b-card {
</b-row>
<b-container fluid>
<b-row align-h="center">
<b-col cols="8" class="main-cards">
<b-col cols="12" class="main-cards">
<transition name="fade">
<div v-if="showCookingCard">
<CookingCard/>

@ -90,20 +90,14 @@ p {
<template>
<div>
<b-row align-h="center">
<b-col cols="12" id="subtitle">
<p style="text-align: center;">A critical resource for the meal-replacement curious</p>
</b-col>
</b-row>
<!--end header -->
<b-row align-h="center">
<b-col cols="4">
<h2 id='review_title'>A REVIEW</h2>
<MenuBar/>
<b-row align-h="center" style="margin-top: 20px;">
<b-col md="4" sm="10">
<h2 id='review_title'>A critical resource for the meal-replacement curious</h2>
</b-col>
</b-row>
<b-row align-h="center" style="border-bottom: 2px solid #D3D3D3;">
<b-col cols="6" id="introduction">
<b-row align-h="center">
<b-col cols="8" 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
@ -122,24 +116,24 @@ p {
<!--end introduction -->
<div class='signs'>
<b-row align-h="center">
<b-col cols="3" id="why">
<b-col md="3" sm="12" id="why">
Why meal replacements?
</b-col>
</b-row>
<b-row align-h="center">
<b-col cols="2" style="text-align:center;">
<b-col md="2" sm="12" style="text-align:center;">
<font-awesome-icon icon="stroopwafel" size="4x" />
<p id="icon-text" style="text-align:center;">
Replacing cooking
</p>
</b-col>
<b-col cols="3" style="text-align:center;">
<b-col md="2" sm="12" style="text-align:center;">
<font-awesome-icon icon="stopwatch" size="4x" />
<p id="icon-text" style="text-align:center;">
Saving time
</p>
</b-col>
<b-col cols="2" style="text-align:center;">
<b-col md="2" sm="12" style="text-align:center;">
<font-awesome-icon icon="code" size="4x" />
<p id="icon-text" style="text-align:center;">
Providing solutions
@ -151,57 +145,30 @@ p {
<b-row align-h="center" class="signs">
<b-col cols="2" style="text-align:center;">
<b-col md="2" sm="12" style="text-align:center;">
<font-awesome-icon icon="search-dollar" size="4x" />
<p id="icon-text" style="text-align:center;">
Adding value
</p>
</b-col>
<b-col cols="2" style="text-align:center;">
<b-col md="2" sm="12" style="text-align:center;">
<font-awesome-icon icon="seedling" size="4x" />
<p id="icon-text" style="text-align:center;">
Changing the future
</p>
</b-col>
</b-row>
<!-- end second row of icons-->
<b-row align-h="center" style="border-top: 2px solid #D3D3D3 margin-top: 10px; ">
<b-col cols="2" id="review_end">
<p style="text-align: right;">
Alice says:
<font-awesome-icon icon="star" />
<font-awesome-icon icon="star-half-alt" />
</p>
<p style="font-size: 12px; text-align: right;">
Verified user
<font-awesome-icon icon="user-check" style="color: green" />
</p>
</b-col>
<b-col cols="8">
<p id='review-title' style="font-weight: bold;">
I have so many thoughts!
</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 cols="1" id="read_full">
<b-button variant="light" to='/review'>
Read full review
</b-button>
</b-col>
</b-row>
</div>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'SplashPage',
components: {
MenuBar
}
}
</script>

@ -60,7 +60,7 @@ export default {
data: function() {
return {
post_mom_economy: '<img width="300" height="200" src="/media/topics/post-mom_economy/images/post_mom.png"></img>',
post_mom_economy: '<img class="img-fluid" src="/media/topics/post-mom_economy/images/post_mom.png"></img>',
lot_2046: '<a href="https://www.lot2046.com/" target="_blank">LOT is a subscription-based service which distributes a basic set of clothing, footwear, essential self-care products, accessories, and media content.</a>',
washio: '<a href="http://www.thewashio.com/" target="_blank">"We know that your busy schedule will not allow you to do laundry at home, so let us takecare of your laundry - you can take care of what matter most to you"</a>',
delivery: '<iframe width="250" height="200" src="https://www.youtube.com/embed/2I0fxeeI1sg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',

@ -27,13 +27,18 @@ h3 {
<div>
<MenuBar/>
<b-row align-h="center">
<b-col cols="4">
<b-col cols="10">
<h3>Is it time to eat, or is there no more time to eat?</h3>
</b-col>
</b-row>
<b-row align-h="center">
<b-col cols="6" text-center>
<iframe width="860" height="515" src="https://www.youtube.com/embed/S-maUIUAC3I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<b-col cols="10">
<b-embed
type="iframe"
aspect="16by9"
src="https://www.youtube.com/embed/S-maUIUAC3I"
allowfullscreen
></b-embed>
</b-col>
</b-row>
</div>

Loading…
Cancel
Save