Nils
4 years ago
18 changed files with 693 additions and 2 deletions
@ -0,0 +1,119 @@ |
|||||
|
temp/ |
||||
|
out/ |
||||
|
|
||||
|
# ---> Python |
||||
|
# Byte-compiled / optimized / DLL files |
||||
|
__pycache__/ |
||||
|
*.py[cod] |
||||
|
*$py.class |
||||
|
|
||||
|
# C extensions |
||||
|
*.so |
||||
|
|
||||
|
# Distribution / packaging |
||||
|
.Python |
||||
|
build/ |
||||
|
develop-eggs/ |
||||
|
dist/ |
||||
|
downloads/ |
||||
|
eggs/ |
||||
|
.eggs/ |
||||
|
lib/ |
||||
|
lib64/ |
||||
|
parts/ |
||||
|
sdist/ |
||||
|
var/ |
||||
|
wheels/ |
||||
|
*.egg-info/ |
||||
|
.installed.cfg |
||||
|
*.egg |
||||
|
MANIFEST |
||||
|
|
||||
|
# PyInstaller |
||||
|
# Usually these files are written by a python script from a template |
||||
|
# before PyInstaller builds the exe, so as to inject date/other infos into it. |
||||
|
*.manifest |
||||
|
*.spec |
||||
|
|
||||
|
# Installer logs |
||||
|
pip-log.txt |
||||
|
pip-delete-this-directory.txt |
||||
|
|
||||
|
# Unit test / coverage reports |
||||
|
htmlcov/ |
||||
|
.tox/ |
||||
|
.nox/ |
||||
|
.coverage |
||||
|
.coverage.* |
||||
|
.cache |
||||
|
nosetests.xml |
||||
|
coverage.xml |
||||
|
*.cover |
||||
|
.hypothesis/ |
||||
|
.pytest_cache/ |
||||
|
|
||||
|
# Translations |
||||
|
*.mo |
||||
|
*.pot |
||||
|
|
||||
|
# Django stuff: |
||||
|
*.log |
||||
|
local_settings.py |
||||
|
db.sqlite3 |
||||
|
|
||||
|
# Flask stuff: |
||||
|
instance/ |
||||
|
.webassets-cache |
||||
|
|
||||
|
# Scrapy stuff: |
||||
|
.scrapy |
||||
|
|
||||
|
# Sphinx documentation |
||||
|
docs/_build/ |
||||
|
|
||||
|
# PyBuilder |
||||
|
target/ |
||||
|
|
||||
|
# Jupyter Notebook |
||||
|
.ipynb_checkpoints |
||||
|
|
||||
|
# IPython |
||||
|
profile_default/ |
||||
|
ipython_config.py |
||||
|
|
||||
|
# pyenv |
||||
|
.python-version |
||||
|
|
||||
|
# celery beat schedule file |
||||
|
celerybeat-schedule |
||||
|
|
||||
|
# SageMath parsed files |
||||
|
*.sage.py |
||||
|
|
||||
|
# Environments |
||||
|
.env |
||||
|
.venv |
||||
|
env/ |
||||
|
venv/ |
||||
|
ENV/ |
||||
|
env.bak/ |
||||
|
venv.bak/ |
||||
|
|
||||
|
# Spyder project settings |
||||
|
.spyderproject |
||||
|
.spyproject |
||||
|
|
||||
|
# Rope project settings |
||||
|
.ropeproject |
||||
|
|
||||
|
# mkdocs documentation |
||||
|
/site |
||||
|
|
||||
|
# mypy |
||||
|
.mypy_cache/ |
||||
|
.dmypy.json |
||||
|
dmypy.json |
||||
|
|
||||
|
# Pyre type checker |
||||
|
.pyre/ |
||||
|
|
@ -1,3 +1,27 @@ |
|||||
# laborejo.org |
# Generator for laborejo.org |
||||
|
|
||||
|
An assortment of scripts and programs that pulls in info from our repositories and puts out a website. |
||||
|
Everything is a low-tech as possible while avoiding editing redundant information (e.g. copyright |
||||
|
date on every individual page) |
||||
|
|
||||
|
This is specialized for our own website and *not* a general purpose CMS or static site generator. |
||||
|
|
||||
|
1. `generate.bash` |
||||
|
2. get out/ into your public html |
||||
|
3. ???? |
||||
|
4. profit |
||||
|
|
||||
|
|
||||
|
## Directories |
||||
|
|
||||
|
`static` holds the base structure and all non-generated files such as css and images. These files |
||||
|
do not get parsed, combined or modified but simply cp -r into `out`/. This is done as first step. |
||||
|
If you have conflicting files names later they will overwrite static files. |
||||
|
|
||||
|
`modules` are parts of static html that is the same on every page. |
||||
|
|
||||
|
`directcontent` texts and content exclusively for the website, like a welcome, are also found here. |
||||
|
These are not generated from projects but written directly in these files. Watch out for redundant |
||||
|
information. Dates, version numbers etc. should not be in here. |
||||
|
|
||||
|
|
||||
An assortment of scripts and programs that pulls in info from our repositories and puts out a website. |
|
@ -0,0 +1,24 @@ |
|||||
|
<div id="main"> |
||||
|
<div class="header"> |
||||
|
<h1><img class="pure-img-responsive" src="/images/software-suite.png" alt="Welcome to Laborejo Software Suite!"></h1> |
||||
|
</div> <!-- header --> |
||||
|
|
||||
|
<div class="content"> |
||||
|
<p> |
||||
|
Laborejo Software Suite is a group of programs to make music (and also the name of its main program). |
||||
|
Everything is free in every sense of the word: free of cost, free to share and use, free of |
||||
|
spyware or ads, free-and-open-source. |
||||
|
</p> |
||||
|
<p> |
||||
|
The programs have very different target groups. For example: while Laborejo itself is made for |
||||
|
advanced composers with classical background Patroneo is made specificially for beginners who |
||||
|
only know the very basics about music. |
||||
|
</p> |
||||
|
|
||||
|
<p><h2 class="content-subhead">Help and Support</h2></p> |
||||
|
<p>Every program has a comprehensive user manual in multiple languages.</p> |
||||
|
<p>You can write an e-mail to <a href="mailto:info@laborejo.org">info@laborejo.org</a> for any comment or question.</p> |
||||
|
<p>For bugs and issues a <a href="https://www.laborejo.org/bugs/">service</a> has been set up that works without registration. Thank you for your help to make our software better by reporting bugs.</p> |
||||
|
|
||||
|
</div> <!-- content --> |
||||
|
</div> <!-- main --> |
@ -0,0 +1,89 @@ |
|||||
|
#!/bin/bash |
||||
|
|
||||
|
set -euf -o pipefail #exit on fail, unset variables, file-globs/expansion and piping problems |
||||
|
|
||||
|
function finish { |
||||
|
read -n 1 -s -r -p "Press any key to continue" |
||||
|
} |
||||
|
trap finish EXIT |
||||
|
|
||||
|
ROOTPATH="$( cd "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )" |
||||
|
cd "$ROOTPATH" |
||||
|
echo Running from "$ROOTPATH" |
||||
|
|
||||
|
#Create initial structure and data-set |
||||
|
mkdir temp || true #in .gitignore . Make dir, ignore fail if exists for set -e |
||||
|
mkdir -p "out/images" || true #in .gitignore . Make dir, ignore fail if exists for set -e |
||||
|
rm -rf out/ |
||||
|
cp -r static out |
||||
|
cd temp |
||||
|
|
||||
|
#We loop over all projects several times, each stage of the generation. |
||||
|
#Instead of doing one project fully at a time, creating one giant nested loop. |
||||
|
#Administration first, the processing! |
||||
|
PROJECTS=(laborejo patroneo vico fluajho argodejo) #The order here is the order on the page. Each of these gets its own entry. |
||||
|
|
||||
|
#Gather and update data |
||||
|
for PROJECT in ${PROJECTS[*]} template |
||||
|
do |
||||
|
GIT="https://git.laborejo.org/lss/$PROJECT.git" |
||||
|
echo "$GIT" |
||||
|
|
||||
|
if [ -d "$PROJECT" ]; then |
||||
|
cd "$PROJECT" |
||||
|
git pull |
||||
|
cd .. |
||||
|
else |
||||
|
git clone "$GIT" |
||||
|
fi |
||||
|
done |
||||
|
cd "$ROOTPATH" #reset for next step |
||||
|
|
||||
|
|
||||
|
#Generate Menu. n^2 loop. For each project all projects |
||||
|
for PROJECT in ${PROJECTS[*]} |
||||
|
do |
||||
|
echo "" > "temp/$PROJECT/module_menu" #empty file |
||||
|
|
||||
|
#Index/Home is the same for all sub-pages. index is not included in the list so we do not care about the "this is the current page" highlight here. |
||||
|
echo "<li class='pure-menu-item'><a class='pure-menu-link' href='/'>Home</a></li>" >> "temp/$PROJECT/module_menu" #automatic newline |
||||
|
|
||||
|
for EACH in ${PROJECTS[*]} |
||||
|
do |
||||
|
TITLE=$(echo "$EACH" | sed 's/[^ ]\+/\L\u&/g') |
||||
|
if [ "$PROJECT" = "$EACH" ]; then |
||||
|
#Special line for ourselves |
||||
|
echo "<li class='pure-menu-item menu-item-divided pure-menu-selected'><a class='pure-menu-link' href='/$PROJECT/'>$TITLE</a></li>" >> "temp/$PROJECT/module_menu" #automatic newline |
||||
|
else |
||||
|
echo "<li class='pure-menu-item'><a class='pure-menu-link' href='/$EACH/'>$TITLE</a></li>" >> "temp/$PROJECT/module_menu" #automatic newline |
||||
|
fi |
||||
|
|
||||
|
done |
||||
|
done |
||||
|
|
||||
|
for PROJECT in ${PROJECTS[*]} |
||||
|
do |
||||
|
echo "" > "temp/$PROJECT/module_page" #empty file |
||||
|
|
||||
|
done |
||||
|
cd "$ROOTPATH" #reset for next step |
||||
|
|
||||
|
|
||||
|
#Combine Modules to real html in out/ |
||||
|
for PROJECT in ${PROJECTS[*]} |
||||
|
do |
||||
|
./projectinfo2modulepage.py "$PROJECT" > "temp/$PROJECT/module_page" |
||||
|
cat "modules/10head" "temp/$PROJECT/module_menu" "modules/20aftermenu" "temp/$PROJECT/module_page" "modules/90foot" > "out/$PROJECT.html" |
||||
|
done |
||||
|
|
||||
|
#Create Home/Welcome page |
||||
|
#A bit of redundancy first. Generate a menu. |
||||
|
echo "" > "temp/index_menu" #empty file |
||||
|
echo "<li class='pure-menu-item menu-item-divided pure-menu-selected'><a class='pure-menu-link' href='/'>Home</a></li>" >> "temp/index_menu" #automatic newline |
||||
|
for EACH in ${PROJECTS[*]} |
||||
|
do |
||||
|
TITLE=$(echo "$EACH" | sed 's/[^ ]\+/\L\u&/g') |
||||
|
echo "<li class='pure-menu-item'><a class='pure-menu-link' href='/$EACH/'>$TITLE</a></li>" >> "temp/index_menu" #automatic newline |
||||
|
done |
||||
|
#Home-Content |
||||
|
cat "modules/10head" "temp/index_menu" "modules/20aftermenu" "directcontent/index" "modules/90foot" > "out/index.html" |
@ -0,0 +1,29 @@ |
|||||
|
<!doctype html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<meta name="description" content="LSS is a group of programs to make music."> |
||||
|
|
||||
|
<title>Laborejo Software Suite</title> |
||||
|
|
||||
|
<link rel="stylesheet" href="css/pure-min.css"> |
||||
|
<link rel="stylesheet" href="css/layouts/side-menu.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
|
||||
|
<div id="layout"> |
||||
|
<!-- Menu toggle --> |
||||
|
<a href="#menu" id="menuLink" class="menu-link"> |
||||
|
<!-- Hamburger icon --> |
||||
|
<span></span> |
||||
|
</a> |
||||
|
|
||||
|
<nav> |
||||
|
<div id="menu"> |
||||
|
<div class="pure-menu"> |
||||
|
<p class="pure-menu-heading">MENU</p> |
||||
|
<ul class="pure-menu-list"> |
||||
|
|
||||
|
<!-- list of generated menu entries, with a selection-highlight for each page --> |
||||
|
|
@ -0,0 +1,6 @@ |
|||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nav> |
||||
|
|
||||
|
<!-- Page Start --> |
@ -0,0 +1,9 @@ |
|||||
|
<!-- Page End --> |
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<script src="./js/ui.js "></script> |
||||
|
|
||||
|
</body> |
||||
|
</html> |
@ -0,0 +1,54 @@ |
|||||
|
#! /usr/bin/env python3 |
||||
|
# -*- coding: utf-8 -*- |
||||
|
|
||||
|
""" |
||||
|
This file is called by generate.bash and will put out part of our website. |
||||
|
It pulls the info directly from the projects metada dict. Therefore we need this to be a python |
||||
|
script. |
||||
|
|
||||
|
The projects themselves are oblivious to any html website format and style. We can change the website |
||||
|
at any time as long as the data structures stay the same. |
||||
|
|
||||
|
Output is to stdout, we rely on bash piping in generate.bash to write a file. |
||||
|
|
||||
|
We expect a directory "temp" on our level with each project as lowercase name: |
||||
|
temp/fluajho |
||||
|
temp/patroneo |
||||
|
etc. |
||||
|
|
||||
|
The image file is a static file. At this point in time manually copied into the static/ dir |
||||
|
|
||||
|
""" |
||||
|
|
||||
|
import sys |
||||
|
|
||||
|
project = sys.argv[1] |
||||
|
config = __import__(f"temp.{project}.engine.config", fromlist=["METADATA"]) |
||||
|
META = config.METADATA |
||||
|
|
||||
|
assert META["shortName"] == project, (META["shortName"], project) |
||||
|
|
||||
|
htmlDescription = META["description"].replace("\n\n", "</p>\n\n<p>") |
||||
|
|
||||
|
template = f"""<div id="main"> |
||||
|
<div class="header"> |
||||
|
<h1><img class="pure-img-responsive" src="/images/{META["shortName"]}.png" alt="{META["name"]}"></h1> |
||||
|
</div> <!-- header --> |
||||
|
|
||||
|
<div class="content"> |
||||
|
<p>{htmlDescription}</p> |
||||
|
|
||||
|
<ul> |
||||
|
<li>Current Version: {META["version"]} ({META["year"]})</li> |
||||
|
<li>Multi-Language <a href="/documentation/{META["shortName"]}">Manual</a></li> |
||||
|
<li>Download: <a href="/downloads/{META["shortName"]}-{META["version"]}.tar.gz">Sourcecode</a> or <a href="/downloads">All Downloads</a></li> |
||||
|
<li>Bugs and Issues: <a href="https://www.laborejo.org/bugs">https://www.laborejo.org/bugs</a> |
||||
|
<li>Git and Developers README: <a href="http://git.laborejo.org/lss/{META["shortName"]}.git">https://git.laborejo.org/lss/{META["shortName"]}.git</a></li> |
||||
|
</ul> |
||||
|
|
||||
|
</div> <!-- content --> |
||||
|
</div> <!-- main --> |
||||
|
""" |
||||
|
|
||||
|
print (template) #stdout. our job is done |
||||
|
|
@ -0,0 +1,24 @@ |
|||||
|
RewriteEngine On |
||||
|
RewriteCond %{HTTPS} !=on |
||||
|
RewriteCond %{ENV:HTTPS} !=on |
||||
|
RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L] |
||||
|
|
||||
|
#Remove html extension. |
||||
|
#RewriteRule ^([^\.]+)$ $1.html [NC,L] |
||||
|
|
||||
|
#Remove extension and add trailing slash |
||||
|
RewriteEngine On |
||||
|
RewriteCond %{REQUEST_FILENAME} !-f |
||||
|
RewriteRule ^([^/]+)/$ $1.html |
||||
|
RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.html |
||||
|
RewriteCond %{REQUEST_FILENAME} !-f |
||||
|
RewriteCond %{REQUEST_FILENAME} !-d |
||||
|
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$ |
||||
|
RewriteRule (.*)$ /$1/ [R=301,L] |
||||
|
|
||||
|
|
||||
|
#Old URLs. Don't use them anymore publically. |
||||
|
Redirect /patroneo.git https://git.laborejo.org/lss/patroneo |
||||
|
Redirect /laborejo.git https://git.laborejo.org/lss/laborejo |
||||
|
Redirect /fluajhjo.git https://git.laborejo.org/lss/fluajho |
||||
|
Redirect /vico.git https://git.laborejo.org/lss/vico |
@ -0,0 +1,248 @@ |
|||||
|
body { |
||||
|
color: #777; |
||||
|
} |
||||
|
|
||||
|
.pure-img-responsive { |
||||
|
max-width: 100%; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
Add transition to containers so they can push in and out. |
||||
|
*/ |
||||
|
#layout, |
||||
|
#menu, |
||||
|
.menu-link { |
||||
|
-webkit-transition: all 0.2s ease-out; |
||||
|
-moz-transition: all 0.2s ease-out; |
||||
|
-ms-transition: all 0.2s ease-out; |
||||
|
-o-transition: all 0.2s ease-out; |
||||
|
transition: all 0.2s ease-out; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
This is the parent `<div>` that contains the menu and the content area. |
||||
|
*/ |
||||
|
#layout { |
||||
|
position: relative; |
||||
|
left: 0; |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
#layout.active #menu { |
||||
|
left: 150px; |
||||
|
width: 150px; |
||||
|
} |
||||
|
|
||||
|
#layout.active .menu-link { |
||||
|
left: 150px; |
||||
|
} |
||||
|
/* |
||||
|
The content `<div>` is where all your content goes. |
||||
|
*/ |
||||
|
.content { |
||||
|
margin: 0 auto; |
||||
|
padding: 0 2em; |
||||
|
max-width: 800px; |
||||
|
margin-bottom: 50px; |
||||
|
line-height: 1.6em; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
margin: 0; |
||||
|
color: #333; |
||||
|
text-align: center; |
||||
|
padding: 2.5em 2em 0; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
} |
||||
|
.header h1 { |
||||
|
margin: 0.2em 0; |
||||
|
font-size: 3em; |
||||
|
font-weight: 300; |
||||
|
} |
||||
|
.header h2 { |
||||
|
font-weight: 300; |
||||
|
color: #ccc; |
||||
|
padding: 0; |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
|
||||
|
.content-subhead { |
||||
|
margin: 50px 0 20px 0; |
||||
|
font-weight: 300; |
||||
|
color: #888; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* |
||||
|
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that |
||||
|
appears on the left side of the page. |
||||
|
*/ |
||||
|
|
||||
|
#menu { |
||||
|
margin-left: -150px; /* "#menu" width */ |
||||
|
width: 150px; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
z-index: 1000; /* so the menu or its navicon stays above all content */ |
||||
|
background: #191818; |
||||
|
overflow-y: auto; |
||||
|
-webkit-overflow-scrolling: touch; |
||||
|
} |
||||
|
/* |
||||
|
All anchors inside the menu should be styled like this. |
||||
|
*/ |
||||
|
#menu a { |
||||
|
color: #999; |
||||
|
border: none; |
||||
|
padding: 0.6em 0 0.6em 0.6em; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
Remove all background/borders, since we are applying them to #menu. |
||||
|
*/ |
||||
|
#menu .pure-menu, |
||||
|
#menu .pure-menu ul { |
||||
|
border: none; |
||||
|
background: transparent; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
Add that light border to separate items into groups. |
||||
|
*/ |
||||
|
#menu .pure-menu ul, |
||||
|
#menu .pure-menu .menu-item-divided { |
||||
|
border-top: 1px solid #333; |
||||
|
} |
||||
|
/* |
||||
|
Change color of the anchor links on hover/focus. |
||||
|
*/ |
||||
|
#menu .pure-menu li a:hover, |
||||
|
#menu .pure-menu li a:focus { |
||||
|
background: #333; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
This styles the selected menu item `<li>`. |
||||
|
*/ |
||||
|
#menu .pure-menu-selected, |
||||
|
#menu .pure-menu-heading { |
||||
|
background: #1f8dd6; |
||||
|
} |
||||
|
/* |
||||
|
This styles a link within a selected menu item `<li>`. |
||||
|
*/ |
||||
|
#menu .pure-menu-selected a { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
This styles the menu heading. |
||||
|
*/ |
||||
|
#menu .pure-menu-heading { |
||||
|
font-size: 110%; |
||||
|
color: #fff; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
/* -- Dynamic Button For Responsive Menu -------------------------------------*/ |
||||
|
|
||||
|
/* |
||||
|
The button to open/close the Menu is custom-made and not part of Pure. Here's |
||||
|
how it works: |
||||
|
*/ |
||||
|
|
||||
|
/* |
||||
|
`.menu-link` represents the responsive menu toggle that shows/hides on |
||||
|
small screens. |
||||
|
*/ |
||||
|
.menu-link { |
||||
|
position: fixed; |
||||
|
display: block; /* show this only on small screens */ |
||||
|
top: 0; |
||||
|
left: 0; /* "#menu width" */ |
||||
|
background: #000; |
||||
|
background: rgba(0,0,0,0.7); |
||||
|
font-size: 10px; /* change this value to increase/decrease button size */ |
||||
|
z-index: 10; |
||||
|
width: 2em; |
||||
|
height: auto; |
||||
|
padding: 2.1em 1.6em; |
||||
|
} |
||||
|
|
||||
|
.menu-link:hover, |
||||
|
.menu-link:focus { |
||||
|
background: #000; |
||||
|
} |
||||
|
|
||||
|
.menu-link span { |
||||
|
position: relative; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.menu-link span, |
||||
|
.menu-link span:before, |
||||
|
.menu-link span:after { |
||||
|
background-color: #fff; |
||||
|
width: 100%; |
||||
|
height: 0.2em; |
||||
|
} |
||||
|
|
||||
|
.menu-link span:before, |
||||
|
.menu-link span:after { |
||||
|
position: absolute; |
||||
|
margin-top: -0.6em; |
||||
|
content: " "; |
||||
|
} |
||||
|
|
||||
|
.menu-link span:after { |
||||
|
margin-top: 0.6em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* -- Responsive Styles (Media Queries) ------------------------------------- */ |
||||
|
|
||||
|
/* |
||||
|
Hides the menu at `48em`, but modify this based on your app's needs. |
||||
|
*/ |
||||
|
@media (min-width: 48em) { |
||||
|
|
||||
|
.header, |
||||
|
.content { |
||||
|
padding-left: 2em; |
||||
|
padding-right: 2em; |
||||
|
} |
||||
|
|
||||
|
#layout { |
||||
|
padding-left: 150px; /* left col width "#menu" */ |
||||
|
left: 0; |
||||
|
} |
||||
|
#menu { |
||||
|
left: 150px; |
||||
|
} |
||||
|
|
||||
|
.menu-link { |
||||
|
position: fixed; |
||||
|
left: 150px; |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
#layout.active .menu-link { |
||||
|
left: 150px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 48em) { |
||||
|
/* Only apply this when the window is small. Otherwise, the following |
||||
|
case results in extra padding on the left: |
||||
|
* Make the window small. |
||||
|
* Tap the menu to trigger the active state. |
||||
|
* Make the window large again. |
||||
|
*/ |
||||
|
#layout.active { |
||||
|
position: relative; |
||||
|
left: 150px; |
||||
|
} |
||||
|
} |
File diff suppressed because one or more lines are too long
@ -0,0 +1,8 @@ |
|||||
|
#Logo Images Origin |
||||
|
|
||||
|
The original .svg sources are in a private repository for copyright reasons. |
||||
|
See out/web , there. |
||||
|
|
||||
|
The websites logos and images are created statically and copied here, by hand. |
||||
|
|
||||
|
|
After Width: | Height: | Size: 8.7 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 9.5 KiB |
After Width: | Height: | Size: 7.3 KiB |
@ -0,0 +1,46 @@ |
|||||
|
(function (window, document) { |
||||
|
|
||||
|
var layout = document.getElementById('layout'), |
||||
|
menu = document.getElementById('menu'), |
||||
|
menuLink = document.getElementById('menuLink'), |
||||
|
content = document.getElementById('main'); |
||||
|
|
||||
|
function toggleClass(element, className) { |
||||
|
var classes = element.className.split(/\s+/), |
||||
|
length = classes.length, |
||||
|
i = 0; |
||||
|
|
||||
|
for(; i < length; i++) { |
||||
|
if (classes[i] === className) { |
||||
|
classes.splice(i, 1); |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
// The className is not found
|
||||
|
if (length === classes.length) { |
||||
|
classes.push(className); |
||||
|
} |
||||
|
|
||||
|
element.className = classes.join(' '); |
||||
|
} |
||||
|
|
||||
|
function toggleAll(e) { |
||||
|
var active = 'active'; |
||||
|
|
||||
|
e.preventDefault(); |
||||
|
toggleClass(layout, active); |
||||
|
toggleClass(menu, active); |
||||
|
toggleClass(menuLink, active); |
||||
|
} |
||||
|
|
||||
|
menuLink.onclick = function (e) { |
||||
|
toggleAll(e); |
||||
|
}; |
||||
|
|
||||
|
content.onclick = function(e) { |
||||
|
if (menu.className.indexOf('active') !== -1) { |
||||
|
toggleAll(e); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
}(this, this.document)); |
Loading…
Reference in new issue