Mark/webpage
1
1
Fork 0
Code Pull Requests Actions 5 Packages Releases Activity

Added index

Browse Source
This commit is contained in:
rm-dr
2025-11-01 22:53:29 -07:00
parent 5da2311583
commit e6dec3efc5
32 changed files with 8093 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
crates/service-webpage/css/blocks.scss Normal file
View File

@@ -0,0 +1,144 @@
ul {
list-style: none;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
li {
margin-bottom: 0.25rem;
}
li p {
margin-bottom: 0.2rem;
}
/* Bonus space after last li */
li:last-child {
margin-bottom: 3rem;
}
ul li::marker {
content: "> ";
color: var(--metaColor);
}
ul li:hover::marker {
content: ">> ";
font-weight: 1000;
color: var(--linkColor);
transition: 100ms;
}
.titleList li {
margin-bottom: .75rem;
}
blockquote {
border-left: .5rem solid var(--metaColor);
margin: 1rem;
padding: 0 0 0 1rem
}
textarea {
border: 2px dotted;
outline: 0;
resize: none;
overflow: auto;
background-color: var(--bgColor)
}
pre .wrap {
overflow: hidden;
overflow-wrap: break-word;
word-break: break-all;
white-space: pre-wrap;
}
pre :not(.wrap) {
padding: 1rem;
font-style: monospace;
white-space: pre;
overflow: scroll;
display: block;
border: solid .2rem transparent;
transition: 150ms;
counter-reset: line;
}
pre:hover {
border: solid .2rem var(--lightBgColor);
}
pre span:first-of-type:before {
border-top: 1px dashed var(--lightBgColor);
}
pre span:before {
counter-increment: line;
content: counter(line, decimal-leading-zero);
display: inline-block;
border-right: 1px solid var(--lightBgColor);
border-bottom: 1px dashed var(--lightBgColor);
padding: 0 .5em;
margin-right: .5em;
color: #888
}
p code,
li code,
div code {
padding: 0 .2rem 0 .2rem;
border-radius: .3rem;
color: var(--codeFgColor);
background-color: var(--codeBgColor);
}
pre code {
padding: 0;
border-radius: 0;
color: inherit;
background-color: inherit;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: none;
margin-left: auto;
margin-right: auto;
margin-bottom: 1rem;
line-height: 1.1
}
thead th:first-child {
width: 20%
}
td,
th {
text-align: left
}
th {
font-weight: 400
}
td,
th {
padding: .5rem;
border: dashed .1rem var(--metaColor)
}
.metaData,
hr,
textarea {
color: var(--metaColor)
}

152
crates/service-webpage/css/fontawesome/_animated.scss vendored Normal file
View File

@@ -0,0 +1,152 @@
// animating icons
// --------------------------
.#{$fa-css-prefix}-beat {
animation-name: #{$fa-css-prefix}-beat;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
}
.#{$fa-css-prefix}-bounce {
animation-name: #{$fa-css-prefix}-bounce;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
}
.#{$fa-css-prefix}-fade {
animation-name: #{$fa-css-prefix}-fade;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
}
.#{$fa-css-prefix}-beat-fade {
animation-name: #{$fa-css-prefix}-beat-fade;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
}
.#{$fa-css-prefix}-flip {
animation-name: #{$fa-css-prefix}-flip;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
}
.#{$fa-css-prefix}-shake {
animation-name: #{$fa-css-prefix}-shake;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
}
.#{$fa-css-prefix}-spin {
animation-name: #{$fa-css-prefix}-spin;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
}
.#{$fa-css-prefix}-spin-reverse {
--#{$fa-css-prefix}-animation-direction: reverse;
}
.#{$fa-css-prefix}-pulse,
.#{$fa-css-prefix}-spin-pulse {
animation-name: #{$fa-css-prefix}-spin;
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, steps(8));
}
// if agent or operating system prefers reduced motion, disable animations
// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
@media (prefers-reduced-motion: reduce) {
.#{$fa-css-prefix}-beat,
.#{$fa-css-prefix}-bounce,
.#{$fa-css-prefix}-fade,
.#{$fa-css-prefix}-beat-fade,
.#{$fa-css-prefix}-flip,
.#{$fa-css-prefix}-pulse,
.#{$fa-css-prefix}-shake,
.#{$fa-css-prefix}-spin,
.#{$fa-css-prefix}-spin-pulse {
animation-delay: -1ms;
animation-duration: 1ms;
animation-iteration-count: 1;
transition-delay: 0s;
transition-duration: 0s;
}
}
@keyframes #{$fa-css-prefix}-beat {
0%, 90% { transform: scale(1); }
45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); }
}
@keyframes #{$fa-css-prefix}-bounce {
0% { transform: scale(1,1) translateY(0); }
10% { transform: scale(var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
30% { transform: scale(var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em)); }
50% { transform: scale(var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
57% { transform: scale(1,1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em)); }
64% { transform: scale(1,1) translateY(0); }
100% { transform: scale(1,1) translateY(0); }
}
@keyframes #{$fa-css-prefix}-fade {
50% { opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4); }
}
@keyframes #{$fa-css-prefix}-beat-fade {
0%, 100% {
opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125));
}
}
@keyframes #{$fa-css-prefix}-flip {
50% {
transform: rotate3d(var(--#{$fa-css-prefix}-flip-x, 0), var(--#{$fa-css-prefix}-flip-y, 1), var(--#{$fa-css-prefix}-flip-z, 0), var(--#{$fa-css-prefix}-flip-angle, -180deg));
}
}
@keyframes #{$fa-css-prefix}-shake {
0% { transform: rotate(-15deg); }
4% { transform: rotate(15deg); }
8%, 24% { transform: rotate(-18deg); }
12%, 28% { transform: rotate(18deg); }
16% { transform: rotate(-22deg); }
20% { transform: rotate(22deg); }
32% { transform: rotate(-12deg); }
36% { transform: rotate(12deg); }
40%, 100% { transform: rotate(0deg); }
}
@keyframes #{$fa-css-prefix}-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

20
crates/service-webpage/css/fontawesome/_bordered-pulled.scss vendored Normal file
View File

@@ -0,0 +1,20 @@
// bordered + pulled icons
// -------------------------
.#{$fa-css-prefix}-border {
border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
}
.#{$fa-css-prefix}-pull-left {
float: left;
margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
}
.#{$fa-css-prefix}-pull-right {
float: right;
margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
}

43
crates/service-webpage/css/fontawesome/_core.scss vendored Normal file
View File

@@ -0,0 +1,43 @@
// base icon class definition
// -------------------------
.#{$fa-css-prefix} {
font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}');
font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
}
.#{$fa-css-prefix},
.#{$fa-css-prefix}-classic,
.#{$fa-css-prefix}-sharp,
.fas,
.#{$fa-css-prefix}-solid,
.far,
.#{$fa-css-prefix}-regular,
.fab,
.#{$fa-css-prefix}-brands {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: var(--#{$fa-css-prefix}-display, #{$fa-display});
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
}
.fas,
.#{$fa-css-prefix}-classic,
.#{$fa-css-prefix}-solid,
.far,
.#{$fa-css-prefix}-regular {
font-family: 'Font Awesome 6 Free';
}
.fab,
.#{$fa-css-prefix}-brands {
font-family: 'Font Awesome 6 Brands';
}
%fa-icon {
@include fa-icon;
}

7
crates/service-webpage/css/fontawesome/_fixed-width.scss vendored Normal file
View File

@@ -0,0 +1,7 @@
// fixed-width icons
// -------------------------
.#{$fa-css-prefix}-fw {
text-align: center;
width: $fa-fw-width;
}

57
crates/service-webpage/css/fontawesome/_functions.scss vendored Normal file
View File

@@ -0,0 +1,57 @@
// functions
// --------------------------
// fa-content: convenience function used to set content property
@function fa-content($fa-var) {
@return unquote("\"#{ $fa-var }\"");
}
// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
//
// Licensed under: The MIT License (MIT)
//
// Copyright (c) 2011-2021 Twitter, Inc.
// Copyright (c) 2011-2021 The Bootstrap Authors
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
@function fa-divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0, 1, -1);
$dividend: abs($dividend);
$divisor: abs($divisor);
$quotient: 0;
$remainder: $dividend;
@if $dividend == 0 {
@return 0;
}
@if $divisor == 0 {
@error "Cannot divide by 0";
}
@if $divisor == 1 {
@return $dividend;
}
@while $remainder >= $divisor {
$quotient: $quotient + 1;
$remainder: $remainder - $divisor;
}
@if $remainder > 0 and $precision > 0 {
$remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * .1;
}
@return ($quotient + $remainder) * $sign;
}

10
crates/service-webpage/css/fontawesome/_icons.scss vendored Normal file
View File

@@ -0,0 +1,10 @@
// specific icon class definition
// -------------------------
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
@each $name, $icon in $fa-icons {
.#{$fa-css-prefix}-#{$name}::before { content: unquote("\"#{ $icon }\""); }
}

18
crates/service-webpage/css/fontawesome/_list.scss vendored Normal file
View File

@@ -0,0 +1,18 @@
// icons in a list
// -------------------------
.#{$fa-css-prefix}-ul {
list-style-type: none;
margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin});
padding-left: 0;
> li { position: relative; }
}
.#{$fa-css-prefix}-li {
left: calc(var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}) * -1);
position: absolute;
text-align: center;
width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width});
line-height: inherit;
}

72
crates/service-webpage/css/fontawesome/_mixins.scss vendored Normal file
View File

@@ -0,0 +1,72 @@
// mixins
// --------------------------
// base rendering for an icon
@mixin fa-icon {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
}
// sets relative font-sizing and alignment (in _sizing)
@mixin fa-size ($font-size) {
font-size: fa-divide($font-size, $fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
}
// only display content to screen readers
// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
@mixin fa-sr-only() {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
// use in conjunction with .sr-only to only display content when it's focused
@mixin fa-sr-only-focusable() {
&:not(:focus) {
@include fa-sr-only();
}
}
// sets a specific icon family to use alongside style + icon mixins
// convenience mixins for declaring pseudo-elements by CSS variable,
// including all style-specific font properties, and both the ::before
// and ::after elements in the duotone case.
@mixin fa-icon-solid($fa-var) {
@extend %fa-icon;
@extend .fa-solid;
&::before {
content: unquote("\"#{ $fa-var }\"");
}
}
@mixin fa-icon-regular($fa-var) {
@extend %fa-icon;
@extend .fa-regular;
&::before {
content: unquote("\"#{ $fa-var }\"");
}
}
@mixin fa-icon-brands($fa-var) {
@extend %fa-icon;
@extend .fa-brands;
&::before {
content: unquote("\"#{ $fa-var }\"");
}
}

31
crates/service-webpage/css/fontawesome/_rotated-flipped.scss vendored Normal file
View File

@@ -0,0 +1,31 @@
// rotating + flipping icons
// -------------------------
.#{$fa-css-prefix}-rotate-90 {
transform: rotate(90deg);
}
.#{$fa-css-prefix}-rotate-180 {
transform: rotate(180deg);
}
.#{$fa-css-prefix}-rotate-270 {
transform: rotate(270deg);
}
.#{$fa-css-prefix}-flip-horizontal {
transform: scale(-1, 1);
}
.#{$fa-css-prefix}-flip-vertical {
transform: scale(1, -1);
}
.#{$fa-css-prefix}-flip-both,
.#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical {
transform: scale(-1, -1);
}
.#{$fa-css-prefix}-rotate-by {
transform: rotate(var(--#{$fa-css-prefix}-rotate-angle, 0));
}

14
crates/service-webpage/css/fontawesome/_screen-reader.scss vendored Normal file
View File

@@ -0,0 +1,14 @@
// screen-reader utilities
// -------------------------
// only display content to screen readers
.sr-only,
.#{$fa-css-prefix}-sr-only {
@include fa-sr-only;
}
// use in conjunction with .sr-only to only display content when it's focused
.sr-only-focusable,
.#{$fa-css-prefix}-sr-only-focusable {
@include fa-sr-only-focusable;
}

1578
crates/service-webpage/css/fontawesome/_shims.scss vendored Normal file
View File

File diff suppressed because it is too large Load Diff

16
crates/service-webpage/css/fontawesome/_sizing.scss vendored Normal file
View File

@@ -0,0 +1,16 @@
// sizing icons
// -------------------------
// literal magnification scale
@for $i from 1 through 10 {
.#{$fa-css-prefix}-#{$i}x {
font-size: $i * 1em;
}
}
// step-based scale (with alignment)
@each $size, $value in $fa-sizes {
.#{$fa-css-prefix}-#{$size} {
@include fa-size($value);
}
}

32
crates/service-webpage/css/fontawesome/_stacked.scss vendored Normal file
View File

@@ -0,0 +1,32 @@
// stacking icons
// -------------------------
.#{$fa-css-prefix}-stack {
display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: $fa-stack-vertical-align;
width: $fa-stack-width;
}
.#{$fa-css-prefix}-stack-1x,
.#{$fa-css-prefix}-stack-2x {
left: 0;
position: absolute;
text-align: center;
width: 100%;
z-index: var(--#{$fa-css-prefix}-stack-z-index, #{$fa-stack-z-index});
}
.#{$fa-css-prefix}-stack-1x {
line-height: inherit;
}
.#{$fa-css-prefix}-stack-2x {
font-size: 2em;
}
.#{$fa-css-prefix}-inverse {
color: var(--#{$fa-css-prefix}-inverse, #{$fa-inverse});
}

5015
crates/service-webpage/css/fontawesome/_variables.scss vendored Normal file
View File

File diff suppressed because it is too large Load Diff

30
crates/service-webpage/css/fontawesome/brands.scss vendored Normal file
View File

@@ -0,0 +1,30 @@
/*!
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
@import 'functions';
@import 'variables';
:root, :host {
--#{$fa-css-prefix}-style-family-brands: 'Font Awesome 6 Brands';
--#{$fa-css-prefix}-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
}
@font-face {
font-family: 'Font Awesome 6 Brands';
font-style: normal;
font-weight: 400;
font-display: $fa-font-display;
src: url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype');
}
.fab,
.#{$fa-css-prefix}-brands {
font-weight: 400;
}
@each $name, $icon in $fa-brand-icons {
.#{$fa-css-prefix}-#{$name}:before { content: unquote("\"#{ $icon }\""); }
}

21
crates/service-webpage/css/fontawesome/fontawesome.scss vendored Normal file
View File

@@ -0,0 +1,21 @@
/*!
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
// Font Awesome core compile (Web Fonts-based)
// -------------------------
@import 'functions';
@import 'variables';
@import 'mixins';
@import 'core';
@import 'sizing';
@import 'fixed-width';
@import 'list';
@import 'bordered-pulled';
@import 'animated';
@import 'rotated-flipped';
@import 'stacked';
@import 'icons';
@import 'screen-reader';

26
crates/service-webpage/css/fontawesome/regular.scss vendored Normal file
View File

@@ -0,0 +1,26 @@
/*!
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
@import 'functions';
@import 'variables';
:root, :host {
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
--#{$fa-css-prefix}-font-regular: normal 400 1em/1 '#{ $fa-style-family }';
}
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 400;
font-display: $fa-font-display;
src: url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype');
}
.far,
.#{$fa-css-prefix}-regular {
font-weight: 400;
}

26
crates/service-webpage/css/fontawesome/solid.scss vendored Normal file
View File

@@ -0,0 +1,26 @@
/*!
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
@import 'functions';
@import 'variables';
:root, :host {
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
--#{$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ $fa-style-family }';
}
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 900;
font-display: $fa-font-display;
src: url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype');
}
.fas,
.#{$fa-css-prefix}-solid {
font-weight: 900;
}

11
crates/service-webpage/css/fontawesome/v4-shims.scss vendored Normal file
View File

@@ -0,0 +1,11 @@
/*!
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
// V4 shims compile (Web Fonts-based)
// -------------------------
@import 'functions';
@import 'variables';
@import 'shims';

31
crates/service-webpage/css/images.scss Normal file
View File

@@ -0,0 +1,31 @@
img {
max-width: 90%;
height: auto;
margin: .2rem;
padding: .2rem;
border-radius: 15px;
border: solid .2rem transparent;
transition: 150ms;
}
img:hover {
border: solid .2rem var(--metaColor);
transform: scale(1.02);
}
.icons {
width: 2.0rem;
height: 2.0rem;
aspect-ratio: 1/1;
display: inline-block;
vertical-align: middle;
color: var(--fgColor);
fill: var(--fgColor);
background-color: transparent;
}
.icons__background:hover {
background-color: transparent;
color: var(--metaColor);
}

119
crates/service-webpage/css/main.scss Normal file
View File

@@ -0,0 +1,119 @@
@import "text";
@import "blocks";
@import "images";
@import "special";
@import "fontawesome/fontawesome";
@import "fontawesome/brands";
@import "fontawesome/regular";
@import "fontawesome/solid";
@font-face {
font-family: "Fira";
src: url("/assets/fonts/FiraCode-Bold.woff2") format("woff2");
font-weight: bold;
}
@font-face {
font-family: "Fira";
src: url("/assets/fonts/FiraCode-Light.woff2") format("woff2");
font-weight: light;
}
@font-face {
font-family: "Fira";
src: url("/assets/fonts/FiraCode-Medium.woff2") format("woff2");
font-weight: medium;
}
@font-face {
font-family: "Fira";
src: url("/assets/fonts/FiraCode-Regular.woff2") format("woff2");
font-weight: normal;
}
:root {
// Misc colors
--bgColor: #121212;
--lightBgColor: #3a3f46;
--fgColor: #ebebeb;
--metaColor: #6199bb;
--lightMetaColor: #638c86;
--linkColor: #e4dab3;
--codeBgColor: var(--lightBgColor);
--codeFgColor: var(--fgColor);
// Main colors
--grey: #696969;
// Accent colors, used only manally
--green: #a2c579;
--magenta: #ad79c5;
--orange: #e86a33;
--yellow: #e8bc00;
--pink: #fa9f83;
}
::selection,
::-moz-selection {
color: var(--bgColor);
background: var(--metaColor);
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;
scrollbar-color: var(--metaColor) var(--bgColor);
scrollbar-width: auto;
background: var(--bgColor);
}
body {
font-family: "Fira";
font-size: 1.6rem;
line-height: 1.35;
max-width: 64rem;
margin: auto;
overflow-wrap: break-word;
background: var(--bgColor);
color: var(--fgColor);
}
main {
margin-top: 2ex;
overflow-wrap: break-word;
}
hr.footline {
border: 1pt solid;
}
hr {
border: 1pt dashed;
}
iframe {
max-width: 90%;
}
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.footContainer {
padding-top: 0;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
}
@media (max-width: 650px) {
.wrapper {
margin: 1rem;
}
}

93
crates/service-webpage/css/special.scss Normal file
View File

@@ -0,0 +1,93 @@
// Handout list pages
// works with "{{ handout() }}" shortcode.
.handout-li-links {
color: var(--grey);
}
.handout-li-links a {
@extend a;
text-decoration: underline;
text-underline-offset: 1.5pt;
padding-left: 1ex;
padding-right: 1ex;
}
.handout-ul li:hover {
margin-left: 1ex;
transition: 50ms;
}
.handout-ul li {
transition: 50ms;
transition-delay: 50ms;
}
.handout-ul li:hover .handout-li-links,
.handout-ul .handout-li-desc {
display: inline-block;
opacity: 1;
transition: 100ms;
}
.handout-ul li:hover .handout-li-desc,
.handout-ul li .handout-li-links {
transition-delay: 50ms;
transition: 100ms;
opacity: 0;
display: none;
}
.handout-star {
color: var(--yellow);
}
// Email obfuscation
// Works with "{{ email_*() }}" shortcodes.
.eobf {
@extend a;
}
.eobf:hover {
@extend a, :hover;
}
// Change icon on hover
.eobf #eobf-kb,
.eobf:hover #eobf-en {
display: none;
}
.eobf #eobf-en,
.eobf:hover #eobf-kb {
display: inline;
}
// Hover text
.eobf:hover span:before {
unicode-bidi: bidi-override;
direction: ltr;
content: attr(data-h);
}
// Text for email_beta
.eobf-beta span:before {
content: "mo" attr(data-a) "teb" "\0040" attr(data-b) "m";
unicode-bidi: bidi-override;
direction: rtl;
}
// Text for email_goog
.eobf-goog span:before {
content: "mo" attr(data-a) "mg" "\0040" attr(data-b) "p." attr(data-c) "m";
unicode-bidi: bidi-override;
direction: rtl;
}
// Text for email_this
.eobf-this span:before {
content: attr(data-a);
}

78
crates/service-webpage/css/text.scss Normal file
View File

@@ -0,0 +1,78 @@
h1 {
font-size: 3.5rem;
margin-top: 1ex;
margin-bottom: 1ex;
}
h2 {
font-size: 2.5rem;
margin-top: 1ex;
margin-bottom: 0.5ex;
}
h3 {
font-size: 2rem;
}
h3::before {
color: var(--lightMetaColor);
content: '## '
}
h1::before,
h2::before,
h4::before,
h5::before,
h6::before {
color: var(--metaColor);
content: '# '
}
a {
text-decoration: none;
border-radius: .3rem;
padding: 0 .2ex 0 .2ex;
color: var(--linkColor);
transition: 150ms;
}
a:hover {
background-color: var(--linkColor);
color: var(--bgColor);
transition: 150ms;
}
footer {
font-size: 1.4rem;
clear: both;
opacity: 0.5;
}
footer {
text-align: left
}
.footnote-definition {
margin: 0 0 0 2rem;
}
.footnote-definition-label {
color: var(--metaColor);
}
.footnote-definition p {
display: inline;
padding: 0 0 0 1rem;
}
.footContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

56
crates/service-webpage/src/components/fa.rs Normal file
View File

@@ -0,0 +1,56 @@
use maud::{Markup, Render, html};
#[expect(clippy::allow_attributes)]
#[allow(dead_code)]
pub enum FAIcon {
Github,
Git,
Python,
Rust,
Discord,
Instagram,
Link,
Envelope,
At,
Key,
SStar,
RStar,
Leaf,
Lock,
Fire,
Pen,
Pencil,
}
impl Render for FAIcon {
fn render(&self) -> Markup {
let classes = match self {
Self::Github => "fa-brands fa-github",
Self::Git => "fa-brands fa-git-alt",
Self::Python => "fa-brands fa-python",
Self::Rust => "fa-brands fa-rust",
Self::Discord => "fa-brands fa-discord",
Self::Instagram => "fa-brands fa-instagram",
Self::Link => "fa-solid fa-link",
Self::Envelope => "fa-solid fa-envelope",
Self::At => "fa-solid fa-at",
Self::Key => "fa-solid fa-key",
Self::SStar => "fa-solid fa-star",
Self::RStar => "fa-regular fa-star",
Self::Leaf => "fa-regular fa-leaf",
Self::Lock => "fa-solid fa-lock",
Self::Fire => "fa-solid fa-fire",
Self::Pen => "fa-solid fa-pen-nib",
Self::Pencil => "fa-solid fa-pencil",
};
html!(
i
class=(classes)
style="margin-right:5pt" // TODO: configure, color
{}
)
}
}

40
crates/service-webpage/src/components/mangle.rs Normal file
View File

@@ -0,0 +1,40 @@
use maud::{Markup, Render, html};
// TODO: turn these into one self-contained struct
pub struct MangledBetaEmail {}
impl Render for MangledBetaEmail {
fn render(&self) -> Markup {
html!(
span class="eobf eobf-beta" {
i id="eobf-en" class="fas fa-envelope" style="margin-right: 5pt" {}
i id="eobf-kb" class="fas fa-keyboard" style="margin-right: 5pt" {}
span
data-b="kra"
data-a="c.ipula"
data-h="Type this manually"
style="unicode-bidi: bidi-override; direction: rtl;"
{}
}
)
}
}
pub struct MangledGoogleEmail {}
impl Render for MangledGoogleEmail {
fn render(&self) -> Markup {
html!(
span class="eobf eobf-goog" {
i id="eobf-en" class="fas fa-envelope" style="margin-right: 5pt" {}
i id="eobf-kb" class="fas fa-keyboard" style="margin-right: 5pt" {}
span
data-c="kra"
data-b="rmn"
data-a="c.lia"
data-h="Type this manually"
{}
}
)
}
}

11
crates/service-webpage/src/components/md.rs Normal file
View File

@@ -0,0 +1,11 @@
use maud::{Markup, PreEscaped, Render};
pub struct Markdown<'a>(pub &'a str);
impl Render for Markdown<'_> {
fn render(&self) -> Markup {
// TODO: cache, style
let md = markdown::to_html(self.0);
return PreEscaped(md);
}
}

17
crates/service-webpage/src/components/misc.rs Normal file
View File

@@ -0,0 +1,17 @@
use maud::{Markup, Render, html};
/// Shorthand for an `<a>` link that opens a new tab
/// Values are (url, text)
pub struct FarLink<'a, T: Render>(pub &'a str, pub T);
impl<T: Render> Render for FarLink<'_, T> {
fn render(&self) -> Markup {
html!(
a
target="_blank"
rel="noopener noreferrer"
href=(self.0)
{ (self.1) }
)
}
}

4
crates/service-webpage/src/components/mod.rs Normal file
View File

@@ -0,0 +1,4 @@
pub mod fa;
pub mod mangle;
pub mod md;
pub mod misc;

1
crates/service-webpage/src/lib.rs
View File

@@ -2,6 +2,7 @@ use axum::Router;
use libservice::ToService;
use utoipa::OpenApi;
mod components;
mod routes;
pub struct WebpageService {}

315
crates/service-webpage/src/routes/index.rs Normal file
View File

@@ -0,0 +1,315 @@
use assetserver::Asset;
use macro_sass::sass;
use maud::{DOCTYPE, Markup, PreEscaped, Render, html};
use crate::{
components::{
fa::FAIcon,
mangle::{MangledBetaEmail, MangledGoogleEmail},
md::Markdown,
misc::FarLink,
},
routes::assets::{Image_Cover, Image_Icon},
};
const CSS: &str = sass!("css/main.scss");
struct PageMetadata {
/// Text shown in tab
pub title: String,
pub author: Option<String>,
pub description: Option<String>,
pub image: Option<String>,
}
impl Render for PageMetadata {
fn render(&self) -> Markup {
let empty = String::new();
let title = &self.title;
let author = &self.author.as_ref().unwrap_or(&empty);
let description = &self.description.as_ref().unwrap_or(&empty);
let image = &self.image.as_ref().unwrap_or(&empty);
html!(
meta property="og:site_name" content=(title) {}
meta name="title" content=(title) {}
meta property="og:title" content=(title) {}
meta property="twitter:title" content=(title) {}
meta name="author" content=(author) {}
meta name="description" content=(description) {}
meta property="og:description" content=(description) {}
meta property="twitter:description" content=(description) {}
meta content=(image) property="og:image" {}
link rel="shortcut icon" href=(image) type="image/x-icon" {}
)
}
}
pub async fn index() -> Markup {
let meta = PageMetadata {
title: "Betalupi: About".into(),
author: Some("Mark".into()),
description: Some("Description".into()),
image: Some(Image_Icon::URL.into()),
};
html! {
(DOCTYPE)
html {
head {
meta charset="UTF" {}
meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" {}
meta content="text/html; charset=UTF-8" http-equiv="content-type" {}
meta property="og:type" content="website" {}
(meta)
title { (PreEscaped(meta.title)) }
style { (PreEscaped(CSS)) }
}
body {
div class="wrapper" {
main {
h2 id="about" { "About" }
div {
img
src=(Image_Cover::URL)
style="float:left;margin:10px 10px 10px 10px;display:block;width:25%;"
{}
div style="margin:2ex 1ex 2ex 1ex;display:inline-block;overflow:hidden;width:60%;" {
"Welcome, you've reached Mark's main page. Here you'll find"
" links to various projects I've worked on."
ul {
li { (MangledBetaEmail {}) }
li { (MangledGoogleEmail {}) }
li {
(
FarLink(
"https://github.com/rm-dr",
html!(
(FAIcon::Github)
"rm-dr"
)
)
)
}
li {
(
FarLink(
"https://git.betalupi.com",
html!(
(FAIcon::Git)
"git.betalupi.com"
)
)
)
}
}
}
br style="clear:both;" {}
}
"Also see "
a href="/whats-a-betalupi" { "what's a \"betalupi?\"" }
(Markdown(concat!(
"## Pages\n",
" - [Handouts](/handouts): Math circle lessons I've written\n",
" - [Links](/links): Interesting parts of the internet"
)))
hr style="margin-top: 6rem; margin-bottom: 6rem" {}
h2 { "Projects" }
ul {
li {
p {
b { "RedoxOS" }
", a general-purpose, microkernel-based operating system written in Rust. "
em { span style="color: var(--grey);" {"[enthusiast]"} }
}
ul {
li {
span style="color: var(--grey);" {"Status: "}
span style="color: var(--yellow);" {"Passive"}
}
li {
span style="color: var(--grey);" {"Website: "}
(
FarLink(
"https://www.redox-os.org",
html!(
(FAIcon::Link)
"redox-os.org"
)
)
)
}
}
}
li {
p {
b { "Tectonic" }
", the LaTeX engine that is pleasant to use. Experimental, but fully functional. "
em { span style="color: var(--grey);" {"[co-maintainer]"} }
}
ul {
li {
span style="color: var(--grey);" {"Status: "}
span style="color: var(--yellow);" {"Passive. "}
(FarLink("https://github.com/typst/typst", "Typst"))
" is better."
}
li {
span style="color: var(--grey);" {"Main Repo: "}
(
FarLink(
"https://github.com/tectonic-typesetting/tectonic",
html!( (FAIcon::Github) "Tectonic" )
)
)
}
li {
span style="color: var(--grey);" {"Bundle Tools: "}
(
FarLink(
"https://github.com/tectonic-typesetting/tectonic-texlive-bundles",
html!( (FAIcon::Github) "tectonic-texlive-bundles" )
)
)
}
}
}
li {
p {
b { "Daisy" }
", a pretty TUI scientific calculator. "
em { span style="color: var(--grey);" {"[author]"} }
}
ul {
li {
span style="color: var(--grey);" {"Status: "}
span style="color: var(--orange);" {"Done. "}
"Used this to learn Rust. "
(FarLink("https://numbat.dev", "Numbat"))
" is better."
}
li {
span style="color: var(--grey);" {"Repository: "}
(
FarLink(
"https://github.com/rm-dr/daisy",
html!( (FAIcon::Github) "rm-dr/daisy" )
)
)
}
li {
span style="color: var(--grey);" {"Website: "}
(
FarLink(
"https://daisy.betalupi.com",
html!(
(FAIcon::Link)
"daisy.betalupi.com"
)
)
)
" (WASM demo)"
}
}
}
li {
p {
b { "Lamb" }
", a lambda calculus engine. "
em { span style="color: var(--grey);" {"[author]"} }
}
ul {
li {
span style="color: var(--grey);" {"Status: "}
span style="color: var(--orange);" {"Done. "}
"Fun little project."
}
li {
span style="color: var(--grey);" {"Repository: "}
(
FarLink(
"https://github.com/rm-dr/lamb",
html!( (FAIcon::Github) "rm-dr/lamb" )
)
)
}
li {
span style="color: var(--grey);" {"PyPi: "}
(
FarLink(
"https://pypi.org/project/lamb-engine",
html!(
(FAIcon::Python)
"lamb-engine"
)
)
)
}
}
}
}
}
footer {
hr class = "footline" {}
div class = "footContainer" {
p {
"This site was built by hand using "
(FarLink("https://rust-lang.org", "Rust"))
", "
(FarLink("https://maud.lambda.xyz", "Maud"))
", "
(FarLink("https://github.com/connorskees/grass", "Grass"))
", and "
(FarLink("https://docs.rs/axum/latest/axum", "Axum"))
"."
}
}
}
}
}
}
}
}

6
crates/service-webpage/src/routes/mod.rs
View File

@@ -1,8 +1,10 @@
use axum::Router;
use axum::routing::get;
use tracing::info;
use utoipa::OpenApi;
mod assets;
mod index;
#[derive(OpenApi)]
#[openapi(tags(), paths(), components(schemas()))]
@@ -12,5 +14,7 @@ pub(super) fn router() -> Router<()> {
let (asset_prefix, asset_router) = assets::asset_router();
info!("Serving assets at {asset_prefix}");
Router::new().nest(asset_prefix, asset_router)
Router::new()
.route("/", get(index::index))
.nest(asset_prefix, asset_router)
}