eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Rewrite Parity (#647)

Browse Source 
* Rewrite Parity

* Update SEO, fix modals, add dashes to changelog

* Edit create version title

* Cache tags, SEO for search/partial noscript support, notifications fix

* Deploy?

* Fix vercel config

* Fix it again

* Finish user editing

* Remove broken docker build

* Switch reports to modals

* Update project card

* Navbar line animation in most places

* Add chips

* Move to navlink query params

* remove autogen file

* Add copy code

* Fix webkit text box outlines, port report modal

* Update error page

* Switch to avatar component

* Make keyboard nav work

* Fix team member spacing

* improve project ID display (#676)

* Bug fixes

* Update OG site title

* More fixes

* Design tweaks

* Fix card wrapping on mobile

* Darken light theme color a little

* Sidebar navigation for settings, notifications, and moderation

* Change follow icon from a heart to a bell

* Revert "Change follow icon from a heart to a bell"

This reverts commit e30b46ec5d93c57df847be88eba123c7419dd03b.

* Change follows icon in settings

* AaaaUUUUUUUGghghhhhhhhh

* Project sidebar transparent button animations

* Update file input button styling and change icon remove button text

* Fix environments filter condition being inverted

* Remove -> revert

* Improve readability of warning banners on light mode

* Fix mobile menu button colors

* Clean up notifications page more

* Creator dashboard and monetization work

* Add processing fees declarations and acknowledgement box

* Beta badges

* Downgrade Nuxt Vercel Builder

* Update the style of button groups to be more consistent

* More button consistency

* Remove desktop navbar on mobile

* Update home page progress indicators

* Fix page jumping (Thanks @stairman06)

* Make checkbox checked style consistent with other selection indicators

* More home page updates

* Properly reset NavRows

* Move filters menu on mobile

* Stylized checkbox updated to match active styling

* Filters icon

* Respect prefers-reduced-motion

* Add most backend payouts changes (untested)

* Finish tested payouts code

* Allow monetization unenrolling

* No longer use brand color for active highlights on standard nav elements

* More consistent button group on project page

* Rounded tables

* Fix some things (#716)

* Team member fixes + re-add changelog/versions stuff

* Remove dummy data

* The great CSS refactor

* Remove commented out css

* Give modals the legacy label styles and update profile edit labels

* Fix active chip size

* Remove shadow from selected chip

* Require email set for CMP

* Update styles of notifications to universal-card

* Equivalent exchange, trading some jank for some less bad jank

* Fix all gallery buttons being missing when there is only 1 image

* Update project creation modal

* Make beta badge less bright

* Beta badge heading styling

* Update withdraw processing fees info

* Remove redundant label

* be

* Fix inverted logic

* 2% is 0.02

* Add toggle to turn off alpha modpacks banner

* Why warning button?

* Add more footer links (#719)

* Add more footer links

* Move twitter

* Make items on user pages less comically large and move ad above navigation

* Bump text down a little on home page

* Update favicon colors

* Remove task list package and change default description to use bullet points

* I don't remember why I made this important but let's not

* Ah, yes

* this doesn't actually need to be important

* Align items in input groups

* Adjust some spacings and clear creation modal on opening

* Versions now clickable

* Add link to edit page to default description

* Improve monetization information text

* Make wrapped text inputs not shrink

* Make chips work better

* smol margin on clear mod message button

* Allow non-authenticated users to access settings

* Remove settings anchors

* Fix versions page button style on firefox

* Add advanced rendering toggle

* Update slug input and icon card in project edit page

* Legal sidebar

* h1 at beginning of description no longer has top margin

* Use universal card for legal pages

* Update email addresses on legal pages

* Update various page titles and descriptions for consistency

* Various fixes and consolidation to API URL retrieval

Prevents a bug where it's possible to generate the tags under one API, switch the API, and still have tags leftover from the old API

Also finally fixes staging URL being jank

* Make the theme button show regardless of login state

Also remove the change theme from the user dropdown because it's very redundant with the several other ways of changing theme

* Make mobile profile dropdown ordering consistent with desktop

* Change the base url back

* Revert "Change the base url back"

This reverts commit c1da89fddb83776b39f626eab33c8dc67f8a75e4.

* constantize

* Tiny fixes (#722)

* Box-shadow chip outlines

* Show settings when signed out

* mods -> projects

* space

* Beta badge border

* Slug input overflow fix, scrollable

* 🙈 it will all be okay 🙊 this is just temporary 🙉 😭😭 forgive me

* Fix minor bugs

* fix moderation  page

* More fixes

* Temp fix for download button

* BEGONE TABLES

* Fix download button

Co-authored-by: Ryan Cao <70191398+ryanccn@users.noreply.github.com>
Co-authored-by: Prospector <prospectordev@gmail.com>
Co-authored-by: stairman06 <36215135+stairman06@users.noreply.github.com>
Co-authored-by: triphora <emmaffle@modrinth.com>
This commit is contained in:
Geometrically
2022-11-12 17:57:40 -07:00
committed by GitHub
parent 66d0ee8156
commit 20785926e2
100 changed files with 7572 additions and 7284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
assets/images/404.svg Normal file
View File

@@ -0,0 +1,74 @@
<svg width="100%" height="100%" viewBox="0 0 3247 1234" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(1,0,0,1,-149.406,-1192.33)">
<g transform="matrix(1,0,0,1,0,-0.0649902)">
<g transform="matrix(1,0,0,1,-190.112,0.0649902)">
<g transform="matrix(1549.76,0,0,1549.76,285.034,2355.46)">
<path d="M0.386,-0L0.526,-0L0.526,-0.129L0.619,-0.129L0.619,-0.247L0.526,-0.247L0.526,-0.705L0.318,-0.705L0.035,-0.252L0.035,-0.129L0.386,-0.129L0.386,-0ZM0.164,-0.243L0.164,-0.247L0.385,-0.598L0.389,-0.598L0.389,-0.243L0.164,-0.243Z" style="fill-rule:nonzero;" />
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,0,-0.0649902)">
<g transform="matrix(1,0,0,1,2151.95,0.0649902)">
<g transform="matrix(1549.76,0,0,1549.76,285.034,2355.46)">
<path d="M0.386,-0L0.526,-0L0.526,-0.129L0.619,-0.129L0.619,-0.247L0.526,-0.247L0.526,-0.705L0.318,-0.705L0.035,-0.252L0.035,-0.129L0.386,-0.129L0.386,-0ZM0.164,-0.243L0.164,-0.247L0.385,-0.598L0.389,-0.598L0.389,-0.243L0.164,-0.243Z" style="fill-rule:nonzero;" />
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,0,-0.0649902)">
<g transform="matrix(1.04827,0,0,1.04827,1374.32,1499.56)">
<path d="M309.082,335.571L283.216,266.381L336.966,211.169L404.9,196.531L424.57,220.74L393.254,252.46L365.941,261.052L346.425,281.11L355.987,307.719L375.387,328.306L402.745,321.031L422.216,299.648L464.729,286.185L477.395,314.677L433.529,368.46L360.02,391.735L309.082,335.571Z" />
</g>
<g transform="matrix(1.6241,0,0,1.6241,3325.29,75.5995)">
<path d="M-799.272,1141.68C-827.119,1200.8 -887.255,1241.76 -956.882,1241.76C-1048.32,1241.76 -1123.39,1171.12 -1130.46,1081.49" style="fill:none;stroke:currentcolor;stroke-width:33.35px;" />
</g>
<g transform="matrix(1.6241,0,0,1.6241,3325.29,75.5995)">
<path d="M-1129.95,1048.4C-1120.36,961.34 -1046.48,893.522 -956.882,893.522C-860.784,893.522 -782.765,971.541 -782.765,1067.64C-782.765,1082.32 -784.586,1096.58 -788.016,1110.21" style="fill:none;stroke:currentcolor;stroke-width:33.35px;" />
</g>
<g transform="matrix(-0.578174,2.15777,-2.15777,-0.578174,3522.29,4490.98)">
<path d="M-799.272,1141.68C-827.119,1200.8 -887.255,1241.76 -956.882,1241.76C-1048.32,1241.76 -1123.39,1171.12 -1130.46,1081.49" style="fill:none;stroke:currentcolor;stroke-width:24.25px;" />
</g>
<g transform="matrix(-0.578174,2.15777,-2.15777,-0.578174,3522.29,4490.98)">
<path d="M-1129.95,1048.4C-1120.36,961.34 -1046.48,893.522 -956.882,893.522C-860.784,893.522 -782.765,971.541 -782.765,1067.64C-782.765,1082.32 -784.586,1096.58 -788.016,1110.21" style="fill:none;stroke:currentcolor;stroke-width:24.25px;" />
</g>
<g transform="matrix(2.06597,1.89638,-1.89638,2.06597,5772.64,1417.93)">
<path d="M-799.272,1141.68C-827.119,1200.8 -887.255,1241.76 -956.882,1241.76C-1048.32,1241.76 -1123.39,1171.12 -1130.46,1081.49" style="fill:none;stroke:currentcolor;stroke-width:19.32px;" />
</g>
<g transform="matrix(2.06597,1.89638,-1.89638,2.06597,5772.64,1417.93)">
<path d="M-1129.95,1048.4C-1120.36,961.34 -1046.48,893.522 -956.882,893.522C-860.784,893.522 -782.765,971.541 -782.765,1067.64C-782.765,1082.32 -784.586,1096.58 -788.016,1110.21" style="fill:none;stroke:currentcolor;stroke-width:19.32px;" />
</g>
<g transform="matrix(-3.26901,0.875928,-0.875928,-3.26901,-420.338,6137.6)">
<path d="M-799.272,1141.68C-827.119,1200.8 -887.255,1241.76 -956.882,1241.76C-1048.32,1241.76 -1123.39,1171.12 -1130.46,1081.49" style="fill:none;stroke:currentcolor;stroke-width:16.01px;" />
</g>
<g transform="matrix(-3.26901,0.875928,-0.875928,-3.26901,-420.338,6137.6)">
<path d="M-1129.95,1048.4C-1120.36,961.34 -1046.48,893.522 -956.882,893.522C-860.784,893.522 -782.765,971.541 -782.765,1067.64C-782.765,1082.32 -784.586,1096.58 -788.016,1110.21" style="fill:none;stroke:currentcolor;stroke-width:16.01px;" />
</g>
<g transform="matrix(1,0,0,1,2728.09,741.915)">
<path d="M-904.543,901.539C-833.986,923.78 -782.765,989.775 -782.765,1067.64C-782.765,1137.58 -824.09,1197.94 -883.633,1225.62" style="fill:none;stroke:currentcolor;stroke-width:54.17px;" />
</g>
<g transform="matrix(1,0,0,1,2728.09,741.915)">
<path d="M-937.34,1240.67C-943.756,1241.39 -950.276,1241.76 -956.882,1241.76C-1052.98,1241.76 -1131,1163.74 -1131,1067.64C-1131,971.541 -1052.98,893.522 -956.882,893.522" style="fill:none;stroke:currentcolor;stroke-width:54.17px;" />
</g>
<g transform="matrix(1,0,0,1,2728.09,741.915)">
<path d="M-904.543,901.539C-833.986,923.78 -782.765,989.775 -782.765,1067.64C-782.765,1137.58 -824.09,1197.94 -883.633,1225.62" style="fill:none;stroke:currentcolor;stroke-width:54.17px;" />
</g>
<g transform="matrix(1,0,0,1,2728.09,741.915)">
<path d="M-937.34,1240.67C-943.756,1241.39 -950.276,1241.76 -956.882,1241.76C-1052.98,1241.76 -1131,1163.74 -1131,1067.64C-1131,971.541 -1052.98,893.522 -956.882,893.522" style="fill:none;stroke:currentcolor;stroke-width:54.17px;" />
</g>
<g transform="matrix(1,0,0,1,2730.59,729.536)">
<path d="M-791.26,1034.59L-686.335,1006.23" style="fill:none;stroke:currentcolor;stroke-width:54.17px;" />
</g>
<g transform="matrix(0.730214,-0.361316,0.535157,0.830095,1995.93,464.536)">
<path d="M-791.26,1034.59L-686.335,1006.23" style="fill:none;stroke:currentcolor;stroke-width:56.77px;" />
</g>
<g transform="matrix(0.588836,0.702962,-0.731171,0.673626,3318.16,1883.42)">
<path d="M-791.26,1034.59L-686.335,1006.23" style="fill:none;stroke:currentcolor;stroke-width:55.35px;" />
</g>
<g transform="matrix(0.260851,-0.884338,0.965379,0.238953,979.167,372.085)">
<path d="M-791.26,1034.59L-686.335,1006.23" style="fill:none;stroke:currentcolor;stroke-width:55.28px;" />
</g>
<g transform="matrix(1.94443,-0.569179,-0.569179,1.34303,4301.69,-217.31)">
<path d="M-1202.21,1224.92L-999.087,1102.51" style="fill:none;stroke:currentcolor;stroke-width:48.54px;" />
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
assets/images/search-dark.mp4
View File

Binary file not shown.

BIN
assets/images/search.mp4
View File

Binary file not shown.

7
assets/images/utils/bell-ring.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
<path d="M2 8c0-2.2.7-4.3 2-6"></path>
<path d="M22 8a10 10 0 0 0-2-6"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 383 B

5
assets/images/utils/bell.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 300 B

7
assets/images/utils/chart.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 3v18h18"></path>
<path d="M18 17V9"></path>
<path d="M13 17V5"></path>
<path d="M8 17v-3"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 307 B

1
assets/images/utils/clipboard-copy.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 299 B

5
assets/images/utils/currency.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="2" x2="12" y2="22"></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 306 B

7
assets/images/utils/dashboard.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="7" height="9"></rect>
<rect x="14" y="3" width="7" height="5"></rect>
<rect x="14" y="12" width="7" height="9"></rect>
<rect x="3" y="16" width="7" height="5"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 389 B

1
assets/images/utils/filter.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
Side by Side

After

Width:  |  Height:  |  Size: 290 B

7
assets/images/utils/heart-handshake.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.42 4.58a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z"></path>
<path d="M12 5.36 8.87 8.5a2.13 2.13 0 0 0 0 3h0a2.13 2.13 0 0 0 3 0l2.26-2.21a3 3 0 0 1 4.22 0l2.4 2.4"></path>
<path d="m18 15-2-2"></path>
<path d="m15 18-2-2"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 517 B

9
assets/images/utils/list.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="14" width="7" height="7"></rect>
<rect x="3" y="3" width="7" height="7"></rect>
<line x1="14" y1="4" x2="21" y2="4"></line>
<line x1="14" y1="9" x2="21" y2="9"></line>
<line x1="14" y1="15" x2="21" y2="15"></line>
<line x1="14" y1="20" x2="21" y2="20"></line>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 476 B

1
assets/images/utils/lock.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 321 B

6
assets/images/utils/paintbrush.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18.37 2.63 14 7l-1.59-1.59a2 2 0 0 0-2.82 0L8 7l9 9 1.59-1.59a2 2 0 0 0 0-2.82L17 10l4.37-4.37a2.12 2.12 0 1 0-3-3Z"></path>
<path d="M9 8c-2 3-4 3.5-7 4l8 10c2-1 6-5 6-7"></path>
<path d="M14.5 17.5 4.5 15"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 421 B

1
assets/images/utils/slash.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-slash"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 312 B

7
assets/images/utils/transfer.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="17 11 21 7 17 3"></polyline>
<line x1="21" y1="7" x2="9" y2="7"></line>
<polyline points="7 21 3 17 7 13"></polyline>
<line x1="15" y1="17" x2="3" y2="17"></line>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 378 B

5
assets/images/utils/undo.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 7v6h6"></path>
<path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 280 B

933
assets/styles/components.scss
View File

File diff suppressed because it is too large Load Diff

186
assets/styles/global.scss
View File

@@ -11,7 +11,7 @@ html {
--color-text-inactive: hsl(215, 14%, 34%);
--color-text-dark: #1a202c;
--color-heading: #2c313d;
--color-bg: hsl(220, 13%, 91%);
--color-bg: #e5e7eb;
--color-raised-bg: #ffffff;
--color-divider: hsl(220, 13%, 91%);
--color-divider-dark: #c8cdd3;
@@ -19,32 +19,25 @@ html {
--color-text-inverted: var(--color-bg);
--color-bg-inverted: var(--color-text);
--color-brand: #30b27b;
--color-brand-hover: #1e9565;
--color-brand-active: #177955;
--color-brand: #00af5c;
--color-brand-highlight: rgba(0, 175, 92, 0.25);
--color-brand-shadow: rgba(0, 175, 92, 0.7);
--color-brand-inverted: #ffffff;
--tab-underline-hovered: #e2e8f0;
--color-button-bg: #e0e0e5;
--color-button-bg: hsl(220, 13%, 91%);
--color-button-text: var(--color-text-dark);
--color-button-bg-hover: #d9dce0;
--color-button-text-hover: #1b1e24;
--color-button-bg-active: #c3c6cb;
--color-button-text-active: var(--color-button-text-hover);
--color-button-bg-disabled: #cacdd2;
--color-button-text-disabled: #9da3ac;
--color-transparent-button-bg-hover: var(--color-button-bg);
--color-transparent-button-text-hover: var(--color-text-dark);
--color-transparent-button-bg-active: var(--color-button-bg-hover);
--color-transparent-button-text-active: var(--color-text-dark);
--color-toggle-handle: var(--color-icon);
--color-dropdown-bg: var(--color-button-bg);
--color-dropdown-text: var(--color-button-text);
--color-category-bg: var(--color-bg);
--color-category-text: var(--color-text-dark);
--color-tooltip-bg: var(--color-text);
--color-tooltip-text: var(--color-bg);
@@ -56,14 +49,10 @@ html {
--color-ad: #d6e6f9;
--color-ad-raised: #b1c8e4;
--shadow-dropdown: 3px 3px 14px hsla(0, 0%, 0%, 0.15);
--shadow-dropdown-strong: 3px 3px 10px hsla(0, 0%, 0%, 0.3);
--shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15);
--color-grey-link: var(--color-text);
--color-grey-link-hover: var(--color-heading);
--color-grey-link-active: var(--color-text-dark);
--color-link: #2089ff;
--color-link: #0d60bb;
--color-link-hover: #1a76e7;
--color-link-active: #146fd7;
@@ -76,11 +65,11 @@ html {
--color-badge-yellow-text: #755920;
--color-badge-yellow-bg: #f7bb43;
--color-warning-text: hsl(358, 57%, 20%);
--color-warning-bg: hsl(358, 57%, 80%);
--color-warning-bg: hsl(355, 70%, 88%);
--color-warning-text: hsl(342, 70%, 35%);
--color-banner-text: hsl(0, 11%, 16%);
--color-banner-bg: hsl(356, 59%, 77%);
--color-banner-bg: hsl(0, 100%, 95%);
--color-banner-side: hsl(357, 78%, 40%);
--color-block-quote: var(--color-tooltip-bg);
@@ -90,12 +79,18 @@ html {
--color-table-border: #dfe2e5;
--color-table-alternate-row: #f6f8fa;
--shadow-card: 0px 2px 4px 0px hsla(221, 39%, 11%, 0.1),
inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.05);
--shadow-image-md: 0px 2px 4px 0px hsla(221, 39%, 11%, 0.2),
inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.1);
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
--shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 11%, 0.15);
--color-card-link-bg: rgba(0, 0, 0, 7%);
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
--shadow-raised: 0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
1px 2px 2.2px -1.7px hsl(var(--shadow-color) / 0.12),
4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color) / 0.09);
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
--shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
}
.dark-mode {
@@ -113,33 +108,26 @@ html {
--color-bg-inverted: var(--color-text);
--color-brand: #1bd96a;
--color-brand-hover: #2de391;
--color-brand-active: #55f5ae;
--color-brand-highlight: rgba(27, 217, 106, 0.25);
--color-brand-shadow: rgba(27, 217, 106, 0.7);
--color-brand-inverted: #000;
--tab-underline-hovered: #414146;
--color-button-bg: #3e434b;
--color-button-bg: hsl(222, 13%, 30%);
--color-button-text: var(--color-text);
--color-button-bg-hover: #494f58;
--color-button-text-hover: #ffffff;
--color-button-bg-active: #616570;
--color-button-text-active: var(--color-button-text-hover);
--color-button-bg-disabled: #3a434d;
--color-button-text-disabled: #555d65;
--color-transparent-button-bg-hover: var(--color-button-bg);
--color-transparent-button-text-hover: var(--color-text-dark);
--color-transparent-button-bg-active: var(--color-button-bg-hover);
--color-transparent-button-text-active: var(--color-text-dark);
--color-toggle-handle: var(--color-button-text);
--color-dropdown-bg: var(--color-button-bg);
--color-dropdown-text: var(--color-button-text);
--color-category-bg: var(--color-button-bg);
--color-category-text: var(--color-text-dark);
--color-tooltip-bg: var(--color-text);
--color-tooltip-text: var(--color-bg);
--color-tooltip-bg: var(--color-button-bg);
--color-tooltip-text: var(--color-text);
--color-code-bg: var(--color-button-bg);
--color-code-text: var(--color-text-dark);
@@ -149,10 +137,6 @@ html {
--color-ad: #1f324a;
--color-ad-raised: #2e4057;
--shadow-dropdown: 3px 3px 14px hsla(0, 0%, 0%, 0.15);
--shadow-dropdown-strong: 3px 3px 20px hsla(0, 0%, 0%, 0.15);
--shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15);
--color-link: #74b6f3;
--color-link-hover: #92c0f5;
--color-link-active: #b5d5fd;
@@ -166,8 +150,8 @@ html {
--color-badge-yellow-text: #dba22d;
--color-badge-yellow-bg: #f7bb43;
--color-warning-text: hsl(358, 57%, 85%);
--color-warning-bg: hsl(358, 57%, 25%);
--color-warning-bg: hsl(355, 70%, 20%);
--color-warning-text: hsl(342, 70%, 75%);
--color-banner-text: hsl(0, 100%, 96%);
--color-banner-bg: hsl(356, 18%, 18%);
@@ -180,7 +164,16 @@ html {
--color-table-border: #4f5864;
--color-table-alternate-row: #262a30;
--color-card-link-bg: rgb(255, 255, 255, 15%);
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
--shadow-inset-sm: inset 0px -1px 1px hsla(221, 39%, 11%, 0.25);
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
--shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
--shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
}
.oled-mode {
@@ -193,15 +186,21 @@ html {
--color-button-bg-active: #3c3c40;
}
.midas-mode {
@extend .dark-mode;
--color-brand: #fac413;
--color-brand-shadow: rgba(250, 196, 19, 0.7);
}
body {
// Defaults
background-color: var(--color-bg);
color: var(--color-text);
--font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
--font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
font-family: var(--font-standard);
font-size: 16px;
font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-regular);
margin: 0;
padding: 0;
@@ -219,12 +218,13 @@ body {
--size-navbar-height: 3.5rem;
--size-mobile-navbar-height: 3.5rem;
--size-mobile-navbar-height-expanded: 10rem;
--size-mobile-navbar-height-expanded: 11.75rem;
--spacing-card-lg: 1.5rem;
--spacing-card-bg: 1rem;
--spacing-card-md: 0.75rem;
--spacing-card-sm: 0.5rem;
--spacing-card-xs: 0.25rem;
// Font Sizes
--font-size-xxs: 0.625rem; //10px
@@ -247,14 +247,18 @@ body {
--font-weight-heading: var(--font-weight-extrabold);
--font-weight-title: var(--font-weight-extrabold);
@media screen and (min-width: 501px) {
@media screen and (min-width: 318px) {
--size-mobile-navbar-height-expanded: 9.25rem;
}
@media screen and (min-width: 517px) {
--size-mobile-navbar-height-expanded: 7rem;
}
}
svg {
height: 24px;
width: 24px;
height: 1em;
width: 1em;
}
a {
@@ -262,6 +266,10 @@ a {
text-decoration: none;
}
h1 {
color: var(--color-text-dark);
}
h2 {
margin-top: 0;
margin-bottom: 1rem;
@@ -269,19 +277,17 @@ h2 {
}
h3 {
margin-top: 0.5rem;
margin-bottom: 0.25rem;
margin-block: var(--spacing-card-md) var(--spacing-card-sm);
color: var(--color-text-dark);
}
button {
cursor: pointer;
@extend .button;
}
input {
border-radius: 2rem;
border-radius: var(--size-rounded-sm);
box-sizing: border-box;
border: 2px solid transparent;
// safari iOS rounds inputs by default
// set the appearance to none to prevent this
appearance: none !important;
}
pre {
@@ -293,17 +299,15 @@ textarea {
background: var(--color-button-bg);
color: var(--color-text);
padding: 0.5rem 1rem;
border: 2px solid transparent;
font-weight: var(--font-weight-medium);
border: none;
outline: none;
box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
transition: box-shadow 0.1s ease-in-out;
min-height: 40px;
&:hover:not([disabled]):not(:focus) {
background: var(--color-button-bg-hover);
color: var(--color-button-text-hover);
border-color: var(--color-divider-dark);
}
&:focus {
outline: none !important;
border-color: var(--color-brand);
&:focus, &:focus-visible {
box-shadow: inset 0 0 0 transparent, 0 0 0 .25rem var(--color-brand-shadow);
color: var(--color-button-text-active);
}
@@ -313,26 +317,21 @@ textarea {
pointer-events: none;
cursor: not-allowed;
}
&:focus::placeholder {
opacity: 0.8;
}
&::placeholder {
color: var(--color-button-text);
opacity: 0.6;
}
}
button {
padding: 0.5rem 0;
//outline: none; Bad for accessibility
color: var(--color-button-text);
background-color: var(--color-button-bg);
button, input[type=button] {
cursor: pointer;
border: none;
border-radius: var(--size-rounded-control);
&:focus-visible,
&:hover {
background-color: var(--color-button-bg-hover);
color: var(--color-button-text-hover);
}
&:active {
background-color: var(--color-button-bg-active);
color: var(--color-button-text-active);
}
outline: none;
}
kbd {
@@ -345,10 +344,13 @@ kbd {
font-size: 0.85em !important;
}
// @import "vue-select/src/scss/vue-select.scss";
@import '~assets/styles/highlightjs.scss';
@import '~assets/styles/layout.scss';
@import '~assets/styles/utils.scss';
@import '~assets/styles/components.scss';
@import '~assets/styles/normalize.scss';
button:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible {
outline: .25rem solid #ea80ff;
border-radius: .25rem;
}

10
assets/styles/layout.scss
View File

@@ -43,6 +43,10 @@
margin: 0 0.75rem;
}
.site-header {
margin: 0 0.75rem;
}
@media (min-width: 1024px) {
.normal-page {
flex-direction: row;
@@ -56,10 +60,16 @@
}
.normal-page__sidebar {
min-width: 20rem;
width: 20rem;
}
.normal-page__content {
width: 60rem;
max-width: 60rem;
}
.site-header {
margin: 0 auto;
}
}

2
assets/styles/normalize.scss vendored
View File

@@ -165,7 +165,7 @@ textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 2px; /* 2 */
margin: 0; /* 2 */
}
/**

4
assets/styles/utils.scss
View File

@@ -1,5 +1,5 @@
.hidden {
display: none;
display: none !important;
}
.w-100 {
@@ -13,4 +13,4 @@ body {
.text-container p {
line-height: 1.3;
}
}