yagich/pyrom
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add Atkinson Hyperlegible Mono font for textarea, normalize css a bit

Browse Source
This commit is contained in:
Lera Elvoé
2025-12-04 04:44:32 +03:00
parent 3baccb87b1
commit 062cab44bc
7 changed files with 129 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
THIRDPARTY.md
View File

@@ -23,6 +23,13 @@ Copyright: `© 2017-2020 by Paul James Miller. All rights reserved.`
License: SIL Open Font License 1.1 License: SIL Open Font License 1.1
Designers: Paul James Miller Designers: Paul James Miller
## Atkinson Hyperlegible Mono
Affected files: [`data/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf`](./data/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf) [`data/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf`](./data/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf)
URL: https://www.brailleinstitute.org/freefont/
Copyright: Copyright 2020-2024 The Atkinson Hyperlegible Mono Project Authors (https://github.com/googlefonts/atkinson-hyperlegible-next-mono)
License: SIL Open Font License 1.1
Designers: Elliott Scott, Megan Eiswerth, Braille Institute, Applied Design Works, Letters From Sweden
## ICONCINO ## ICONCINO
Affected files: [`app/templates/common/icons.html`](./app/templates/common/icons.html) Affected files: [`app/templates/common/icons.html`](./app/templates/common/icons.html)

37
data/static/css/style.css
View File

@@ -26,10 +26,26 @@
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
@font-face {
font-family: "Atkinson Hyperlegible Mono";
src: url("/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf");
font-weight: 125 950;
font-style: normal;
}
@font-face {
font-family: "Atkinson Hyperlegible Mono";
src: url("/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf");
font-weight: 125 950;
font-style: italic;
}
*, ::before, ::after {
box-sizing: border-box;
}
.reaction-button.active, .tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton { .reaction-button.active, .tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
cursor: default; cursor: default;
font-size: 0.9em; font-size: 1rem;
font-family: "Cadman"; font-family: "Cadman", sans-serif;
text-decoration: none; text-decoration: none;
border: 1px solid black; border: 1px solid black;
border-radius: 4px; border-radius: 4px;
@@ -38,7 +54,7 @@
} }
body { body {
font-family: "Cadman"; font-family: "Cadman", sans-serif;
margin: 20px 100px; margin: 20px 100px;
background-color: rgb(173.5214173228, 183.6737007874, 161.0262992126); background-color: rgb(173.5214173228, 183.6737007874, 161.0262992126);
color: black; color: black;
@@ -188,6 +204,10 @@ a:visited {
padding: 10px 0; padding: 10px 0;
} }
code {
font-family: "Atkinson Hyperlegible Mono", monospace;
}
pre code { pre code {
display: block; display: block;
background-color: rgb(38.5714173228, 40.9237007874, 35.6762992126); background-color: rgb(38.5714173228, 40.9237007874, 35.6762992126);
@@ -550,7 +570,7 @@ pre code { /* Literal.Number.Integer.Long */ }
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
font-family: "Cadman"; font-family: "Cadman", sans-serif;
border-top-right-radius: 8px; border-top-right-radius: 8px;
border-top-left-radius: 8px; border-top-left-radius: 8px;
background-color: #c1ceb1; background-color: #c1ceb1;
@@ -835,15 +855,20 @@ input[type=text], input[type=password], textarea, select {
border-radius: 4px; border-radius: 4px;
padding: 7px 10px; padding: 7px 10px;
width: 100%; width: 100%;
box-sizing: border-box;
resize: vertical; resize: vertical;
color: black; color: black;
background-color: rgb(217.8, 225.6, 208.2); background-color: rgb(217.8, 225.6, 208.2);
font-size: 100%;
font-family: inherit;
} }
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
background-color: rgb(230.2, 235.4, 223.8); background-color: rgb(230.2, 235.4, 223.8);
} }
textarea {
font-family: "Atkinson Hyperlegible Mono", monospace;
}
.infobox { .infobox {
border: 2px solid black; border: 2px solid black;
background-color: #81a3e6; background-color: #81a3e6;
@@ -1094,7 +1119,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
.babycode-editor { .babycode-editor {
height: 150px; height: 150px;
font-size: 1rem;
} }
.babycode-editor-container { .babycode-editor-container {
@@ -1187,7 +1211,6 @@ ul.horizontal li, ol.horizontal li {
.accordion { .accordion {
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-top-left-radius: 4px; border-top-left-radius: 4px;
box-sizing: border-box;
border: 1px solid black; border: 1px solid black;
margin: 10px 5px; margin: 10px 5px;
overflow: hidden; overflow: hidden;

37
data/static/css/theme-otomotone.css
View File

@@ -26,10 +26,26 @@
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
@font-face {
font-family: "Atkinson Hyperlegible Mono";
src: url("/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf");
font-weight: 125 950;
font-style: normal;
}
@font-face {
font-family: "Atkinson Hyperlegible Mono";
src: url("/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf");
font-weight: 125 950;
font-style: italic;
}
*, ::before, ::after {
box-sizing: border-box;
}
.reaction-button.active, .tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton { .reaction-button.active, .tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
cursor: default; cursor: default;
font-size: 0.9em; font-size: 1rem;
font-family: "Cadman"; font-family: "Cadman", sans-serif;
text-decoration: none; text-decoration: none;
border: 1px solid black; border: 1px solid black;
border-radius: 8px; border-radius: 8px;
@@ -38,7 +54,7 @@
} }
body { body {
font-family: "Cadman"; font-family: "Cadman", sans-serif;
margin: 20px 100px; margin: 20px 100px;
background-color: #220d16; background-color: #220d16;
color: #e6e6e6; color: #e6e6e6;
@@ -188,6 +204,10 @@ a:visited {
padding: 10px 0; padding: 10px 0;
} }
code {
font-family: "Atkinson Hyperlegible Mono", monospace;
}
pre code { pre code {
display: block; display: block;
background-color: #302731; background-color: #302731;
@@ -550,7 +570,7 @@ pre code { /* Literal.Number.Integer.Long */ }
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
font-family: "Cadman"; font-family: "Cadman", sans-serif;
border-top-right-radius: 8px; border-top-right-radius: 8px;
border-top-left-radius: 8px; border-top-left-radius: 8px;
background-color: #9b649b; background-color: #9b649b;
@@ -835,15 +855,20 @@ input[type=text], input[type=password], textarea, select {
border-radius: 8px; border-radius: 8px;
padding: 7px 10px; padding: 7px 10px;
width: 100%; width: 100%;
box-sizing: border-box;
resize: vertical; resize: vertical;
color: #e6e6e6; color: #e6e6e6;
background-color: #371e37; background-color: #371e37;
font-size: 100%;
font-family: inherit;
} }
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
background-color: #514151; background-color: #514151;
} }
textarea {
font-family: "Atkinson Hyperlegible Mono", monospace;
}
.infobox { .infobox {
border: 2px solid black; border: 2px solid black;
background-color: #775891; background-color: #775891;
@@ -1094,7 +1119,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
.babycode-editor { .babycode-editor {
height: 150px; height: 150px;
font-size: 1rem;
} }
.babycode-editor-container { .babycode-editor-container {
@@ -1187,7 +1211,6 @@ ul.horizontal li, ol.horizontal li {
.accordion { .accordion {
border-top-right-radius: 8px; border-top-right-radius: 8px;
border-top-left-radius: 8px; border-top-left-radius: 8px;
box-sizing: border-box;
border: 1px solid black; border: 1px solid black;
margin: 10px 5px; margin: 10px 5px;
overflow: hidden; overflow: hidden;

37
data/static/css/theme-peachy.css
View File

@@ -26,10 +26,26 @@
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
@font-face {
font-family: "Atkinson Hyperlegible Mono";
src: url("/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf");
font-weight: 125 950;
font-style: normal;
}
@font-face {
font-family: "Atkinson Hyperlegible Mono";
src: url("/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf");
font-weight: 125 950;
font-style: italic;
}
*, ::before, ::after {
box-sizing: border-box;
}
.reaction-button.active, .tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton { .reaction-button.active, .tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
cursor: default; cursor: default;
font-size: 0.9em; font-size: 1rem;
font-family: "Cadman"; font-family: "Cadman", sans-serif;
text-decoration: none; text-decoration: none;
border: 1px solid black; border: 1px solid black;
border-radius: 16px; border-radius: 16px;
@@ -38,7 +54,7 @@
} }
body { body {
font-family: "Cadman"; font-family: "Cadman", sans-serif;
margin: 12px 50px; margin: 12px 50px;
background-color: #c85d45; background-color: #c85d45;
color: black; color: black;
@@ -188,6 +204,10 @@ a:visited {
padding: 6px 0; padding: 6px 0;
} }
code {
font-family: "Atkinson Hyperlegible Mono", monospace;
}
pre code { pre code {
display: block; display: block;
background-color: rgb(41.7051685393, 28.2759550562, 24.6948314607); background-color: rgb(41.7051685393, 28.2759550562, 24.6948314607);
@@ -550,7 +570,7 @@ pre code { /* Literal.Number.Integer.Long */ }
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
font-family: "Cadman"; font-family: "Cadman", sans-serif;
border-top-right-radius: 16px; border-top-right-radius: 16px;
border-top-left-radius: 16px; border-top-left-radius: 16px;
background-color: #f27a5a; background-color: #f27a5a;
@@ -835,15 +855,20 @@ input[type=text], input[type=password], textarea, select {
border-radius: 16px; border-radius: 16px;
padding: 8px; padding: 8px;
width: 100%; width: 100%;
box-sizing: border-box;
resize: vertical; resize: vertical;
color: black; color: black;
background-color: rgb(247.2, 175.2, 156); background-color: rgb(247.2, 175.2, 156);
font-size: 100%;
font-family: inherit;
} }
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
background-color: rgb(249.8, 201.8, 189); background-color: rgb(249.8, 201.8, 189);
} }
textarea {
font-family: "Atkinson Hyperlegible Mono", monospace;
}
.infobox { .infobox {
border: 2px solid black; border: 2px solid black;
background-color: #81a3e6; background-color: #81a3e6;
@@ -1094,7 +1119,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
.babycode-editor { .babycode-editor {
height: 150px; height: 150px;
font-size: 1rem;
} }
.babycode-editor-container { .babycode-editor-container {
@@ -1187,7 +1211,6 @@ ul.horizontal li, ol.horizontal li {
.accordion { .accordion {
border-top-right-radius: 16px; border-top-right-radius: 16px;
border-top-left-radius: 16px; border-top-left-radius: 16px;
box-sizing: border-box;
border: 1px solid black; border: 1px solid black;
margin: 6px 3px; margin: 6px 3px;
overflow: hidden; overflow: hidden;

BIN
data/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf Normal file
View File

Binary file not shown.

BIN
data/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf Normal file
View File

Binary file not shown.

39
sass/_default.scss
View File

@@ -95,14 +95,32 @@ $DEFAULT_BORDER_RADIUS: 4px !default;
font-style: italic; font-style: italic;
} }
@font-face {
font-family: "Atkinson Hyperlegible Mono";
src: url("/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf");
font-weight: 125 950;
font-style: normal;
}
@font-face {
font-family: "Atkinson Hyperlegible Mono";
src: url("/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf");
font-weight: 125 950;
font-style: italic;
}
*, ::before, ::after {
box-sizing: border-box;
}
$button_border: $DEFAULT_BORDER !default; $button_border: $DEFAULT_BORDER !default;
$button_padding: $SMALL_PADDING $BIG_PADDING !default; $button_padding: $SMALL_PADDING $BIG_PADDING !default;
$button_border_radius: $DEFAULT_BORDER_RADIUS !default; $button_border_radius: $DEFAULT_BORDER_RADIUS !default;
$button_margin: $MEDIUM_PADDING $ZERO_PADDING !default; $button_margin: $MEDIUM_PADDING $ZERO_PADDING !default;
%button-base { %button-base {
cursor: default; cursor: default;
font-size: 0.9em; font-size: 1rem;
font-family: "Cadman"; font-family: "Cadman", sans-serif;
text-decoration: none; text-decoration: none;
border: $button_border; border: $button_border;
border-radius: $button_border_radius; border-radius: $button_border_radius;
@@ -154,7 +172,7 @@ $navbar_margin: 0 !default;
$body_margin: $BIG_PADDING $PAGE_SIDE_MARGIN !default; $body_margin: $BIG_PADDING $PAGE_SIDE_MARGIN !default;
body { body {
font-family: "Cadman"; font-family: "Cadman", sans-serif;
// font-size: 18px; // font-size: 18px;
margin: $body_margin; margin: $body_margin;
background-color: $MAIN_BG; background-color: $MAIN_BG;
@@ -340,6 +358,10 @@ $signature_container_padding: $MEDIUM_PADDING $ZERO_PADDING !default;
padding: $signature_container_padding; padding: $signature_container_padding;
} }
code {
font-family: "Atkinson Hyperlegible Mono", monospace;
}
$code_background_color: $DARK_3 !default; $code_background_color: $DARK_3 !default;
$code_font_color: white !default; $code_font_color: white !default;
$code_border_radius: 8px !default; $code_border_radius: 8px !default;
@@ -444,7 +466,7 @@ $copy_code_border: 2px solid black !default;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
font-family: "Cadman"; font-family: "Cadman", sans-serif;
border-top-right-radius: $code_border_radius; border-top-right-radius: $code_border_radius;
border-top-left-radius: $code_border_radius; border-top-left-radius: $code_border_radius;
background-color: $copy_code_header_background; background-color: $copy_code_header_background;
@@ -684,16 +706,21 @@ input[type="text"], input[type="password"], textarea, select {
border-radius: $text_input_border_radius; border-radius: $text_input_border_radius;
padding: $text_input_padding; padding: $text_input_padding;
width: 100%; width: 100%;
box-sizing: border-box;
resize: vertical; resize: vertical;
color: $text_input_font_color; color: $text_input_font_color;
background-color: $text_input_background; background-color: $text_input_background;
font-size: 100%;
font-family: inherit;
&:focus { &:focus {
background-color: $text_input_background_focus; background-color: $text_input_background_focus;
} }
} }
textarea {
font-family: "Atkinson Hyperlegible Mono", monospace;
}
$infobox_info_color: #81a3e6 !default; $infobox_info_color: #81a3e6 !default;
$infobox_critical_color: #ed8181 !default; $infobox_critical_color: #ed8181 !default;
$infobox_warn_color: #fbfb8d !default; $infobox_warn_color: #fbfb8d !default;
@@ -1020,7 +1047,6 @@ $post_editing_context_margin: $BIG_PADDING $ZERO_PADDING !default;
.babycode-editor { .babycode-editor {
height: 150px; height: 150px;
font-size: 1rem;
} }
.babycode-editor-container { .babycode-editor-container {
@@ -1113,7 +1139,6 @@ $accordion_margin: $MEDIUM_PADDING $SMALL_PADDING !default;
.accordion { .accordion {
border-top-right-radius: $accordion_border_radius; border-top-right-radius: $accordion_border_radius;
border-top-left-radius: $accordion_border_radius; border-top-left-radius: $accordion_border_radius;
box-sizing: border-box;
border: $accordion_border; border: $accordion_border;
margin: $accordion_margin; margin: $accordion_margin;
overflow: hidden; // for border-radius clipping overflow: hidden; // for border-radius clipping