Skip to content
Permalink
Browse files

chg: display floating navigation with toggle button on small screens

  • Loading branch information...
p3k committed Mar 18, 2018
1 parent 6b30e1c commit 2274d2081adbb05417b363e07ca1add2b3d568de
Showing with 129 additions and 162 deletions.
  1. +69 −6 code/Site/$Site.skin
  2. +6 −4 code/Site/Site.skin
  3. +54 −152 static/img/ant.svg
@@ -309,7 +309,6 @@
<link rel='stylesheet' type='text/css' href='<% root.href main.css %>'>
<script type='text/javascript' src='<% root.href main.js %>'></script>
</head>
<body class='uk-container-center av-page'>
<body class='uk-container-center av-page'>
<% site.skin $Site#header %>
<div class='uk-grid'>
@@ -431,6 +430,10 @@ html, html.uk-notouch, body {
font-family: @text-font;
}

body {
margin: auto 5%;
}

h1, h2, h3, h4, h5, h6 {
color: @title-color;
font-family: @title-font;
@@ -634,7 +637,7 @@ h4 + .uk-comment-meta li:first-child {
}

.av-page {
width: 900px; // FIXME: Could we use the `vw` unit already?
overflow: auto;
}

.av-sprite {
@@ -647,8 +650,9 @@ h4 + .uk-comment-meta li:first-child {
margin: 0 0 -2px -2px;
width: 15px;
height: 15px;
background: url(/static/img/ant.svg);
background-image: url(/static/img/ant.svg);
background-size: 15px 15px;
background-repeat: no-repeat;
}

.av-border-left {
@@ -776,18 +780,20 @@ h4 + .uk-comment-meta li:first-child {
}

.av-header-bg-dots {
margin-left: 222px;
position: relative;
top: -46px;
width: 900px - 274px + 54px;
//width: 100%;
margin-left: 222px;
height: 38px;
background: url('<% image /dot.gif url %>');
}

.av-title {
position: absolute;
top: 13px;
overflow: visible;
width: 100%;
height: 100%;
overflow-x: hidden;
white-space: nowrap;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 25px;
@@ -803,6 +809,62 @@ h4 + .uk-comment-meta li:first-child {
}
}

.av-floating-navigation {
& .av-toggle, & .av-ant {
display: none;
}
}

@media (max-width: 767px) {
.av-floating-navigation {
@top: 14px;
@right: 5%;
@size: 30px;

.av-ant {
padding: 2px;
border-radius: 100%;
background-color: fadeout(@background, 20%);
background-size: @size @size;
background-position: 2px 2px;
}

.av-toggle, .av-ant {
display: initial;
position: absolute;
top: @top;
right: @right;
width: @size;
height: @size;
margin-right: 2px;
}

.av-toggle {
z-index: 10;
opacity: 0;

&:checked {
& ~ .av-border-left {
display: initial;
}
}
}

.av-border-left {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 9;
padding: 10pt 10pt 10pt 0;
background-color: fadeout(@background, 10%);
box-shadow: -5px 0 5px 0 @border-color;
overflow: auto;
}
}
}

.av-skin-active {
background: #fff;
opacity: .25;
@@ -845,6 +907,7 @@ h4 + .uk-comment-meta li:first-child {

.jala-calendar {
width: 100%;
max-width: 200px;
text-align: center;

tbody th {
@@ -66,14 +66,16 @@ prefix="Last update: " default="None so far" %>)</span></li>
<link rel='stylesheet' type='text/css' href='<% site.href main.css %>'>
<script type='text/javascript' src='<% site.href main.js %>'></script>
</head>
<body class='uk-container-center av-page'>
<body>
<% site.skin $Site#header %>
<div class='uk-grid'>
<div class='uk-width-7-10'>
<div class='uk-grid av-page'>
<div class='uk-width-medium-7-10'>
<% response.message prefix="<div class='uk-alert' data-uk-alert>" suffix=</div> %>
<% response.body %>
</div>
<div class='uk-width-3-10'>
<div class='uk-width-3-10 --uk-hidden-small av-floating-navigation'>
<input type='checkbox' class='av-toggle'>
<div class='av-ant'></div>
<div class='uk-margin-large-left av-border-left'>
<% membership.status %>
<ul class='uk-nav uk-nav-side'>
@@ -2,161 +2,63 @@
<!-- Source: https://openclipart.org/detail/69/ant-icon-by-rejon -->
<!-- Create PNG: convert -background none +antialias -density 1800x1800 -resize 180x180 -quality 00 -depth 8 ant.svg favicon.png -->
<svg
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:cc="http://web.resource.org/cc/"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:ns1="http://sozi.baierouge.fr"
id="ant"
sodipodi:docname="Andy_-_ant.svg"
sodipodi:modified="true"
viewBox="0 0 128 128"
sodipodi:version="0.32"
version="1.0"
inkscape:output_extension="org.inkscape.output.svg.inkscape"
inkscape:version="0.44+devel"
sodipodi:docbase="/home/rejon/Documents/projects/openclipartlibrary/art"
>
<sodipodi:namedview
id="base"
bordercolor="#666666"
inkscape:pageshadow="2"
guidetolerance="10.0"
pagecolor="#ffffff"
gridtolerance="10.0"
inkscape:zoom="2.9609375"
objecttolerance="10.0"
borderopacity="1.0"
inkscape:current-layer="ant"
inkscape:cx="64"
inkscape:cy="63.358311"
inkscape:window-y="382"
inkscape:window-x="424"
inkscape:window-height="577"
inkscape:pageopacity="0.0"
inkscape:window-width="852"
/>
<g transform="translate(65,-28) rotate(45)">
<path
id="ant-shape"
style="fill:#222"
d="m17.177 23.931c-1.026 0.841 7.226 11.285 7.735 11.893 7.05 8.436 14.029 8.726 14.892 9.985 0.87 1.251 5.028 5.437 12.424 6.668 0.028 1.923 0.134 3.74 0.332 5.466-4.546-1.252-9.666-2.327-12.53-2.32-3.019-0.007-13.244 2.85-15.075 3.706-0.644 0.304-12.325 0.007-12.325 1.279 0 1.287 11.632 1.761 12.113 1.111 4.221 0.671 16.178-1.514 17.451-1.287 1.273 0.24 11.066 3.09 11.137 3.104 0.735 3.38 1.803 5.225 3.069 7.481-4.865-0.141-13.598 4.674-18.47 9.546-4.044 4.045-10.783 10.585-11.801 12.028-3.805 5.374-2.101 22.179 0.007 22.179 1.654 0-2.306-15.044 1.499-20.418 1.096-1.549 13.35-9.914 14.778-11.555 1.429-1.64 9.023-3.988 12.205-6.364-3.203 2.072-5.395 5.311-5.395 9.766 0 16.541 8.633 23.211 15.118 23.291 0 0 0.007 0.02 0.021 0.02h0.042 0.043 0.042c6.477-0.08 15.069-6.77 15.069-23.283 0.007-4.151-1.91-7.269-4.752-9.348 3.458 2.213 10.239 4.384 11.582 5.926 1.436 1.633 13.632 9.998 14.732 11.554 3.82 5.367-0.14 20.431 1.53 20.431 2.09 0 3.81-16.811 0-22.185-1.02-1.435-7.755-7.969-11.8-12.014-4.879-4.879-13.598-9.694-18.47-9.546 1.266-2.255 2.327-4.15 3.069-7.537 0.064-0.008 9.857-2.815 11.137-3.048s13.23 1.959 17.454 1.28c0.48 0.657 12.12 0.177 12.11-1.103 0.01-1.28-11.71-1.004-12.35-1.308-1.83-0.863-12.002-3.713-15.029-3.713-2.864 0.007-8.025 1.082-12.572 2.32 0.198-1.712 0.346-3.529 0.375-5.452 7.396-1.245 11.561-5.424 12.416-6.675 0.87-1.252 7.849-1.542 14.9-9.992 0.5-0.601 8.76-11.052 7.73-11.886-1.21-0.983-8.78 8.761-9.08 9.616-2.05 1.019-11.796 7.51-12.97 7.977-1.181 0.459-7.12 2.581-13.435 6.364-0.969-3.699-3.408-6.209-6.392-7.538 4.122-0.007 7.121-0.813 7.121-5.353 0-4.964-0.955-9.539-2.56-13.209 4.391-2.284 7.573-4.73 8.527-5.077 0.955-0.36 1.323-1.676-0.487-4.999-2.984-5.4589-6.216-10.189-6.916-9.9278-0.7 0.2758 2.567 10.911 5.367 13.202-3.316 0.587-5.494 1.662-8.259 3.578-2.178-3.295-4.978-5.275-8.068-5.325-0.007-0.007-0.014-0.028-0.021-0.021-0.029 0-0.064-0.007-0.092-0.007-3.097 0.042-5.954 2.051-8.125 5.353-2.772-1.909-4.935-3.012-8.245-3.606 2.8-2.277 6.088-12.905 5.388-13.167-0.7-0.2614-3.952 4.4338-6.936 9.893-1.818 3.33-1.422 4.674-0.467 5.02 0.962 0.354 4.144 2.8 8.535 5.084-1.612 3.663-2.567 8.252-2.567 13.216 0 4.526 2.998 5.346 7.113 5.346-2.976 1.336-5.416 3.846-6.385 7.531-6.314-3.784-12.282-5.877-13.456-6.343-1.181-0.46-10.918-7.001-12.968-8.019-0.297-0.848-7.849-10.578-9.065-9.588z"
/>
</g>
<metadata
>
<rdf:RDF
>
<cc:Work
>
<dc:format
>image/svg+xml</dc:format
>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage"
/>
<cc:license
rdf:resource="http://creativecommons.org/licenses/publicdomain/"
/>
<dc:publisher
>
<cc:Agent
rdf:about="http://openclipart.org/"
>
<dc:title
>Openclipart</dc:title
>
</cc:Agent
>
</dc:publisher
>
<dc:title
>Ant Icon</dc:title
>
<dc:date
>2006-08-29T21:35:51</dc:date
>
<dc:description
>This is a lame flat version of Andy's ant ready for use as a solid element in a logo or on a poster.</dc:description
>
<dc:source
>https://openclipart.org/detail/69/ant-icon-by-rejon</dc:source
>
<dc:creator
>
<cc:Agent
>
<dc:title
>rejon</dc:title
>
</cc:Agent
>
</dc:creator
>
<dc:subject
>
<rdf:Bag
>
<rdf:li
>animal</rdf:li
>
<rdf:li
>ant</rdf:li
>
<rdf:li
>black</rdf:li
>
<rdf:li
>bug</rdf:li
>
<rdf:li
>flat</rdf:li
>
<rdf:li
>insect</rdf:li
>
<rdf:li
>monochrome</rdf:li
>
<rdf:li
>no contour</rdf:li
>
<rdf:li
>poster</rdf:li
>
<rdf:li
>silhouette</rdf:li
>
<rdf:li
>solid</rdf:li
>
</rdf:Bag
>
</dc:subject
>
</cc:Work
>
<cc:License
rdf:about="http://creativecommons.org/licenses/publicdomain/"
>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
/>
</cc:License
>
</rdf:RDF
>
</metadata
>
</svg
>

<g transform="translate(65,-28) rotate(45)">
<path
fill="#222"
d="M17.177 23.931c-1.026 0.841 7.226 11.285 7.735 11.893 7.05 8.436 14.029 8.726 14.892 9.985 0.87 1.251 5.028 5.437 12.424 6.668 0.028 1.923 0.134 3.74 0.332 5.466-4.546-1.252-9.666-2.327-12.53-2.32-3.019-0.007-13.244 2.85-15.075 3.706-0.644 0.304-12.325 0.007-12.325 1.279 0 1.287 11.632 1.761 12.113 1.111 4.221 0.671 16.178-1.514 17.451-1.287 1.273 0.24 11.066 3.09 11.137 3.104 0.735 3.38 1.803 5.225 3.069 7.481-4.865-0.141-13.598 4.674-18.47 9.546-4.044 4.045-10.783 10.585-11.801 12.028-3.805 5.374-2.101 22.179 0.007 22.179 1.654 0-2.306-15.044 1.499-20.418 1.096-1.549 13.35-9.914 14.778-11.555 1.429-1.64 9.023-3.988 12.205-6.364-3.203 2.072-5.395 5.311-5.395 9.766 0 16.541 8.633 23.211 15.118 23.291 0 0 0.007 0.02 0.021 0.02h0.042 0.043 0.042c6.477-0.08 15.069-6.77 15.069-23.283 0.007-4.151-1.91-7.269-4.752-9.348 3.458 2.213 10.239 4.384 11.582 5.926 1.436 1.633 13.632 9.998 14.732 11.554 3.82 5.367-0.14 20.431 1.53 20.431 2.09 0 3.81-16.811 0-22.185-1.02-1.435-7.755-7.969-11.8-12.014-4.879-4.879-13.598-9.694-18.47-9.546 1.266-2.255 2.327-4.15 3.069-7.537 0.064-0.008 9.857-2.815 11.137-3.048s13.23 1.959 17.454 1.28c0.48 0.657 12.12 0.177 12.11-1.103 0.01-1.28-11.71-1.004-12.35-1.308-1.83-0.863-12.002-3.713-15.029-3.713-2.864 0.007-8.025 1.082-12.572 2.32 0.198-1.712 0.346-3.529 0.375-5.452 7.396-1.245 11.561-5.424 12.416-6.675 0.87-1.252 7.849-1.542 14.9-9.992 0.5-0.601 8.76-11.052 7.73-11.886-1.21-0.983-8.78 8.761-9.08 9.616-2.05 1.019-11.796 7.51-12.97 7.977-1.181 0.459-7.12 2.581-13.435 6.364-0.969-3.699-3.408-6.209-6.392-7.538 4.122-0.007 7.121-0.813 7.121-5.353 0-4.964-0.955-9.539-2.56-13.209 4.391-2.284 7.573-4.73 8.527-5.077 0.955-0.36 1.323-1.676-0.487-4.999-2.984-5.4589-6.216-10.189-6.916-9.9278-0.7 0.2758 2.567 10.911 5.367 13.202-3.316 0.587-5.494 1.662-8.259 3.578-2.178-3.295-4.978-5.275-8.068-5.325-0.007-0.007-0.014-0.028-0.021-0.021-0.029 0-0.064-0.007-0.092-0.007-3.097 0.042-5.954 2.051-8.125 5.353-2.772-1.909-4.935-3.012-8.245-3.606 2.8-2.277 6.088-12.905 5.388-13.167-0.7-0.2614-3.952 4.4338-6.936 9.893-1.818 3.33-1.422 4.674-0.467 5.02 0.962 0.354 4.144 2.8 8.535 5.084-1.612 3.663-2.567 8.252-2.567 13.216 0 4.526 2.998 5.346 7.113 5.346-2.976 1.336-5.416 3.846-6.385 7.531-6.314-3.784-12.282-5.877-13.456-6.343-1.181-0.46-10.918-7.001-12.968-8.019-0.297-0.848-7.849-10.578-9.065-9.588z"
/>
</g>

<metadata>
<rdf:RDF>
<cc:Work>
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/"/>
<dc:publisher>
<cc:Agent rdf:about="http://openclipart.org/">
<dc:title>Openclipart</dc:title>
</cc:Agent>
</dc:publisher>
<dc:title>Ant Icon</dc:title>
<dc:date>2006-08-29T21:35:51</dc:date>
<dc:description>
This is a lame flat version of Andy's ant ready for use as a solid element in a logo or on a poster.
</dc:description>
<dc:source>https://openclipart.org/detail/69/ant-icon-by-rejon</dc:source>
<dc:creator>
<cc:Agent>
<dc:title>rejon</dc:title>
</cc:Agent>
</dc:creator>
<dc:subject>
<rdf:Bag>
<rdf:li>animal</rdf:li>
<rdf:li>ant</rdf:li>
<rdf:li>black</rdf:li>
<rdf:li>bug</rdf:li>
<rdf:li>flat</rdf:li>
<rdf:li>insect</rdf:li>
<rdf:li>monochrome</rdf:li>
<rdf:li>no contour</rdf:li>
<rdf:li>poster</rdf:li>
<rdf:li>silhouette</rdf:li>
<rdf:li>solid</rdf:li>
</rdf:Bag>
</dc:subject>
</cc:Work>
<cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/">
<cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/>
<cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/>
<cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/>
</cc:License>
</rdf:RDF>
</metadata>
</svg>

0 comments on commit 2274d20

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.