Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-27 13:49:10 +02:00
Code Issues Projects Releases Wiki Activity

docs: rewrite css to avoid nesting

Browse Source
This commit is contained in:
Thomas Heartman 2024-01-31 13:10:08 +09:00
parent 0d1b86b0a5
commit 7af271ce43
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
1 changed files with 59 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
website/src/css/custom.css
View File

@ -231,7 +231,8 @@ html[data-theme='dark'] .links-container {
} }
.links-container { .links-container {
margin-block: var(--ifm-spacing-vertical); margin-block-start: var(--ifm-spacing-vertical);
margin-block-end: var(--ifm-spacing-vertical);
--button-background-color: var(--color-purple); --button-background-color: var(--color-purple);
--border-color: var(--ifm-color); --border-color: var(--ifm-color);
} }
@ -314,7 +315,8 @@ html[data-theme='dark'] .links-container {
--banner-padding: calc(var(--ifm-spacing-vertical) * 3); --banner-padding: calc(var(--ifm-spacing-vertical) * 3);
--banner-font-color: #000; --banner-font-color: #000;
margin-block: var(--ifm-spacing-vertical); margin-block-start: var(--ifm-spacing-vertical);
margin-block-end: var(--ifm-spacing-vertical);
position: relative; position: relative;
border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200); border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
padding: var(--banner-padding); padding: var(--banner-padding);
@ -425,7 +427,8 @@ html[data-theme='dark'] .links-container {
--banner-padding: calc(var(--ifm-spacing-vertical) * 3); --banner-padding: calc(var(--ifm-spacing-vertical) * 3);
--banner-font-color: #000; --banner-font-color: #000;
margin-block: var(--ifm-spacing-vertical); margin-block-start: var(--ifm-spacing-vertical);
margin-block-end: var(--ifm-spacing-vertical);
position: relative; position: relative;
border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200); border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
padding: var(--banner-padding); padding: var(--banner-padding);
@ -535,11 +538,13 @@ html[data-theme='dark'] .links-container {
} }
} }
/* Styles for .course-banner-container */
.course-banner-container { .course-banner-container {
--banner-padding: calc(var(--ifm-spacing-vertical) * 3); --banner-padding: calc(var(--ifm-spacing-vertical) * 3);
--banner-font-color: #000; --banner-font-color: #000;
margin-block: var(--ifm-spacing-vertical); margin-block-start: var(--ifm-spacing-vertical);
margin-block-end: var(--ifm-spacing-vertical);
border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200); border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
padding: var(--banner-padding); padding: var(--banner-padding);
border-radius: var(--ifm-global-radius); border-radius: var(--ifm-global-radius);
@ -548,61 +553,58 @@ html[data-theme='dark'] .links-container {
background-repeat: no-repeat; background-repeat: no-repeat;
overflow: hidden; overflow: hidden;
color: var(--banner-font-color); color: var(--banner-font-color);
&.beginners {
background-image: url('/img/unleash-academy/beginner-pixels-l.svg');
}
&.advanced {
/* todo: rewrite this to use the large advanced pixels */
background-image: url('/img/unleash-academy/beginner-pixels-l.svg');
}
> * + * {
margin-top: var(--ifm-spacing-vertical);
}
.level {
border: 2px solid var(--ifm-link-color);
border-radius: 60px;
color: var(--unleash-logo-purple);
padding-inline: calc(var(--ifm-spacing-horizontal) * .5);
text-transform: capitalize;
}
p {
font-size: 1.4em;
}
ul {
grid-area: bullets;
display: flex;
flex-wrap: wrap !important;
flex-flow: row;
gap: calc( var(--ifm-spacing-horizontal) * 2);
padding-inline-start: 0;
}
li {
font-weight: bold;
list-style-type: none;
background-image: url('/img/unleash-academy/bullet-check.svg');
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px;
}
li::marker {
height: 100%;
}
li + li {
margin-block-start: 0;
}
} }
.course-banner-container.beginners {
background-image: url('/img/unleash-academy/beginner-pixels-l.svg');
}
.course-banner-container.advanced {
/* todo: rewrite this to use the large advanced pixels */
background-image: url('/img/unleash-academy/beginner-pixels-l.svg');
}
.course-banner-container > * + * {
margin-top: var(--ifm-spacing-vertical);
}
.course-banner-container .level {
border: 2px solid var(--ifm-link-color);
border-radius: 60px;
color: var(--unleash-logo-purple);
padding-inline: .5em;
text-transform: capitalize;
}
.course-banner-container p {
font-size: 1.4em;
}
.course-banner-container ul {
grid-area: bullets;
display: flex;
flex-wrap: wrap !important;
flex-flow: row;
gap: calc(var(--ifm-spacing-horizontal) * 2);
padding-inline-start: 0;
}
.course-banner-container li {
font-weight: bold;
list-style-type: none;
background-image: url('/img/unleash-academy/bullet-check.svg');
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px;
}
.course-banner-container li::marker {
height: 100%;
}
.course-banner-container li + li {
margin-block-start: 0;
}
/* docusaurus-plugin-openapi-docs styling /* docusaurus-plugin-openapi-docs styling