feat(): add menu bar and main content with colors from atom editor
This commit is contained in:
kendo5731
commit
06de5347fa
|
|
@ -0,0 +1,5 @@
|
||||||
|
.idea
|
||||||
|
public/**/*.css
|
||||||
|
node_modules
|
||||||
|
public/fonts
|
||||||
|
!public/fonts/.gitkeep
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
var gulp = require('gulp');
|
||||||
|
var gutil = require('gulp-util');
|
||||||
|
var sass = require('gulp-sass');
|
||||||
|
var browserSync = require('browser-sync').create();
|
||||||
|
|
||||||
|
gulp.task('fonts', function() {
|
||||||
|
gulp.src('./node_modules/bootstrap-sass/assets/fonts/bootstrap/*')
|
||||||
|
.pipe(gulp.dest('./public/fonts'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('serve', ['fonts', 'sass'] , function () {
|
||||||
|
browserSync.init({ server: { baseDir: "./public" } });
|
||||||
|
gulp.watch("public/**/*.scss", ['sass']);
|
||||||
|
gulp.watch("public/*.html").on('change', browserSync.reload);
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('sass', function() {
|
||||||
|
return gulp.src("./public/**/*.scss")
|
||||||
|
.pipe(sass().on('error', handleError))
|
||||||
|
.pipe(gulp.dest('./public'))
|
||||||
|
.pipe(browserSync.stream());
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleError(err) {
|
||||||
|
gutil.log(err);
|
||||||
|
this.emit('end');
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
"description": "HTML/CSS Theme for www.aubm.net",
|
||||||
|
"repository": "https://github.com/aubm/aubm-website-theme.git",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"bootstrap-sass": "^3.3.6"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"browser-sync": "^2.11.1",
|
||||||
|
"gulp": "^3.9.0",
|
||||||
|
"gulp-sass": "^2.1.1",
|
||||||
|
"gulp-util": "^3.0.7"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"serve": "gulp serve"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
$bootstrap_path: "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/";
|
||||||
|
|
||||||
|
// Core variables and mixins
|
||||||
|
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
|
||||||
|
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
|
||||||
|
|
||||||
|
// Reset and dependencies
|
||||||
|
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize";
|
||||||
|
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/print";
|
||||||
|
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
|
||||||
|
|
||||||
|
// Core CSS
|
||||||
|
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/type";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/code";
|
||||||
|
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tables";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/forms";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/buttons";
|
||||||
|
|
||||||
|
//// Components
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navs";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navbar";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pagination";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pager";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/labels";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/badges";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/alerts";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/media";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/list-group";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/panels";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/wells";
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/close";
|
||||||
|
|
||||||
|
// Utility classes
|
||||||
|
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities";
|
||||||
|
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
.no-padding-left-and-right {
|
||||||
|
padding-left: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-user-select {
|
||||||
|
-webkit-touch-callout: none; /* iOS Safari */
|
||||||
|
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||||
|
-khtml-user-select: none; /* Konqueror */
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
-ms-user-select: none; /* IE/Edge */
|
||||||
|
user-select: none; /* non-prefixed version, currently
|
||||||
|
not supported by any browser */
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
$bg-color: #001f27;
|
||||||
|
$content-bg-color: #002b36;
|
||||||
|
$menu-hover-bg-color: #003b4a;
|
||||||
|
$text-color: #839496;
|
||||||
|
$link-color: #2aa198;
|
||||||
|
|
||||||
|
$icon-font-path: "../fonts/";
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
|
||||||
|
@import "./variables.scss";
|
||||||
|
@import "./custom-bootstrap.scss";
|
||||||
|
@import "./mixins.scss";
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-family: 'Source Code Pro';
|
||||||
|
background-color: $bg-color;
|
||||||
|
color: $text-color;
|
||||||
|
&>.container-fluid {
|
||||||
|
@extend .no-padding-left-and-right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-container {
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $link-color;
|
||||||
|
&:hover {
|
||||||
|
color: $link-color;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-content {
|
||||||
|
background-color: $content-bg-color;
|
||||||
|
min-height: 100%;
|
||||||
|
padding-top: 1px;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
padding-left: 0px;
|
||||||
|
nav {
|
||||||
|
@media (min-width: $screen-md-min) {
|
||||||
|
@extend .no-padding-left-and-right;
|
||||||
|
position: fixed;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $screen-sm-max) {
|
||||||
|
ul {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@extend .no-user-select;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 4px 0px 4px 15px;
|
||||||
|
margin: 0px;
|
||||||
|
&:before {
|
||||||
|
@extend .glyphicon;
|
||||||
|
@extend .glyphicon-folder-close;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.open {
|
||||||
|
h3:before {
|
||||||
|
@extend .glyphicon-folder-open;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
padding: 4px 30px 4px 40px;
|
||||||
|
margin-right: -15px;
|
||||||
|
&:before {
|
||||||
|
@extend .glyphicon;
|
||||||
|
@extend .glyphicon-file;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $menu-hover-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:hover {
|
||||||
|
color: $text-color;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $screen-sm-max) {
|
||||||
|
h3 {
|
||||||
|
padding: 10px 0px 10px 15px;
|
||||||
|
}
|
||||||
|
ul li {
|
||||||
|
padding: 10px 30px 10px 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<base href="/">
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="author" content="Aurélien Baumann">
|
||||||
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
<meta name="description" page-metadesc>
|
||||||
|
<title page-title>Aubm</title>
|
||||||
|
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700' rel='stylesheet' type='text/css'>
|
||||||
|
<link rel="stylesheet" href="css/theme.css" type="text/css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="page-container container-fluid">
|
||||||
|
<div class="col-md-3 menu">
|
||||||
|
<nav class="col-md-3">
|
||||||
|
<div id="last-posts" class="open">
|
||||||
|
<h3 data-open="last-posts">Aubm.net - Les derniers articles</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Astuce le serveur de developpement embarque de-php</a></li>
|
||||||
|
<li><a href="#">Astuce phpstorm partager ses lives templates</a></li>
|
||||||
|
<li><a href="#">Contrainte dunicite dans symfony 2 avec doctrine</a></li>
|
||||||
|
<li><a href="#">Du neuf sous le capot</a></li>
|
||||||
|
<li><a href="#">Gardez le code explicite court et modulaire</a></li>
|
||||||
|
<li><a href="#">Installation et utilisation de sentry</a></li>
|
||||||
|
<li><a href="#">La pagination avec doctrine la bonne methode</a></li>
|
||||||
|
<li><a href="#">Mes premiers pas avec cakephp 3</a></li>
|
||||||
|
<li><a href="#">Retour dexperience sur joomla point de vue dun developpeur</a></li>
|
||||||
|
<li><a href="#">Utiliser les event subscriber avec fosrestbundle et jmsserializerbundle</a></li>
|
||||||
|
<li><a href="#">Webservice restful avec symfony2 gerer les champs de type datetime</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-9 article-content">
|
||||||
|
<article>
|
||||||
|
<p>Bonjour, ce petit article pour partager une de mes découvertes récentes. Il s’agit du serveur web
|
||||||
|
interne de
|
||||||
|
PHP, intégré depuis la version 5.4. La lecture de cette article ne vous apprendra surement pas grand
|
||||||
|
chose
|
||||||
|
si vous
|
||||||
|
avez déjà connaissance de cette fonctionnalité.</p>
|
||||||
|
|
||||||
|
<p>Pour en savoir plus, rendez vous directement sur la <a
|
||||||
|
href="http://php.net/manual/fr/features.commandline.webserver.php" target="_blank">documentation
|
||||||
|
officielle de
|
||||||
|
PHP</a>. La documentation explique comment utiliser de façon très simple ce service. A noter que celui n’est
|
||||||
|
pas pensé pour être utilisé dans un environnement de production, mais est destiné à servir dans un
|
||||||
|
environnement de
|
||||||
|
développement. Il n’est, par conséquent, plus nécessaire de configurer une nouvelle vhost sur
|
||||||
|
votre
|
||||||
|
serveur
|
||||||
|
http (typiquement apache ou nginx), et d’ajouter une entrée dans le fichier hosts. Démarrez votre
|
||||||
|
application
|
||||||
|
à l’aide d’une simple commande dans votre terminal, et testez directement votre application
|
||||||
|
!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="encore-mieux:b661274995ee589e28a51c629100f44d">Encore mieux</h2>
|
||||||
|
|
||||||
|
<p>De nombreux framework de développement PHP, dont Symfony ou encore Laravel facillitent encore plus l’utilisation
|
||||||
|
de ce service. Pour l’exemple, si vous utilisez Symfony2 pour développer votre application, tapez
|
||||||
|
directement
|
||||||
|
dans votre terminal la commande suivante :</p>
|
||||||
|
|
||||||
|
<pre><code class="language-bash">php app/console server:run
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>La console vous affichera un message comme :</p>
|
||||||
|
|
||||||
|
<pre><code class="language-bash">Server running on http://localhost:8000
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>Ouvrez votre navigateur et rendez vous à l’adresse <code>http:/localhost:8000</code> pour utiliser
|
||||||
|
votre
|
||||||
|
application. Note : la commande lance l’application dans l’environnement de développement,
|
||||||
|
vous
|
||||||
|
n’avez
|
||||||
|
donc pas besoin de faire précéder toutes vos route par <code>app_dev.php</code>.</p>
|
||||||
|
|
||||||
|
<p>Pour finir un petit coup d’oeil sur les informations que nous fournit la commande suivante :</p>
|
||||||
|
|
||||||
|
<pre><code class="language-bash">php app/console server:run --help
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>Enfin, pour en savoir plus, rendez-vous directement sur la <a
|
||||||
|
href="http://symfony.com/doc/current/cookbook/web_server/built_in.html" target="_blank">documentation
|
||||||
|
officelle
|
||||||
|
de Symfony</a>.</p>
|
||||||
|
|
||||||
|
<p>Et voilà, have fun :)</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script src="js/theme.js" type="text/javascript"></script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
(function() {
|
||||||
|
var elements = document.querySelectorAll('[data-open]');
|
||||||
|
for (var i=0; i<elements.length; i++) {
|
||||||
|
initOpen(elements[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function initOpen(element) {
|
||||||
|
var className = 'open';
|
||||||
|
var target = document.getElementById(element.getAttribute('data-open'));
|
||||||
|
var ulChildrenMap = function(fn) {
|
||||||
|
var lists = target.getElementsByTagName('ul');
|
||||||
|
for (var i=0; i<lists.length; i++) {
|
||||||
|
fn(lists[i]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (!target) return;
|
||||||
|
|
||||||
|
// dirty hack for small screen ...
|
||||||
|
var firstChildUl = target.getElementsByTagName('ul')[0];
|
||||||
|
if (firstChildUl && window.getComputedStyle(firstChildUl).display === 'none') {
|
||||||
|
target.classList.remove(className);
|
||||||
|
}
|
||||||
|
|
||||||
|
element.addEventListener('click', function() {
|
||||||
|
var list = target.getElementsByTagName('ul')[0];
|
||||||
|
if (target.classList.contains(className)) {
|
||||||
|
target.classList.remove(className);
|
||||||
|
ulChildrenMap(function(ul) { ul.style.display = 'none'; });
|
||||||
|
} else {
|
||||||
|
target.classList.add(className);
|
||||||
|
ulChildrenMap(function(ul) { ul.style.display = 'block'; });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})();
|
||||||
Loading…
Reference in New Issue