Skip to content

Commit c7a468d

Browse files
flynnduismflynnduism
committed
make openmodel.io mobile friendly
1 parent 806f21b commit c7a468d

12 files changed

Lines changed: 413 additions & 130 deletions

‎public/css/style.min.876cebd986808911add84de52db96c980c7ec871b1a03e03f9582844b8d329be.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/css/style.min.f4597a051236c541997c71586e829924368b287d4bb1ef0f2e3c862a0a336938.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/index.html‎

Lines changed: 66 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030

3131
<link rel="icon" type="image/png" href="https://openappmodel.io/images/favicon.png" />
3232
<link href="https://fonts.googleapis.com/css?family=Work&#43;Sans:400,600" rel="stylesheet">
33-
<link rel="stylesheet" type="text/css" href="/css/style.min.b5b444eb980a0baa8bc5deab4bda202059b89f7de0296341816838a6f78f6676.css" integrity="sha256-tbRE65gKC6qLxd6rS9ogIFm4n33gKWNBgWg4pvePZnY=">
33+
<link rel="stylesheet" type="text/css" href="/css/style.min.f4597a051236c541997c71586e829924368b287d4bb1ef0f2e3c862a0a336938.css" integrity="sha256-9Fl6BRI2xUGZfHFYboKZJDaLKH1Lse8PLjyGKgozaTg=">
3434
<link rel="stylesheet" type="text/css" href="https://openappmodel.io/css/icons.css">
3535

3636
</head>
@@ -83,32 +83,32 @@
8383
<section class="hero is-default" id="home">
8484
<div class="content-wrapper">
8585

86-
<div class="columns is-mobile hero01">
87-
<div class="column">
86+
<div class="columns is-vcentered is-mobile hero01">
87+
<div class="column is-one-third-mobile">
8888
<img src="images/app-pic-01.svg" revealOnScroll alt="Application Devs" data-animation="fadeInBottom" />
8989
</div>
9090

91-
<div class="column">
91+
<div class="column is-two-thirds-mobile">
9292
<h1 class="title">A team-centric <strong>standard</strong> for building cloud native apps.</h1>
9393
<p>Open Application Model [OAM] describes a model where <strong>developers</strong> are responsible for defining application components.</p>
9494
</div>
9595
</div>
9696

97-
<div class="columns is-mobile hero02">
97+
<div class="columns is-mobile is-one-third-mobile hero02">
9898
<div class="column">
9999
<img src="images/app-pic-02.svg" revealOnScroll class="has-text-right" alt="Application Ops" data-animation="fadeInBottom" />
100100
</div>
101-
<div class="column">
101+
<div class="column is-two-thirds-mobile">
102102

103103
<p>While <strong>application operators</strong> are responsible for creating instances of those components and assigning them application configurations.</p>
104104
</div>
105105
</div>
106106

107-
<div class="columns is-mobile hero03">
107+
<div class="columns is-mobile is-one-third-mobile hero03">
108108
<div class="column">
109109
<img src="images/app-pic-03.svg" revealOnScroll alt="Infrastructure Operators" data-animation="fadeInBottom" />
110110
</div>
111-
<div class="column">
111+
<div class="column is-two-thirds-mobile">
112112

113113
<p>And <strong>infrastructure operators</strong> are responsible for declaring, installing, and maintaining the underlying services that are available on the platform.</p>
114114
</div>
@@ -129,47 +129,45 @@ <h1 class="title">A team-centric <strong>standard</strong> for building cloud na
129129

130130
<section class="section section-feature-grey is-medium" id="overview">
131131
<div class="content-wrapper">
132-
<div class="container">
133132

134-
<div class="subtitle has-text-centered">
135-
<h4>Overview</h4>
136-
</div>
137-
138-
<div class="content-wrapper">
139-
<div class="columns">
140-
<div class="column ">
141-
<div class="box oldway">
142-
<h3>Cloud-native development</h3>
143-
<h2 class="is-2">Microservices Are Complicated.</h2>
144-
<ol>
145-
<li>Developers have to spend more and more time on their app’s infrastructure tooling - images, registries, versioning, etc.</li>
146-
<li>Security, performance, and configuration concerns are becoming more blurred with the app development processes.</li>
147-
<li>Decisions about where you run your microservices can impact on how you configure and develop your app.</li>
148-
</ol>
149-
</div>
150-
</div>
133+
<div class="subtitle has-text-centered">
134+
<h4>Overview</h4>
135+
</div>
151136

152-
<div class="column">
153-
<div class="box newway">
154-
<h3>The OAM Way</h3>
155-
<h2 class="is-2">A <em>New</em> Application Model</h2>
156-
<ol>
157-
<li>Manage your apps like you manage your teams - with roles and scopes for apps, free of infrastructure.</li>
158-
<li>An opinionated workflow that separates the concerns of developers & operators, whilst providing flexibility and clarity.</li>
159-
<li>Runs anywhere - a unified approach that works across cloud platforms and edge devices.</li>
160-
</ol>
161-
</div>
137+
<div class="content-wrapper">
138+
<div class="columns">
139+
<div class="column ">
140+
<div class="box oldway">
141+
<h3>Cloud-native development</h3>
142+
<h2 class="is-2">Microservices Are Complicated.</h2>
143+
<ol>
144+
<li>Developers have to spend more and more time on their app’s infrastructure tooling - images, registries, versioning, etc.</li>
145+
<li>Security, performance, and configuration concerns are becoming more blurred with the app development processes.</li>
146+
<li>Decisions about where you run your microservices can impact on how you configure and develop your app.</li>
147+
</ol>
162148
</div>
163-
164149
</div>
165150

166-
<div class="column has-text-centered is-three-fifths is-offset-one-fifth">
167-
151+
<div class="column">
152+
<div class="box newway">
153+
<h3>The OAM Way</h3>
154+
<h2 class="is-2">A <em>New</em> Application Model</h2>
155+
<ol>
156+
<li>Manage your apps like you manage your teams - with roles and scopes for apps, free of infrastructure.</li>
157+
<li>An opinionated workflow that separates the concerns of developers & operators, whilst providing flexibility and clarity.</li>
158+
<li>Runs anywhere - a unified approach that works across cloud platforms and edge devices.</li>
159+
</ol>
160+
</div>
168161
</div>
169162

170-
<p class="rudr-cta">OAM is <em>platform-agnostic</em>. Read the <a href="https://github.com/oam-dev/spec/blob/master/introduction.md">Intro</a> doc for more background and user stories.</p>
163+
</div>
171164

165+
<div class="column has-text-centered is-three-fifths is-offset-one-fifth">
166+
172167
</div>
168+
169+
<p class="rudr-cta">OAM is <em>platform-agnostic</em>. Read the <a href="https://github.com/oam-dev/spec/blob/master/introduction.md">Intro</a> doc for more background and user stories.</p>
170+
173171
</div>
174172
</div>
175173
</section>
@@ -184,7 +182,7 @@ <h4>Examples</h4>
184182

185183
<br><br><br>
186184

187-
<div class="columns">
185+
<div class="columns is-hidden-mobile">
188186
<div class="column is-half">
189187

190188
<div class="box">
@@ -223,7 +221,7 @@ <h4>Create a component:</h4>
223221
</div>
224222
</div>
225223

226-
<div class="column is half">
224+
<div class="column is-half">
227225
<div class="box">
228226
<h2 class="title">Example-2.yml</h2>
229227
<h4>Show a component and a config in one file:</h4>
@@ -271,6 +269,12 @@ <h4>Show a component and a config in one file:</h4>
271269
</div>
272270

273271
</div>
272+
273+
<div class="columns is-hidden-tablet">
274+
<div class="column">
275+
<p class="rudr-cta has-text-centered"><a href="https://github.com/oam-dev/rudr/tree/master/examples">See rudr/examples for OAM configurations.</a></p>
276+
</div>
277+
</div>
274278
</div>
275279
</section>
276280

@@ -282,12 +286,10 @@ <h4>Show a component and a config in one file:</h4>
282286
<h4>Implementation</h4>
283287
</div>
284288

285-
<br><br><br>
286-
287289
<div class="columns">
288-
<div class="column is-quarter has-text-left"><img src="images/rudr.svg" alt="Rudr" /></div>
290+
<div class="column is-quarter is-one-quarter-mobile has-text-left"><img src="images/rudr.svg" alt="Rudr" /></div>
289291

290-
<div class="column is-three-quarters">
292+
<div class="column is-three-quarters is-three-quarters-mobile">
291293
<h1>Rudr: A Kubernetes Implementation of the Open Application Model</h1>
292294
<small><a href="https://github.com/oam-dev/rudr">github.com/oam-dev/rudr</a></small>
293295
</div>
@@ -363,27 +365,25 @@ <h4>Community</h4>
363365

364366

365367
<footer class="footer">
366-
<div class="container">
367-
<div class="columns">
368-
<div class="column is-half">
369-
<div class="footer-logo">
370-
<img src="/images/logos/strapline.svg">
371-
</div>
368+
<div class="columns">
369+
<div class="column is-half">
370+
<div class="footer-logo is-hidden-mobile">
371+
<img src="/images/logos/strapline.svg">
372372
</div>
373-
<div class="column is-half">
374-
<div class="content has-text-right">
375-
<p>
376-
<a class="" href="https://twitter.com/oam_dev">
377-
<span class="icon"><i class="fa fa-twitter"></i></span> Twitter
378-
</a>
379-
<a class="" href="https://gitter.im/oam-dev/">
380-
<span class="icon"><i class="fa fa-users"></i></span> Gitter
381-
</a>
382-
<a class="" href="https://github.com/oam-dev/spec">
383-
<span class="icon"><i class="fa fa-github"></i></span> Github
384-
</a>
385-
</p>
386-
</div>
373+
</div>
374+
<div class="column is-half is-full-mobile">
375+
<div class="content has-text-right has-text-centered-mobile">
376+
<p>
377+
<a class="" href="https://twitter.com/oam_dev">
378+
<span class="icon"><i class="fa fa-twitter"></i></span> Twitter
379+
</a>
380+
<a class="" href="https://gitter.im/oam-dev/">
381+
<span class="icon"><i class="fa fa-users"></i></span> Gitter
382+
</a>
383+
<a class="" href="https://github.com/oam-dev/spec">
384+
<span class="icon"><i class="fa fa-github"></i></span> Github
385+
</a>
386+
</p>
387387
</div>
388388
</div>
389389
</div>

‎resources/_gen/assets/sass/style.sass_5ad6f408b0e3e473c748aac88af0ea18.content‎

Lines changed: 103 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7102,6 +7102,108 @@ body {
71027102
width: 35%; }
71037103

71047104
#community dl dd {
7105-
width: 60%; }
7105+
width: 60%;
7106+
overflow-wrap: break-word;
7107+
word-wrap: break-word;
7108+
-ms-word-break: break-all;
7109+
/* This is the dangerous one in WebKit, as it breaks things wherever */
7110+
word-break: break-all;
7111+
/* Instead use this non-standard one: */
7112+
word-break: break-word;
7113+
/* Adds a hyphen where the word breaks, if supported (No Blink) */
7114+
-ms-hyphens: auto;
7115+
-moz-hyphens: auto;
7116+
-webkit-hyphens: auto;
7117+
hyphens: auto; }
7118+
7119+
@media screen and (max-width: 1079px) {
7120+
body {
7121+
overflow-x: hidden !important; }
7122+
.page-wrapper {
7123+
width: 100%; }
7124+
.sidebar-wrapper {
7125+
min-height: 1vh;
7126+
min-width: 100%;
7127+
width: 100%;
7128+
height: 4rem;
7129+
overflow: hidden;
7130+
position: absolute;
7131+
top: 0;
7132+
right: 0;
7133+
left: 0; }
7134+
.sidebar-wrapper .sidebar-header {
7135+
display: none; }
7136+
.sidebar-wrapper .sidebar {
7137+
position: absolute;
7138+
top: 0;
7139+
right: 0;
7140+
left: 0;
7141+
height: 4rem;
7142+
bottom: auto;
7143+
width: 100%; }
7144+
.sidebar-wrapper .sidebar ul {
7145+
margin: 0;
7146+
padding: 0 1rem 0 5rem; }
7147+
.sidebar-wrapper .sidebar ul li {
7148+
display: inline-block; }
7149+
.sidebar-wrapper .sidebar ul li a {
7150+
padding: 0 1.75vw;
7151+
margin: 0;
7152+
line-height: 4rem;
7153+
min-width: 1rem;
7154+
font-size: 2.2vw; }
7155+
.sidebar-wrapper .sidebar .sidebar-footer svg, .sidebar-wrapper .sidebar .sidebar-footer img {
7156+
position: absolute !important;
7157+
z-index: 620;
7158+
top: -2.55rem;
7159+
bottom: auto;
7160+
left: 3vw; }
7161+
.main-wrapper {
7162+
max-width: 100%; }
7163+
.main-wrapper .hero h1 {
7164+
margin-top: 1rem;
7165+
font-size: 3.5vw;
7166+
margin-left: -3rem; }
7167+
.main-wrapper .hero img {
7168+
margin-left: auto;
7169+
margin-left: auto; }
7170+
.main-wrapper .hero p {
7171+
margin: 0 0 0 -3rem; }
7172+
.main-wrapper .hero .hero01 img {
7173+
margin-top: 3rem;
7174+
max-width: 30vw; }
7175+
.main-wrapper .hero .hero02 img {
7176+
margin: 0.75rem auto 0 auto;
7177+
max-width: 27vw;
7178+
float: none; }
7179+
.main-wrapper .hero .hero03 img {
7180+
margin-top: 2rem;
7181+
max-width: 27vw; }
7182+
.main-wrapper #home {
7183+
max-width: 90vw;
7184+
margin-left: 5vw; }
7185+
#community .level-item {
7186+
width: 45vw;
7187+
display: inline-block; }
7188+
#community img {
7189+
max-height: 12.5rem !important;
7190+
width: 25vw; }
7191+
#rudr {
7192+
position: relative; }
7193+
#rudr img {
7194+
max-height: 8rem;
7195+
position: absolute;
7196+
right: -32vw;
7197+
top: 15.33rem; } }
7198+
7199+
@media screen and (max-width: 768px) {
7200+
.main-wrapper .hero h1, .main-wrapper .hero p {
7201+
margin-left: -25vw; }
7202+
.main-wrapper .hero h1 {
7203+
font-size: 5vw; }
7204+
.main-wrapper .hero img {
7205+
display: none; }
7206+
.main-wrapper .hero p.rudr-cta {
7207+
margin-left: 0; } }
71067208

71077209
/*# sourceMappingURL=style.css.map */

‎resources/_gen/assets/sass/style.sass_cf66e63debe6917c04534d6c7b66f623.content‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎resources/_gen/assets/sass/style.sass_cf66e63debe6917c04534d6c7b66f623.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"Target":"css/style.min.b5b444eb980a0baa8bc5deab4bda202059b89f7de0296341816838a6f78f6676.css","MediaType":"text/css","Data":{"Integrity":"sha256-tbRE65gKC6qLxd6rS9ogIFm4n33gKWNBgWg4pvePZnY="}}
1+
{"Target":"css/style.min.f4597a051236c541997c71586e829924368b287d4bb1ef0f2e3c862a0a336938.css","MediaType":"text/css","Data":{"Integrity":"sha256-9Fl6BRI2xUGZfHFYboKZJDaLKH1Lse8PLjyGKgozaTg="}}

0 commit comments

Comments
 (0)