update web content (portrait support, metas)

master
Smallp Tsai 5 years ago
parent b9d90ebe9e
commit be367b7029

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

@ -4,8 +4,8 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<title>Hexapod</title>
<meta name="description" content="Hexapod is an Robotic project for Personal/Hobby Maker, using Raspberry Pi (RPi) or Linkit 7697 as its controller, also iOS/Android remote controllable">
<title>Hexapod: Main page</title>
<link rel="shortcut icon" type="image/png" href="images/icon-b.png" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
@ -18,12 +18,26 @@
user-select: none;
}
.bd-placeholder-img img {
display: block;
margin-left:auto;
margin-right:auto;
}
.jumbotron {
padding-top: 3rem;
padding-bottom: 3rem;
margin-bottom: 0;
min-height: 300px;
}
@media (orientation: portrait) {
.jumbotron {
padding-top: 1rem;
padding-bottom: 1rem;
margin-bottom: 0;
min-height: 200px;
}
}
.text-outlined {
color: black;
@ -46,6 +60,16 @@
font-size: 1.2rem;
max-width: 30rem;
}
@media (orientation: portrait) {
.jumbotron-heading {
font-size: 2rem;
font-weight: 700;
}
.jumbotron-text {
font-size: 1rem;
max-width: 30rem;
}
}
footer {
padding-top: 3rem;
@ -142,6 +166,21 @@
</div>
</div>
<div class="col-md-6">
<div class="card mb-4 shadow-sm">
<div class="bd-placeholder-img card-img-top bg-dark" width="100%" height="300">
<img src="images/3dparts-s.jpg"/>
</div>
<div class="card-body">
<p class="card-text">3D parts<br>Parts in <font color=blue>Blue</font> rectangle are for "Body"<br/>Parts in <font color=red>Red</font> rectangle are for "one Leg"</p>
<div class="d-flex justify-content-between align-items-center">
<a href="images/3dparts-b.jpg" class="btn btn-sm btn-outline-secondary">Detail Image</a>
<small class="text-muted">2019/3/23</small>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4 shadow-sm">
<iframe class="bd-placeholder-img card-img-top" width="100%" height="300" src="https://www.youtube.com/embed/EhIvYd5yoXo" frameborder="0" allow="autoplay; encrypted-media"></iframe>

Loading…
Cancel
Save