Introduce a decent enough base template
Lacks features in the {side,nav}bar
Design to be perfected
This commit is contained in:
Théophile Bastian
parent
4426a52505
commit
13beb922ea
7 changed files with 169 additions and 28 deletions
109
mainsite/static/css/site-base.css
Normal file
109
mainsite/static/css/site-base.css
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
html, body, .full-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Move down content because we have a fixed navbar that is 125px tall */
|
||||
body {
|
||||
padding-top: 125px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Global add-ons
|
||||
*/
|
||||
|
||||
.sub-header {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Top navigation
|
||||
* Hide default border to remove 1px line.
|
||||
*/
|
||||
.navbar-fixed-top {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #eba367;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
height: 125px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.navbar >li >a {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
padding: 10px;
|
||||
margin: 25px 15px 25px 0;
|
||||
}
|
||||
|
||||
/* Hide for mobile, show later */
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 125px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: block;
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
background-color: #eba367;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar navigation */
|
||||
.nav-sidebar {
|
||||
font-size: 1.2em;
|
||||
margin-right: -20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.nav-sidebar > li > a {
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
color: #9c0635;
|
||||
}
|
||||
.nav-sidebar > .active > a,
|
||||
.nav-sidebar > .active > a:hover,
|
||||
.nav-sidebar > .active > a:focus {
|
||||
color: #FDF6E3;
|
||||
/*background-color: #AD2624; */
|
||||
}
|
||||
|
||||
.nav > li > a:hover {
|
||||
color: #eba367;
|
||||
background-color: #AD2624;
|
||||
}
|
||||
/*
|
||||
* Main content
|
||||
*/
|
||||
|
||||
.main-row {
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.main {
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
.main .page-header {
|
||||
margin-top: 0;
|
||||
}
|
||||
BIN
mainsite/static/img/logo.png
Normal file
BIN
mainsite/static/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
mainsite/static/img/logo_orig.png
Normal file
BIN
mainsite/static/img/logo_orig.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
|
|
@ -6,24 +6,33 @@
|
|||
<meta name="keywords" lang="fr" content="COF,BOcal,ENS,AEENS">
|
||||
<title>Le BOcal</title>
|
||||
|
||||
<!-- BOOTSTRAP: to update, visit
|
||||
https://getbootstrap.com/docs/4.0/getting-started/introduction/
|
||||
-->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
|
||||
<link rel="stylesheet"
|
||||
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
|
||||
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
|
||||
crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="/static/css/site-base.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% include "header.html" %}
|
||||
{% include "navbar.html" %}
|
||||
<div class="container-fluid full-height">
|
||||
<div class="row main-row full-height">
|
||||
{% include "sidebar.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
|
||||
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- END MAIN DIV -->
|
||||
|
||||
<!-- BOOTSTRAP: to update, visit
|
||||
https://getbootstrap.com/docs/4.0/getting-started/introduction/
|
||||
-->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
<!-- Based on
|
||||
https://bootsnipp.com/snippets/featured/responsive-navigation-menu
|
||||
Thanks! :) -->
|
||||
|
||||
<div class="nav-side-menu">
|
||||
<div class="brand">Brand Logo</div>
|
||||
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
|
||||
|
||||
<div class="menu-list">
|
||||
<ul id="menu-content" class="menu-content collapse out">
|
||||
<li><a href="#">
|
||||
<i class="fa fa-home" aria-hidden="true"></i> Accueil
|
||||
</a></li>
|
||||
|
||||
<li><a href="#">
|
||||
<i class="fa fa-pencil" aria-hidden="true"></i> Écrire un article
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
28
mainsite/templates/navbar.html
Normal file
28
mainsite/templates/navbar.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar" aria-expanded="false" aria-controls="sidebar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="/static/img/logo.png" alt="Le BOcal" />
|
||||
</a>
|
||||
</div>
|
||||
<!--
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="#">Dashboard</a></li>
|
||||
<li><a href="#">Settings</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Help</a></li>
|
||||
</ul>
|
||||
<form class="navbar-form navbar-right">
|
||||
<input type="text" class="form-control" placeholder="Search...">
|
||||
</form>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</nav>
|
||||
15
mainsite/templates/sidebar.html
Normal file
15
mainsite/templates/sidebar.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<div id="sidebar" class="col-sm-3 col-md-2 sidebar collapse">
|
||||
<ul class="nav nav-sidebar">
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-home" aria-hidden="true"></i> Accueil
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-pencil" aria-hidden="true"></i> Écrire un article
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
Loading…
Reference in a new issue