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