Skip to content

Commit

Permalink
Merge pull request #327 from deislabs/mobile-layout
Browse files Browse the repository at this point in the history 
[300] edit mobile styles for porter.sh
  • Loading branch information
@carolynvs-msft
carolynvs-msft authored May 8, 2019
2 parents 7959ba1 + cb46485 commit 5c5c5d0
Show file tree
Hide file tree
Showing 6 changed files with 150 additions and 131 deletions.
2 changes: 1 addition & 1 deletion docs/resources/_gen/assets/scss/sass/styles.scss_b95b077eb505d5c0aff8055eaced30ad.content
View file

Large diffs are not rendered by default.

56 changes: 32 additions & 24 deletions docs/resources/_gen/assets/scss/sass/styles.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6117,19 +6117,29 @@ body {
min-width: 100%; }
.home .fa {
display: none; }
.home #helm .billboard {
padding-top: 180px; }
.home #helm .billboard .container {
margin-left: 5%;
margin-right: 5%; }
.home #helm .billboard h1 {
font-size: 2rem; }
.home #helm .billboard .helm-logo {
max-width: 6rem !important;
left: 50% !important;
margin-left: -3rem !important; }
nav.home-nav h1 {
position: absolute;
left: 50%;
top: 0.5rem;
margin-left: -22.5%;
max-width: 250px;
text-align: center; }
nav.home-nav h1 img {
max-width: 45%;
min-height: auto !important;
margin: 0 auto; }
nav.home-nav ul {
position: absolute;
top: 7.5rem;
left: 0%;
width: 100%;
right: 0%;
text-align: center; }
.home #helm .billboard h1 {
margin-top: 1em;
font-size: 1.5em; }
.main .content-wrap h1 {
font-size: 32px; }
font-size: 17.92px; }
.main .content-wrap article {
padding: 0 0 0.5em; }
.main .content-wrap article h1 {
Expand Down Expand Up @@ -6223,16 +6233,16 @@ body {
background-color: white;
border-top: 2px solid rgba(0, 0, 0, 0.05);
position: relative;
min-height: 3rem;
padding-top: 3rem; }
min-height: 3rem; }
#footer .deislabs {
width: 5.5rem;
height: 7.3rem;
display: inline-block;
position: absolute;
top: -4rem; }
top: 1rem;
margin-bottom: 1.25rem; }
#footer .deislabs span {
background: url("/src/img/deislabs.svg") no-repeat center bottom;
background: url(../src/img/deislabs.svg) no-repeat center bottom;
width: 100%;
height: 3rem;
background-size: contain;
Expand All @@ -6251,17 +6261,17 @@ body {
content: " ";
transition: all 0.3s ease-in-out; }
#footer .deislabs em.dl-tr {
background: url("/src/img/deislabs-tr.svg") no-repeat 50% 50%;
background: url(../src/img/deislabs-tr.svg) no-repeat 50% 50%;
background-size: contain;
left: 0;
top: 0; }
#footer .deislabs em.dl-sq {
background: url("/src/img/deislabs-sq.svg") no-repeat 50% 50%;
background: url(../src/img/deislabs-sq.svg) no-repeat 50% 50%;
background-size: contain;
right: 0;
bottom: 1.8rem; }
#footer .deislabs em.dl-ci {
background: url("/src/img/deislabs-ci.svg") no-repeat 50% 50%;
background: url(../src/img/deislabs-ci.svg) no-repeat 50% 50%;
background-size: contain;
left: 0;
bottom: 1.8rem; }
Expand All @@ -6277,12 +6287,10 @@ body {
#footer .deislabs a:hover em.dl-ci {
bottom: 4.2rem; }
#footer p {
margin: 1.2rem 0;
padding: 0 0 0 6rem;
font-weight: 400;
font-size: 18pt; }
margin: 2rem 0;
padding: 0 0 0 6rem; }
#footer .fa {
font-size: 24px;
font-size: 1em;
color: #333; }

html {
Expand Down
9 changes: 5 additions & 4 deletions docs/themes/porter/layouts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,18 +90,18 @@ <h2>Porter Features</h2>
</div>

<div class="row">
<div class="small-6 medium-6 large-4 columns">
<div class="small-12 medium-6 large-4 columns">
<span style="font-size: 5em">👜 🧳 </span>
<h3>Your app and its baggage:<br/>installed</h3>
<p>Bundle up not just your application, but everything it needs to run in the cloud.
</p>
</div>
<div class="small-6 medium-6 large-4 columns">
<div class="small-12 medium-6 large-4 columns">
<span style="font-size: 5em">👩🏾‍🔬 🧬 </span>
<h3>Smart bundles:<br/>out-of-the-box</h3>
<p>Use mixins for common tools and clouds, and depend on existing bundles.</p>
</div>
<div class="small-6 medium-6 large-4 columns">
<div class="small-12 medium-6 large-4 columns">
<span style="font-size: 5em">🚂 📦 </span>
<h3>Bundle management:<br/>simplified</h3>
<p>Package and version your bundle, and then distribute it to others just like Docker images.</p>
Expand Down Expand Up @@ -151,8 +151,9 @@ <h2>Example Bundles</h2>
</a>
</div>
<p class="show-for-large-up">: Open Source from Microsoft Azure</p>
<p class="show-for-large-up">Confused about what Porter is? <a href="https://github.com/deislabs/porter/issues/302">Let us know</a> and help us improve this site!</p>
<p>&nbsp;</p>
</div>
<div class="small-9 large-4 columns">Confused about what Porter is? <a href="https://github.com/deislabs/porter/issues/302">Let us know</a> and help us improve this site!</div>
<div class="small-9 large-12 columns">&nbsp;</div>
</footer>

Expand Down
165 changes: 82 additions & 83 deletions docs/themes/porter/static/src/sass/deislabs.scss
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,90 @@
#footer {
background-color: white;
border-top: 2px solid rgba(0,0,0,0.05);
position: relative;
min-height: 3rem;
padding-top: 3rem;
.deislabs {
width: 5.5rem;
height: 7.3rem;
display: inline-block;
position: absolute;
top: -4rem;
#footer {
background-color: white;
border-top: 2px solid rgba(0,0,0,0.05);
position: relative;
min-height: 3rem;

span {
background: url('/src/img/deislabs.svg') no-repeat center bottom;
width: 100%;
height: 3rem;
background-size: contain;
display: inline-block;
text-indent: -999em;
position: absolute;
bottom: 0;
@include transition;
}
.deislabs {
width: 5.5rem;
height: 7.3rem;
display: inline-block;
position: absolute;
top: 1rem;
margin-bottom: 1.25rem;

em {
width: 3rem;
height: 3rem;
display: inline-block;
position: absolute;
background-blend-mode: multiply;
mix-blend-mode: multiply;
content: " ";
@include transition(all, 0.3s, ease-in-out);

&.dl-tr {
background: url('/src/img/deislabs-tr.svg') no-repeat 50% 50%;
background-size: contain;
left: 0;
top: 0;
}
span {
background: url(../src/img/deislabs.svg) no-repeat center bottom;
width: 100%;
height: 3rem;
background-size: contain;
display: inline-block;
text-indent: -999em;
position: absolute;
bottom: 0;
@include transition;
}

&.dl-sq {
background: url('/src/img/deislabs-sq.svg') no-repeat 50% 50%;
background-size: contain;
right: 0;
bottom: 1.8rem;
}
em {
width: 3rem;
height: 3rem;
display: inline-block;
position: absolute;
background-blend-mode: multiply;
mix-blend-mode: multiply;
content: " ";
@include transition(all, 0.3s, ease-in-out);

&.dl-tr {
background: url(../src/img/deislabs-tr.svg) no-repeat 50% 50%;
background-size: contain;
left: 0;
top: 0;
}

&.dl-ci {
background: url('/src/img/deislabs-ci.svg') no-repeat 50% 50%;
background-size: contain;
left: 0;
bottom: 1.8rem;
}
}
&.dl-sq {
background: url(../src/img/deislabs-sq.svg) no-repeat 50% 50%;
background-size: contain;
right: 0;
bottom: 1.8rem;
}

a {
display: inline-block;
width: 5.5rem;
height: 7.3rem;
&.dl-ci {
background: url(../src/img/deislabs-ci.svg) no-repeat 50% 50%;
background-size: contain;
left: 0;
bottom: 1.8rem;
}
}

&:hover {
em {
&.dl-tr {
left: 2.2rem;
top: 2.5rem;
}
&.dl-sq {
right: 2.5rem;
}
&.dl-ci {
bottom: 4.2rem;
}
}
}
}
a {
display: inline-block;
width: 5.5rem;
height: 7.3rem;

&:hover {
em {
&.dl-tr {
left: 2.2rem;
top: 2.5rem;
}
&.dl-sq {
right: 2.5rem;
}
&.dl-ci {
bottom: 4.2rem;
}
}

p {
margin: 1.2rem 0;
padding: 0 0 0 6rem;
font-weight: 400;
font-size: 18pt;
}

.fa {
font-size: $scalex7;
color: #333;
}
}
}
}

p {
margin: 2rem 0;
padding: 0 0 0 6rem;
}

.fa {
font-size: 1em;
color: #333;
}
}
48 changes: 30 additions & 18 deletions docs/themes/porter/static/src/sass/docs-responsive.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,31 +34,43 @@
.fa {
display: none;
}
}

#helm {
.billboard {
padding-top: 180px;

.container {
margin-left: 5%;
margin-right: 5%;
}
nav.home-nav {
h1 {
position: absolute;
left: 50%;
top: 0.5rem;
margin-left: -22.5%;
max-width: 250px;
text-align: center;

img {
max-width: 45%;
min-height: auto !important;
margin: 0 auto;
}
}

h1 {
font-size: 2rem;
}
ul {
position: absolute;
top: 7.5rem;
left: 0%;
width: 100%;
right: 0%;
text-align: center;
}
}

.helm-logo {
max-width: 6rem !important;
left: 50% !important;
margin-left: -3rem !important;
}
}
.home #helm .billboard {
h1 {
margin-top: 1em;
font-size: 1.5em;
}
}

.main .content-wrap h1 {
font-size: $scalex8;
font-size: $scalex5;
}

.main .content-wrap article {
Expand Down
1 change: 0 additions & 1 deletion docs/themes/porter/static/src/sass/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,5 +45,4 @@ $npm : '../../../../../node_modules';

html {
background: white !important;

}

0 comments on commit 5c5c5d0

Please sign in to comment.