Compare commits

...

2 Commits

  1. 9
      CHANGELOG.md
  2. 11
      assets/css/_forms.scss
  3. 9
      assets/css/_markdown.scss
  4. 14
      assets/css/_navigation.scss
  5. 89
      assets/css/app.scss
  6. 2
      lib/mirage_web.ex
  7. 16
      lib/mirage_web/templates/layout/_header.html.eex
  8. 2
      lib/mirage_web/templates/layout/_user_menu.html.eex
  9. 3
      mix.exs
  10. 1
      mix.lock

9
CHANGELOG.md

@ -5,6 +5,15 @@ See [Conventional Commits](Https://conventionalcommits.org) for commit guideline
<!-- changelog -->
## [v0.35.0](https://git.inhji.de/inhji/mirage/compare/v0.34.8...v0.35.0) (2021-02-14)
### Features:
* use material colors everywhere, revamp color variables, add active_link in main menu
## [v0.34.8](https://git.inhji.de/inhji/mirage/compare/v0.34.7...v0.34.8) (2021-02-14)

11
assets/css/_forms.scss

@ -1,6 +1,6 @@
#modal {
padding: 2rem;
@include color-assign(background-color, background-content);
@include color-assign(background-color, surface);
position: absolute;
width: 60%;
}
@ -20,9 +20,10 @@ form {
input[type=url],
input[type=email],
input[type=password] {
@include color-assign(background-color, background-content);
@include color-assign(color, primary-500);
@include color-assign(background-color, surface);
@include color-assign(color, on-surface);
border: 1px solid $border-base;
@include color-assign(border-color, on-surface);
margin-bottom: 1rem;
padding: 0.5rem;
@ -38,9 +39,5 @@ form {
input.title {
font-size: 1.25rem;
}
input[readonly] {
color: $border-base;
}
}
}

9
assets/css/_markdown.scss

@ -35,7 +35,7 @@
height: 0;
width: 100%;
border-top: 1px solid $border-base;
@include color-assign(border-color, primary-400);
@include color-assign(border-color, on-surface);
margin: 2rem 0;
}
@ -55,7 +55,7 @@
td, th {
border: 1px solid $border-base;
border-width: 0 0 1px;
@include color-assign(border-color, primary-400);
@include color-assign(border-color, on-surface);
padding: .5em .75em;
vertical-align: top;
}
@ -66,14 +66,14 @@
tbody tr {
&:nth-child(odd) {
background: rgba(0,0,0,0.1);
@include color-assign(background-color, surface);
}
}
}
blockquote, pre {
padding: 1rem;
background: rgba(0,0,0,0.1);
@include color-assign(background-color, surface);
margin-bottom: 1rem;
}
@ -85,7 +85,6 @@
&:after {
position: absolute;
content: "";
color: #222;
font-size: 5rem;
line-height: 0;
bottom: -10px;

14
assets/css/_navigation.scss

@ -1,5 +1,5 @@
nav[role=navigation] {
@include color-assign(background-color, background-content);
@include color-assign(background-color, navigation);
line-height: 1.5em;
&:before {
@ -8,7 +8,7 @@ nav[role=navigation] {
width: 100%;
left: 0;
height: 3px;
background: $rainbow;
@include color-assign(background-color, primary);
}
ul {
@ -23,7 +23,7 @@ nav[role=navigation] {
display: inline-block;
}
li.brand {
li:first-child {
font-weight: bold;
}
@ -33,9 +33,11 @@ nav[role=navigation] {
padding: 1rem;
text-decoration: none;
transition: all 0.3s;
@include color-assign(color, on-navigation);
&:hover {
@include color-assign(background-color, accent-500);
&:hover, &.active {
@include color-assign(background-color, primary);
@include color-assign(color, on-primary);
}
}
}
@ -45,7 +47,7 @@ aside.menu {
ul {
li {
@include color-assign(background-color, background-content);
@include color-assign(background-color, surface);
padding-left: 2rem;
margin: 0 -2rem 0 -4rem;

89
assets/css/app.scss

@ -6,35 +6,33 @@
/* === Color Definitions === */
$colors: (
light: (
background: material-color('grey', '100'),
background-content: material-color('grey', '200'),
primary-400: #acacac,
primary-500: #505050,
primary-600: #3c3c3c,
accent-500: material-color('teal', '700'),
accent-600: #0056b3,
),
dark: (
background: material-color('blue-grey', '900'),
background-content: material-color('blue-grey', '800'),
primary-400: #757575,
primary-500: #ccc,
primary-600: #e6e6e6,
accent-500: material-color('teal', '700'),
accent-600: #3ba0e6,
)
light: (
surface: material-color('grey', '50'),
on-surface: material-color('grey', '900'),
background: material-color('grey', '100'),
primary: material-color('cyan', '700'),
on-primary: material-color('grey', '50'),
primary-light: material-color('blue', '300'),
primary-dark: material-color('blue', '700'),
navigation: material-color('grey', '900'),
on-navigation: material-color('grey', '50')
),
dark: (
surface: material-color('blue-grey', '800'),
on-surface: material-color('grey', '50'),
background: material-color('blue-grey', '900'),
primary: #ccc,
primary-light: #757575,
primary-dark: #e6e6e6,
navigation: material-color('grey', '900'),
on-navigation: material-color('grey', '50')
)
);
@import "./colors";
/* === Variables === */
$rainbow: linear-gradient(90deg,
material-color('pink', '500') 0%,
material-color('light-blue', '500') 50%,
material-color('purple', '500') 100%);
$font-content: 'Open Sans', Helvetica, sans-serif;
$font-heading: $font-content;
@ -71,8 +69,8 @@ html {
}
body {
@include color-assign(background-color, background-content);
@include color-assign(color, primary-500);
@include color-assign(background-color, background);
@include color-assign(color, on-surface);
font-family: $font-content;
font-size: 1rem;
line-height: 1.5rem;
@ -95,7 +93,7 @@ h3 {
}
a {
@include color-assign(color, primary-500);
@include color-assign(color, on-surface);
}
/* === Layout === */
@ -111,7 +109,7 @@ main[role=main] {
footer {
padding: 2rem;
@include color-assign(background-color, background-content);
@include color-assign(background-color, surface);
}
.width-full {
@ -132,26 +130,24 @@ div + section {
/* === Styling === */
button[type=submit], a.button {
@include color-assign(background-color, background-content);
@include color-assign(color, primary-500);
@include color-assign(background-color, surface);
@include color-assign(color, on-surface);
display: inline-block;
font-size: 1rem;
text-decoration: none;
border: 1px solid $border-base;
@include color-assign(border-color, primary-400);
border: 1px solid #000;
@include color-assign(border-color, on-surface);
padding: 0.5rem 1rem;
margin: 0;
&:hover {
@include color-assign(color, primary-500);
@include color-assign(border-color, primary-400);
border: 1px solid white;
background: $rainbow;
@include color-assign(color, on-primary);
@include color-assign(background-color, primary);
}
}
header.hero {
@include color-assign(background-color, background);
@include color-assign(background-color, surface);
margin: 0 -2rem 0;
padding: 2rem;
@ -176,6 +172,7 @@ header.hero {
#editor {
border: 1px solid white;
@include color-assign(border-color, on-surface);
margin-bottom: 2rem;
}
@ -186,7 +183,8 @@ header.hero {
kbd {
padding: 1px 3px;
border: 1px solid #111;
background: #222;
@include color-assign(border-color, on-surface);
@include color-assign(background-color, surface);
border-radius: 3px;
}
@ -197,6 +195,8 @@ kbd {
padding: 0 0.3rem;
border-radius: 5px;
border: 1px solid $border-base;
@include color-assign(border-color, on-surface);
margin-right: 5px;
a { text-decoration: none; }
@ -222,7 +222,7 @@ kbd {
display: flex;
padding: 1rem;
border: 1px solid $border-base;
@include color-assign(background-color, background-content);
@include color-assign(background-color, on-surface);
margin-bottom: 1rem;
a {
@ -251,6 +251,8 @@ kbd {
.card {
border: 1px solid $border-base;
@include color-assign(border-color, on-surface);
border-radius: 2px;
padding: 0.5rem;
text-decoration: none;
@ -274,21 +276,18 @@ article {
header {
border-bottom: 1px solid $border-base;
@include color-assign(border-color, background);
@include color-assign(border-color, on-surface);
@include color-assign(background, surface);
.title {
font-family: $font-heading;
margin-bottom: 0;
}
.id {
color: #aaa;
}
}
footer {
border-top: 1px solid $border-base;
@include color-assign(border-color, background);
@include color-assign(border-color, on-surface);
}
&:last-child {
@ -306,5 +305,5 @@ article {
/* === Helpers === */
.bg-content { @include color-assign(background-color, background-content); }
.bg-content { @include color-assign(background-color, surface); }
.bg-base { @include color-assign(background-color, background); }

2
lib/mirage_web.ex

@ -39,6 +39,8 @@ defmodule MirageWeb do
import Phoenix.Controller,
only: [get_flash: 1, get_flash: 2, view_module: 1, view_template: 1]
import PhoenixActiveLink
# Include shared imports and aliases for views
unquote(view_helpers())
end

16
lib/mirage_web/templates/layout/_header.html.eex

@ -1,18 +1,10 @@
<header>
<nav role="navigation">
<ul>
<li class="brand">
<a href="/"><%= raw @_s.header_title.value_html %></a>
</li>
<li>
<a href="/notes">Notes</a>
</li>
<li>
<a href="/topics">Topics</a>
</li>
<li>
<a href="/links">Links</a>
</li>
<%= active_link(@conn, @_s.header_title.value, to: "/", wrap_tag: :li) %>
<%= active_link(@conn, "Notes", to: "/notes", wrap_tag: :li) %>
<%= active_link(@conn, "Topics", to: "/topics", wrap_tag: :li) %>
<%= active_link(@conn, "Links", to: "/links", wrap_tag: :li) %>
<li class="spacer"></li>
<%= render "_user_menu.html", assigns %>
</ul>

2
lib/mirage_web/templates/layout/_user_menu.html.eex

@ -1,5 +1,5 @@
<%= if @current_user do %>
<li><%= link @current_user.email, to: Routes.user_path(@conn, :index) %></li>
<%= active_link(@conn, "User", to: Routes.user_path(@conn, :index), wrap_tag: :li) %>
<li><%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete %></li>
<% else %>
<%= if not Mirage.Accounts.has_user? do %>

3
mix.exs

@ -1,7 +1,7 @@
defmodule Mirage.MixProject do
use Mix.Project
@version "0.34.8"
@version "0.35.0"
def project do
[
@ -44,6 +44,7 @@ defmodule Mirage.MixProject do
{:git_ops, "~> 2.4.2", only: [:dev]},
{:jason, "~> 1.0"},
{:phoenix, "~> 1.5.6"},
{:phoenix_active_link, "~> 0.3.1"},
{:phoenix_ecto, "~> 4.1"},
{:phoenix_html, "~> 2.11"},
{:phoenix_live_dashboard, "~> 0.3 or ~> 0.2.9"},

1
mix.lock

@ -35,6 +35,7 @@
"parent": {:hex, :parent, "0.12.0", "e7d4f144fdb041cd637acb28a8a7680d23e48407e14a7b91b70da2a87c694b96", [:mix], [{:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "912cfdb2d6dae45361065afa31c20753bf3827228272fcb1d7d2538bce157946"},
"parse_trans": {:hex, :parse_trans, "3.3.1", "16328ab840cc09919bd10dab29e431da3af9e9e7e7e6f0089dd5a2d2820011d8", [:rebar3], [], "hexpm", "07cd9577885f56362d414e8c4c4e6bdf10d43a8767abb92d24cbe8b24c54888b"},
"phoenix": {:hex, :phoenix, "1.5.7", "2923bb3af924f184459fe4fa4b100bd25fa6468e69b2803dfae82698269aa5e0", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_html, "~> 2.13", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.0", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:plug, "~> 1.10", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 1.0 or ~> 2.2", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.1.2 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "774cd64417c5a3788414fdbb2be2eb9bcd0c048d9e6ad11a0c1fd67b7c0d0978"},
"phoenix_active_link": {:hex, :phoenix_active_link, "0.3.1", "249085dee4ac86d0a89675d51e04b22af5143c87764a997850e31c00927a3b4d", [:mix], [{:phoenix_html, "~> 2.10", [hex: :phoenix_html, repo: "hexpm", optional: false]}], "hexpm", "64feabce9a89e1bd245c92d54f486efccc84ef23dfc88d6a4abd0d5b6aeaf8d2"},
"phoenix_ecto": {:hex, :phoenix_ecto, "4.2.1", "13f124cf0a3ce0f1948cf24654c7b9f2347169ff75c1123f44674afee6af3b03", [:mix], [{:ecto, "~> 3.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 2.15", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.0", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "478a1bae899cac0a6e02be1deec7e2944b7754c04e7d4107fc5a517f877743c0"},
"phoenix_html": {:hex, :phoenix_html, "2.14.3", "51f720d0d543e4e157ff06b65de38e13303d5778a7919bcc696599e5934271b8", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "efd697a7fff35a13eeeb6b43db884705cba353a1a41d127d118fda5f90c8e80f"},
"phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.3.6", "6d031e9e5fa8c671e582539e8acd549c4d6e0e90aa704f6644a4a1f5fb334608", [:mix], [{:ecto_psql_extras, "~> 0.4.1 or ~> 0.5", [hex: :ecto_psql_extras, repo: "hexpm", optional: true]}, {:phoenix_html, "~> 2.14.1 or ~> 2.15", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.14.3", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.4.0 or ~> 0.5.0 or ~> 0.6.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "55c891eb9cb344d6685c21f452806f54be6a660bbc090c94f65f287e8b4de002"},

Loading…
Cancel
Save