Skip to content

Commit

Permalink
0.1.18
Browse files Browse the repository at this point in the history
  • Loading branch information
@BenjaminAster
BenjaminAster committed Feb 5, 2023
1 parent c843b8b commit 05b6b17
Show file tree
Hide file tree
Showing 21 changed files with 490 additions and 255 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,5 @@ A user-friendly [LaTeX](https://latex-project.org) alternative with a live edito
|-

[benjaminaster.com/pamm](https://benjaminaster.com/pamm/)

![screenshot of the PAMM editor](./assets/screenshot-editor-desktop.png)
6 changes: 3 additions & 3 deletions app.webmanifest
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"display_override": ["window-controls-overlay"],
"categories": ["education"],
"lang": "en",
"theme_color": "blueViolet",
"theme_color": "#2b2a33",
"background_color": "#2f3034",
"icons": [
{
Expand Down Expand Up @@ -59,14 +59,14 @@
},
{
"src": "./assets/screenshot-editor-mobile.png",
"sizes": "1081x2340",
"sizes": "808x1588",
"type": "image/png",
"label": "a screenshot of the PAMM editor",
"form_factor": "narrow"
},
{
"src": "./assets/screenshot-files-mobile.png",
"sizes": "1081x2340",
"sizes": "808x1588",
"type": "image/png",
"label": "a screenshot of the PAMM files overview",
"form_factor": "narrow"
Expand Down
3 changes: 2 additions & 1 deletion assets/icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 1 addition & 2 deletions assets/introduction.pamm
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
version 1
-----

# PAMM
*P*retty *A*wesome *M*ath *M*arkup – A user-friendly LaTeX alternative with a live editor

Expand Down Expand Up @@ -35,7 +34,7 @@ The most basic PAMM operators are:
- Roots: `4#3` is rendered as { 4#3 }
- Square roots: `#3` is rendered as { #3 }
- Powers: `4^3` is rendered as { 4^3 }
- Square powers: `4^^` is rendered as { 4^^ }
- Squares: `4^^` is rendered as { 4^^ }
- Indices: `n_i` is rendered as { n_i }, `n1` is rendered as { n1 }

A core concept of PAMM is the reliance on whitespace. PAMM uses the placement of whitespace to differenciate between different expressions. For example, `1 + 2/3` becomes { 1 + 2/3 } while `1+2 / 3` or `1+2/3` both become { 1+2 / 3 }. While in general this should result in having to use far fewer braces and parentheses, there are often situations where parentheses are still needed. For example, if you want to write the math expression { (2^3 + 4)/5 }, both `2^3+4/5` (rendered as { 2^3+4/5 }) and `2^3 + 4/5` (rendered as { 2^3 + 4/5 }) do not give the desired result. In this example, you would have to enclose the numerator in parentheseis, like so: `(2^3 + 4)/5`. If a parenthesis serves no other purpose than to tell PAMM how to interpret an expression, it gets automatically removed, so `(2^3 + 4)/5` gets rendered as { (2^3 + 4)/5 }. If you still want to keep it, you have to double-enclose the expression, so `((2^3 + 4))/5` gets rendered as { ((2^3 + 4))/5 }.
Expand Down
Binary file modified assets/screenshot-editor-desktop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/screenshot-editor-mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/screenshot-files-desktop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/screenshot-files-mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 9 additions & 14 deletions css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,6 @@ math {
font-family: "Latin Modern Math", math;
}

:root {
scrollbar-color: blueViolet transparent;
}

h1, h2, h3, h4, h5, h6, strong, b {
font-weight: 600;
}
Expand Down Expand Up @@ -80,7 +76,6 @@ button, input, textarea, select, option {

input, textarea {
cursor: auto;
background: none;
}

ul {
Expand All @@ -102,8 +97,8 @@ dialog {
}

::selection {
background-color: CanvasText;
color: Canvas;
background-color: var(--color);
color: var(--background);
}

@media (hover: none) {
Expand All @@ -117,8 +112,8 @@ dialog {
}

::-webkit-scrollbar, ::-webkit-scrollbar-corner {
inline-size: 1rem;
block-size: 1rem;
inline-size: .8rem;
block-size: .8rem;
background: none;
}

Expand All @@ -127,10 +122,10 @@ dialog {
}

::-webkit-scrollbar-thumb, ::-webkit-scrollbar-button {
background-color: blueViolet;
inline-size: 1rem;
block-size: 1rem;
border: .25rem solid transparent;
border-radius: .5rem;
background-color: var(--scrollbar-color);
inline-size: .8rem;
block-size: .8rem;
border: .2rem solid transparent;
border-radius: .4rem;
background-clip: padding-box;
}
8 changes: 7 additions & 1 deletion css/icons.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

97 changes: 63 additions & 34 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,44 +16,66 @@
}

@layer main {
:root {
color-scheme: light;
--background: white;
--transparent-background: #eee4;
--transparent-gray-1: #ccc5;
--transparent-gray-2: #aaa5;
--gray-1: #eee;
--gray-2: #ddd;
--gray-3: #ccc;
--shadow-color: #8885;
}

@media screen {
:root:not(.light-theme) {
color-scheme: dark;
--background: #1b1b1e;
--transparent-background: #1115;
--transparent-gray-1: #3335;
--transparent-gray-2: #5555;
--gray-1: #2b2b2e;
--gray-2: #3b3b3e;
--gray-3: #4b4b4e;
--color: #fbfbfe;
--hue: 247deg;
--saturation: 10%;
--background-lightness: 10%;
--gray-lightness-step: 8%;
--shadow-color: #0004;
--item-shadow-color: #0004;

--accent-hue: 245deg;
--accent-saturation: 70%;
--accent-lightness: 55%;
}
}

:root {
color-scheme: light;
--color: black;
--hue: 240deg;
--saturation: 15%;
--background-lightness: 100%;
--gray-lightness-step: -5%;
--shadow-color: var(--transparent-gray-3);
--item-shadow-color: transparent;

--accent-hue: 235deg;
--accent-saturation: 80%;
--accent-lightness: 65%;
}

:root {
--background: hsl(var(--hue) var(--saturation) var(--background-lightness));
--gray-1: hsl(var(--hue) var(--saturation) calc(var(--background-lightness) + 1 * var(--gray-lightness-step)));
--gray-2: hsl(var(--hue) var(--saturation) calc(var(--background-lightness) + 2 * var(--gray-lightness-step)));
--gray-3: hsl(var(--hue) var(--saturation) calc(var(--background-lightness) + 3 * var(--gray-lightness-step)));
--gray-4: hsl(var(--hue) var(--saturation) calc(var(--background-lightness) + 4 * var(--gray-lightness-step)));
--gray-5: hsl(var(--hue) var(--saturation) calc(var(--background-lightness) + 5 * var(--gray-lightness-step)));
--transparent-background: hsl(var(--hue) var(--saturation) calc(var(--background-lightness) + 2 * var(--gray-lightness-step)) / 30%);
--transparent-gray-1: hsl(var(--hue) var(--saturation) calc(var(--background-lightness) + 4 * var(--gray-lightness-step)) / 30%);
--transparent-gray-2: hsl(var(--hue) var(--saturation) calc(var(--background-lightness) + 6 * var(--gray-lightness-step)) / 30%);
--transparent-gray-3: hsl(var(--hue) var(--saturation) calc(var(--background-lightness) + 8 * var(--gray-lightness-step)) / 30%);

--titlebar-area-inline-start: env(titlebar-area-x, 0px);
--titlebar-area-inline-size: env(titlebar-area-width, 0px);
--titlebar-area-inline-end: calc(100dvi - env(titlebar-area-x, 0px) - env(titlebar-area-width, 0px));
--titlebar-area-block-start: env(titlebar-area-y, 0px);
--titlebar-area-block-size: env(titlebar-area-height, 0px);
--titlebar-area-block-end: calc(100dvb - env(titlebar-area-y, 0px) - env(titlebar-area-height, 0px));



--px: calc(1rem / 16);

--scrollbar-color: hsl(var(--accent-hue) var(--accent-saturation) var(--accent-lightness));
scrollbar-color: var(--scrollbar-color) transparent;

font-family: system-ui, sans-serif;
background-color: var(--background);
color: var(--color);
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
Expand All @@ -70,7 +92,7 @@
"main"; */
display: flex;
flex-direction: column;
overflow: hidden;
/* overflow: hidden; */
/* overflow: clip; */
}

Expand All @@ -85,7 +107,8 @@
display: flex;
flex-direction: column;
/* overflow: clip; */
overflow: hidden;
/* overflow: hidden; */
overflow: auto;
/* overflow: clip; */
box-sizing: border-box;
view-transition-name: main-content;
Expand All @@ -99,12 +122,6 @@
/* isolation: isolate; */
}

@media (hover: none) {
main {
background-color: #00000001;
}
}

/* Arabic (ar), Hebrew (iw), Pashto (ps), Persian (fa), Sindhi (sd), Urdu (ur), Uyghur (ug), Yiddish (yi) */
:root:is(.translated-rtl, :lang(ar), :lang(iw), :lang(ps), :lang(fa), :lang(sd), :lang(ur), :lang(ug), :lang(yi)) {
direction: rtl;
Expand Down Expand Up @@ -153,7 +170,7 @@
padding: .8rem 1rem;
border-radius: .5rem;
background-color: var(--gray-2);
box-shadow: 0 0 4rem #0004;
box-shadow: 0 0 4rem var(--shadow-color);
max-inline-size: calc(min(100% - 6rem, 40rem))
}

Expand All @@ -163,7 +180,9 @@
}

dialog.messagebox .input {
/* border: 2px solid hsl(var(--accent-hue) var(--accent-saturation) calc(var(--accent-lightness) + 5%)); */
border: 2px solid royalBlue;
/* border: 2px solid royalBlue; */
padding: .4em .6em;
border-radius: .3rem;
}
Expand All @@ -185,13 +204,16 @@
}

dialog.messagebox button.ok {
color-scheme: dark;
/* --button-color: hsl(var(--accent-hue) var(--accent-saturation) calc(var(--accent-lightness) + 5%)); */
--button-color: royalBlue;
/* --button-color: royalBlue; */
color: white;
}

dialog.messagebox button.cancel {
--button-color: var(--gray-3);
outline-color: #888;
outline-color: var(--gray-5);
}

dialog.messagebox button {
Expand Down Expand Up @@ -225,6 +247,11 @@
background: none;
}

dialog.export h2 {
font-weight: 500;
font-size: 1.2rem;
}

dialog.export > ul {
display: flex;
}
Expand All @@ -238,11 +265,11 @@
}

dialog.export > ul > li:not(:first-of-type) {
border-inline-start: 1px solid #8886;
border-inline-start: 1px solid var(--transparent-gray-3);
}

dialog.export > ul > li:hover {
background-color: #8883;
background-color: var(--transparent-gray-2);
border-radius: .5rem;
border-inline-start-color: transparent;
}
Expand All @@ -261,10 +288,12 @@
inline-size: 100%;
block-size: 100%;
box-sizing: border-box;
/* --icon-size: min(6rem, 80%); */
--icon-size: min(3rem, 80%);
}

dialog.export > ul > li button::before {
inline-size: min(6rem, 80%);
opacity: .8;
}

dialog.export button.close {
Expand All @@ -279,7 +308,7 @@
}

dialog.export button.close:hover {
background-color: #8883;
background-color: var(--transparent-gray-3);
}

:root {
Expand Down
Loading

0 comments on commit 05b6b17

Please sign in to comment.