andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update styles

Browse Source
This commit is contained in:
Angelos Chalaris
2019-08-30 11:58:37 +03:00
parent 1d658c7ec9
commit ba18e5a2c2
5 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
snippets/overflow-scroll-gradient.md
View File

@ -28,7 +28,7 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 240px; width: 250px;
height: 25px; height: 25px;
background: linear-gradient( background: linear-gradient(
rgba(255, 255, 255, 0.001), rgba(255, 255, 255, 0.001),

5
src/docs/styles/_button.scss
View File

@ -98,5 +98,8 @@
} }
.button.button-view { .button.button-view {
font-size: 1rem; font-size: 0.875rem;
border-radius: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
} }

5
src/docs/styles/_card.scss
View File

@ -11,7 +11,7 @@
color: var(--card-fore-color); color: var(--card-fore-color);
box-shadow: 0px 0px 1px var(--card-shadow-color-a), 0px 6px 12px var(--card-shadow-color-b); box-shadow: 0px 0px 1px var(--card-shadow-color-a), 0px 6px 12px var(--card-shadow-color-b);
border-radius: 0.125rem; border-radius: 0.125rem;
padding: 1rem; padding: 1rem 1rem 3rem;
.card-title { .card-title {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.375; line-height: 1.375;
@ -216,6 +216,5 @@
width: calc(100% + 2.75rem); width: calc(100% + 2.75rem);
position: absolute; position: absolute;
margin-left: 0.75rem; margin-left: 0.75rem;
bottom: -3.5rem; bottom: -3.375rem;
} }

20
src/docs/styles/_colors.scss
View File

@ -32,7 +32,7 @@
// Button color palette // Button color palette
--button-back-color-a: #3B3EFC; --button-back-color-a: #3B3EFC;
--button-back-color-b: #DC325F; --button-back-color-b: #5d79ff;
--button-fore-color: #FFFFFF; --button-fore-color: #FFFFFF;
--button-shadow-color: rgba(0, 0, 0, 0.25); --button-shadow-color: rgba(0, 0, 0, 0.25);
--button-shadow-focus-color: rgba(0, 0, 0, 0.29); --button-shadow-focus-color: rgba(0, 0, 0, 0.29);
@ -87,11 +87,11 @@
// Interface color palette // Interface color palette
--back-color: #2A314C; --back-color: #2A314C;
--back-color-dark: #8993BE; --back-color-dark: #8993BE;
--fore-color: #ABAFBF; --fore-color: #a4afd4;
--fore-color-light: #858CA8; --fore-color-light: #bfc5de;
--fore-color-lighter: #707899; --fore-color-lighter: #c4cbe2;
--fore-color-dark: #B4BCD9; --fore-color-dark: #d1d6ea;
--fore-color-darker: #FCFCFD; --fore-color-darker: #dee1f1;
// Scrollbar // Scrollbar
--scrollbar-back-color: #434E76; --scrollbar-back-color: #434E76;
@ -100,7 +100,7 @@
// Menu color palette // Menu color palette
--menu-back-color: #434E76; --menu-back-color: #434E76;
--menu-border-color: #13151B; --menu-border-color: #13151B;
--menu-fore-color: #959AAC; --menu-fore-color: #e0e3f2;
--menu-active-fore-color: #CDD4EF; --menu-active-fore-color: #CDD4EF;
// Card corner palette remains unchanged for consistency // Card corner palette remains unchanged for consistency
@ -115,10 +115,10 @@
// Button color palette remains unchanged for consistency // Button color palette remains unchanged for consistency
// Card color palette // Card color palette
--card-back-color: hsl(227, 28%, 36%); --card-back-color: #424d75;
--card-fore-color: #F0F0F0; --card-fore-color: #f0f2f8;
--card-border-color: #13151B; --card-border-color: #13151B;
--card-fore-color-light: #D6D6D6; // previously C0C0C0, careful --card-fore-color-light: #e0e3f2; // previously C0C0C0, careful
--card-shadow-color-b: rgba(1, 8, 30, 0.24); --card-shadow-color-b: rgba(1, 8, 30, 0.24);
// Pre & Code color palette remains unchanged for consistency // Pre & Code color palette remains unchanged for consistency

3
src/docs/styles/_layout.scss
View File

@ -215,9 +215,10 @@ p.light-sub {
// Category/tag title // Category/tag title
.tag-title { .tag-title {
transition: 0.3s ease all; transition: 0.3s ease all;
font-size: 1.125rem; font-size: 1.5rem;
color: var(-fore-color-dark); color: var(-fore-color-dark);
line-height: 1.375; line-height: 1.375;
text-align: center;
a { a {
&, &:link, &:visited { &, &:link, &:visited {
color: var(--fore-color-dark); color: var(--fore-color-dark);