27 | 30 |
31 | 32 | I am a researcher in fluid mechanics and during my current project, I felt like I got a little lost in what I was doing. I needed to take stock and organize everything I had seen, heard and produced. The idea of a road map, almost in the form of a mind map, corresponded well to the way a research project is organized (a guideline that breaks down into ideas). Kinopio is a perfect tool for that. Its simplicity allows to build very quickly something that works in its content as well as in its form. 33 | 34 | The text limits encourage you to be concise in what you want to write and adding links, images, colors or GIFs makes the place feels nice. As I worked on my road map, the idea of doing something [shareable](https://help.kinopio.club/posts/sharing-spaces/) came up. 35 | 36 | Now I think I will put a link to Kinopio in my project report. A tool that served as a help for me, will also be a good tool for future readers to get an overview of the project. 37 | 38 | > What are some important parts of a research presentation? 39 | 40 |  41 | 42 | First, the look. This initiative is something that has been added to the mass of work I already have. I wanted a tool where globally only the content takes time and where the style is very simple to format. Secondly, I wanted a very malleable tool where I could move things around as I wanted to. And third a web page that can be available in almost every device! 43 | 44 | > How do you collect and organize info for your space? 45 | 46 |  47 | 48 | Most of the info and images come from me. But I love to use the [GIF finder](https://help.kinopio.club/posts/adding-images-to-cards/), it brings life to the page. 49 | 50 | > Any other tips or advice? 51 | 52 | I think that you should not hesitate to test things with Kinopio. Move the blocks! Try different layouts and styles! After a while you will find your page appealing and you will be a little proud of what you have done! 53 | -------------------------------------------------------------------------------- /guides/track-media.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Track your Media 3 | thumbnail: 'https://us-east-1.linodeobjects.com/kinopio-uploads/NsD0a-_W9Fm0efAiN0Wqe/original-d275ff849851d43d1236ce36b6e21944.gif' 4 | 5 | tags: ['Guides', 'Life'] 6 | tagClass: 'life' 7 | 8 | userName: Kevin aka humdrum 9 | userShortName: humdrum 10 | userUrl: https://kinopio.club/-the-central-hub-nTfUzCV1vnLedTHiWGWcE 11 | userColor: '#127fec' 12 | spaceName: 📺 2022 TV Space 13 | spaceUrl: https://kinopio.club/-2022-tv-space-ASdzyKj7YTRM5XQjwJErx 14 | spaceEmbedUrl: https://kinopio.club/embed/?spaceId=ASdzyKj7YTRM5XQjwJErx&zoom=50 15 | 16 | # static 17 | pageTitle: Kinopio Guides 18 | layout: "layouts/guides-post.pug" 19 | pageSearchIsVisible: false 20 | currentPage: guides 21 | pageClass: 'guides' 22 | --- 23 | 24 | > Why use Kinopio to track the TV shows you've watched and want to watch? 25 | 26 |  27 | 28 | The goal of my [TV](https://kinopio.club/-2022-tv-space-ASdzyKj7YTRM5XQjwJErx) and [Movie](https://kinopio.club/-2022-movie-space-FOg4-Gs1LjALNSKXVBgQy) spaces is to have a quick place to see what’s out and available to watch and what’s coming out over the course of the year. 29 | 30 | There are a lot of blogs that do lists by month or things that they are anticipating, but I wanted something more comprehensive and tailored to my own tastes so I had to make it myself. I also wanted something that would be super flexible, visual, but also easy to update and re-organize, all while being connected to a broader web of note-taking and tracking. 31 | 32 | Now that I have these spaces, it’s also become a place to track what I’ve watched, and start to formulate ranked lists that will lead to my end of year Top Tens. As a bonus, because of the flexibility Kinopio offers, I can carve out a little room in the TV space to show a little weekly schedule of what’s currently airing and on what day. 33 | 34 | > What are some important parts of a media tracking space? 35 | 36 |  37 | 38 | [Tagging](https://help.kinopio.club/posts/tags/) has been a wonderful way to keep track of all of the shows and movies over the years and where else I might have touched upon them in another space. 39 | 40 | If I talk about a show or movie in another space, or log when I’ve watched it in my journals, I can use the tag to be able to cross-reference and see the history of my viewing, where else it might have come up, and then easily jump to those other spaces. 41 | 42 | > How do you collect and organize info on your space? 43 | 44 |  45 | 46 |  47 | 48 | [Headers and color](https://help.kinopio.club/posts/styling-cards/) were two things I never thought I would ever really use on Kinopio, but they have been critical to organizing the spaces. 49 | 50 | I can use the Headers to lay the space out and organize it in a way that’s relatively easy to track and follow. 51 | 52 | I even use colors a little bit in the headings for decoration, but where colors have been even more useful is in color coding shows or movies, by my interest level and if I’ve watched it yet or am planning to. 53 | 54 | > Any other tips of advice? 55 | 56 | The alignment buttons have been absolutely critical to keeping my sanity and spaces neatly organized. I can quickly move things around and reorder on a whim without having to worry about organization. Then with a quick highlight and press of the alignment button, poof, neatly organized once again. 57 | 58 | Lastly, I can’t talk about these spaces without talking about [Links](https://help.kinopio.club/posts/backlinks/). Links have allowed me to build a personal wiki around media and my life. Both my TV and Movie space are linked to in my [Media hub space](https://kinopio.club/-the-central-hub-nTfUzCV1vnLedTHiWGWcE), which links to other media spaces, and is also linked to from even more spaces. 59 | 60 | With the new [sidebar](https://twitter.com/KinopioClub/status/1527978737731608576) it’s now super convenient to bounce around spaces, going higher or deeper in the hierarchy, making connections, and keeping track of things in a detailed, but easy manner. 61 | -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/index.pug 3 | title: Kinopio Help 4 | --- -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kinopio-meta", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "serve": "npx @11ty/eleventy --serve --port=8081", 9 | "styles": "nodemon --exec 'stylus ./styles/styles.styl -o ./styles/styles.css'", 10 | "build": "stylus ./styles/styles.styl -o ./styles/styles.css && npx @11ty/eleventy" 11 | }, 12 | "keywords": [], 13 | "author": "pirijan", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "@11ty/eleventy": "^0.12.1", 17 | "nodemon": "^2.0.12", 18 | "stylus": "^0.54.5" 19 | }, 20 | "nodemonConfig": { 21 | "watch": [ 22 | "styles/" 23 | ], 24 | "ext": "styl" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /posts/BackLinks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Linking Spaces with Backlinks 3 | tags: ['Advanced Use'] 4 | color: '#b9a8ff' 5 | --- 6 | 7 | Use backlinks to connect your spaces together and weave your own web of knowledge 8 | 9 | - type `/` in a card to create a link to a space, or paste it's url 10 | - click `Links` to see all the spaces with links to your current space 11 | 12 | 15 | -------------------------------------------------------------------------------- /posts/Journaling.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Journaling 3 | tags: ['How to Use'] 4 | color: 'khaki' 5 | --- 6 | 7 | Add journal spaces to reflect on your life and moments! 8 | 9 | Edit the journal to fit your needs with custom prompts. 10 | 11 | 14 | 15 | ## Daily Tasks 16 | 17 | Use journals to help you remember daily tasks or habits by adding checkbox prompts. 18 | 19 |
20 |
21 | ## Weather
22 |
23 | Let Kinopio add the weather for your current location automatically. *Make sure to reactivate if you change locations!*
24 |
25 | 
26 |
27 | ## Prompt of the Day
28 |
29 | Utilize Kinopio's **Prompt of the Day** to get something new to think about in each journal. Using journal prompts everyday comes with a [myriad of benefits](https://community.thriveglobal.com/journal-writing-prompts-and-why-to-do-them/) such as providing a great way to self-reflect and learn about yourself.
30 |
31 | 
32 |
33 | ## Moonphases
34 |
35 | Journal spaces are displayed with moonphase icons to visually differentiate them from normal spaces, and to add a bit of romantic flair. The moon phase is a 27 day cycle, beginning and ending with a new moon.
36 |
37 |
38 | 
39 | New Moon
40 |
43 | 
44 | Waxing Crescent
45 |
48 | 
49 | Waxing Quarter
50 |
53 | 
54 | Waxing Gibbous
55 |
58 | 
59 | Full Moon
60 |
63 | 
64 | Waning Gibbous
65 |
68 | 
69 | Waning Quarter
70 |
73 | 
74 | Waning Crescent
75 |
8 |
9 | [Download desktop apps](https://dl.todesktop.com/201223j48l03cxi) for macOS, Windows, or Linux
10 |
11 | [Download iOS app](https://apps.apple.com/us/app/kinopio/id6448743101)
12 |
13 | Or add the site to your Android phone homescreen by following the instructions in `About → Apps`
14 |
15 |
18 |
19 | The desktop app makes Kinopio easier to open and create spaces without having to first open a web browser.
20 |
21 | ## Pro-Tips
22 |
23 | The desktop app supports tabs and page refreshing like a web browser. It also gives you more control over the size of your window to let you keep your tasks visible while you work.
24 |
25 | 
26 |
--------------------------------------------------------------------------------
/posts/boxes.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Boxes
3 | tags: ['How to Use']
4 | color: 'khaki'
5 | ---
6 |
7 | Boxes help you group, add structure, and guide collaborators around cards,
8 |
9 | Helpful for adding sections, groups, lists, venn diagrams, or even swimlanes to your spaces
10 |
11 |
14 |
15 |
16 | ## Pro-Tips
17 |
18 | - shift-drag to move a box without moving cards
19 | - ⌘/ctrl-click a box to select the cards inside it
20 |
21 |
24 |
--------------------------------------------------------------------------------
/posts/changing-space-background.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Changing Space Background Image and Color
3 | tags: ['How to Use']
4 | color: 'khaki'
5 | date: 2020-03-02
6 | ---
7 |
8 | ## Personalize your spaces and set the mood
9 |
10 |
13 |
14 | You can edit the background for your current space by clicking the icon next to your space name.
15 |
16 | > Backgrounds are just urls, much like images in cards, so feel free to copy in image urls from elsewhere on the web too
17 |
18 | ## Set a Tint Color
19 |
20 | Highlight backgrounds with tint colors, personalize the default wallpaper or dye any background image
21 |
22 | 
23 |
24 | ## Set Defaults
25 |
26 | Prefer grids over squiggles? Or a different background color? You can change your default background for new spaces by
27 |
28 | 1. Set up a space background image and tint color that you'd like to use
29 | 2. Make it the default for new spaces in `User → Settings → Colors and Themes`
30 |
31 | 
32 |
33 | > p.s. You can make your background black by setting the tint color to `#000`
34 |
35 | 36 |
37 | 38 | > p.s.s. You can find even more example backgrounds to try out in this [background test space](https://kinopio.club/space-backgrounds-Evd_H7siYsx03PkbFsa9M) 39 | -------------------------------------------------------------------------------- /posts/checkbox-cards.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Checkbox Cards 3 | tags: ['How to Use'] 4 | color: 'khaki' 5 | --- 6 | 7 | Differentiate thoughts from plans with checkbox cards, 8 | 9 | - By typing `[]` or `[x]` in a card name 10 | - With the checkbox button on a card 11 | - Or by painting to select multiple cards 12 | 13 | 16 | -------------------------------------------------------------------------------- /posts/comments.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Comments 3 | tags: ['Advanced Use'] 4 | color: '#b9a8ff' 5 | --- 6 | 7 | Type `((` to make a comment card. Comments are smaller than normal cards, letting you give feedback without feeling like you’re ‘intruding’ on the original space. 8 | 9 | 12 | 13 | You can also toggle comments for a card or a paint selection through the [Style](/posts/styling-cards/) menu. 14 | 15 | 18 | 19 | 20 | ## Pro-Tips 21 | 22 | - Completely hide comments through the [Filters](/posts/filters) menu, 23 | 24 | 27 | 28 | - You can toggle to show comment text for use when referencing them, or to increase their visual importance in the space. 29 | 30 | - Also just like adding other cards, comments you add to a space with collaborators will send them a [notification](/posts/notifications). 31 | 32 | - Comments also work great with tags, checkboxes, and frames. So you can use a use a checkbox to mark resolved cards, and form associations with content using connections and tags. 33 | 34 | Other secret uses: 35 | 36 | - Spoilers, 37 | - Choose your own adventure novels, 38 | -------------------------------------------------------------------------------- /posts/configuring-your-firewall.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Configuring your Firewall for Kinopio 3 | tags: ['Troubleshooting'] 4 | color: '#a4dfdc' 5 | --- 6 | 7 | You can configure your firewall to allow Kinopio as a trusted source by configuring host names to recognize any sub-domain of 8 | 9 | - `*.kinopio.club` 10 | - `https://kinopio-server.herokuapp.com` 11 | - `wss://kinopio-server.herokuapp.com` 12 | 13 | Also, these are the domains for Kinopio's external resources: 14 | 15 | - `https://updates.kinopio.club/` 16 | - `https://kinopio-email.us-east-1.linodeobjects.com/` 17 | - `https://kinopio-uploads.us-east-1.linodeobjects.com/` 18 | -------------------------------------------------------------------------------- /posts/creating-cards-and-connections.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Creating Cards and Connections 3 | tags: ['How to Use'] 4 | color: 'khaki' 5 | date: 2020-01-01 6 | --- 7 | 8 | Think of **cards** like individual thoughts, and ideas. New ideas and insights form when we **connect** cards to each other, whether by ourselves, or by collaborating with friends. 9 | 10 | There's no limit to number of cards and connections you can add to a space. 11 | 12 | > I like how cute and quirky it is and I'm surprised at how it's helping me organize my thoughts without even trying, It's like magic. – Raphaël Mongeau 13 | 14 | ## Click (or tap) anywhere to make new cards, then just start typing 15 | 16 | 19 | 20 | ## Click cards to edit them 21 | 22 | 25 | 26 | ## Connect cards together by dragging from the connector to anywhere on another card 27 | 28 | 31 | 32 | Besides that, there's really no right or wrong way to use Kinopio. Do what feels right. -------------------------------------------------------------------------------- /posts/delete-your-account.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Delete Your Account 3 | tags: ['User Settings'] 4 | color: '#deb1ff' 5 | --- 6 | 7 | You can permanently delete your account – including all the spaces in it. You can do this by going to `You → Settings → Remove All Your Data`. 8 | 9 | > Be careful, your data will be immediately and permanently deleted from the Kinopio database. 10 | 11 | - If you have spaces that other people are collaborating on, those spaces will no longer be accessible to them. 12 | - If you have a paid plan associated with the account, that plan will be automatically cancelled. -------------------------------------------------------------------------------- /posts/duplicating-a-space.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Duplicating a Space 3 | tags: ['How to Use'] 4 | color: 'khaki' 5 | --- 6 | 7 | You can duplicate a space by exporting, through `Share → Export → Duplicate Space` 8 | 9 |
10 |
11 | You can also duplicate other people's public spaces to create a copy that you can edit.
--------------------------------------------------------------------------------
/posts/editing-connections.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Editing Connections
3 | tags: ['How to Use']
4 | color: 'khaki'
5 | date: 2020-03-01
6 | ---
7 |
8 | ## Use connections and labels to add flexible meaning, grouping, and structure to your spaces
9 |
10 |
13 |
14 | The connection lines between cards have connection types. These connection types have a name and color that can be shared amongst the connections on your space.
15 |
16 | Painting to select multiple connections lets you assign them all to the same connection type
17 |
18 |
22 |
--------------------------------------------------------------------------------
/posts/encryption.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Encryption
3 | tags: ['Policies and Privacy']
4 | color: 'salmon'
5 | ---
6 |
7 | ## Encryption In-Flight
8 |
9 | Kinopio uses current best practices for securing your information, including encrypting data in-flight, salting/hashing user passwords, and not recording sensitive or private information in logs.
10 |
11 | ## About End-to-End Encryption
12 |
13 | Unfortunately, data is not currently end-to-end encrypted because there's no straight-forward way to encrypt data that you're able to collaborate on.
14 |
15 | If you have thoughts or ideas on encryption, please do share it on the [forum](https://forum.kinopio.club) – it's really appreciated.
16 |
--------------------------------------------------------------------------------
/posts/exporting.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Exporting Spaces as text, PDFs, or JSON
3 | tags: ['Importing and Exporting']
4 | color: 'lightskyblue'
5 | ---
6 |
7 | ## Export Space
8 |
9 | You can export your space in a plain text, JSON and PDF formats via `Share → Export`
10 |
11 | 
12 |
13 | ## Export Selected Cards
14 |
15 | You can also specific card names in a space by selecting them by `Painting them, then Copy`
16 |
17 | 
18 |
19 | ## Save as PDF
20 |
21 | Save your entire space as a PDF which you can print, send to your friends, or just keep for yourself
22 |
23 | `Share → PDF` (or `Export → PDF`)
24 |
25 | 
--------------------------------------------------------------------------------
/posts/extensions.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Browser Extensions and Integrations
3 | tags: ['About Kinopio']
4 | color: 'mediumaquamarine'
5 | ---
6 |
7 | For quickly recording thoughts, inspirations, and urls to your [Inbox](/posts/inbox/) while you're out making waves on the world wide web.
8 |
9 | Download for:
10 |
11 | - [Firefox →](https://addons.mozilla.org/en-US/firefox/addon/add-to-kinopio)
12 | - [Chrome, Vivaldi, Edge, Brave →](https://chrome.google.com/webstore/detail/kinopio/hodmmkfpchpgmaemlicohlkiigpejakn)
13 | - [Safari →](https://apps.apple.com/app/add-to-kinopio/id1614926102)
14 |
15 |
16 | 
17 |
26 | 
27 |
10 | 
11 |
36 | 39 |
40 | 41 | Each space can only belong to a single Group. Spaces can be added to Groups by any member of that group. 42 | 43 | ## Editing Group Spaces 44 | 45 | If you see a Group space in your spaces list then you can edit it. Once you add a card to that space you'll be treated like a space collaborator and will receive notifications when new cards are added. 46 | 47 | ## Inviting Group Members 48 | 49 | Adding people to your Group is very similar to inviting them to a space. From `Yourself → Groups`, click on the name of a Group, and click `Copy Invite to Group URL`. 50 | 51 |
53 |
54 | Anyone you share the invite code with will be added to your Group. If they don't yet have a Kinopio account, they'll be added once they sign up.
55 |
56 | If the current space is in a group, the `Share` menu will also display the `Copy Invite to Group URL` button
57 |
58 | 
59 |
60 | # Group User Permissions
61 |
62 | Group users can have the role of `member` or `admin`.
63 |
64 | 
65 |
66 | **Members** can add their spaces to the Group, edit Group spaces, and invite other people to the Group.
67 |
68 | **Admins** can do everything members can, but they can also edit the Group itself (e.g. Group name and color), change the roles of other users on the Group, remove users from the Group. Admins can also remove the group entirely.
69 |
70 | > Removing a group returns all the spaces in it back to the original space creators
71 |
72 | ## Removing Users from the Group
73 |
74 | Open the Group details, through `Yourself → Groups → Group`. If you're a Group admin, you'll see a `✕ Remove` button under each member to remove them from the group.
75 |
76 | Removing someone from the Group immediately removes them as a collaborator from all Group spaces, and transfers ownership of their Group spaces to the Group admin.
77 |
78 | The removed group member will still have access to their account and personal spaces.
79 |
--------------------------------------------------------------------------------
/posts/how-much-does-kinopio-cost.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: How Much Does Kinopio Cost? (Pricing)
3 | tags: ['About Kinopio']
4 | color: 'mediumaquamarine'
5 | ---
6 |
7 | All features of Kinopio are free to use and collaborate with, up to a limit of 100 cards and an upload file size limit of 5mb.
8 |
9 | > Kinopio costs $6/month or $60/year (USD) for unlimited cards and uploads
10 |
11 | (The price in the iOS app is a bit higher to accomodate Apple's fees. For this reason, I recommend upgrading through the website)
12 |
13 | I want the pricing to feel simple, straightforward, and obvious.
14 |
15 | 📈 Cards you add will increment the card count
16 |
17 | 📉 Cards you remove will decrement the card count
18 |
19 | 👯♀️ For easier collaboration, if you're editing a space that was created by an upgraded user, your card count won't increase. You can check whether your card limit will change by clicking your user icon while in a space.
20 |
21 | 
22 |
23 | ## Why a Subscription?
24 |
25 | To build and maintain a service with ongoing costs that increase over time (servers etc), subscription pricing is the only economically sustainable business model to ensure that Kinopio is supported for the long-term.
26 |
27 | ## Discount for Students and Those With Financial Need
28 |
29 | I want everyone to be able to use Kinopio. If you're a student, or you can't afford the subscription because of where you live, or any other personal circumstances, please [email me](mailto:hi@kinopio.club) for a 50% discount.
--------------------------------------------------------------------------------
/posts/how-your-data-is-stored.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: How Your Data is Stored?
3 | tags: ['About Kinopio']
4 | color: 'mediumaquamarine'
5 | ---
6 |
7 | ## Without an Account
8 |
9 | Your user and spaces data lives entirely on your own computer, in your browser localStorage. Because it is not sent to a server, you can't share your spaces or access your spaces from another device.
10 |
11 | 🚒 If you clear your browser's cache and delete your cookies you will be removing your kinopio data.
12 |
13 | To keep your data safe, share and collaborate, and edit your spaces from all your devices sign up for an account at any time.
14 |
15 | ## With an Account
16 |
17 | Your user and spaces data lives on both your own computer and on the kinopio servers.
18 |
19 | You can safely clear your browser cache and cookies without losing any data.
20 |
21 | ## See also
22 |
23 | - [Privacy Policy](/posts/privacy-policy/)
24 |
--------------------------------------------------------------------------------
/posts/importing.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Importing
3 | tags: ['Importing and Exporting']
4 | color: 'lightskyblue'
5 | ---
6 |
7 | ## Import from Exported File
8 |
9 | You can import the JSON of exported spaces you've saved to your computer with `Share → Import → [JSON] Select File`
10 |
11 | 
12 |
13 | ## Importing an Are.na Channel
14 |
15 | Import [are.na](http://are.na) channels to make collaborative mood boards
16 |
17 | 
18 |
19 | `Share → Import → Are.na Channel`
20 |
21 | 
22 |
23 |
24 | If this is your first time using this feature, you'll be redirected to an Are.na authentication page. Afterwards you'll be redirected back to Kinopio and are able to input a channel URL to import (eg `https://www.are.na/kinopio/kinopio-moods`).
25 |
26 | > Because you've authenticated with Are.na, you're able to import any channel you have access to – including your own private channels, and all open or closed channels.
27 |
28 | ## Example Imported Channel Spaces
29 |
30 | - [Hirō Isono](https://kinopio.club/hir-isono-EGpVHhIiGZIeSi02zAUjY)
31 |
--------------------------------------------------------------------------------
/posts/inbox.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Collecting Ideas in the Inbox
3 | tags: ['How to Use']
4 | color: 'khaki'
5 | ---
6 |
7 | Use an Inbox space to collect thoughts, todos, and ideas that don't have a place to go yet. Your Inbox will appear above all your other spaces and favourites so it's always close at hand
8 |
9 | (if you don't already have an Inbox, you can add one from '+ New' button)
10 |
11 | 
12 |
13 | ## Add Ideas and URLs from Anywhere
14 |
15 | Add anything to your inbox on the go with the Kinopio [browser extensions](http://localhost:8081/posts/extensions/), or through the system share sheet if you have the [iOS app](https://apps.apple.com/us/app/kinopio/id6448743101) installed
16 |
--------------------------------------------------------------------------------
/posts/inviting-collaborators-to-a-space.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Inviting Collaborators to a Space
3 | tags: ['Collaboration']
4 | color: 'violet'
5 | ---
6 |
7 | Invite Collaborators to give them edit access to the contents of your space. Inviting is especially useful for working together on `Private` spaces, but you can do it with any privacy setting.
8 |
9 | You should think of collaborators as people you fully trust because they'll be able to edit and remove almost everything in a space.
10 |
11 | > If collaborating with people you don't know or fully trust, consider changing your space privacy to `Open` and sharing the normal URL instead. That way others will only be able to add and edit the cards that they've created.
12 |
13 | ## Invite Collaborator
14 |
15 | Send someone a collaborator invite by copying the URL found in `Spaces → Invite Collaborators`
16 |
17 | 
18 |
19 | ## Collaborators can
20 |
21 | - Create, move, remove and edit all cards and connections
22 | - Invite other collaborators
23 | - Remove other collaborators
24 |
25 | ## But collaborators cannot
26 |
27 | - Remove the space
28 | - Rename the space
29 | - Remove the creator of the space from it
--------------------------------------------------------------------------------
/posts/keyboard-shortcuts.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Keyboard Shortcuts
3 | tags: ['Getting Around']
4 | color: 'pink'
5 | ---
6 |
7 | ## Enter and Shift-Enter to make card trees
8 |
9 |
12 |
13 | This allows you to quickly make structures like
14 |
15 | 
16 |
17 | ## Arrow keys to focus on cards, Enter to edit
18 |
19 |
22 |
23 | ## Select, then copy and paste cards
24 |
25 |
28 |
29 |
30 | You can find a complete list of keyboard shortcuts in `About → Keyboard Shortcuts`. Or quick access them by pressing `?` while not focused on anything else.
31 |
32 | 
33 |
--------------------------------------------------------------------------------
/posts/links-in-cards.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Links in Cards
3 | tags: ['Advanced Use']
4 | color: '#b9a8ff'
5 | ---
6 |
7 |
10 |
11 | So you might know that adding a URL (like [spacejam.com](https://spacejam.com)) to a card enables a `→` link button on the card.
12 |
13 | ## Multiple URLs
14 |
15 |
18 |
19 | In cards with multiple URLs (e.g. images, audio, and links), if a link URL is available, the `→` card button use the link, otherwise it'll use the first URL in the card.
20 |
21 | So if I have a card with an image url and a link like:
22 |
23 | > https://us-east-1.linodeobjects.com/kinopio-uploads/prwduNJJz32Dn6C1VopLX/image.png
24 | this is an image with a link to
25 | folklore.org
26 |
27 | The `→` will link to [folklore.org](folklore.org)
28 |
29 |
30 | ## Hiding Links
31 |
32 |
35 |
36 | There are times when you might not want to display the link URL on a card, but still have a `→` button for a clickable link.
37 |
38 | You can toggle hiding links in a card by clicking the `👀 Link` button
39 |
--------------------------------------------------------------------------------
/posts/locking.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Locking Cards
3 | tags: ['Advanced Use']
4 | color: '#b9a8ff'
5 | ---
6 |
7 | Prevent cards from being accidentally moved, edited, or deleted by locking them.
8 |
9 | Helpful for backgrounds, grouping your space into sections, or for defining content that your collaborators shouldn't edit.
10 |
11 | Lock cards or multiple selected cards through `Styles → Lock`. Unlock cards by clicking the `Lock button` on the card.
12 |
13 |
16 |
--------------------------------------------------------------------------------
/posts/managing-collaborators.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Managing Collaborators
3 | tags: ['Collaboration']
4 | color: 'violet'
5 | ---
6 |
7 | You, or your collaborators, can view the list of space collaborators from `Share`.
8 |
9 | You'll be able to get more info on each collaborator, or favorite them, as well as remove them from the space.
10 |
11 | 
12 |
13 | > For security reasons, when you remove a collaborator from a space unused invite URLs will become invalid. You'll need to send out a new invite URL. This won't affect existing collaborators.
--------------------------------------------------------------------------------
/posts/minimap.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Minimap
3 | tags: ['Getting Around']
4 | color: 'pink'
5 | ---
6 |
7 | Get a birds eye view perspective and jump around big spaces with the minimap. There are two ways to use the minimap, while panning and from the sidebar.
8 |
9 | ## While Panning
10 |
11 | The minimap will display while panning mode is active – when either the space-key or the right-mouse button is held down.
12 |
13 |
16 |
17 |
18 | ## From the Footer
19 |
20 | Clicking the little minimap button in the footer will also display the minimap and a list of boxes sorted by their starting `y` positions. You can click and drag on the minimap to quickly move around, and click on a box to jump to its position.
21 |
22 |
23 | 
24 |
17 |
18 | ## Notification Settings
19 |
20 | If you don't want to be emailed notifications, you can unsubscribe with the link at the bottom of the email, or in your `User → Settings`
21 |
22 | 
--------------------------------------------------------------------------------
/posts/offline-support.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Offline Support
3 | tags: ['About Kinopio']
4 | color: 'mediumaquamarine'
5 | ---
6 |
7 | Kinopio was designed to save even without a reliable connection.
8 |
9 | If you have Kinopio open and lose connectivity (e.g. going through a subway tunnel), you can continue editing your spaces as you normally would. Once you're online again, the changes you've made will be sent to the server.
10 |
11 | 
12 |
13 | Features that require active connectivity to a server, including collaboration, will not be available while you're offline.
14 |
15 | Full offline support, including the ability to open Kinopio while offline is on the longer term [Roadmap](https://kinopio.club/-kinopio-roadmap-6TRE21gchHI7alHLuwzd5)
--------------------------------------------------------------------------------
/posts/posts.json:
--------------------------------------------------------------------------------
1 | { "layout": "layouts/post.pug" }
--------------------------------------------------------------------------------
/posts/press-kit.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Press Kit
3 | tags: ['Press']
4 | color: '#c4c4c4'
5 | ---
6 |
7 | [Download kinopio-assets.zip (17mb)](/assets/posts/press-kit/kinopio-assets.zip)
8 |
9 | 
10 | 11 | 12 | 15 |
16 | 17 | 20 |
21 | 22 | 25 |
26 | 27 | 30 |
31 | 32 | 35 |
36 | 37 | 40 |
41 | 42 | ## Description 43 | 44 | [Kinopio](http://kinopio.club) is the spatial thinking tool for building new ideas and solving hard problems. 45 | 46 | By making it easy to get your thoughts out and form connections organically, Kinopio works the way your mind works. 47 | 48 | [Uses of Kinopio](/posts/uses-of-kinopio/) 49 | 50 | ## History 51 | 52 | Before Kinopio, I was the co-creator of Glitch.com, where I designed and built its original user interfaces. 53 | 54 | In 2019, I quit my job to create a different kind of productivity tool. Instead of being about tracking tasks or traditional project management, Kinopio is designed to help you organize complex thoughts, create new ideas, and make hard decisions. 55 | 56 | [Who Makes Kinopio?](/posts/who-makes-kinopio/) 57 | 58 | ## Features 59 | 60 | - No sign up required to use 61 | - A unique and intuitive interface that's easy to use 62 | - Works on both desktops and phones 63 | - [Explore] community created spaces and templates 64 | - Shareable public spaces 65 | - Invite collaborators to private spaces 66 | - keyboard shortcuts for power users 67 | 68 | ## See also 69 | 70 | - [Hello Kinopio blog post](http://pketh.org/hello-kinopio.html) 71 | - [Roadmap](https://kinopio.club/-kinopio-roadmap-6TRE21gchHI7alHLuwzd5) 72 | - [Design History](https://www.are.na/kinopio/kinopio-design) 73 | -------------------------------------------------------------------------------- /posts/privacy-options.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Privacy Options 3 | tags: ['Advanced Use'] 4 | color: '#b9a8ff' 5 | --- 6 | Who Can See What I Make? 7 | 8 | ## If you haven't made an account 9 | 10 | If you haven't signed up yet, then only you can see what you make regardless of privacy setting. 11 | 12 | ## If you are signed up 13 | 14 | If you have an account, then the space privacy setting dictates who can see what. You can change space privacy from `Spaces → Privacy icon`. Each setting in the privacy dialog explains who'll be able to see and edit your space. 15 | 16 |  17 | 18 | p.s. New spaces default to `Private` -------------------------------------------------------------------------------- /posts/privacy-policy.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Privacy Policy 3 | tags: ['Policies and Privacy'] 4 | color: 'salmon' 5 | --- 6 | 7 | > Friends don't spy on friends. 8 | 9 | - Kinopio won’t show you ads of any kind, or sell your data. 10 | - Children, and anyone else, will be able to use Kinopio anonymously. Without an account, none of your data will be transmitted to Kinopio servers. (👀 [How Your Data is Stored](/posts/how-your-data-is-stored/)) 11 | - To enable you to share spaces and collaborate, you will need to create an account. Your user data and spaces will then be hosted on AWS (via Heroku). 12 | - User uploads and server logs for debugging are stored in Linode Object Storage. Server logs do not contain personal information, and are deleted after 3 days. 13 | - To enable billing for paid plans, only the user information needed to process payments will be shared with Stripe. 14 | - No cookies are used at all. LocalStorage is used to save your info. Unlike cookies, other websites cannot access your Kinopio localStorage data. 15 | - The only analytics used are server-side [Netlify Analytics](https://www.netlify.com/products/analytics/). Netlify does not allow me to uniquely identify anyone. 16 | - Through the `Removed` dialog, you can permanently delete cards or spaces. When you do, all uploads associated with those cards are also deleted. 17 | - You can permanently delete all of your user data at anytime. 18 | 19 | --- 20 | 21 | [Track changes for this page](https://github.com/kinopio-club/kinopio-help/blob/master/posts/privacy-policy.md) 22 | 23 | All Policies 24 | - [Privacy Policy](/posts/privacy-policy/) 25 | - [Terms of Service](/posts/terms-of-service/) 26 | - [Use Restrictions Policy](/posts/use-restrictions-policy/) 27 | -------------------------------------------------------------------------------- /posts/refund-policy.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Refund Policy 3 | tags: ['Policies and Privacy'] 4 | color: 'salmon' 5 | --- 6 | 7 | Kinopio is created by me, [Pirijan](/posts/who-makes-kinopio/), and I don't want your money unless you're happily using it. 8 | 9 | You can use the free version forever until you hit the [free limit](/posts/how-much-does-kinopio-cost/). And if you do subscribe and would like a refund for any reason, please [email me](mailto:hi@kinopio.club) within 30 days and I'll refund your last payment. 10 | -------------------------------------------------------------------------------- /posts/reset-your-password.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Reset Your Password 3 | tags: ['User Settings'] 4 | color: '#deb1ff' 5 | --- 6 | 7 | If you've lost your password, you can set a new password. 8 | 9 | 1. If you're currently signed in, sign out by clicking `You → Sign Out` 10 | 2. Click `Sign Up or In` 11 | 3. In the dialog that appears, click `Sign In` 12 | 4. Click `Forgot Password?` 13 | 5. Enter the email address associated with your account, then `Reset Password` 14 | 6. A password reset email will be sent to you. Follow the instructions in the email to set a new password. 15 | 7. Sign in with your new password -------------------------------------------------------------------------------- /posts/restoring-removed-cards-and-spaces.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Restoring Removed Cards and Spaces 3 | tags: ['Advanced Use'] 4 | color: '#b9a8ff' 5 | --- 6 | 7 | If you've accidentally removed/deleted a card or space, you can restore it back through `Removed`. In the `Cards` tab, you'll be able to restore or permanently remove cards that have been removed in the current space. 8 | 9 |  10 | 11 | > A permanently removed card or space is immediately deleted from the database and cannot be restored, so be careful. -------------------------------------------------------------------------------- /posts/selecting-and-bulk-actions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Paint Selecting and Bulk Actions 3 | tags: ['How to Use'] 4 | color: 'khaki' 5 | date: 2020-04-01 6 | --- 7 | 8 | You can move or edit multiple cards and connections at once by painting over them. 9 | 10 | 13 | 14 | ## Painting over connections lets you make them all the same type quickly 15 | 16 | 20 | 21 | ## Painting over cards also lets you move those cards to another space 22 | 23 |  24 | -------------------------------------------------------------------------------- /posts/sharing-spaces.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sharing Spaces 3 | tags: ['How to Use'] 4 | color: 'khaki' 5 | --- 6 | 7 | Share your spaces with the world by copying the URL provided in the `Share` dialog. 8 | 9 | 10 | 13 |
14 | 15 | > If your space privacy is set to `Private`, a share URL is not shown because only you and your collaborators will be able to access it. -------------------------------------------------------------------------------- /posts/styling-cards.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Styling Cards with Colors, Formatting, Frames and more 3 | tags: ['How to Use'] 4 | color: 'khaki' 5 | --- 6 | 7 | 8 | Card → `Style` lets you add heading formatting, tags, colors, and more. It's a powerful way to make cards more expressive and functional. 9 | 10 |  11 | 12 | You can also paint multiple cards to `Style` them together, 13 | 14 | 17 | 18 | Happy styling ヾ(＾∇＾) 19 | -------------------------------------------------------------------------------- /posts/tags.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tags 3 | tags: ['Advanced Use'] 4 | color: '#b9a8ff' 5 | --- 6 | 7 | Add `[[tags]]` to your cards to make them stand out and connect ideas across spaces. 8 | 9 | To add a tag into a card you can either type `[[` and start typing your tag, then `tab` or `enter` to complete it. You can also add tags to a card or a paint selection through the [Style](/posts/styling-cards/) menu. 10 | 11 | 14 | 15 | 18 | 19 | ## Backlinking 20 | 21 | Click on a card tag to change it's color or to jump to other cards with that tag in other spaces. 22 | 23 |  24 | 25 | Use the sidebar to get an see all your tags and jump to matching cards. 26 | 27 |  28 | 29 | 30 | ## Some Ways to Use Tags 31 | 32 | - Group cards by `[[project]]`, or `[[team]]`, or `[[assignee]]` 33 | - Connect `[[related]]` cards across spaces 34 | - `[[Label]]` important cards that you want to stand out in your space 35 | -------------------------------------------------------------------------------- /posts/templates.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Using Templates and Creating Your Own 3 | tags: ['Community'] 4 | color: 'burlywood' 5 | --- 6 | Get started with templates by clicking the
template button in the top left.
7 |
8 | 
9 |
10 | # Creating and Using Personal Templates
11 |
12 | Make your own spaces into easy to duplicate personal templates. Such as,
13 |
14 | - Class notes with different templates per course
15 | - Organizing research and writing
16 | - Meeting prep
17 |
18 | I'm sure you'll surprise me with more ~
19 |
20 |
23 |
--------------------------------------------------------------------------------
/posts/terms-of-service.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Terms of Service
3 | tags: ['Policies and Privacy']
4 | color: 'salmon'
5 | ---
6 |
7 | > I endeavor to treat everyone fairly, ethically, and honestly. But for the possible but unlikely bad actor, this boring legal document exists.
8 |
9 | - When I say “Company”, “we”, “our”, or “us” in this document, I'm referring to Kinopio LLC.
10 | - When we say “Services”, we mean any product created and maintained by Kinopio LLC.
11 |
12 | When you use our Services, now or in the future, you are agreeing to the latest Terms of Service. That’s true for any of our existing and future products and all features that we add to our Services over time. There may be times where we do not exercise or enforce any right or provision of the Terms of Service; in doing so, we are not waiving that right or provision. These terms do contain a limitation of our liability.
13 |
14 | If you violate of any of the terms, we may terminate your account. That’s a broad statement and it means you need to place a lot of trust in us. We do our best to deserve that trust by being open about who we are, how we work, and keeping an open door to your feedback.
15 |
16 | ## Contents
17 |
18 | - [Account Terms](#accountTerms)
19 | - [Payments](#payments)
20 | - [Refunds](#refunds)
21 | - [Payment Cancellation](#paymentCancellation)
22 | - [Account Deletion](#accountDeletion)
23 | - [Uptime, Security, and Privacy](#uptimeSecurityAndPrivacy)
24 | - [Copyright and Content Ownership](#copyrightAndContentOwnership)
25 | - [Features and Bugs](#FeaturesAndBugs)
26 | - [Services Adaptations and API Terms](#servicesAdaptationsAndAPITerms)
27 | - [Liability](#liability)
28 |
29 |
30 | ## Account Terms
31 |
32 | 1. You are responsible for maintaining the security of your account and password. The Company cannot and will not be liable for any loss or damage from your failure to comply with this security obligation.
33 | 2. You may not use the Services for any purpose outlined in our [Use Restrictions policy](/posts/use-restrictions-policy/).
34 | 3. You are responsible for all content posted and activity that occurs under your account. That includes content posted by others who either: (a) have access to your login credentials; or (b) have their own logins under your account.
35 | 4. You must be a human. Accounts registered by “bots” or other automated methods are not permitted.
36 |
37 |
38 | ## Payments
39 |
40 | 1. We'll only ask for your credit when you want to, or need to, pay to upgrade your account. We will charge your card immediately and your billing cycle starts on the day of upgrade.
41 | 2. All fees are exclusive of all taxes, levies, or duties imposed by taxing authorities. Where required, we will collect those taxes on behalf of the taxing authority and remit those taxes to taxing authorities.
42 |
43 |
44 | ## Refunds
45 |
46 | 1. If you were just charged for your next month of service but you meant to cancel, we’re happy to refund that extra charge.
47 | 2. If you forgot to cancel your account a couple months ago and you haven’t used it since then, we’ll give you a full refund for a few back months. No problem.
48 | 3. If you tried one of our products for a couple months and you just weren’t happy with it, you can have your money back.
49 |
50 |
51 | ## Payment Cancellation
52 |
53 | 1. You are solely responsible for properly canceling your paid plan. Our service provides a simple no-questions-asked cancel account button. An email request to cancel your account is not automatically considered cancellation. If you need help cancelling your account, email [hi@kinopio.club](mailto:hi@kinopio.club).
54 | 2. All of your content will still be accessible from the Services immediately upon cancellation. However, you won't be able to add new data unless your account is below the unpaid plan limits.
55 | 3. If you cancel the Service before the end of your current paid up month, your cancellation will take effect immediately, and you will not be charged again. We do not automatically prorate unused time in the last billing cycle. See the `Refunds` section above for more details.
56 |
57 |
58 | ## Account Deletion
59 |
60 | 1. You are solely responsible for properly deleting your account. Our service provides a simple no-questions-asked `Remove All Your Data` button. An email request to cancel your account is not automatically considered deletion. If you need help deleting your account, email [hi@kinopio.club](mailto:hi@kinopio.club).
61 | 2. Upon deletion, your data is immediately and permanently deleted from the main database. Within 30 days, all content will be permanently deleted from and logs. Within 60 days, all content will be permanently deleted from our backups. We cannot recover this information once it has been permanently deleted.
62 | 3. We have the right to suspend or terminate your account and refuse any and all current or future use of our Services for any reason at any time. Suspension means you and any other users on your account will not be able to access the account or any content in the account. Termination will furthermore result in the deletion of your account or your access to your account, and the forfeiture and relinquishment of all content in your account. We also reserve the right to refuse the use of the Services to anyone for any reason at any time. We have this clause because statistically speaking, out of the hundreds of thousands of accounts on our Services, there is at least one doing something nefarious. There are some things we staunchly stand against and this clause is how we exercise that stance. For more details, see our [Use Restrictions policy](/posts/use-restrictions-policy/).
63 | 4. Verbal, physical, written or other abuse (including threats of abuse or retribution) of Company employee or officer will result in immediate account termination.
64 |
65 |
66 | ## Uptime, Security, and Privacy
67 |
68 | 1. Your use of the Services is at your sole risk. We provide these Services on an “as is” and “as available” basis. We do not offer service-level agreements for most of our Services – but do take uptime of our applications seriously.
69 | 2. We reserve the right to temporarily disable your account if your usage significantly exceeds the average usage of other customers of the Services. Of course, we’ll reach out to the account owner before taking any action except in rare cases where the level of use may negatively impact the performance of the Service for other customers.
70 | 3. We take many measures to protect and secure your data through backups, redundancies, and encryption. We enforce encryption for data transmission from the public Internet.
71 | 4. When you use our Services, you entrust us with your data. We take that trust to heart. You agree that Kinopio may process your data as described in our Privacy Policy and for no other purpose. We can access your data for the following reasons:
72 | - To help you with support requests you make. We’ll ask for express consent before accessing your account.
73 | - To find public spaces that would be interesting to others to show in Explore. Owners of those spaces will be sent an email asking them if they would be interested in adding their space to Explore. Private spaces are never accessed without explicit owner consent.
74 | - To safeguard Kinopio. We’ll look at logs and metadata as part of our work to ensure the security of your data and the Services as a whole. If necessary, we may also access accounts as part of an abuse report investigation.
75 | 5. We use third party vendors and hosting partners to provide the necessary hardware, software, networking, storage, and related technology required to run the Services. The subprocessors are:
76 |
77 | - [Heroku](https://devcenter.heroku.com/articles/security-privacy-compliance) Cloud hosting and database.
78 | - [Amazon Web Services](https://aws.amazon.com/compliance/gdpr-center) Service provider used by Heroku.
79 | - [PostMark](https://postmarkapp.com/eu-privacy) Email sending.
80 | - [Stripe](https://stripe.com/privacy) Payment processing.
81 | - [Linode](https://www.linode.com/legal-privacy) Object Storage for user uploads and server log storage.
82 |
83 |
84 | ## Copyright and Content Ownership
85 |
86 | 1. All content posted on the Services must comply with U.S. copyright law.
87 | 2. We claim no intellectual property rights over the material you provide to the Services. All materials uploaded remain yours.
88 | 3. We do not pre-screen content, but reserve the right (but not the obligation) in our sole discretion to refuse or remove any content that is available via the Service.
89 | 4. The names, look, and feel of the Services are copyright© to the Company. All rights reserved. You may not duplicate, copy, or reuse any portion of the HTML, CSS, JavaScript, or visual design elements without express written permission from the Company.
90 | 5. You agree not to reproduce, duplicate, copy, sell, resell or exploit any portion of the Services, use of the Services, or access to the Services without the express written permission by the Company.
91 | 6. You must not modify another website so as to falsely imply that it is associated with the Services or the Company.
92 |
93 |
94 | ## Features and Bugs
95 |
96 | We design our Services with care, based on our own experience and the experiences of customers who share their time and feedback. However, there is no such thing as a service that pleases everybody. We make no guarantees that our Services will meet your specific requirements or expectations.
97 |
98 | We also test all of our features extensively before shipping them. As with any software, our Services inevitably have some bugs. We track the bugs reported to us and work through priority ones, especially any related to security or privacy. Not all reported bugs will get fixed and we don’t guarantee completely error-free Services.
99 |
100 |
101 | ## Services Adaptations and API Terms
102 |
103 | We offer Application Program Interfaces (“API”s) for our Service. Any use of the API, including through a third-party product that accesses the Services, is bound by the terms of this agreement plus the following specific terms:
104 |
105 | 1. You expressly understand and agree that we are not liable for any damages or losses resulting from your use of the API or third-party products that access data via the API.
106 | 2. Abuse or excessively frequent requests to the Services via the API may result in the temporary or permanent suspension of your account’s access to the API. The Company, in its sole discretion, will determine abuse or excessive usage of the API. If we need to suspend your account’s access, we will attempt to warn the account owner first. If your API usage could or has caused downtime, we may cut off access without prior notice.
107 |
108 |
109 | ## Liability
110 |
111 | We mention liability throughout these Terms but to put it all in one section:
112 |
113 | ***You expressly understand and agree that the Company shall not be liable, in law or in equity, to you or to any third party for any direct, indirect, incidental, lost profits, special, consequential, punitive or exemplary damages, including, but not limited to, damages for loss of profits, goodwill, use, data or other intangible losses (even if the Company has been advised of the possibility of such damages), resulting from: (i) the use or the inability to use the Services; (ii) the cost of procurement of substitute goods and services resulting from any goods, data, information or services purchased or obtained or messages received or transactions entered into through or from the Services; (iii) unauthorized access to or alteration of your transmissions or data; (iv) statements or conduct of any third party on the service; (v) or any other matter relating to this Terms of Service or the Services, whether as a breach of contract, tort (including negligence whether active or passive), or any other theory of liability.***
114 |
115 | In other words: choosing to use our Services does mean you are making a bet on us. If the bet does not work out, that’s on you, not us. We do our darnedest to be as safe a bet as possible through careful management of the business; investments in security, infrastructure, and talent; and in general giving a damn. If you choose to use our Services, thank you for betting on us. If you have a question about any of the Terms of Service, please email [hi@kinopio.club](mailto:hi@kinopio.club)
116 |
117 | ---
118 |
119 | This document was originally adapted from [Basecamp's](https://basecamp.com/about/policies/terms) Terms of Service.
120 |
121 | [Track changes for this page](https://github.com/kinopio-club/kinopio-help/blob/master/posts/terms-of-service.md)
122 |
123 | All Policies
124 | - [Privacy Policy](/posts/privacy-policy/)
125 | - [Terms of Service](/posts/terms-of-service/)
126 | - [Use Restrictions Policy](/posts/use-restrictions-policy/)
127 |
--------------------------------------------------------------------------------
/posts/use-restrictions-policy.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Use Restrictions Policy
3 | tags: ['Policies and Privacy']
4 | color: 'salmon'
5 | ---
6 |
7 | Kinopio helps people understand themselves and be understood by sharing thoughts and ideas. But an expressive tool is also one that can be used maliciously.
8 |
9 | > This document defines the shady stuff you cannot use Kinopio for.
10 |
11 | - When I say “Company”, “we”, “our”, or “us” in this document, I'm referring to Kinopio LLC.
12 |
13 | ## Restricted purposes
14 |
15 | - **Child exploitation, sexualization, or abuse**: We don’t tolerate any activities that create, disseminate, or otherwise cause child abuse. Keep away and stop. Just stop.
16 | - **Doxing**: If you are using Kinopio products to share other peoples’ private personal information for the purposes of harassment, we don’t want anything to do with you.
17 | - **Infringing on intellectual property**: You can’t use Kinopio to make or disseminate work that uses the intellectual property of others beyond the bounds of fair use.
18 | - **Malware or spyware**: Code for good, not evil. If you are using our products to make or distribute anything that qualifies as malware or spyware, begone.
19 | - **Phishing or otherwise attempting fraud**: It is not okay to lie about who you are or who you affiliate with to steal from, extort, or otherwise harm others.
20 | - **Spamming**: No one wants unsolicited commercial emails. We don’t tolerate folks (including their bots) using Kinopio for spamming purposes.
21 | - **Violence, or threats thereof**: If an activity qualifies as violent crime in the United States or where you live, you may not use Kinopio to plan, perpetrate, or threaten that activity.
22 |
23 | We’ve outlined these restrictions to be clear about what we won’t stand for. That said, this list is by no means exhaustive. We will make changes over time.
24 |
25 | ## How to report abuse
26 |
27 | See someone using Kinopio for one of the restricted purposes? Let us know by emailing [hi@kinopio.club](mailto:hi@kinopio.club) and we will investigate. If you’re not 100% sure, report it anyway.
28 |
29 | Please share as much as you are comfortable with about the account, the content or behavior you are reporting, and how you found it. Sending us a URL or screenshots is super helpful. We will not disclose your identity to anyone associated with the reported account.
30 |
31 | Kinopio will respond within two business days to let you know we’ve begun investigating. We will also let you know the outcome of our investigation (unless you ask us not to or we are not allowed to under law).
32 |
33 | Depending on the violation, the following may happen:
34 |
35 | - The space will be removed
36 | - The violating user's account will be removed
37 | - The offender may be contacted
38 | - Law enforcement may be contacted
39 |
40 | ---
41 |
42 | (This document was originally adapted from [Basecamp's](https://basecamp.com/about/policies/abuse) Use Restrictions Policy.)
43 |
44 | [Track changes for this page](https://github.com/kinopio-club/kinopio-help/blob/master/posts/use-restrictions-policy.md)
45 |
46 | All Policies
47 | - [Privacy Policy](/posts/privacy-policy/)
48 | - [Terms of Service](/posts/terms-of-service/)
49 | - [Use Restrictions Policy](/posts/use-restrictions-policy/)
50 |
--------------------------------------------------------------------------------
/posts/using-explore.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Discover Community Spaces with Explore and Live
3 | tags: ['Community']
4 | color: 'burlywood'
5 | ---
6 |
7 | ## Explore
8 |
9 | Explore is a list of cool spaces made and explicitly shared by other people (like you) with the Kinopio community.
10 |
11 | To add or remove your own cool space to Explore, toggle `Spaces → Add to Explore`.
12 |
13 | 
14 |
15 |
16 | ## Live
17 |
18 | Live Spaces shows public spaces that are currently being edited. It's a fun way to discover new spaces and community creators.
19 |
20 | 
21 |
22 | Space appear in Live when both:
23 |
24 | - the space privacy is either public or open
25 | - a member of the space (if public), or any signed in user (if open), paints or edits cards in the space
26 |
27 | Spaces get removed from Live when either:
28 |
29 | - the live user moves to another space
30 | - the privacy of the space is changed to private
31 | - the last received editing event for the space is over an hour old
32 |
--------------------------------------------------------------------------------
/posts/who-makes-kinopio.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Who Makes Kinopio?
3 | tags: ['About Kinopio']
4 | color: 'mediumaquamarine'
5 | ---
6 |
7 | (*・_・)⊃══✫⌒*･ﾟ✲
8 |
9 | Hi, my name is Pirijan and I created Kinopio to help people and teams create new ideas and understand why they think the way they do.
10 |
11 | Before Kinopio, I was the co-creator of Glitch.com, where I designed and built its original user interfaces. I believe in software that's designed by artists, and built by craftspeople.
12 |
13 | You can read my blog, where I write more about building Kinopio, at [pketh.org](http://pketh.org), or follow me on Twitter [@pketh](http://twitter.com/pketh)
14 |
15 | I hope you enjoy using Kinopio and find it useful,
16 |
17 | xoxo
18 |
--------------------------------------------------------------------------------
/styles/about.styl:
--------------------------------------------------------------------------------
1 | // About
2 |
3 | .about
4 | h1
5 | font-size 36px
6 | margin-top 1rem
7 | h2
8 | font-size 26px
9 | font-weight bold
10 | img,
11 | video
12 | width 100%
13 | max-width 560px
14 | margin-bottom 0
15 | position relative
16 | .intro-video
17 | background-color #38693e
18 | max-width 560px
19 | max-height 290px
20 | .uses
21 | span
22 | vertical-align middle
23 | margin-right 6px
24 | .badge
25 | display inline-block
26 | vertical-align middle
27 | margin-right 6px
28 | cursor pointer
29 | .triangle
30 | width 0
31 | height 0
32 | border-width 0 10px 11px 10px // matches triangleWidth in examples.js
33 | border-color transparent transparent var(--code-background) transparent
34 | border-style solid
35 | position absolute
36 | left 72px
37 | top -11px
38 | .example
39 | width 100%
40 | background var(--code-background)
41 | border-radius 10px
42 | padding 1rem
43 | display inline-block
44 | margin-top 1rem
45 | position relative
46 | figure
47 | display inline-flex
48 | margin 0
49 | align-items flex-start
50 | video,
51 | img
52 | width 60%
53 | margin 0
54 | max-width 461px
55 | max-height 280px
56 | background var(--page-background)
57 | img.arena
58 | width 20px
59 | vertical-align 0
60 | margin 0
61 | margin-right 5px
62 | background transparent
63 | img.sunglasses
64 | width 25px
65 | vertical-align -2px
66 | margin 0
67 | margin-right 5px
68 | background transparent
69 | figcaption
70 | max-width calc(40% - 1rem)
71 | margin-left 1rem
72 | p:first-child
73 | margin-top 0
74 | @media(max-width 500px)
75 | figure
76 | display block
77 | video,
78 | img
79 | width 100%
80 | margin-bottom 1rem
81 | figcaption
82 | max-width initial
83 | margin-left 0
84 |
85 |
86 | section.uses,
87 | section.features,
88 | section.about-me
89 | margin-top 4rem
90 |
91 | .grid-container
92 | display grid
93 | grid-auto-rows 1fr
94 | grid-template-columns 1fr 1fr
95 | grid-template-rows 1fr 1fr
96 | gap 1em 1em
97 | grid-template-areas:
98 | ". ."
99 | ". ."
100 | video
101 | background var(--code-background)
102 | max-width 392px
103 | max-height 275px
104 | p
105 | margin-top 0
106 | @media(max-width 392px)
107 | display block
108 | video
109 | margin-bottom 2rem
110 |
111 | .mobile-video
112 | max-width 300px
113 | max-height 519px
114 |
115 | .cta-bottom
116 | margin-top 2rem
117 |
118 | .cta
119 | a + a
120 | margin-left 6px
121 |
122 | .producthunt-badge
123 | margin-top 2rem
124 | width 250px
125 | height 54px
126 |
127 | section.about-me
128 | .badge
129 | background-color var(--tertiary)
130 | display inline-flex
131 | margin-bottom 6px
132 | margin-right 6px
133 | img.sunglasses
134 | width 25px
135 | vertical-align -2px
136 | margin 0
137 | margin-right 5px
138 | .spaces
139 | .user
140 | margin-right 4px
141 | background-image url("/assets/anon-avatar.svg")
142 | background-repeat no-repeat
143 | width 18px
144 | height 18px
145 | background-color #91ffff
146 | border-radius 5px
147 | background-position center
148 | background-size 65%
149 | vertical-align middle
150 | .signature
151 | width 85px
152 | vertical-align middle
153 | margin-left 5px
--------------------------------------------------------------------------------
/styles/guides.styl:
--------------------------------------------------------------------------------
1 | .guides
2 | p.intro
3 | margin-bottom 0
4 |
5 | h1
6 | font-family Aureum, serif
7 | display inline-block
8 | position relative
9 | margin-bottom 0
10 |
11 | ul
12 | margin-top 0
13 | li
14 | margin 0
15 | width max-content
16 | &:first-child
17 | margin-top 0
18 | &:hover
19 | h1
20 | text-decoration underline
21 | img
22 | transform rotate(3deg)
23 | a
24 | position relative
25 | color var(--primary)
26 | background none
27 | padding initial
28 | border-radius 0
29 | box-shadow none
30 | &:hover
31 | box-shadow none
32 | img
33 | max-width 100px
34 | border-radius 5px
35 | position absolute
36 | right -112px
37 | top -36px
38 | transition all 0.1s
39 | p
40 | margin-bottom 0
41 | .user
42 | margin-right 6px
43 |
44 | h2.badge
45 | font-weight normal
46 | margin 0
47 | margin-top 2em
48 |
49 | .badge
50 | &.life
51 | background-color #b9a8ff
52 | &.work-school
53 | background-color #ffbfcb
54 |
55 | .user
56 | margin-right 4px
57 | background-image url("/assets/anon-avatar.svg")
58 | background-repeat no-repeat
59 | width 18px
60 | height 18px
61 | background-color #91ffff
62 | border-radius 5px
63 | background-position center
64 | background-size 65%
65 | vertical-align 2px
66 | display inline-block
67 |
68 | .kinopio-embed
69 | height 420px
70 | width 100%
71 | margin-top 2em
72 | margin-bottom 4em
73 | border-radius 5px
74 | .embed-title
75 | border-radius 5px
76 | border-bottom-left-radius 0
77 | border-bottom-right-radius 0
78 | background var(--code-background)
79 | padding 8px 10px
80 | .badge
81 | display inline
82 | box-shadow none
83 | margin-left 5px
84 | iframe
85 | display block
86 | border-radius 5px
87 | border-top-left-radius 0
88 | border-top-right-radius 0
89 | height 100%
90 | width 100%
91 | border 0
92 | background white
93 |
94 | article
95 | h1
96 | font-size 48px
97 | display block
98 | margin-top 0
99 | margin-bottom 1em
100 | aside.info
101 | border-radius 5px
102 | width 200px
103 | margin-bottom 3em
104 | background-color var(--secondary-background)
105 | border 1px solid var(--primary)
106 | section
107 | padding 8px
108 | &.title
109 | border-bottom 1px solid var(--primary)
110 | p
111 | margin 0
112 | p + p
113 | margin-top 8px
114 | .user
115 | vertical-align -3px
116 | .category
117 | display block
118 | margin-top 3em
119 | margin-bottom 1em
120 | .badge
121 | display inline-block
122 | // margin-bottom 4em
123 | box-shadow none
124 |
125 | .icon.updated
126 | width: 55px;
127 | margin-right: 5px;
128 | margin-bottom: 0;
129 | vertical-align: -1px;
--------------------------------------------------------------------------------
/styles/overview.styl:
--------------------------------------------------------------------------------
1 | section.overview
2 | .articles
3 | display flex
4 | flex-wrap wrap
5 | article
6 | width calc(50% - 1rem)
7 | max-width 300px
8 | background-color var(--secondary-active-background)
9 | border-radius 10px
10 | margin-bottom 1rem
11 | margin-right 1rem
12 | video
13 | background-color var(--primary-background)
14 | border-top-left-radius 0
15 | border-top-right-radius 0
16 | margin-bottom 0
17 | p
18 | margin-left 1rem
19 | // margin-top 0
20 | .badge
21 | box-shadow none
22 | border-radius 100px
23 | padding-left 8px
24 | padding-right 8px
25 | &:hover
26 | box-shadow none
27 |
28 | section.index
29 | margin-top -1rem
--------------------------------------------------------------------------------
/styles/styles.styl:
--------------------------------------------------------------------------------
1 | :root
2 | --primary black
3 | --primary-background white
4 |
5 | // --secondary #666
6 | --secondary-background #e3e3e3
7 | --secondary-hover-background #d8d8d8
8 | --secondary-active-background #cdcdcd
9 |
10 | --light-shadow rgba(0,0,0,0.20)
11 | --heavy-shadow rgba(0,0,0,0.25)
12 |
13 | // --danger-background #ffb8b3
14 | // --danger-hover-background #ffa49e
15 | // --danger-active-background #ff928b
16 |
17 | --info-background #90ffff
18 | --success-background #98f49f
19 |
20 | // non-theme vars
21 | // --max-z 2147483647
22 | --hover-shadow 3px 3px 0 var(--heavy-shadow)
23 | // --active-shadow 5px 5px 0 var(--light-shadow)
24 | // --active-inset-shadow inset 0 2px 3px var(--light-shadow)
25 | // --button-hover-shadow inset 0 1px 2px var(--heavy-shadow)
26 | --button-active-inset-shadow inset 0px 1px 2px var(--heavy-shadow)
27 |
28 | --badge-shadow 2px 2px 0 var(--light-shadow)
29 | --button-to-kinopio-hover-shadow 5px 5px 0 var(--heavy-shadow)
30 |
31 | // help site vars
32 | --max-page-width 520px
33 | --page-margin 20px
34 | --page-background #dbdbdb // #e8eadf
35 | --code-background #c8c8c8
36 | --table-border #c5c5c5
37 | --table-hover-background rgba(0,0,0,0.05)
38 | --cta-background #67ffbb
39 | --sans-serif Helvetica Neue, Helvetica, Arial, sans-serif
40 | --tertiary #c4c4c4
41 |
42 | // Elements
43 |
44 | @font-face
45 | font-family 'OsakaMono-Kinopio'
46 | src url("/assets/fonts/OsakaMono-Kinopio.woff2") format("woff2")
47 | font-weight normal
48 | font-style normal
49 |
50 | @font-face
51 | font-family 'Recoleta'
52 | src url("/assets/fonts/Recoleta-Regular.woff2") format("woff2")
53 | font-weight normal
54 | font-style normal
55 |
56 | @font-face
57 | font-family 'Recoleta'
58 | src url("/assets/fonts/Recoleta-Bold.woff2") format("woff2")
59 | font-weight bold
60 | font-style normal
61 |
62 | @font-face
63 | font-family 'Aureum'
64 | src url("/assets/fonts/Greenhouse-Aureum.woff2") format("woff2")
65 | font-weight normal
66 | font-style normal
67 |
68 | *
69 | -webkit-overflow-scrolling touch
70 | -webkit-tap-highlight-color transparent
71 | box-sizing border-box
72 | // font-family "OsakaMono-Kinopio", monospace
73 |
74 | body
75 | color var(--primary)
76 | font-family var(--sans-serif)
77 | margin var(--page-margin)
78 | background-color var(--page-background)
79 |
80 | .content-wrap
81 | margin-left auto
82 | margin-right auto
83 | max-width 800px
84 | width 100%
85 | position relative
86 | // background-image url("https://kinopio.club/img/background.597f845c.svg")
87 | // background-position top
88 | padding 0
89 |
90 | .logo
91 | background-image url('/assets/logo-base.png')
92 | background-size contain
93 | background-repeat no-repeat
94 | width 50px
95 | height 42px
96 | vertical-align -13px
97 | margin-right 12px
98 | display inline-block
99 |
100 | .hidden
101 | display none !important
102 |
103 | h1
104 | // font-family Mars
105 | font-family Recoleta
106 | font-size 30px
107 | font-weight normal
108 | // margin-bottom 1rem
109 | // font-family Agrandir
110 | h2,
111 | h3
112 | margin-top 2rem
113 | font-family Recoleta
114 | // font-family Mars
115 | font-size 22px
116 | font-weight normal
117 | // font-family Agrandir
118 |
119 | h1,
120 | h2,
121 | a,
122 | p
123 | max-width var(--max-page-width)
124 |
125 | p
126 | line-height 1.2
127 |
128 | a
129 | color blue
130 | &:hover
131 | text-decoration none
132 |
133 | .icon
134 | width 13px
135 | display inline
136 | vertical-align 1px
137 | margin-right 5px
138 | user-drag none
139 | -webkit-user-drag none
140 |
141 | // .down-arrow
142 | // width 10px
143 | // margin 0
144 | // margin-left 5px
145 | // vertical-align middle
146 |
147 | .icon.templates
148 | margin-bottom 0
149 | width 20px
150 | margin-right 0
151 |
152 | .heart
153 | margin-left 5px
154 |
155 | form
156 | margin 0
157 | display flex
158 |
159 | input
160 | font-size 16px
161 | font-family var(--sans-serif)
162 | background-color transparent
163 | border none
164 | border-radius 0
165 | border-bottom 1px solid black
166 |
167 | img
168 | width 100%
169 | max-width var(--max-page-width)
170 |
171 | ul
172 | padding 0
173 | li
174 | list-style none
175 | margin-bottom 12px
176 | a
177 | color var(--primary)
178 | text-decoration none
179 | background var(--info-background)
180 | padding 4px 5px
181 | border-radius 5px
182 | box-shadow var(--badge-shadow)
183 | &:hover,
184 | &:focus
185 | box-shadow var(--hover-shadow)
186 | &:active
187 | box-shadow var(--button-active-inset-shadow)
188 |
189 | .badge
190 | color var(--primary)
191 | text-decoration none
192 | background var(--info-background)
193 | padding 4px 5px
194 | border-radius 5px
195 | box-shadow var(--badge-shadow)
196 | &:hover,
197 | &:focus
198 | box-shadow var(--hover-shadow)
199 | &:active,
200 | &.active
201 | box-shadow var(--button-active-inset-shadow)
202 |
203 | button
204 | color var(--primary)
205 | touch-action manipulation
206 | text-align left
207 | padding 7px
208 | padding-top 4px
209 | padding-bottom 4px
210 | margin 0
211 | border 1px solid var(--primary)
212 | background-color transparent
213 | border-radius 5px
214 | cursor pointer
215 | user-select none
216 | font-size 14px
217 | font-family var(--sans-serif)
218 | &:hover,
219 | &:focus
220 | box-shadow var(--hover-shadow)
221 | background var(--secondary-hover-background)
222 | &:active,
223 | &.active
224 | color var(--primary)
225 | box-shadow var(--button-active-inset-shadow)
226 | background var(--secondary-active-background)
227 |
228 | .button-to-kinopio
229 | background-color var(--cta-background)
230 | box-shadow var(--hover-shadow)
231 | &:hover,
232 | &:focus
233 | background-color var(--cta-background)
234 | box-shadow var(--button-to-kinopio-hover-shadow)
235 | &:active
236 | background-color var(--cta-background)
237 | box-shadow var(--button-active-inset-shadow)
238 |
239 | .segmented-buttons
240 | button
241 | margin 0
242 | border-radius 0
243 | a
244 | button
245 | margin-left -1px
246 | &:first-child
247 | button
248 | border-top-left-radius 5px
249 | border-bottom-left-radius 5px
250 | margin-left 0
251 | &:last-child
252 | button
253 | border-top-right-radius 5px
254 | border-bottom-right-radius 5px
255 |
256 | code,
257 | blockquote
258 | background var(--code-background)
259 |
260 | code
261 | color var(--primary)
262 | padding 2px
263 | padding-left 6px
264 | padding-right 6px
265 | border-radius 5px
266 | font-family "OsakaMono-Kinopio", monospace
267 |
268 | blockquote
269 | margin 0
270 | border-radius 5px
271 | padding 8px
272 | display inline-block
273 | p
274 | margin 0
275 |
276 | canvas#background
277 | position fixed
278 | background-color transparent
279 | top 0
280 | left 0
281 | z-index -1
282 | canvas#page-background,
283 | canvas.auto-paint
284 | position absolute
285 | background-color transparent
286 | top 0
287 | left 0
288 | z-index -2
289 | canvas.auto-paint
290 | z-index -3
291 |
292 | .table-wrap
293 | overflow-x auto
294 | border-radius 5px
295 | width fit-content
296 | padding 0 !important
297 | .badge + .table-wrap
298 | margin-top 1rem
299 |
300 | table
301 | border-collapse collapse
302 | max-width 1000px
303 | th
304 | background-color var(--table-border)
305 | th,
306 | td
307 | padding 12px
308 | text-align left
309 | border-bottom 1px solid var(--table-border)
310 | tr
311 | &:hover
312 | background var(--table-hover-background)
313 | &:last-child
314 | td
315 | border-bottom 0
316 |
317 |
318 | // Components
319 |
320 | header
321 | .title
322 | display flex
323 | h1
324 | font-family Recoleta
325 | font-size 24px
326 | font-weight bold
327 | margin-top 0
328 | padding-top 10px
329 | a
330 | color var(--primary)
331 | text-decoration none
332 | &:hover,
333 | &:focus
334 | text-decoration underline
335 | .logo
336 | background-image url('/assets/logo-hover.png')
337 | &:active
338 | .logo
339 | background-image url('/assets/logo-active.png')
340 |
341 | .search
342 | display flex
343 | margin-bottom 2rem
344 | img
345 | width 18px
346 | padding-right 4px
347 | cursor pointer
348 | margin-top 1px
349 |
350 | main
351 | button
352 | font-size 16px
353 |
354 | footer
355 | margin-top 4rem
356 | margin-bottom 4rem
357 | .sections
358 | display flex
359 | section + section
360 | margin-left 2rem
361 | h3
362 | font-size 20px
363 | margin-top 1rem
364 | nav
365 | margin-top 1rem
366 | position static
367 | p
368 | margin-bottom 0
369 | li
370 | a
371 | background-color var(--tertiary)
372 | @media(max-width 420px)
373 | .extended-text
374 | display none
375 |
376 | nav
377 | display flex
378 | position absolute
379 | right 0
380 | top 0
381 | button
382 | margin-left 6px
383 |
384 | .content-wrap
385 | nav
386 | @media(max-width 375px)
387 | max-width 220px
388 | flex-wrap wrap
389 | justify-content flex-end
390 | .button-to-kinopio
391 | margin-top 10px
392 |
393 | article
394 | ul,
395 | ol
396 | max-width var(--max-page-width)
397 | padding-left 1rem
398 | margin-left 1rem
399 | li
400 | margin-bottom 12px
401 |
402 | ul
403 | li
404 | list-style-type disc
405 |
406 | img,
407 | video
408 | width 420px
409 | max-width 100%
410 | border-radius 10px
411 | margin-bottom 1rem
412 | &.wide
413 | width 700px
414 | &.narrow
415 | width 250px
416 | &.no-shadow
417 | box-shadow none
418 |
419 | img + h2,
420 | video + h2
421 | margin-top 1.5rem
422 |
423 | ul.api-contents
424 | margin-top 1rem
425 | padding 0
426 | margin-left 0
427 | margin-right 0
428 | position sticky
429 | top 20px
430 | z-index 10
431 | li
432 | list-style none
433 | display inline-block
434 | margin-right 6px
435 |
436 | .api,
437 | .guides
438 | h2
439 | font-family Recoleta
440 | font-size 26px
441 | font-weight normal
442 | h2,
443 | h3
444 | &.badge
445 | display inline-block
446 | padding 4px 5px
447 | border-radius 5px
448 | font-family sans-serif
449 | font-size 16px
450 | font-weight bold
451 | margin-bottom 0
452 | box-shadow none
453 | .badge.all
454 | margin-top 0
455 |
456 | code
457 | line-height 1.2
458 |
459 | // colors should match api.pug
460 | .all,
461 | .users,
462 | .spaces,
463 | .cards,
464 | .connections,
465 | .connection-types,
466 | .boxes,
467 | .tags,
468 | .notifications,
469 | .other
470 | color var(--primary)
471 | padding 2px 5px
472 | .all
473 | background khaki
474 | .users
475 | background #b9a8ff
476 | .spaces
477 | background pink
478 | .cards
479 | background violet
480 | .connections
481 | background salmon
482 | .connection-types
483 | background burlywood
484 | .boxes
485 | background lightskyblue
486 | .tags
487 | background mediumaquamarine
488 | .notifications
489 | background darkseagreen
490 | .other
491 | background cadetblue
492 |
493 | .table-wrap
494 | &.all,
495 | &.users,
496 | &.spaces,
497 | &.cards,
498 | &.connections,
499 | &.connection-types,
500 | &.boxes,
501 | &.tags,
502 | &.notifications,
503 | &.other
504 | background transparent
505 | border-width 2px
506 | border-style solid
507 | &.all
508 | border-color khaki
509 | &.users
510 | border-color #b9a8ff
511 | &.spaces
512 | border-color pink
513 | &.cards
514 | border-color violet
515 | &.connections
516 | border-color salmon
517 | &.connection-types
518 | border-color burlywood
519 | &.boxes
520 | border-color lightskyblue
521 | &.tags
522 | border-color mediumaquamarine
523 | &.notifications
524 | border-color darkseagreen
525 | &.other
526 | border-color cadetblue
527 |
528 |
529 |
530 | .get-label,
531 | .post-label,
532 | .patch-label
533 | .delete-label
534 | color rgba(255,255,255,0.9)
535 | .get-label
536 | background forestgreen
537 | .post-label
538 | background blueviolet
539 | .patch-label
540 | background peru
541 | .delete-label
542 | background firebrick
543 |
544 | .anchor
545 | display block
546 | position relative
547 | top -40px
548 | visibility hidden
549 |
550 | .froggo
551 | max-width 60px
552 |
553 | .cat
554 | max-width 150px
555 |
556 | .remove
557 | transform rotate(45deg)
558 | width 20px
559 | padding 5px
560 |
561 | .row
562 | display flex
563 | button
564 | margin-right 10px
565 | margin-bottom 2rem
566 |
567 | .moon-phase
568 | margin-bottom 0
569 |
570 | @import about
571 | @import guides
572 | @import overview
--------------------------------------------------------------------------------