dorian/blueweather
dorian/blueweather
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

updated style, navbar

Browse source
This commit is contained in:
oliver 2019-07-11 18:59:27 +02:00
parent 3c3385a90d
commit 3dd5f9fd0d
2 changed files with 90 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
css/offcanvas.css
View file

@ -70,6 +70,7 @@ body {
.text-white-50 { color: rgba(255, 255, 255, .5); } .text-white-50 { color: rgba(255, 255, 255, .5); }
.bg-purple { background-color: #6f42c1; } .bg-purple { background-color: #6f42c1; }
.bg-blue { background-color: #4854ff; }
.lh-100 { line-height: 1; } .lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; } .lh-125 { line-height: 1.25; }

69
index.html
View file

@ -29,6 +29,7 @@
</style> </style>
<!-- Custom styles for this template --> <!-- Custom styles for this template -->
<link href="css/offcanvas.css" rel="stylesheet"> <link href="css/offcanvas.css" rel="stylesheet">
<link href="css/dashboard.css" rel="stylesheet">
<title>BlueWeather</title> <title>BlueWeather</title>
@ -39,46 +40,76 @@
<body class="bg-light"> <body class="bg-light">
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">BlueWeather</a>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<main role="main" class="container"> <main role="main" class="container">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm"> <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-blue rounded shadow-sm">
<img class="mr-3" src="/docs/4.3/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48"> <img class="mr-3" src="/docs/4.3/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
<div class="lh-100"> <div class="lh-100">
<h6 class="mb-0 text-white lh-100">Bootstrap</h6> <h6 class="mb-0 text-white lh-100">BlueWeather</h6>
<small>Since 2011</small> <small>Since 2018</small>
</div> </div>
</div> </div>
<div class="my-3 p-3 bg-white rounded shadow-sm"> <div class="my-3 p-3 bg-white rounded shadow-sm">
<h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6> <h6 class="border-bottom border-gray pb-2 mb-0">current places</h6>
<div class="media text-muted pt-3"> <div class="media text-muted pt-3">
<svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32"><title>Placeholder</title><rect width="100%" height="100%" fill="#007bff"/><text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text></svg> <svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#007bff" /><text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text>
</svg>
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"> <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<strong class="d-block text-gray-dark">@username</strong> <strong class="d-block text-gray-dark">@place</strong>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus.
</p> </p>
</div> </div>
<div class="media text-muted pt-3"> <div class="media text-muted pt-3">
<svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32"><title>Placeholder</title><rect width="100%" height="100%" fill="#e83e8c"/><text x="50%" y="50%" fill="#e83e8c" dy=".3em">32x32</text></svg> <svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#e83e8c" /><text x="50%" y="50%" fill="#e83e8c" dy=".3em">32x32</text>
</svg>
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"> <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<strong class="d-block text-gray-dark">@username</strong> <strong class="d-block text-gray-dark">@place</strong>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus.
</p> </p>
</div> </div>
<div class="media text-muted pt-3"> <div class="media text-muted pt-3">
<svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32"><title>Placeholder</title><rect width="100%" height="100%" fill="#6f42c1"/><text x="50%" y="50%" fill="#6f42c1" dy=".3em">32x32</text></svg> <svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#6f42c1" /><text x="50%" y="50%" fill="#6f42c1" dy=".3em">32x32</text>
</svg>
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"> <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<strong class="d-block text-gray-dark">@username</strong> <strong class="d-block text-gray-dark">@place</strong>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus.
</p> </p>
</div> </div>
<small class="d-block text-right mt-3">
<a href="#">All updates</a>
</small>
</div> </div>
</main> </main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
<script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script> integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
<script src="offcanvas.js"></script></body> crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/docs/4.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"
crossorigin="anonymous"></script>
<script src="offcanvas.js"></script>
</body>
</body> </body>