170 lines
6.3 KiB
Org Mode
170 lines
6.3 KiB
Org Mode
#+TITLE: The Visual Identity of Lipu Kasi
|
|
|
|
This application should feel earthy and home-y, an application for individuals by individuals. It should look as smart on a laptop as a phone, and be as functional both ways.
|
|
|
|
I am not sure how to manage this reasonably for now. There's not a lot of assets for now, luckily.
|
|
I haven't made typography decisions. I my default is to reach for the [[https://ohnotype.co/fonts/families/vulf-mono][Vulf Mono]] family, I might reach for it again.
|
|
|
|
- [[https://get.foundation/][Foundation For Sites]] is still my design framework of choice for better or worse
|
|
- =scss= for CSS compiled by =WebPack= and =node-sass=
|
|
- Earthy, organic, vaguely floss-y
|
|
|
|
* Base Template
|
|
|
|
#+begin_src web :tangle lib/lipu_kasi_web/templates/layout/app.html.eex
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<link rel="manifest" href="/appmanifest.json">
|
|
<%= csrf_meta_tag() %>
|
|
<title><%= assigns[:page_title] || "Lipu Kasi, Plant Diary" %></title>
|
|
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
|
|
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/foundation.css") %>"/>
|
|
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/aesthetics.css") %>"/>
|
|
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
|
|
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/foundation.js") %>"></script>
|
|
</head>
|
|
<body>
|
|
<header class="top-bar">
|
|
<section class="top-bar-left">
|
|
<ul id="dropdown" class="dropdown menu" data-dropdown-menu>
|
|
<li class="menu-text"><%= assigns[:site_title] %></li>
|
|
<li>
|
|
<a>Points of Interest</a>
|
|
<ul class="menu vertical">
|
|
<li><a href="https://rix.si/">Lion's Rear</a></li>
|
|
<li><a href="https://arcology.garden/">Arcology Garden</a></li>
|
|
<li><a href="https://doc.rix.si/">Docsite</a></li>
|
|
<li><a href="https://doc.rix.si/cce.html">Complete Computing Environment</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</header>
|
|
|
|
<main role="main">
|
|
<p class="grid-x" role="alert"><%= get_flash(@conn, :info) %></p>
|
|
<p class="grid-x" role="alert"><%= get_flash(@conn, :error) %></p>
|
|
|
|
<%= render @view_module, @view_template, assigns %>
|
|
</main>
|
|
|
|
<footer class="grid-container">
|
|
<hr/>
|
|
<div class="grid-x">
|
|
<p class="text-center cell">
|
|
<em>
|
|
Effort has been made to ensure accurate and
|
|
thoughtful content, but I am one human. Please
|
|
assume good faith and contact me with suggestions
|
|
for improvement or areas of interest.
|
|
</em>
|
|
</p>
|
|
<p class="text-center cell">
|
|
© 02020 Ryan Rix <<a href="mailto:site@whatthfuck.computer">site@whatthefuck.computer</a>>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
#+end_src
|
|
|
|
* CSS
|
|
:PROPERTIES:
|
|
:ID: 33cd2fad-a223-4a25-86be-0a9f2ab19cd0
|
|
:END:
|
|
|
|
In the base template I have three CSS entrypoints defined, and this is mirrored in [[file:assets/webpack.config.js::const path = require('path');][webpack.config.js]]:
|
|
|
|
- [[file:assets/css/app.scss][app.scss]] - semantic markup
|
|
- [[file:assets/css/foundation.scss][foundation.scss]] - the entire Foundation CSS bundle
|
|
- [[file:assets/css/aesthetics.scss][aesthetics.scss]] - a bundle containing font-face rules, colors, etc
|
|
|
|
Additionally, Foundation has a [[./assets/css/_settings.scss][_settings.scss]] file that is imported in a few places, it just sets a ton of =SCSS= variables.
|
|
|
|
* JavaScript
|
|
|
|
There are a few JavaScript entrypoints in the [[file:assets/webpack.config.js][webpack.config.js]]:
|
|
|
|
** =js/app.js= -- our code goes here.
|
|
|
|
This is where all of my front end logic will come by loaded or stored. For now there's not much, so I'll pull this out when it gets out of hand.
|
|
|
|
#+begin_src js :tangle assets/js/app.js
|
|
// We need to import the CSS so that webpack will load it.
|
|
// The MiniCssExtractPlugin is used to separate it out into
|
|
// its own CSS file.
|
|
import "../css/app.scss"
|
|
|
|
// import "./live.js"
|
|
|
|
// if('serviceWorker' in navigator) {
|
|
// navigator.serviceWorker.register('/js/sw.js', {
|
|
// scope: '/'
|
|
// }).then(function() {
|
|
// console.log('Service Worker Registered');
|
|
// });
|
|
// }
|
|
#+end_src
|
|
|
|
** =js/foundation.js= -- foundation's code goes here.
|
|
|
|
Loading foundation is a pretty simple affair, =foundation.core= and whatever UI elements needed are all that are loaded, and then call the foundation initialization function. Easy.
|
|
|
|
#+begin_src js :tangle assets/js/foundation.js
|
|
import "jquery"
|
|
|
|
import "../css/foundation.scss"
|
|
|
|
import 'foundation-sites/dist/js/plugins/foundation.core';
|
|
import 'foundation-sites/dist/js/plugins/foundation.dropdownMenu.min.js';
|
|
import 'foundation-sites/dist/js/plugins/foundation.util.keyboard.min.js';
|
|
import 'foundation-sites/dist/js/plugins/foundation.util.box.min.js';
|
|
import 'foundation-sites/dist/js/plugins/foundation.util.nest.min.js';
|
|
|
|
$(document).foundation();
|
|
#+end_src
|
|
|
|
** =js/sw.js= -- Service Worker for Progressive Web App
|
|
|
|
It's not clear to me how well this will handle offline behavior, I'm not sure I really care for it, though I should. The service worker will let us figure that out later, for now it caches stylesheets.
|
|
|
|
#+begin_src js :tangle assets/js/sw.js
|
|
const cacheName = 'lipu-kasi';
|
|
const filesToCache = [
|
|
'/',
|
|
'/css/app.css',
|
|
'/css/foundation.css',
|
|
'/css/aesthetics.css',
|
|
];
|
|
|
|
self.addEventListener('install', function(e) {
|
|
console.log('[lipu kasi Service Worker] Installing');
|
|
e.waitUntil(
|
|
caches.open(cacheName).then(function(cache) {
|
|
console.log('[lipu kasi Service Worker] Caching files for app');
|
|
return cache.addAll(filesToCache);
|
|
})
|
|
);
|
|
});
|
|
|
|
self.addEventListener('activate', event => {
|
|
event.waitUntil(self.clients.claim());
|
|
});
|
|
|
|
self.addEventListener('fetch', event => {
|
|
if (event.request.method !== 'POST') {
|
|
event.respondWith(
|
|
fetch(event.request).catch(function() {
|
|
return caches.match(event.request);
|
|
})
|
|
);
|
|
} else {
|
|
event.respondWith(fetch(event.request));
|
|
}
|
|
})
|
|
#+end_src
|