forked from plume/documentation
Left menu improvements
This commit is contained in:
parent
48d5746ae0
commit
126655aa72
6 changed files with 155 additions and 69 deletions
|
@ -2,9 +2,6 @@
|
|||
<ul>
|
||||
<li>
|
||||
<a href="https://joinplu.me"><img src="/images/logo.svg" alt="Plume logo">Plume</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Documentation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://contribute.joinplu.me/">Contribute</a>
|
||||
|
|
|
@ -7,6 +7,7 @@ and which parts of these standards are available or not in Plume.'
|
|||
|
||||
To federate with other Fediverse software (and itself), Plume uses various
|
||||
protocols:
|
||||
|
||||
- [ActivityPub](http://activitypub.rocks/), as the main federation protocol.
|
||||
- [WebFinger](https://webfinger.net/), to find other users and blog easily.
|
||||
- [HTTP Signatures](https://tools.ietf.org/id/draft-cavage-http-signatures-01.html), to
|
||||
|
@ -15,6 +16,7 @@ authenticate activities.
|
|||
federation itself, but that gives some metadata about each instance.
|
||||
|
||||
Currently, the following are federated:
|
||||
|
||||
- User profiles
|
||||
- Blogs
|
||||
- Articles
|
||||
|
@ -23,6 +25,7 @@ Currently, the following are federated:
|
|||
- Reshares
|
||||
|
||||
And these parts are not federated, but may be in the future:
|
||||
|
||||
- Media gallery
|
||||
- Instance metadata
|
||||
|
||||
|
@ -116,6 +119,7 @@ activity.
|
|||
Reshares an article (not available for other objects).
|
||||
|
||||
Makes an user (`actor`) reshare a post (`object`).
|
||||
|
||||
- `actor` is the ID of the user who reshared the post.
|
||||
- `object` is the ID of the post to reshare.
|
||||
|
||||
|
@ -124,7 +128,8 @@ Makes an user (`actor`) reshare a post (`object`).
|
|||
Creates a new article or comment.
|
||||
|
||||
If `object` is an `Article`:
|
||||
- `object.attibutedTo` is a list containing the ID of the authors and of the blog
|
||||
|
||||
- `object.attibutedTo` is a list containing the ID of the authors and of the blog
|
||||
in which this article have been published. If no blog ID is specified, the article
|
||||
will be rejected. The `actor` of the activity corresponds to the user that clicked
|
||||
the "Publish" button, and should normally be one of the author in `attributedTo`.
|
||||
|
@ -142,6 +147,7 @@ moment).
|
|||
article.
|
||||
|
||||
If `object` is a `Note`:
|
||||
|
||||
- `object.content` is the HTML source of the rendered comment.
|
||||
- `object.inReplyTo` is the ID of the previous comment in the thread, or of the
|
||||
post that is commented if there is no previous comment.
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Plume documentation
|
||||
show_links: yes
|
||||
---
|
||||
|
||||
<h1>Topics</h1>
|
||||
|
|
|
@ -1 +1,3 @@
|
|||
// This is where it all goes :)
|
||||
document.getElementById('menu').addEventListener('click', evt =>
|
||||
evt.target.parentElement.classList.toggle('show')
|
||||
)
|
|
@ -12,21 +12,28 @@
|
|||
<style><%= Rouge::Themes::Github.render(:scope => '.highlight') %></style>
|
||||
</head>
|
||||
<body>
|
||||
<%= partial 'nav' %>
|
||||
<header>
|
||||
<h1><%= current_page.data.title %></h1>
|
||||
<p><%= current_page.data.summary %></p>
|
||||
</header>
|
||||
<nav class="left-menu">
|
||||
<h1><a href="/"><img src="/images/logo.svg" alt="Plume logo"><span>Plume documentation</span></a></h1>
|
||||
<aside>
|
||||
<i id="menu" data-feather="menu"></i>
|
||||
<nav>
|
||||
<h1><a href="/"><span>Plume documentation</span><img src="/images/logo.svg" alt="Plume logo"></a></h1>
|
||||
<% resources = sitemap.resources
|
||||
.select{ |p| p.path =~ /\.html/ && p.path != "index.html" }
|
||||
.sort { |a, b| a.path <=> b.path }
|
||||
%>
|
||||
<%= partial :nav_item, :locals => { :items => resources.select { |r| r.url.chomp('/').split('/').size == 2 }, :resources => resources } %>
|
||||
</nav>
|
||||
</nav>
|
||||
</aside>
|
||||
<main>
|
||||
<%= yield %>
|
||||
<% if current_page.data.show_links %>
|
||||
<%= partial 'nav' %>
|
||||
<% end %>
|
||||
<article>
|
||||
<%= yield %>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
Website and documentation under the AGPL 3.0 license.
|
||||
|
@ -37,4 +44,3 @@
|
|||
<%= javascript_include_tag "site" %>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
$plume: #7765e3;
|
||||
$plumedark: #6457a6;
|
||||
$gray: #F4F4F4;
|
||||
$black: invert($gray);
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
|
||||
|
||||
|
@ -14,19 +15,33 @@ h1, h2, h3 {
|
|||
}
|
||||
|
||||
header {
|
||||
margin: auto;
|
||||
grid-area: head;
|
||||
margin: 0;
|
||||
padding: 20vh 20vw;
|
||||
background: linear-gradient(0deg, $plumedark, $plume);
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
body > main > * {
|
||||
padding: 0px 20vw;
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: min-content 1fr min-content;
|
||||
grid-template-areas:
|
||||
"menu head head head head"
|
||||
"menu cont cont cont cont"
|
||||
"menu foot foot foot foot";
|
||||
}
|
||||
|
||||
|
||||
body > main > nav, body > main > nav ul {
|
||||
padding: 0;
|
||||
li {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 0px 20vw;
|
||||
background: $gray;
|
||||
|
||||
img {
|
||||
|
@ -57,7 +72,7 @@ nav {
|
|||
}
|
||||
}
|
||||
|
||||
nav:not(.left-menu) li {
|
||||
main nav li {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-items: stretch;
|
||||
|
@ -81,8 +96,8 @@ a, a:visited {
|
|||
footer {
|
||||
padding: 5em 5vw;
|
||||
background: $gray;
|
||||
margin-top: 10vh;
|
||||
text-align: center;
|
||||
grid-area: foot;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
|
@ -92,82 +107,101 @@ footer {
|
|||
}
|
||||
|
||||
body > main {
|
||||
margin-top: 2em;
|
||||
grid-area: cont;
|
||||
line-height: 1.3em;
|
||||
|
||||
ul {
|
||||
padding-left: calc(20vw + 1.5em);
|
||||
padding: 0 7.5vw;
|
||||
li {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 25vw;
|
||||
left: -24vw;
|
||||
padding: 0px;
|
||||
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.2);
|
||||
transition: all ease-in 0.2s;
|
||||
|
||||
h1 a {
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
aside {
|
||||
grid-area: menu;
|
||||
background: $black;
|
||||
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
|
||||
z-index: 2;
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: block;
|
||||
text-transform: none;
|
||||
font-weight: 400;
|
||||
nav {
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 2em;
|
||||
border-bottom: none;
|
||||
border-left: 5px solid transparent;
|
||||
transition: all ease-in 0.2s;
|
||||
h1 a {
|
||||
padding: 2em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-left-color: $plume;
|
||||
ul {
|
||||
display: block;
|
||||
text-transform: none;
|
||||
font-weight: 400;
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 2em;
|
||||
border-bottom: none;
|
||||
border-left: 5px solid transparent;
|
||||
transition: all ease-in 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-left-color: $plume;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > ul {
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
}
|
||||
& > ul {
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
& > ul > li > ul {
|
||||
font-weight: 600;
|
||||
& > li > a {
|
||||
padding-left: 3em;
|
||||
& > ul > li > ul {
|
||||
font-weight: 600;
|
||||
& > li > a {
|
||||
padding: 1.5em;
|
||||
padding-left: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
& > ul > li > ul > li > ul > li > a {
|
||||
padding: 1em;
|
||||
padding-left: 4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > ul > li > ul > li > ul > li > a {
|
||||
padding-left: 4em;
|
||||
}
|
||||
main > article {
|
||||
padding: 3em 0em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
overflow-y: auto;
|
||||
left: 0vw;
|
||||
}
|
||||
main > article > * {
|
||||
padding: 0 5vw;
|
||||
}
|
||||
|
||||
.choices {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-items: stretch;
|
||||
list-style: none;
|
||||
padding: 2em 5vw;
|
||||
& > li {
|
||||
flex: 1;
|
||||
a {
|
||||
|
@ -214,23 +248,63 @@ a.action {
|
|||
display: block;
|
||||
padding: 20px;
|
||||
max-width: 200px;
|
||||
margin: 20px auto;
|
||||
margin: 5em auto;
|
||||
border-radius: 5px;
|
||||
background: $plume;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
body > main > * {
|
||||
main nav li a {
|
||||
padding: 15px 0px;
|
||||
}
|
||||
|
||||
aside svg {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
margin: 0.5em;
|
||||
background: $black;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
body > main > article > * {
|
||||
padding: 0 5vw;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 10vh 20vw;
|
||||
padding: 10vh 0vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left-menu {
|
||||
display: none;
|
||||
.cards, body > main > nav ul {
|
||||
grid: auto-flow / 1fr;
|
||||
}
|
||||
|
||||
aside {
|
||||
position: fixed;
|
||||
left: -100vw;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
transition: all ease-in 0.2s;
|
||||
}
|
||||
|
||||
aside.show {
|
||||
left: 0;
|
||||
|
||||
svg {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
grid-template-areas:
|
||||
"head head head head head"
|
||||
"cont cont cont cont cont"
|
||||
"foot foot foot foot foot";
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue