gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(docs): updated the _theme.css to makes the code easier to read (#44218)

Browse Source 
* updated the _theme.css  to makes the code easier to read (more understandable) and makes it much easier to change the color values.

* Update docs/_theme.css

Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>

Co-authored-by: Kunal <kunal.jain@ekamtek.com>
Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>
This commit is contained in:
Kunal
2021-11-22 11:26:57 +05:30
committed by GitHub
parent 4ad22acac8
commit 3c1c79eedb
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
docs/_theme.css
View File

@ -5,6 +5,10 @@
--text-color-base: #2e2e46; --text-color-base: #2e2e46;
--text-color-secondary: #646473; --text-color-secondary: #646473;
--text-color-tertiary: #81818e; --text-color-tertiary: #81818e;
--line-height: 2rem;
--bg-color: #ffffff;
--size: 1.5rem;
} }
body { body {
@ -38,7 +42,7 @@ body .content {
} }
.universal-nav a.translations-link { .universal-nav a.translations-link {
color: #ffffff; color: var(--bg-color);
position: fixed; position: fixed;
right: 50px; right: 50px;
line-height: 24px; line-height: 24px;
@ -72,7 +76,7 @@ section.cover {
padding-bottom: 112px; padding-bottom: 112px;
height: auto; height: auto;
min-height: 100vh; min-height: 100vh;
background: #ffffff !important; background: var(--bg-color) !important;
color: var(--theme-color); color: var(--theme-color);
} }
@ -118,8 +122,8 @@ section.cover a.anchor {
} }
section.cover ul { section.cover ul {
font-size: 1.5rem; font-size: var(--size);
line-height: 2rem; line-height: var(--line-height);
display: grid; display: grid;
text-align: left; text-align: left;
grid-column-gap: 16px; grid-column-gap: 16px;
@ -130,17 +134,17 @@ section.cover ul {
} }
section.cover .cover-main > p:last-child a:last-child { section.cover .cover-main > p:last-child a:last-child {
font-size: 1.5rem; font-size: var(--size);
line-height: 2rem; line-height: var(--line-height);
background-color: var(--theme-color); background-color: var(--theme-color);
color: #fff; color: var(--bg-color);
} }
section.cover .cover-main > p:last-child a:last-child:hover { section.cover .cover-main > p:last-child a:last-child:hover {
font-size: 1.5rem; font-size: var(--size);
line-height: 2rem; line-height: var(--line-height);
background-color: var(--theme-color-dark); background-color: var(--theme-color-dark);
color: #fff; color: var(--bg-color);
opacity: 1; opacity: 1;
} }
@ -198,11 +202,11 @@ section.cover.show ~ .sidebar-toggle {
body .sidebar-toggle { body .sidebar-toggle {
background: none; background: none;
top: 1.5rem; top: var(--size);
left: calc(300px + 1.5rem); left: calc(300px + 1.5rem);
cursor: pointer; cursor: pointer;
width: 1.5rem; width: var(--size);
height: 1.5rem; height: var(--size);
padding: 0; padding: 0;
transition: left 0.25s ease-out; transition: left 0.25s ease-out;
} }
@ -210,7 +214,7 @@ body .sidebar-toggle {
body .sidebar-toggle span { body .sidebar-toggle span {
background-color: var(--theme-color); background-color: var(--theme-color);
height: 0.2rem; height: 0.2rem;
width: 1.5rem; width: var(--size);
position: absolute; position: absolute;
left: 0; left: 0;
margin: 0; margin: 0;
@ -220,9 +224,9 @@ body .sidebar-toggle span {
body.close .sidebar-toggle { body.close .sidebar-toggle {
transition: left 0.25s ease-out; transition: left 0.25s ease-out;
width: 1.5rem; width: var(--size);
height: 1.5rem; height: var(--size);
left: 1.5rem; left: var(--size);
} }
body.close .sidebar-toggle span { body.close .sidebar-toggle span {