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

Update CSS guidelines + Prefer rem

Browse Source
This commit is contained in:
venashial
2022-06-07 14:00:53 -07:00
parent c9ec9f14de
commit eb171ecb21
52 changed files with 768 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/package/styles/classes/actions.postcss
View File

@@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
align-items: flex-end;
grid-gap: 0.5rem;
gap: 0.5rem;
flex-wrap: wrap;
margin-left: auto;
min-width: fit-content;

4
src/package/styles/classes/base.postcss
View File

@@ -8,7 +8,7 @@
scrollbar-color: var(--color-scrollbar) var(--color-bg);
&::-webkit-scrollbar {
width: 14px;
width: 1rem;
}
&::-webkit-scrollbar-track {
@@ -17,7 +17,7 @@
&::-webkit-scrollbar-thumb {
background-color: var(--color-scrollbar);
border-radius: 999px;
border-radius: var(--rounded-max);
border: 3px solid var(--color-bg);
}
}

2
src/package/styles/classes/button-group.postcss
View File

@@ -1,5 +1,5 @@
.button-group {
display: flex;
grid-gap: 0.5rem;
gap: 0.5rem;
flex-wrap: wrap;
}

25
src/package/styles/classes/card.postcss
View File

@@ -7,11 +7,10 @@
background-color: var(--color-raised-bg);
border-radius: var(--rounded-lg);
overflow: hidden;
box-shadow: var(--shadow-raised), var(--shadow-inset);
padding: var(--padding);
grid-gap: 1rem;
gap: 1rem;
max-width: 100%;
.profile-picture {
@@ -20,11 +19,11 @@
&--gap {
&-compressed {
grid-gap: 0.6rem;
gap: 0.5rem;
}
&-none {
grid-gap: 0;
gap: 0;
}
}
@@ -34,26 +33,20 @@
}
}
&--overflow-visible {
overflow: visible;
}
&__banner {
--inverse-padding: calc(var(--padding) * -1);
margin: var(--inverse-padding) var(--inverse-padding) 0 var(--inverse-padding);
z-index: 0;
background-color: var(--color-divider);
height: 6.5rem; /* Matches height of 2 buttons exactly */
object-fit: cover;
object-position: center;
border-radius: var(--rounded-top);
&:-moz-loading {
visibility: hidden;
}
&--short {
height: 6.5rem;
object-fit: cover;
object-position: center;
}
&--dark {
filter: brightness(0.7);
}
@@ -67,7 +60,7 @@
display: flex;
flex-direction: column;
align-items: flex-end;
grid-gap: 0.5rem;
gap: 0.5rem;
z-index: 1;
@@ -88,7 +81,7 @@
}
&--pad-x {
--padding: 1rem 1.3rem;
--padding: 1rem 1.5rem;
}
&.markdown {

6
src/package/styles/classes/illustration.postcss
View File

@@ -3,14 +3,14 @@
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 2rem;
gap: 2rem;
&__image {
max-width: 300px;
max-width: 18.5rem;
}
&__description {
font-size: 1.2rem;
font-size: var(--font-size-lg);
color: var(--color-text-light);
}
}

2
src/package/styles/classes/info-table.postcss
View File

@@ -1,7 +1,7 @@
.info-table {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0.25rem 2rem;
gap: 0.25rem 2rem;
width: fit-content;
&__label {

4
src/package/styles/classes/link.postcss
View File

@@ -2,7 +2,7 @@
color: var(--color-link);
display: flex;
align-items: center;
gap: 4px;
gap: 0.5rem;
line-height: 100%;
&:hover {
@@ -13,7 +13,7 @@
.link-group {
display: grid;
grid-template-columns: repeat(3, auto);
grid-gap: 0.75rem;
gap: 1rem;
.link {
color: var(--color-text);

11
src/package/styles/classes/markdown.postcss
View File

@@ -1,7 +1,7 @@
.markdown {
display: flex;
flex-direction: column;
grid-gap: 1rem;
gap: 1rem;
blockquote,
details,
@@ -54,7 +54,7 @@
}
code {
padding: 0.2rem 0.4rem;
padding: 0.25rem 0.5rem;
font-size: 80%;
border-radius: var(--rounded-sm);
background-color: var(--color-code-bg);
@@ -65,12 +65,13 @@
padding: 1rem;
border-radius: var(--rounded-sm);
overflow-x: auto;
background-color: var(--color-code-bg);
code {
font-size: 80%;
padding: 0;
border-radius: 0;
background-color: unset;
background-color: unset !important;
}
}
@@ -93,8 +94,8 @@
td,
th {
padding: 0.4rem 0.85rem;
border: 0.1rem solid var(--color-table-border);
padding: 0.5rem 0.85rem;
border: 0var (--unit-3) solid var(--color-table-border);
}
tr:nth-child(2n) {

2
src/package/styles/classes/member.postcss
View File

@@ -1,6 +1,6 @@
.member {
display: flex;
grid-gap: 0.75rem;
gap: 1rem;
&__info {
display: flex;

6
src/package/styles/classes/stat.postcss
View File

@@ -1,7 +1,7 @@
.stat {
display: flex;
align-items: baseline;
grid-gap: 0.4rem;
gap: 0.5rem;
&--light {
color: var(--color-text-lightest);
@@ -12,12 +12,12 @@
}
strong {
font-size: 20px;
font-size: var(--font-size-lg);
}
}
.stat-group {
display: flex;
grid-gap: 0.5rem;
gap: 0.5rem;
flex-wrap: wrap;
}

4
src/package/styles/classes/tag.postcss
View File

@@ -1,7 +1,7 @@
.tag {
display: flex;
align-items: center;
grid-gap: 0.25rem;
gap: 0.25rem;
color: var(--color-text-lightest);
svg {
@@ -14,5 +14,5 @@
display: inline-flex;
flex-wrap: wrap;
margin-top: auto;
grid-gap: 0.25rem 0.6rem;
gap: 0.25rem 0.5rem;
}

128
src/package/styles/external/github-dark.postcss vendored Normal file
View File

@@ -0,0 +1,128 @@
/*
Theme: GitHub Dark
Description: Dark theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Outdated base version: https://github.com/primer/github-syntax-dark
Current colors taken from GitHub's CSS
*/
.theme-dark,
.theme-oled {
.hljs {
color: #c9d1d9;
background: #0d1117;
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
/* prettylights-syntax-keyword */
color: #ff7b72;
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
/* prettylights-syntax-entity */
color: #d2a8ff;
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
/* prettylights-syntax-constant */
color: #79c0ff;
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
/* prettylights-syntax-string */
color: #a5d6ff;
}
.hljs-built_in,
.hljs-symbol {
/* prettylights-syntax-variable */
color: #ffa657;
}
.hljs-comment,
.hljs-code,
.hljs-formula {
/* prettylights-syntax-comment */
color: #8b949e;
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
/* prettylights-syntax-entity-tag */
color: #7ee787;
}
.hljs-subst {
/* prettylights-syntax-storage-modifier-import */
color: #c9d1d9;
}
.hljs-section {
/* prettylights-syntax-markup-heading */
color: #1f6feb;
font-weight: bold;
}
.hljs-bullet {
/* prettylights-syntax-markup-list */
color: #f2cc60;
}
.hljs-emphasis {
/* prettylights-syntax-markup-italic */
color: #c9d1d9;
font-style: italic;
}
.hljs-strong {
/* prettylights-syntax-markup-bold */
color: #c9d1d9;
font-weight: bold;
}
.hljs-addition {
/* prettylights-syntax-markup-inserted */
color: #aff5b4;
background-color: #033a16;
}
.hljs-deletion {
/* prettylights-syntax-markup-deleted */
color: #ffdcd7;
background-color: #67060c;
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
/* purposely ignored */
}
}

125
src/package/styles/external/github.postcss vendored Normal file
View File

@@ -0,0 +1,125 @@
/*
Theme: GitHub
Description: Light theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Outdated base version: https://github.com/primer/github-syntax-light
Current colors taken from GitHub's CSS
*/
.hljs {
color: #24292e;
background: #ffffff;
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
/* prettylights-syntax-keyword */
color: #d73a49;
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
/* prettylights-syntax-entity */
color: #6f42c1;
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
/* prettylights-syntax-constant */
color: #005cc5;
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
/* prettylights-syntax-string */
color: #032f62;
}
.hljs-built_in,
.hljs-symbol {
/* prettylights-syntax-variable */
color: #e36209;
}
.hljs-comment,
.hljs-code,
.hljs-formula {
/* prettylights-syntax-comment */
color: #6a737d;
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
/* prettylights-syntax-entity-tag */
color: #22863a;
}
.hljs-subst {
/* prettylights-syntax-storage-modifier-import */
color: #24292e;
}
.hljs-section {
/* prettylights-syntax-markup-heading */
color: #005cc5;
font-weight: bold;
}
.hljs-bullet {
/* prettylights-syntax-markup-list */
color: #735c0f;
}
.hljs-emphasis {
/* prettylights-syntax-markup-italic */
color: #24292e;
font-style: italic;
}
.hljs-strong {
/* prettylights-syntax-markup-bold */
color: #24292e;
font-weight: bold;
}
.hljs-addition {
/* prettylights-syntax-markup-inserted */
color: #22863a;
background-color: #f0fff4;
}
.hljs-deletion {
/* prettylights-syntax-markup-deleted */
color: #b31d28;
background-color: #ffeef0;
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
/* purposely ignored */
}

19
src/package/styles/normalize.postcss
View File

@@ -24,8 +24,21 @@ a {
button:focus-visible,
a:focus-visible,
input:focus-visible,
[tabindex='0']:focus-visible {
outline: 0.2rem solid var(--color-brand);
outline: 0.25rem solid hsla(290, 100%, 40%, 0.5);
border-radius: 0.25rem;
}
input,
button,
a {
outline: 0.25rem solid hsla(155, 58%, 44%, 0);
transition: outline 0.2s ease-in-out;
}
input[type='text']:focus-visible {
outline: 0.25rem solid hsla(155, 58%, 44%, 0.7);
}
html,
@@ -56,7 +69,7 @@ ul {
.icon {
height: auto;
width: 16px;
min-width: 16px;
width: 1rem;
min-width: 1rem;
aspect-ratio: 1 / 1;
}

14
src/package/styles/themes/base.postcss
View File

@@ -2,16 +2,6 @@
--rounded: 1rem;
--rounded-top: 1rem 1rem 0 0;
--rounded-bottom: 0 0 1rem 1rem;
--rounded-sm: 0.6rem;
--rounded-max: 999999999px;
--font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
--font-size-nm: 1rem; /* 16px */
--font-size-xl: 1.5rem; /* 24px */
--font-weight-regular: 400;
--font-weight-medium: 600;
--font-weight-bold: 700;
--rounded-sm: 0.5rem;
--rounded-max: 9999px;
}

9
src/package/styles/themes/dark.postcss
View File

@@ -4,6 +4,7 @@
--color-brand-light: hsl(155, 54%, 35%);
--color-brand-dark: hsl(155, 58%, 25%);
--color-brand-contrast: hsl(0, 0%, 0%);
--color-brand-dark-contrast: hsl(0, 0%, 100%);
--color-secondary: hsl(231, 5%, 80%);
--color-tertiary: hsl(231, 3%, 45%);
@@ -27,11 +28,11 @@
--color-link: hsl(215, 100%, 75%);
/* Container colors */
--color-bg: hsl(220, 13%, 15%);
--color-bg: hsl(220, 13%, 10%);
--color-bg-contrast: hsl(0, 0%, 100%);
--color-raised-bg: hsl(220, 13%, 25%);
--color-divider: hsl(220, 13%, 50%);
--color-button-bg: hsl(222, 13%, 35%);
--color-raised-bg: hsl(220, 13%, 19%);
--color-divider: hsl(220, 13%, 34%);
--color-button-bg: hsl(222, 13%, 30%);
/* Label colors */
--color-badge-gray-text: hsl(0, 2%, 69%);

1
src/package/styles/themes/light.postcss
View File

@@ -4,6 +4,7 @@
--color-brand-light: hsl(135, 50%, 78%);
--color-brand-dark: hsl(155, 58%, 38%);
--color-brand-contrast: hsl(0, 0%, 100%);
--color-brand-dark-contrast: hsl(0, 0%, 100%);
--color-secondary: hsl(231, 5%, 45%);
--color-tertiary: hsl(231, 3%, 75%);

5
src/package/styles/themes/oled.postcss
View File

@@ -1,11 +1,10 @@
.theme-oled {
@extend .dark-theme;
@extend .theme-dark;
/* Container colors */
--color-bg: hsl(220, 13%, 0%);
--color-raised-bg: hsl(220, 13%, 10%);
--color-raised-bg-hover: hsl(220, 13%, 20%);
--color-divider: hsl(220, 13%, 35%);
--color-divider: hsl(220, 13%, 30%);
--color-button-bg: hsl(220, 13%, 20%);
/* Ad colors */

9
src/package/styles/variables/borders.postcss
View File

@@ -1,14 +1,13 @@
:root {
/* Borders */
--border-width: 1px;
--border-style: solid;
--border: var(--border-width) var(--border-style);
/* Rounded radii */
--rounded-sm: 8px;
--rounded: 10px;
--rounded-lg: 14px;
--rounded-sm: 10px;
--rounded: 16px;
--rounded-lg: 18px;
--rounded-max: 100px;
--rounded-top: var(--rounded) var(--rounded) 0 0;
--rounded-bottom: 0 0 var(--rounded) var(--rounded);
--rounded-sm-top: var(--rounded-sm) var(--rounded-sm) 0 0;

5
src/package/styles/variables/breakpoints.postcss Normal file
View File

@@ -0,0 +1,5 @@
/* Breakpoints */
@custom-media --sm (min-width: 544px);
@custom-media --md (min-width: 768px);
@custom-media --lg (min-width: 1012px);
@custom-media --xl (min-width: 544px);

212
src/package/styles/variables/spacing.postcss
View File

@@ -1,212 +0,0 @@
:root {
/* these are values for the display CSS property */
/*
--display-values: (
block,
flex,
inline,
inline-block,
inline-flex,
none,
table,
table-cell
);
// maps edges to respective corners for border-radius
--edges: (
top: (top-left, top-right),
right: (top-right, bottom-right),
bottom: (bottom-right, bottom-left),
left: (bottom-left, top-left)
);
*/
/*
These are our margin and padding utility spacers. The default step size we
use is 8px. This gives us a key of:
0 => 0px
1 => 4px
2 => 8px
3 => 16px
4 => 24px
5 => 32px
6 => 40px */
--spacer: 8px;
/* Our spacing scale */
--spacer-0: 0; /* 0 */
--spacer-1: calc(var(--spacer) * 0.5); /* 4px */
--spacer-2: --spacer; /* 8px */
--spacer-3: calc(var(--spacer) * 2); /* 16px */
--spacer-4: calc(var(--spacer) * 3); /* 24px */
--spacer-5: calc(var(--spacer) * 4); /* 32px */
--spacer-6: calc(var(--spacer) * 5); /* 40px */
/*
/* The list of spacer values
--spacers: (
--spacer-0,
--spacer-1,
--spacer-2,
--spacer-3,
--spacer-4,
--spacer-5,
--spacer-6,
);
/* And the map of spacers, for easier looping:
/* @each --scale, --length in --spacer-map { ... }
--spacer-map: (
0: --spacer-0,
1: --spacer-1,
2: --spacer-2,
3: --spacer-3,
4: --spacer-4,
5: --spacer-5,
6: --spacer-6,
);
/* Increases the core spacing scale first by 8px for --spacer-7, then by 16px
/* increments from --spacer-8 to --spacer-12, i.e. after 40px, we have 48, 64,
/* 80, 96, etc.
--spacer-7: --spacer * 6; /* 48px
--spacer-8: --spacer * 8; /* 64px
--spacer-9: --spacer * 10; /* 80px
--spacer-10: --spacer * 12; /* 96px
--spacer-11: --spacer * 14; /* 112px
--spacer-12: --spacer * 16; /* 128px
--spacers-large: (
7: --spacer-7,
8: --spacer-8,
9: --spacer-9,
10: --spacer-10,
11: --spacer-11,
12: --spacer-12,
);
--spacer-map-extended: map-merge(
(
0: 0,
1: --spacer-1,
2: --spacer-2,
3: --spacer-3,
4: --spacer-4,
5: --spacer-5,
6: --spacer-6,
),
--spacers-large,
);
/* Em spacer variables
--em-spacer-1: 0.0625em; /* 1/16
--em-spacer-2: 0.125em; /* 1/8
--em-spacer-3: 0.25em; /* 1/4
--em-spacer-4: 0.375em; /* 3/8
--em-spacer-5: 0.5em; /* 1/2
--em-spacer-6: 0.75em; /* 3/4
/* Size scale
/* Used for buttons, inputs, labels, avatars etc.
--size: 16px;
--size-0: 0;
--size-1: --size; /* 16px
--size-2: --size-1 + 4px; /* 20px
--size-3: --size-2 + 4px; /* 24px
--size-4: --size-3 + 4px; /* 28px
--size-5: --size-4 + 4px; /* 32px
--size-6: --size-5 + 8px; /* 40px
--size-7: --size-6 + 8px; /* 48px
--size-8: --size-7 + 16px; /* 64px
/* Fixed-width container variables
--container-width: 980px;
--grid-gutter: 10px;
// Breakpoint widths
--width-xs: 0;
// Small screen / phone
--width-sm: 544px;
// Medium screen / tablet
--width-md: 768px;
// Large screen / desktop (980 + (16 * 2)) <= container + gutters
--width-lg: 1012px;
// Extra large screen / wide desktop
--width-xl: 1280px;
// Responsive container widths
--container-sm: --width-sm;
--container-md: --width-md;
--container-lg: --width-lg;
--container-xl: --width-xl;
// Breakpoints in the form (name: length)
--breakpoints: (
sm: --width-sm,
md: --width-md,
lg: --width-lg,
xl: --width-xl
);
// This map in the form (breakpoint: variant) is used to iterate over
// breakpoints and create both responsive and non-responsive classes in one
// loop:
--responsive-variants: (
'': '',
sm: '-sm',
md: '-md',
lg: '-lg',
xl: '-xl',
);
// responsive utility position values
--responsive-positions: (
static,
relative,
absolute,
fixed,
sticky
);
--sidebar-width: (
sm: 220px,
md: 256px,
lg: 296px
);
--sidebar-narrow-width: (
md: 240px,
lg: 256px
);
--sidebar-wide-width: (
lg: 320px,
xl: 336px
);
--gutter: (
md: --spacer-3,
lg: --spacer-4,
xl: --spacer-5
);
--gutter-condensed: (
md: --spacer-3,
lg: --spacer-3,
xl: --spacer-4
);
--gutter-spacious: (
md: --spacer-4,
lg: --spacer-5,
xl: --spacer-6
);
*/
}
/* Breakpoints */
@custom-media --sm (min-width: 544px);
@custom-media --md (min-width: 768px);
@custom-media --lg (min-width: 1012px);
@custom-media --xl (min-width: 544px);

31
src/package/styles/variables/typography.postcss
View File

@@ -1,25 +1,7 @@
:root {
/* Heading sizes - mobile */
/* h4-h6 remain the same size on both mobile & desktop */
--h00-size-mobile: 40px;
--h0-size-mobile: 32px;
--h1-size-mobile: 26px;
--h2-size-mobile: 22px;
--h3-size-mobile: 18px;
/* Heading sizes - desktop */
--h00-size: 48px;
--h0-size: 40px;
--h1-size: 32px;
--h2-size: 24px;
--h3-size: 20px;
--h4-size: 16px;
--h5-size: 14px;
--h6-size: 12px;
--font-size-lg: 19px;
--font-size-sm: 13px;
--font-size-lg: 20px;
--font-size: 16px;
--font-size-sm: 14px;
/* Line heights */
--lh-condensed-ultra: 1;
@@ -33,7 +15,12 @@
--font-weight-bold: 600;
/* Font stacks */
--body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji';
--body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica Neue, Helvetica,
Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, 'Apple Color Emoji', 'Segoe UI Emoji',
Arial, sans-serif;
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
--font-weight-regular: 400;
--font-weight-medium: 600;
--font-weight-bold: 700;
}