TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2024-12-12 11:04:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(docs): rehaul styling (#893)

Browse Source 
* fix: adapt styling to marketing, console

* side icon margin
This commit is contained in:
Max Peintner 2020-10-22 17:09:08 +02:00 committed by GitHub
parent 457bfb4768
commit d71eb25dbc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 52 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
site/src/components/Docs.svelte
View File

@ -177,7 +177,7 @@
}
.sidebar {
padding: var(--top-offset) 0 6.4rem 3.2rem;
padding: var(--top-offset) 0 6.4rem 0;
font-family: var(--font);
overflow-y: auto;
height: 100%;
@ -204,7 +204,7 @@
margin-top: 4rem;
padding: 2rem 1.6rem 4rem 0.2rem;
border-top: var(--border-w) solid #6767785b; /* based on --second */
color: var(--text);
color: var(--heading);
line-height: 1;
font-size: var(--h3);
letter-spacing: 0.05em;
@ -267,7 +267,7 @@
.content :global(h3 > code) {
margin: 2.0rem 0 0 0;
padding: 2rem 1.6rem 2.0rem 0.2rem;
color: var(--text);
color: var(--heading);
border-top: var(--border-w) solid #6767781f; /* based on --second */
background: transparent;
line-height: 1;
@ -291,7 +291,7 @@
font-family: inherit;
font-weight: 500;
font-size: 2.4rem;
color: var(--text);
color: var(--heading);
margin: 2.0rem 0 1.6rem 0;
padding-left: 0;
background: transparent;
@ -383,13 +383,14 @@
}
section :global(blockquote) {
color: #e91e63;
border: 2px solid var(--flash);
color: #85d996;
border: 2px solid var(--grey-text);
background: #2a2f45;
}
section :global(blockquote) :global(code) {
background: hsl(204, 100%, 95%) !important;
color: #e91e63;
/* background: hsl(204, 100%, 95%) !important; */
color: var(--prime);
}
</style>

28
site/src/components/GuideContents.svelte
View File

@ -57,7 +57,7 @@
.section {
display: block;
padding: 0 0 .8rem 0;
padding: .8rem 0 .8rem 0;
font-size: var(--h6);
text-transform: uppercase;
letter-spacing: 0.1em;
@ -66,9 +66,20 @@
.subsection {
display: block;
font-size: 1.6rem;
font-family: var(--font);
padding: 0 0 0.6em 0;
font-size: 14px;
padding: 0.4em 0 0.4em 0;
color: #a3acb9;
}
.section,
.subsection {
border-top-right-radius: 50vw;
border-bottom-right-radius: 50vw;
padding-left: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.section:hover,
@ -76,16 +87,19 @@
.active {
color: var(--flash);
font-weight: 500;
color: #6c8eef;
background-color: rgba(82,130,193,.1);
padding-right: 1rem;
}
.subsection[data-level="4"] {
padding-left: 1.2rem;
padding-left: 3.2rem;
}
.icon-container {
position: absolute;
top: -.2rem;
right: 2.4rem;
margin-right: 1rem;
margin-left: .5rem;
color: white;
}
@media (min-width: 832px) {

2
site/src/components/Section.svelte
View File

@ -6,7 +6,7 @@
max-width: 120rem;
}
section :global(h3) {
color: var(--text);
color: var(--heading);
}
</style>

1
site/src/routes/index.svelte
View File

@ -18,6 +18,7 @@
position: absolute;
top: 80px;
height: 60vh;
max-height: 500px;
right: 0;
}
.section {

27
site/static/base.css
View File

@ -31,18 +31,19 @@
/* theme vars */
.theme-default {
--back: #212224;
--back: #1a1f36;
--back-light: transparent;
--back-api: #212224;
--back-api: #1a1f36;
--prime: #5282c1;
--second: #e91e63;
--second: #ff2069;
--flash: #72a2e0;
--nav-back: #212224;
--side-nav-back: #212224;
--nav-back: #1a1f36;
--side-nav-back: #1a1f36;
--heading: #e8eaed;
--text: #eff8ff;
--heading: #f7fafc;
--text: #c1c9d2;
--grey-text: #a3acb9;
--dark-text: #8795a1;
--sidebar-text: #eff8ff;
--border-w: .3rem; /* border-width */
@ -52,13 +53,13 @@
/* typo vars */
.typo-default {
--code-fs: 1.3rem;
--h6: 1.4rem;
--h6: 1.3rem;
--h5: 1.6rem;
--h4: 1.8rem; /* default font-size */
--h3: 2.6rem;
--h4: 1.6rem; /* default font-size */
--h3: 2.5rem;
--h2: 3rem;
--h1: 3.2rem;
--linemax: 42em; /* max line-length */
--h1: 3rem;
--linemax: 50em; /* max line-length */
--lh: 1.5; /* base line-height */
}
@ -354,7 +355,7 @@ a.no-underline {
.listify ul > li:before {
content: '';
position: absolute;
margin-top: 1.1rem;
margin-top: .9rem;
margin-left: -1.8rem;
background-color: var(--second);
width: .6rem;