cleaned up page and changed background color

master
alicestrt 4 years ago
parent ba0ebc711b
commit 72b6136f91

@ -3,7 +3,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }

@ -4,7 +4,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }

@ -4,7 +4,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }

@ -7,7 +7,7 @@
<b-nav-item to='/'>Home</b-nav-item> <b-nav-item to='/'>Home</b-nav-item>
<b-nav-item to='/about'>About</b-nav-item> <b-nav-item to='/about'>About</b-nav-item>
<b-nav-item to='/editornote'>Editor's note</b-nav-item> <b-nav-item to='/editornote'>Editor's note</b-nav-item>
<b-nav-item to='/firstissue'>#1</b-nav-item> <b-nav-item to='/firstissue'>First issue</b-nav-item>
<b-nav-item to='/opencall'>Open call</b-nav-item> <b-nav-item to='/opencall'>Open call</b-nav-item>
</b-nav> </b-nav>
@ -37,7 +37,7 @@ a:hover {
} }
.navbar { .navbar {
background-color: #ffe6e6; background-color: #ffe4e5;
border-bottom: 2px #ffcccc solid; border-bottom: 2px #ffcccc solid;
} }

@ -3,12 +3,12 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }
body { body {
background-color: #ffe6e6; background-color: #fff5f5;
min-height: 100vh; min-height: 100vh;
} }

@ -7,12 +7,12 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6 !important; background-color: #fff5f5 !important;
} }
body { body {
background-color: #ffe6e6; background-color: #fff5f5;
min-height: 100vh; min-height: 100vh;
} }
@ -68,10 +68,23 @@ body {
font-family: 'Work Sans', sans-serif; font-family: 'Work Sans', sans-serif;
text-align: center; text-align: center;
font-size: 50px; font-size: 50px;
padding-top: 20px; padding-top: 40px;
padding-bottom: 20px; padding-bottom: 20px;
} }
@media (max-width: 1217px) {
#mag_title {
font-size: 30px;
padding-top: 10px;
padding-left: 20px;
}
#mag_subtitle {
font-size: 15px;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
}
@media (max-width: 575px) { @media (max-width: 575px) {
#mag_title { #mag_title {
@ -110,7 +123,9 @@ a {
#main_container { #main_container {
padding-top: 100px; padding-top: 100px;
padding-bottom: 100px; padding-bottom: 120px;
border-bottom: 2px #ffcccc solid;
} }
#print { #print {
@ -185,163 +200,27 @@ a {
<b-row class="icons"> <b-row class="icons">
<b-col md="2" offset-md="3"> <b-col md="2" offset-md="3">
<a href="/eggs"> <b-img class="img-fluid" center alt="Responsive image" src="media/egg_small.png"></b-img></a>
</b-col> </b-col>
<b-col md="2"> <b-col md="2">
<a href="/eggs"><p>Egg Story</p></a> <p>first</p>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="5" order="1" order-sm="0">
<a href="/scooter"><p>acknowledgements</p></a>
</b-col>
<b-col md="2" order="0" order-sm="1">
<a href="/scooter"><b-img class="img-fluid" center alt="Responsive image" src="media/scooter.png"></b-img></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
<a href="/pesto"><b-img class="img-fluid" center alt="Responsive image" src="media/basil.png"></b-img></a>
</b-col> </b-col>
<b-col md="2">
<a href="/pesto"><p>Bulk Pesto</p></a>
</b-col>
</b-row> </b-row>
<b-row class="icons"> <b-row class="icons">
<b-col md="2" offset-md="5" order="1" order-sm="0">
<a href="/bbq"><p>Balcony Marinade</p></a>
</b-col>
<b-col md="2" order="0" order-sm="1">
<a href="/bbq"><b-img class="img-fluid" center alt="Responsive image" src="media/bbq.png"></b-img></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
<a href="/cart"><b-img class="img-fluid" center src="media/cart_small.png"></b-img></a>
</b-col>
<b-col md="2">
<a href="/cart"><p>My Quarantine Kitchen Story</p></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="5" order="1" order-sm="0"> <b-col md="2" offset-md="5" order="1" order-sm="0">
<a href="/breakfast"><p>Breakfasts</p></a> <p>second</p>
</b-col> </b-col>
<b-col md="2" order="0" order-sm="1"> <b-col md="2" order="0" order-sm="1">
<a href="/breakfast"><b-img class="img-fluid" center alt="Responsive image" src="media/avo_small.png"></b-img></a>
</b-col> </b-col>
</b-row> </b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
<a href="/noodles"><b-img class="img-fluid" center alt="Responsive image" src="media/noodles_small.png"></b-img></a>
</b-col>
<b-col md="2">
<a href="/noodles"><p>Luo Shi Fen</p></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="5" order="1" order-sm="0">
<a href="/recipe"><p>Party of 3</p></a>
</b-col>
<b-col md="2" order="0" order-sm="1">
<a href="/recipe"><b-img class="img-fluid" center alt="Responsive image" src="media/recipe_small.png"></b-img></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
<a href="/onion"><b-img class="img-fluid" center alt="Responsive image" src="media/onion.png"></b-img></a>
</b-col>
<b-col md="2">
<a href="/onion"><p>Something Light, Like a Salad</p></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="5" order="1" order-sm="0">
<a href="/leekpilaf"><p>Leek Pilaf</p></a>
</b-col>
<b-col md="2" order="0" order-sm="1">
<a href="/leekpilaf"><b-img class="img-fluid" center alt="Responsive image" src="media/leek.png"></b-img></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
<a href="/ricecooker"><b-img class="img-fluid" center alt="Responsive image" src="media/rice.png"></b-img></a>
</b-col>
<b-col md="2">
<a href="/ricecooker"><p>When the Oven is Broken</p></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="5" order="1" order-sm="0">
<a href="/cake"><p>The Bite that Keeps on Chewing</p></a>
</b-col>
<b-col md="2" order="0" order-sm="1">
<a href="/cake"><b-img class="img-fluid" center alt="Responsive image" src="media/cake_small.png"></b-img></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
<a href="/pretzel"><b-img class="img-fluid" center alt="Responsive image" src="media/pretzel_small.png"></b-img></a>
</b-col>
<b-col md="2">
<a href="/pretzel"><p>A List</p></a>
</b-col>
</b-row>
</b-container> </b-container>

@ -7,12 +7,12 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6 !important; background-color: #fff5f5 !important;
} }
body { body {
background-color: #ffe6e6; background-color: #fff5f5;
min-height: 100vh; min-height: 100vh;
} }
@ -72,6 +72,19 @@ body {
padding-bottom: 20px; padding-bottom: 20px;
} }
@media (max-width: 1217px) {
#mag_title {
font-size: 30px;
padding-top: 10px;
padding-left: 20px;
}
#mag_subtitle {
font-size: 15px;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
}
@media (max-width: 575px) { @media (max-width: 575px) {
#mag_title { #mag_title {

@ -5,7 +5,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }

@ -5,7 +5,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }

@ -5,7 +5,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }

@ -4,7 +4,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }

@ -4,7 +4,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }

@ -2,7 +2,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }

@ -4,7 +4,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }

@ -4,7 +4,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }

@ -4,7 +4,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }

@ -4,7 +4,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }
@ -150,7 +150,7 @@ a {
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="8" offset-md="4"> <b-col md="8" offset-md="4">
<b-img class="img-fluid" src="media/pretzel/masto.PNG"> </b-img> <b-img class="img-fluid" src="media/pretzel/masto.PNG"> </b-img>

@ -4,7 +4,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }

@ -2,7 +2,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }

@ -4,7 +4,7 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #fff5f5;
} }

Loading…
Cancel
Save