2 Commits

  1. 9
      CHANGELOG.md
  2. 3
      assets/.stylelintrc.json
  3. 48
      assets/css/_cards.scss
  4. 44
      assets/css/_colors.scss
  5. 62
      assets/css/_forms.scss
  6. 118
      assets/css/_markdown.scss
  7. 32
      assets/css/_navigation.scss
  8. 31
      assets/css/_nprogress.scss
  9. 32
      assets/css/_phoenix.scss
  10. 122
      assets/css/_prism.scss
  11. 33
      assets/css/_tablesort.scss
  12. 31
      assets/css/_variables.scss
  13. 387
      assets/css/app-old.scss
  14. 362
      assets/css/app.css
  15. 81
      assets/css/app.scss
  16. 2
      assets/css/inter.css
  17. 3
      assets/js/app.js
  18. 3811
      assets/package-lock.json
  19. 10
      assets/package.json
  20. 15
      assets/postcss.config.js
  21. 7
      assets/webpack.config.js
  22. 6
      lib/mirage_web/templates/layout/app.html.eex
  23. 6
      lib/mirage_web/templates/layout/live.html.leex
  24. 2
      mix.exs

9
CHANGELOG.md

@ -5,6 +5,15 @@ See [Conventional Commits](Https://conventionalcommits.org) for commit guideline
<!-- changelog -->
## [v0.86.0](https://git.inhji.de/inhji/mirage/compare/v0.85.0...v0.86.0) (2021-03-23)
### Features:
* switch from sass to postcss, closes #12
## [v0.85.0](https://git.inhji.de/inhji/mirage/compare/v0.84.0...v0.85.0) (2021-03-23)

3
assets/.stylelintrc.json

@ -0,0 +1,3 @@
{
"extends": "stylelint-config-standard"
}

48
assets/css/_cards.scss

@ -1,48 +0,0 @@
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
overflow-x: auto;
.card {
flex: 1;
border-width: 1px;
border-style: solid;
@include color-assign(border-color, surface-var);
border-radius: 2px;
padding: 0.5rem;
text-decoration: none;
min-width: 15rem;
word-break: break-word;
transition: 0.2s all ease-in;
&:last-child {
margin-right: 0;
}
&:hover {
@include color-assign(color, on-navigation);
@include color-assign(background-color, primary);
@include color-assign(border-color, surface-dark);
}
}
&.list {
gap: 0;
border-radius: 3px;
.card {
flex-basis: 100%;
border-radius: 0;
border-bottom: none;
&:last-child {
border-bottom: 1px solid white;
@include color-assign(border-color, surface-var);
}
}
}
}

44
assets/css/_colors.scss

@ -1,44 +0,0 @@
// @include https://github.com/hadalin/dark-mode-sass
$color-placeholder: 'here';
@function compose-color-variable($color-key) {
@return '--color-#{$color-key}';
}
:root {
@each $key, $value in map-get($colors, 'light') {
#{compose-color-variable($key)}: #{$value};
}
}
@media (prefers-color-scheme: dark) {
:root {
@each $key, $value in map-get($colors, 'dark') {
#{compose-color-variable($key)}: #{$value};
}
}
}
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if not $index {
@return $string;
}
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@function color-get($palette, $color-key) {
@return map-get(map-get($colors, $palette), $color-key);
}
@mixin color-assign($property, $color-key, $template: '') {
$fallback: #{color-get("light", $color-key)};
$var: var(#{compose-color-variable($color-key)});
#{$property}: if(str-length($template) == 0, $fallback, #{str-replace($template, $color-placeholder, $fallback)});
#{$property}: if(str-length($template) == 0, $var, #{str-replace($template, $color-placeholder, $var)});
}

62
assets/css/_forms.scss

@ -1,62 +0,0 @@
#modal {
padding: 2rem;
margin-left: -2rem;
margin-right: -2rem;
@include color-assign(background-color, surface);
position: relative;
z-index: 10;
box-shadow: $shadow;
.modal-close {
float: right;
font-size: 2rem;
}
}
form {
margin-bottom: 2rem;
fieldset {
border: 0;
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0;
}
.tagify {
@include color-assign(border-color, surface-var);
}
#editor {
border: none;
}
select,
textarea,
input[type=text],
input[type=url],
input[type=email],
input[type=password] {
@include color-assign(color, on-surface);
border: 1px solid white;
@include color-assign(border-color, surface-var);
margin-bottom: 1rem;
padding: 0.5rem 0.75rem;
width: 100%;
border-radius: 0;
font-size: 1rem;
&:last-child {
margin-bottom: 0;
}
}
input.title {
font-size: 1.25rem;
}
}
}

118
assets/css/_markdown.scss

@ -1,118 +0,0 @@
.content.html {
margin-bottom: 2rem;
&:last-child {
margin-bottom: 0;
}
a {
@include color-assign(color, primary-inverse);
text-decoration: underline;
}
h1 { font-size: 1.4rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; text-transform: uppercase; }
h1, h2, h3, h4, h5, h6 {
margin-top: 2rem;
&:first-child {
margin-top: 0;
}
}
p {
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 0;
}
}
dl {
dt { font-weight: bold; }
dd { margin-bottom: 1rem; }
}
hr {
color: transparent;
height: 0;
width: 100%;
border-top: 1px solid white;
@include color-assign(border-color, surface-var);
margin: 2rem 0;
}
ul, ol {
margin-left: 2rem;
}
ul {
list-style-type: disc;
margin-bottom: 1rem;
}
table {
width: 100%;
overflow-x: auto;
td, th {
border: 1px solid white;
border-width: 0 0 1px;
@include color-assign(border-color, on-surface);
padding: .5em .75em;
vertical-align: top;
}
thead th {
border-width: 0 0 2px;
}
tbody tr {
&:nth-child(odd) {
@include color-assign(background-color, surface);
}
}
}
blockquote, pre {
padding: 1rem;
margin-bottom: 1rem;
}
blockquote {
position: relative;
font-size: 1.1rem;
font-style: italic;
@include color-assign(background-color, surface-var);
&:after {
@include color-assign(color, primary);
position: absolute;
content: "";
font-size: 5rem;
line-height: 0;
bottom: -10px;
right: 20px;
}
}
pre {
overflow: auto;
}
code.inline {
background-color: var(--color-surface-var);
padding: 3px;
}
.footnote {
vertical-align: super;
font-size: 75%;
}
}

32
assets/css/_navigation.scss

@ -1,32 +0,0 @@
nav#sidebar {
left: 0;
top: 0;
position: fixed;
width: var(--width-sidebar);
height: 100vh;
box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.5);
background-color: var(--background-navigation);
ul {
li {
a {
color: var(--color-navigation);
display: inline-block;
padding: 1rem;
text-decoration: none;
width: 100%;
transition: all 0.3s;
&:hover, &.active {
background-color: var(--primary);
}
svg.icon {
width: 1rem;
height: 1rem;
vertical-align: -.125em;
}
}
}
}
}

31
assets/css/_nprogress.scss

@ -1,31 +0,0 @@
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: var(--primary);
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 3px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px var(--primary), 0 0 5px var(--primary);
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}

32
assets/css/_phoenix.scss

@ -1,32 +0,0 @@
/* Alerts and form errors */
.alert {
padding: 1rem 2rem;
margin-left: -2rem;
margin-right: -2rem;
border: 1px solid transparent;
font-weight: bold;
}
.alert-info {
color: var(--light);
background-color: var(--info);
}
.alert-warning {
color: var(--dark);
background-color: var(--warning);
}
.alert-danger {
color: var(--light);
background-color: var(--danger);
}
.alert p {
margin-bottom: 0;
}
.alert:empty {
display: none;
}
.invalid-feedback {
color: var(--danger);
background: var(--light);
display: block;
padding: 0.5rem;
}

122
assets/css/_prism.scss

@ -1,122 +0,0 @@
/**
* GHColors theme by Avi Aryan (http://aviaryan.in)
* Inspired by Github syntax coloring
*/
code[class*="language-"],
pre[class*="language-"] {
color: #393A34;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
font-size: .9em;
line-height: 1.2em;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre > code[class*="language-"] {
font-size: 1em;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
background: #b3d4fc;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border: 1px solid #dddddd;
background-color: white;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .2em;
padding-top: 1px;
padding-bottom: 1px;
background: #f8f8f8;
border: 1px solid #dddddd;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999988;
font-style: italic;
}
.token.namespace {
opacity: .7;
}
.token.string,
.token.attr-value {
color: #e3116c;
}
.token.punctuation,
.token.operator {
color: #393A34; /* no highlight */
}
.token.entity,
.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.variable,
.token.constant,
.token.property,
.token.regex,
.token.inserted {
color: #36acaa;
}
.token.atrule,
.token.keyword,
.token.attr-name,
.language-autohotkey .token.selector {
color: #00a4db;
}
.token.function,
.token.deleted,
.language-autohotkey .token.tag {
color: #9a050f;
}
.token.tag,
.token.selector,
.language-autohotkey .token.keyword {
color: #00009f;
}
.token.important,
.token.function,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}

33
assets/css/_tablesort.scss

@ -1,33 +0,0 @@
th[role=columnheader]:not(.no-sort) {
cursor: pointer;
}
th[role=columnheader]:not(.no-sort):after {
content: '';
float: right;
margin-top: 7px;
border-width: 0 4px 4px;
border-style: solid;
border-color: #404040 transparent;
visibility: hidden;
opacity: 0;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
th[aria-sort=ascending]:not(.no-sort):after {
border-bottom: none;
border-width: 4px 4px 0;
}
th[aria-sort]:not(.no-sort):after {
visibility: visible;
opacity: 0.4;
}
th[role=columnheader]:not(.no-sort):hover:after {
visibility: visible;
opacity: 1;
}

31
assets/css/_variables.scss

@ -1,31 +0,0 @@
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #f8f9fa;
--gray: #6c757d;
--gray-dark: #343a40;
--gray-light: #cccccc;
--primary: var(--red);
--secondary: var(--gray);
--success: var(--green);
--info: var(--teal);
--warning: var(--yellow);
--danger: var(--red);
--light: var(--white);
--dark: var(--gray-dark);
--breakpoint-phone: 768px;
--width-main: 100%;
--width-sidebar: 15rem;
--background-navigation: var(--dark);
--color-navigation: var(--light);
}

387
assets/css/app-old.scss

@ -1,387 +0,0 @@
/* === External Dependencies === */
@import "~minireset.css/minireset.css";
@import "~bootstrap-icons/font/bootstrap-icons.css";
@import "~sass-material-colors/sass/sass-material-colors";
@import "~@yaireo/tagify/src/tagify";
/* === Color Definitions === */
$primary-color: 'blue';
$colors: (
light: (
surface: material-color('blue-grey', '50'),
surface-var: material-color('blue-grey', '200'),
surface-dark: material-color('blue-grey', '800'),
on-surface: material-color('blue-grey', '900'),
background: material-color('blue-grey', '200'),
primary: material-color($primary-color, '700'),
primary-inverse: material-color($primary-color, 'a700'),
on-primary: material-color('blue-grey', '50'),
navigation: material-color('blue-grey', '900'),
navigation-var: material-color('blue-grey', '800'),
on-navigation: material-color('blue-grey', '50')
),
dark: (
surface: material-color('blue-grey', '800'),
surface-var: material-color('blue-grey', '800'),
surface-dark: material-color('blue-grey', '800'),
on-surface: material-color('blue-grey', '50'),
background: material-color('blue-grey', '900'),
primary: material-color($primary-color, '700'),
primary-inverse: material-color($primary-color, '300'),
on-primary: material-color('blue-grey', '50'),
navigation: material-color('blue-grey', '900'),
navigation-var: material-color('blue-grey', '800'),
on-navigation: material-color('blue-grey', '50')
)
);
@import "./colors";
/* === Variables === */
$font-content: 'Open Sans', Helvetica, sans-serif;
$font-heading: $font-content;
$width-wrapper: 60rem;
$width-sidebar: 15rem;
$width-sidebar-collapsed: 3rem;
$bg-info: material-color('green', '500');
$color-info: material-color('green', '100');
$bg-warning: #8a6d3b;
$color-warning: #fcf8e3;
$bg-danger: #a94442;
$color-danger: #f2dede;
$phone: 768px;
$shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.75);
/* === Fonts ===*/
@font-face {
font-family: 'Open Sans';
src: url('../static/fonts/OpenSans-Regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* === Imports === */
@import "./phoenix";
@import "./nprogress";
@import "./markdown";
@import "./navigation";
@import "./forms";
@import "./tablesort";
@import "./prism";
@import "./cards";
/* === Base === */
html {
height: 100%;
}
body {
@include color-assign(background-color, background);
@include color-assign(color, on-surface);
font-family: $font-content;
font-size: 1rem;
line-height: 1.5rem;
}
h2, h3 {
margin-bottom: 1rem;
}
h1 {
font-size: 2rem;
line-height: 2rem;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.3rem;
}
a {
@include color-assign(color, on-surface);
text-decoration: none;
}
/* === Layout === */
.container { max-width: $width-wrapper; }
.grid, .flex { display: flex; }
.col, .spacer { flex: 1; }
.flex-1 {flex: 1;}
.flex-2 {flex: 2;}
.flex-3 {flex: 3;}
.flex-4 {flex: 4;}
body.logged-in {
.container {
max-width: $width-wrapper + $width-sidebar;
}
#wrapper {
margin-left: $width-sidebar;
}
}
main[role=main] {
padding: 0 2rem 2rem 2rem;
@include color-assign(background-color, background);
}
footer {
padding: 2rem;
@include color-assign(background-color, surface);
}
.width-full {
margin-left: -2rem;
margin-right: -2rem;
padding: 2rem;
}
.padding {
padding: 2rem;
}
section + section,
div + section {
margin-top: 2rem;
}
/* === Styling === */
button[type=submit], a.button {
@include color-assign(background-color, surface);
@include color-assign(color, on-surface);
display: inline-block;
font-size: 1rem;
border: 1px solid #000;
@include color-assign(border-color, on-surface);
padding: 0.5rem 1rem;
margin: 0;
&:hover {
@include color-assign(color, on-primary);
@include color-assign(background-color, primary);
}
}
header.hero {
@include color-assign(background-color, primary);
@include color-assign(color, on-primary);
margin: 0 -2rem 0;
padding: 2rem;
h1 {
font-family: $font-heading;
font-weight: bold;
margin-bottom: 0.5rem;
}
p {
font-size: 1.3rem;
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 0;
}
}
}
.buttons {
margin-top: 2rem;
}
kbd {
padding: 1px 3px;
border: 1px solid #111;
@include color-assign(border-color, on-surface);
@include color-assign(background-color, surface);
border-radius: 3px;
}
.tags {
.tag {
display: inline-block;
font-size:75%;
@include color-assign(background, surface);
@include color-assign(color, on-surface);
padding: 0 0.3rem;
margin: 0.1rem;
border-radius: 5px;
border: 1px solid white;
@include color-assign(border-color, surface-var);
}
}
.notes {
margin-top: 4rem;
.note {
header {
@include color-assign(background-color, primary);
@include color-assign(color, on-primary);
}
}
}
#goto-anything {
position: fixed;
top: 5rem;
left: 15rem;
width: 30rem;
border: 1px solid white;
box-shadow: $shadow;
@include color-assign(background-color, surface);
@include color-assign(border-color, surface);
&.closed {
display: none;
}
form { margin: 0; }
input {
padding: 1rem;
border: none;
width: 100%;
@include color-assign(background-color, surface);
&:focus-visible {
outline: none;
border: none;
}
}
.results {
.result {
padding: 1rem;
&.active {
@include color-assign(background-color, surface-var);
}
}
}
}
/* === Content === */
article {
margin-bottom: 4rem;
&.single {
margin-bottom: 2rem;
}
header {
@include color-assign(background, surface);
.title {
font-family: $font-heading;
margin-bottom: 0;
}
}
footer {
border-top: 1px solid white;
@include color-assign(border-color, surface-var);
}
&:last-child {
margin-bottom: 0;
}
}
.backlinks, .sources {
&+form {
margin-top: 1rem;
}
h4 {
margin-bottom: 1rem;
padding: 0.5rem 1rem;
font-weight: bold;
border: 1px solid white;
@include color-assign(border-color, on-surface);
@include color-assign(color, on-primary);
@include color-assign(background-color, primary);
}
.link-wrapper {
display: flex;
padding: 1rem;
border: 1px solid white;
@include color-assign(border-color, on-surface);
@include color-assign(background-color, surface);
margin-bottom: 1rem;
a.link {
flex: 1;
span:first-child {
font-weight: bold;
}
}
}
.link-wrapper:last-child {
margin-bottom: 0;
}
}
/* === Media Queries === */
@media (max-width: $phone) {
.flex-grid {
display: block;
}
#goto-anything-wrapper {
#goto-anything {
left: 5%;
width: 90%;
}
#goto-anything-button {
display: block;
}
}
aside#sidebar {
width: $width-sidebar-collapsed;
.label {
display: none;
}
}
body.logged-in {
.container {
max-width: $width-wrapper + $width-sidebar-collapsed;
}
#wrapper {
margin-left: $width-sidebar-collapsed;
}
}
}
/* === Helpers === */
.bg-content { @include color-assign(background-color, surface); }
.bg-base { @include color-assign(background-color, background); }

362
assets/css/app.css

@ -0,0 +1,362 @@
@import "easymde/dist/easymde.min.css";
@import "@yaireo/tagify/dist/tagify.css";
@import "bootstrap-icons/font/bootstrap-icons.css";
@import "./inter.css";
@import "./ok.css";
@custom-media --smol (max-width: 45em);
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #f8f9fa;
--gray: #6c757d;
--gray-dark: #343a40;
--gray-light: #cccccc;
--primary: var(--red);
--secondary: var(--gray);
--success: var(--green);
--info: var(--teal);
--warning: var(--yellow);
--danger: var(--red);
--light: var(--white);
--dark: var(--gray-dark);
--width-main: 100%;
--background-navigation: var(--dark);
--color-navigation: var(--light);
--width-sidebar: 15rem;
@media (--smol) {
--width-sidebar: 3rem;
}
}
body {
margin-left: calc(var(--width-sidebar) + var(--ok-s-3));
&.logged-out {
margin-left: auto;
}
}
.tag a {
background: var(--gray-light);
padding: 0.5rem;
margin-right: 0.5rem;
border-radius: 3px;
color: var(--dark);
}
a.button {
display: inline-block;
background-color: var(--ok-accent-0);
border-radius: var(--ok-br);
color: #fff;
font-weight: var(--ok-fw-1);
height: 2.5rem;
border: none;
padding: var(--ok-s-2) var(--ok-s-3);
white-space: nowrap;
min-width: auto;
}
img {
border: 1px solid #dddddd;
}
textarea,
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
width: 100%;
}
.images {
display: flex;
img {
margin: 0;
}
}
.CodeMirror {
& * {
margin: 0;
padding: 0;
}
.CodeMirror-vscrollbar { overflow-y: hidden }
}
nav#sidebar {
left: 0;
top: 0;
position: fixed;
width: var(--width-sidebar);
height: 100vh;
box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.5);
background-color: var(--background-navigation);
@media (--smol) {
a > .label { display: none; }
}
a {
color: var(--color-navigation);
display: inline-block;
padding: 1rem;
text-decoration: none;
width: 100%;
transition: all 0.3s;
&:hover, &.active {
background-color: var(--primary);
}
svg.icon {
width: 1rem;
height: 1rem;
vertical-align: -.125em;
}
}
}
table {
th[role=columnheader]:not(.no-sort) {
cursor: pointer;
}
th[role=columnheader]:not(.no-sort):after {
content: '';
float: right;
margin-top: 7px;
border-width: 0 4px 4px;
border-style: solid;
border-color: #404040 transparent;
visibility: hidden;
opacity: 0;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
th[aria-sort=ascending]:not(.no-sort):after {
border-bottom: none;
border-width: 4px 4px 0;
}
th[aria-sort]:not(.no-sort):after {
visibility: visible;
opacity: 0.4;
}
th[role=columnheader]:not(.no-sort):hover:after {
visibility: visible;
opacity: 1;
}
}
/**
* GHColors theme by Avi Aryan (http://aviaryan.in)
* Inspired by Github syntax coloring
*/
code[class*="language-"],
pre[class*="language-"] {
color: #393A34;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
font-size: .9em;
line-height: 1.2em;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre > code[class*="language-"] {
font-size: 1em;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border: 1px solid #dddddd;
background-color: white;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
background: #b3d4fc;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .2em;
padding-top: 1px;
padding-bottom: 1px;
background: #f8f8f8;
border: 1px solid #dddddd;
}
pre {
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999988;
font-style: italic;
}
.token.namespace {
opacity: .7;
}
.token.string,
.token.attr-value {
color: #e3116c;
}
.token.punctuation,
.token.operator {
color: #393A34; /* no highlight */
}
.token.entity,
.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.variable,
.token.constant,
.token.property,
.token.regex,
.token.inserted {
color: #36acaa;
}
.token.tag,
.token.selector {
color: #00009f;
}
.token.atrule,
.token.keyword,
.token.attr-name {
color: #00a4db;
}
.token.function,
.token.deleted {
color: #9a050f;
}
.token.important,
.token.function,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
}
.alert {
padding: 1rem 2rem;
margin-left: -2rem;
margin-right: -2rem;
border: 1px solid transparent;
font-weight: bold;
&:empty {
display: none;
}
&.info {
color: var(--light);
background-color: var(--info);
}
&.warning {
color: var(--dark);
background-color: var(--warning);
}
&.danger {
color: var(--light);
background-color: var(--danger);
}
p {
margin-bottom: 0;
}
}
.invalid-feedback {
color: var(--danger);
background: var(--light);
display: block;
padding: 0.5rem;
}
#nprogress {
/* Make clicks pass-through */
pointer-events: none;
.bar {
background: var(--primary);
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 3px;
}
.peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px var(--primary), 0 0 5px var(--primary);
opacity: 1.0;
transform: rotate(3deg) translate(0px, -4px);
}
}

81
assets/css/app.scss

@ -1,81 +0,0 @@
@import "~@yaireo/tagify/src/tagify";
@import "~bootstrap-icons/font/bootstrap-icons.css";
@import "~easymde/dist/easymde.min.css";
@import "./inter";
@import "./ok.css";
@import "./variables";
@import "./navigation";
@import "./phoenix";
@import "./nprogress";
@import "./prism";
body {
margin-left: calc(var(--width-sidebar) + var(--ok-s-3));
&.logged-out {
margin-left: auto;
}
}
.tag a {
background: var(--gray-light);
padding: 0.5rem;
margin-right: 0.5rem;
border-radius: 3px;
color: var(--dark);
}
a.button {
display: inline-block;
background-color: var(--ok-accent-0);
border-radius: var(--ok-br);
color: #fff;
font-weight: var(--ok-fw-1);
height: 2.5rem;
border: none;
padding: var(--ok-s-2) var(--ok-s-3);
white-space: nowrap;
min-width: auto;
}
img {
border: 1px solid #dddddd;
}
textarea,
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
width: 100%;
}
.images {
display: flex;
img {
margin: 0;
}
}
.CodeMirror {
& * {
margin: 0;
padding: 0;
}
.CodeMirror-vscrollbar { overflow-y: hidden }
}
@media (max-width: 768px) {
:root {
--width-main: 100%;
--width-sidebar: 3rem;
}
#sidebar {
a > .label { display: none; }
}
}

2
assets/css/_inter.scss → assets/css/inter.css

@ -197,4 +197,4 @@ explicitly, e.g.
font-display: swap;
font-style: oblique 0deg 10deg;
src: url("../static/fonts/Inter.var.woff2?v=3.15") format("woff2");
}
}

3
assets/js/app.js

@ -1,7 +1,7 @@
// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import "../css/app.scss"
import "../css/app.css"
// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
@ -19,7 +19,6 @@ import NProgress from "nprogress"
import {LiveSocket} from "phoenix_live_view"
import TableSort from "tablesort"
import EasyMDE from "easymde"
import Hooks from "./hooks"
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")

3811
assets/package-lock.json
File diff suppressed because it is too large
View File

10
assets/package.json

@ -22,6 +22,7 @@
"devDependencies": {
"@babel/core": "^7.x",
"@babel/preset-env": "^7.x",
"autoprefixer": "^9.8.6",
"babel-loader": "^8.x",
"babel-plugin-prismjs": "^2.0.1",
"copy-webpack-plugin": "^8.x",
@ -29,11 +30,14 @@
"css-minimizer-webpack-plugin": "^1.x",
"file-loader": "^6.x",
"mini-css-extract-plugin": "^1.3.6",
"postcss": "^8.2.8",
"postcss-custom-media": "^7.0.8",
"postcss-loader": "^5.2.0",
"postcss-nested": "^5.0.5",
"postcss-preset-env": "^6.7.0",
"sass": "^1.32.7",
"sass-loader": "^11.0.1",
"sass-material-colors": "^0.0.5",
"postcss-reporter": "^7.0.2",
"stylelint": "^13.12.0",
"stylelint-config-standard": "^21.0.0",
"terser-webpack-plugin": "^5.1.1",
"webpack": "^5.21.2",
"webpack-bundle-analyzer": "^4.4.0",

15
assets/postcss.config.js

@ -1,7 +1,14 @@
module.exports = {
plugins: [
require('postcss-preset-env')({
browsers: 'last 2 versions',
require("stylelint")({
fix: true
}),
],
};
require("postcss-preset-env"),
require("postcss-custom-media"),
require("postcss-nested"),
require("autoprefixer"),
require("postcss-reporter")({
clearReportedMessages: false
})
]
}

7
assets/webpack.config.js

@ -32,8 +32,7 @@ module.exports = (env, options) => {
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
'postcss-loader'
],
},
{
@ -54,9 +53,7 @@ module.exports = (env, options) => {
new BundleAnalyzerPlugin({ analyzerMode: 'disabled' }),
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin({
patterns: [
{ from: 'static/', to: '../' }
]
patterns: [{ from: 'static/', to: '../' }]
})
],
optimization: {

6
lib/mirage_web/templates/layout/app.html.eex

@ -1,4 +1,4 @@
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<p class="alert alert-warning" role="alert"><%= get_flash(@conn, :warn) %></p>
<p class="alert info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert danger" role="alert"><%= get_flash(@conn, :error) %></p>
<p class="alert warning" role="alert"><%= get_flash(@conn, :warn) %></p>
<%= @inner_content %>

6
lib/mirage_web/templates/layout/live.html.leex

@ -1,12 +1,12 @@
<p class="alert alert-info" role="alert"
<p class="alert info" role="alert"
phx-click="lv:clear-flash"
phx-value-key="info"><%= live_flash(@flash, :info) %></p>
<p class="alert alert-danger" role="alert"
<p class="alert danger" role="alert"
phx-click="lv:clear-flash"
phx-value-key="error"><%= live_flash(@flash, :error) %></p>
<p class="alert alert-warning" role="alert"
<p class="alert warning" role="alert"
phx-click="lv:clear-flash"
phx-value-key="warn"><%= live_flash(@flash, :warn) %></p>

2
mix.exs

@ -1,7 +1,7 @@
defmodule Mirage.MixProject do
use Mix.Project
@version "0.85.0"
@version "0.86.0"
def project do
[

Loading…
Cancel
Save