Conservancy/symposion_app
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dev/tobi/responsive

Browse source
This commit is contained in:
Tobias S 2018-06-17 04:18:04 +00:00
parent 3534a8243c
commit 19a5bbf929
17 changed files with 240 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
pinaxcon/templates/flatpages/coc.html
View file

@ -6,8 +6,8 @@
{% block content %}
<div class="row">
<div class="col-1"></div>
<div class="col-10 content text-page">
<div class="col-md-1"></div>
<div class="col-12 col-md-10 content text-page">
<h1>Code of Conduct</h1>
<p>
Linux Australia is committed to the ideals expressed in our <a href="http://linux.org.au/values">Values Statement</a> and ask all our members, speakers, volunteers, attendees and guests to adopt these principles. We are a diverse community. Sometimes this means we need to work harder to ensure we're creating an environment of trust and respect where all who come to participate feel comfortable and included.

59
pinaxcon/templates/flatpages/homepage.html
View file

@ -2,25 +2,35 @@
{% load static %}
{% block main_class %}container-fluid{% endblock %}
{% block extra_head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragscroll/0.0.8/dragscroll.min.js" async></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
{% endblock %}
{% block body %}
<div class="row">
<div class="col-12">
<img src="{% static 'assets/Header_placeholder.jpg' %}" id="hero">
<!-- <h1 class="display-4">{% block header_title %}{% endblock %}</h1>
<p class="lead">{% block header_lead %}{% endblock %}</p>
<p>{% block header_paragraph %}{% endblock %}</p> -->
</div>
</div>
<div class="row bg-primary text-secondary ">
<div class="sidescroll-container">
<div class="col-12 sidescroll dragscroll">
<div><img src="{% static 'assets/tram.jpg' %}" /></div>
<div><img src="{% static 'assets/tram.jpg' %}" /></div>
<div><img src="{% static 'assets/tram.jpg' %}" /></div>
<div><img src="{% static 'assets/tram.jpg' %}" /></div>
</div>
</div>
<div class="row green-background green-block">
<div class="col-xl-12 sidescroll content">
<img src="{% static 'assets/tram.jpg' %}" style="width: 608px";>
<img src="{% static 'assets/playground.jpg' %}" style="width: 608px";>
<img src="{% static 'assets/gardens.jpg' %}" style="width: 608px";>
<img src="{% static 'assets/memorial.jpg' %}" style="width: 608px";>
</div>
<div class="col-xl-5 content">
<div class="col-12 col-xl-6 content pt-5 pb-xl-5">
<p>
Themed <strong>Linux of Things</strong>, the 2019 linux.conf.au will again attract speakers and attendees from across the world to socialise, fraternise, lecture, listen, ask, answer and share with their peers.
</p>
@ -29,25 +39,32 @@
</p>
</div>
<div class="col-xl-5 content">
<div class="col-12 col-xl-6 content pt-xl-5 pb-5">
<p>
The <strong>Internet of Things</strong> has become ubiquitous in our lives – phones, TVs, fridges cars, homes and whole cities have become “smart” in the last couple of years.
</p>
<p>
Behind this is an ever-increasing demand for always connected senseors and devices, exchanging, collating and analysing data, and often making decisions without us even noticing.
Behind this is an ever-increasing demand for always connected sensors and devices, exchanging, collating and analysing data, and often making decisions without us even noticing.
</p>
<p>
Linux, with its lightweight footprint and robust security, and importantly its open source nature, has become a core component in this: Linux of Things
</p>
</div>
<div class="col-xl-12 content">
<div style="text-align: right; margin-top: 3rem;">
<h2 class="float-left">Venue</h2>
<p>University of Canterbury<br/>Christchurch, New Zealand</p>
</div>
<img src="{% static 'assets/map.png' %}" style="width: 100%; filter: grayscale(100%);">
</div>
<div class="col-12 content homepage-venue pt-xl-5 pt-2">
<h2>Venue</h2>
<p>University&nbsp;of&nbsp;Canterbury<br/>Christchurch, New&nbsp;Zealand</p>
</div>
</div>
<div id="map"></div>
{% endblock %}
{% endblock %}
{% block extra_body %}
<script>
var map = L.map('map').setView([-43.5235, 172.5839], 18);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
{% endblock %}

4
pinaxcon/templates/flatpages/sponsorship.html
View file

@ -6,8 +6,8 @@
{% block content %}
<div class="row">
<div class="col-1"></div>
<div class="col-10 content text-page">
<div class="col-md-1"></div>
<div class="col-12 col-md-10 content text-page">
<h1>Sponsorship</h1>
<h2>How to sponsor</h2>

4
pinaxcon/templates/flatpages/toc.html
View file

@ -2,8 +2,8 @@
{% block content %}
<div class="row">
<div class="col-1"></div>
<div class="col-10 content mx-5 text-page">
<div class="col-md-1"></div>
<div class="col-12 col-md-10 content text-page">
<h1 style="text-transform: uppercase;">Terms &amp; <br />Conditions</h1>
<h2>Registration</h2>

6
pinaxcon/templates/nav.html
View file

@ -10,13 +10,13 @@
{% endif %}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler {% if color == 'green' %}white{% else %}green{% endif %}-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
{% sitetree_menu from "main" include "trunk" template "sitetree_header.html" %}
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<!-- <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/linuxconfau2019" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg {% if color == 'green' %} text-white{% endif %}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 416.32" focusable="false"><title>Twitter</title>
@ -33,5 +33,5 @@
{% endif %}
</a>
</li>
</ul>
</ul> -->
</nav>

38
pinaxcon/templates/site_base.html
View file

@ -17,35 +17,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block head_title_base %}{% if SITE_NAME %}{{ SITE_NAME }} | {% endif %}{% block head_title %}{% endblock %}{% endblock %}</title>
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'assets/favicon/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'assets/favicon/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'assets/favicon/favicon-16x16.png' %}">
<link rel="manifest" href="{% static 'assets/favicon/site.webmanifest' %}">
<link rel="mask-icon" href="{% static 'assets/favicon/safari-pinned-tab.svg' %}" color="#0f7c11">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="theme-color" content="#ffffff">
{% block styles %}
<link href="{% sass_src 'scss/app.scss' %}" rel="stylesheet" type="text/css" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="{% static 'lca2018/images/apple-touch-icon-57x57.png' %}" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{% static 'lca2018/images/apple-touch-icon-114x114.png' %}" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{% static 'lca2018/images/apple-touch-icon-72x72.png' %}" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{% static 'lca2018/images/apple-touch-icon-144x144.png' %}" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="{% static 'lca2018/images/apple-touch-icon-60x60.png' %}" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="{% static 'lca2018/images/apple-touch-icon-120x120.png' %}" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="{% static 'lca2018/images/apple-touch-icon-76x76.png' %}" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="{% static 'lca2018/images/apple-touch-icon-152x152.png' %}" />
<link rel="icon" type="image/png" href="{% static 'lca2018/images/favicon-196x196.png' %}" sizes="196x196" />
<link rel="icon" type="image/png" href="{% static 'lca2018/images/favicon-96x96.png' %}" sizes="96x96" />
<link rel="icon" type="image/png" href="{% static 'lca2018/images/favicon-32x32.png' %}" sizes="32x32" />
<link rel="icon" type="image/png" href="{% static 'lca2018/images/favicon-16x16.png' %}" sizes="16x16" />
<link rel="icon" type="image/png" href="{% static 'lca2018/images/favicon-128.png' %}" sizes="128x128" />
<link rel="icon" href="{% static 'lca2018/images/favicon.png' %}" sizes="512x512" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="{% static 'lca2018/images/mstile-144x144.png' %}" />
<meta name="msapplication-square70x70logo" content="{% static 'lca2018/images/mstile-70x70.png' %}" />
<meta name="msapplication-square150x150logo" content="{% static 'lca2018/images/mstile-150x150.png' %}" />
<meta name="msapplication-wide310x150logo" content="{% static 'lca2018/images/mstile-310x150.png' %}" />
<meta name="msapplication-square310x310logo" content="{% static 'lca2018/images/mstile-310x310.png' %}" />
{% block extra_style %}{% endblock %}
{% endblock %}
{% block extra_head_base %}
{% block extra_head %}{% endblock %}
{% endblock %}
@ -88,11 +72,11 @@
{% endblock %}
{% block scripts %}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="{% static 'js/app.js' %}" type="text/javascript"></script>
<script src="{% static 'js/jquery.formset.js' %}"></script>
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
{% block extra_script %}
{% endblock %}
{% block scripts_extra %}{% endblock %}
@ -104,7 +88,7 @@
{% endblock %}
</main>
<footer class="bg-white text-primary py-5">
<footer class="bg-white text-primary py-xl-5 py-2">
<p>
&copy; 2018 linux.conf.au <br />
and Linux Australia. <br />

BIN
static/src/assets/favicon/android-chrome-192x192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
static/src/assets/favicon/android-chrome-256x256.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
static/src/assets/favicon/apple-touch-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

9
static/src/assets/favicon/browserconfig.xml Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#00a300</TileColor>
</tile>
</msapplication>
</browserconfig>

BIN
static/src/assets/favicon/favicon-16x16.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 819 B

BIN
static/src/assets/favicon/favicon-32x32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/src/assets/favicon/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/src/assets/favicon/mstile-150x150.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

29
static/src/assets/favicon/safari-pinned-tab.svg Normal file
View file

@ -0,0 +1,29 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="260.000000pt" height="260.000000pt" viewBox="0 0 260.000000 260.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,260.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1232 2413 c-85 -41 -85 -175 -1 -219 52 -26 108 -15 156 32 7 7 17
30 22 53 12 54 -16 112 -64 135 -42 20 -71 20 -113 -1z"/>
<path d="M945 1828 c-32 -68 -103 -215 -158 -328 -115 -237 -203 -420 -294
-609 -35 -74 -70 -146 -78 -161 -14 -26 -13 -27 51 -58 l65 -32 123 252 c68
139 135 278 149 308 14 30 84 176 156 323 139 285 176 365 170 371 -5 4 -118
56 -122 56 -2 0 -30 -55 -62 -122z"/>
<path d="M1478 1918 l-57 -31 30 -60 c17 -33 59 -119 94 -191 34 -72 102 -212
150 -311 119 -245 197 -406 269 -557 l61 -128 63 30 c55 26 62 33 57 51 -4 11
-59 127 -122 257 -63 130 -130 269 -148 307 -40 85 -232 482 -283 584 -20 41
-41 75 -47 77 -5 1 -36 -12 -67 -28z"/>
<path d="M284 404 c-97 -48 -75 -203 32 -230 40 -10 100 13 125 47 77 108 -38
242 -157 183z"/>
<path d="M2192 400 c-59 -36 -76 -123 -34 -179 24 -33 88 -57 127 -47 15 4 43
22 62 41 100 100 -33 259 -155 185z"/>
<path d="M759 348 c-2 -7 -2 -40 1 -73 l5 -60 543 0 542 0 0 72 0 73 -544 0
c-426 0 -545 -3 -547 -12z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

19
static/src/assets/favicon/site.webmanifest Normal file
View file

@ -0,0 +1,19 @@
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

136
static/src/scss/app.scss
View file

@ -20,6 +20,16 @@ body {
overflow-x: hidden;
}
.navbar-brand {
width: 200px;
img {
max-width: 100%;
height: auto;
}
}
.text-page {
h2 {
padding-top: 3rem;
@ -31,8 +41,27 @@ body {
}
}
.navbar-collapse {
margin-left: $padding-left-default;
}
.navbar-toggler {
border: 0 !important;
&.green-toggler {
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(15,124,17, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
}
&.white-toggler {
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
}
}
html {
font-size: 16px;
@ -55,44 +84,12 @@ footer {
margin-top: 16rem;
margin-bottom: 8rem;
padding-top: 24rem;
height: 1247px;
}
.green-background {
position: relative;
background: $primary;
color: white;
}
.sidescroll {
position: absolute !important;
top: -8rem;
width: 100%;
height: 405px;
padding-right: 0 !important;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
&::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
}
.content {
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: $padding-left-default !important;
padding-right: 5.3125rem !important;
}
li.nav-item {
height: 2.75rem;
a.nav-link {
//line-height: 1rem;
padding-top: 0;
}
@ -112,3 +109,78 @@ main.container-fluid {
@import "nav.scss";
@import "bootstrap.scss";
.content {
//padding-top: 1rem;
padding-bottom: 1rem;
padding-left: $padding-left-default / 3 !important;
padding-right: $padding-left-default / 3 !important;
@include media-breakpoint-up(md) {
padding-left: $padding-left-default !important;
padding-right: 5.3125rem !important;
}
}
.homepage-venue {
padding-bottom: 0px;
margin-bottom: 0px;
@include media-breakpoint-up(sm) {
text-align: right;
h2 {
float: left;
}
}
}
.sidescroll-container {
overflow-y: hidden;
}
.sidescroll {
margin-bottom: -30px;
padding-bottom: 30px;
background: linear-gradient(0deg, $primary 50%, $secondary 50%) !important;
@include media-breakpoint-up(md) {
padding-left: $padding-left-default !important;
}
display: flex;
flex-wrap: nowrap;
cursor: grab;
div ~ div {
margin-left: 15px;
}
div {
min-width: 30%;
@include media-breakpoint-down(sm) {
min-width: 80%;
}
img {
max-width: 100%;
height: auto;
}
}
overflow-x: auto;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
}
#map {
width: 100%;
height: 480px;
filter: grayscale(100%);
}