mirror of
https://github.com/kerberos-io/documentation.git
synced 2026-08-23 15:18:31 +00:00
header & logo styling, dark mode fix
This commit is contained in:
Martin Allien
65
public/images/kerberos-logo.svg
Normal file
65
public/images/kerberos-logo.svg
Normal file
@@ -0,0 +1,65 @@
|
||||
<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="27.5" cy="27.5" r="27.5" fill="white"/>
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="55" height="55">
|
||||
<circle cx="27.5" cy="27.5" r="27.5" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<path d="M34.4584 13.8517C33.419 14.1391 30.9658 6.44056 30.1204 6.8943C29.2888 7.34805 28.4434 9.49576 28.4434 9.49576C28.1246 8.70928 27.2792 6.59181 26.3506 7.2573C25.1448 8.13454 23.745 12.43 23.745 14.3054C23.745 16.8313 21.4305 22.1854 21.4305 22.1854C21.4305 22.1854 16.9539 35.7826 19.407 33.5593C21.8601 31.3359 24.7845 33.408 26.0873 34.6483C27.3762 35.8582 28.7622 37.4917 31.5757 37.4917C32.4349 37.4917 34.8881 36.917 34.9158 35.4952C34.9712 31.5628 36.3988 28.311 36.3988 28.311C36.3988 28.311 37.4798 28.2505 41.8733 27.7967C46.2529 27.343 47.4586 24.2122 47.4586 24.2122C47.4586 24.2122 49.6484 21.762 45.948 20.5671C40.418 18.7824 39.628 18.1169 39.628 18.1169C36.6066 12.1577 31.6865 13.156 31.6865 13.156C30.952 13.1711 30.3006 13.2165 29.7046 13.2921C25.5606 13.7912 24.6875 15.5003 24.6875 15.5003" fill="#B4524E"/>
|
||||
<path d="M45.3658 20.4008C45.3658 20.4008 44.4926 22.3973 47.4585 24.2274C47.4585 24.2274 49.9255 21.6259 45.3658 20.4008Z" fill="#414042"/>
|
||||
<path d="M33.2389 18.6613C33.2389 18.6613 36.7869 16.8917 37.0918 20.4006C37.0918 20.4006 36.4127 20.204 35.7336 20.4006C35.0961 20.5821 33.9734 20.7939 33.2389 18.6613Z" fill="#414042"/>
|
||||
<path d="M24.4796 15.1525C24.4796 15.1525 24.2856 14.003 24.535 12.7023C24.9785 10.2823 26.711 6.84899 27.4594 7.60522C28.3741 8.54296 28.6929 9.02695 29.0948 13.398C29.0948 13.398 26.6556 13.2921 24.4796 15.1525Z" fill="#414042"/>
|
||||
<path d="M29.7046 13.3074C29.7046 13.3074 29.0948 7.57508 30.6471 7.27258C30.8134 7.27258 33.5991 13.2015 33.6961 13.2317C33.904 13.2771 31.9221 12.9292 29.7046 13.3074Z" fill="#414042"/>
|
||||
<path d="M21.6105 21.6865C21.6105 21.6865 22.9826 32.2134 24.6319 33.5141C24.6319 33.5141 21.6105 31.6537 19.0742 33.8771C19.0604 33.8922 16.7458 34.2401 21.6105 21.6865Z" fill="#414042"/>
|
||||
<g opacity="0.66">
|
||||
<g opacity="0.66">
|
||||
<g opacity="0.66">
|
||||
<path opacity="0.66" d="M23.6481 15.349C23.6481 15.349 25.0895 37.5068 34.8327 35.9338C34.8327 35.9338 34.4446 37.2799 31.5757 37.5219C31.5757 37.5219 29.178 37.9 26.8912 35.4347C26.8912 35.4347 24.8261 33.6197 24.6182 33.529C24.6182 33.529 23.454 32.7274 22.7888 28.5378C22.7888 28.5378 21.4167 22.14 21.5969 21.7014C21.6107 21.6863 23.6342 15.9842 23.6481 15.349Z" fill="#6D6E71"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M29.9681 26.8286C29.9681 26.8286 34.9298 29.0217 36.3989 28.3411C36.3989 28.3411 35.8168 29.9141 35.6921 30.3981C35.6921 30.3981 35.4288 31.4114 35.3595 31.7744C35.3595 31.7593 30.5087 32.7273 29.9681 26.8286Z" fill="#414042"/>
|
||||
<path d="M29.968 26.8286C29.968 26.8286 30.3284 31.5929 35.3594 31.7593C35.3594 31.7593 34.9713 33.9221 34.9713 34.3759C34.9713 34.3759 27.7505 34.7237 29.968 26.8286Z" fill="#58595B"/>
|
||||
<g opacity="0.26">
|
||||
<g opacity="0.26">
|
||||
<g opacity="0.26">
|
||||
<path opacity="0.26" d="M45.8928 26.224C45.8928 26.224 34.8467 27.1012 29.9543 26.829C29.9543 26.829 34.9576 29.0826 36.3852 28.3415C36.3852 28.3415 41.9151 27.9028 42.7328 27.6911C42.7467 27.6911 44.4791 27.4491 45.8928 26.224Z" fill="#C49A6C"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M19.2963 18.6312C18.2569 18.9186 15.8037 11.2201 14.9583 11.6738C14.1267 12.1276 13.2813 14.2753 13.2813 14.2753C12.9625 13.4888 12.1171 11.3713 11.1885 12.0368C9.98273 12.9141 8.58293 17.2095 8.58293 19.085C8.58293 21.6108 6.26839 26.965 6.26839 26.965C6.26839 26.965 1.79177 40.5622 4.2449 38.3388C6.69803 36.1155 9.60853 38.1876 10.9252 39.4278C12.2141 40.6378 13.6001 42.2713 16.4135 42.2713C17.2728 42.2713 19.726 41.6965 19.7537 40.2748C19.8091 36.3423 21.2366 33.0905 21.2366 33.0905C21.2366 33.0905 22.3177 33.03 26.7111 32.5763C31.0908 32.1225 32.2965 28.9917 32.2965 28.9917C32.2965 28.9917 34.4863 26.5415 30.7858 25.3466C25.2559 23.5619 24.4659 22.8964 24.4659 22.8964C21.4445 16.9373 16.5244 17.9355 16.5244 17.9355C15.7899 17.9506 15.1385 17.996 14.5425 18.0716C10.3985 18.5707 9.52537 20.2798 9.52537 20.2798" fill="#B4524E"/>
|
||||
<path d="M30.2037 25.165C30.2037 25.165 29.3305 27.1615 32.2964 28.9916C32.2964 28.9916 34.7634 26.3901 30.2037 25.165Z" fill="#414042"/>
|
||||
<path d="M18.0767 23.4259C18.0767 23.4259 21.6247 21.6563 21.9296 25.1652C21.9296 25.1652 21.2505 24.9686 20.5714 25.1652C19.9338 25.3467 18.8112 25.5585 18.0767 23.4259Z" fill="#414042"/>
|
||||
<path d="M9.31762 19.9167C9.31762 19.9167 9.12359 18.7672 9.37306 17.4665C9.81656 15.0465 11.549 11.6132 12.2974 12.3694C13.2121 13.3072 13.5309 13.7912 13.9328 18.1622C13.9328 18.1622 11.4936 18.0564 9.31762 19.9167Z" fill="#414042"/>
|
||||
<path d="M14.5426 18.0716C14.5426 18.0716 13.9328 12.3394 15.4851 12.0369C15.6514 12.0369 18.4371 17.9658 18.5342 17.996C18.7421 18.0414 16.7601 17.6935 14.5426 18.0716Z" fill="#414042"/>
|
||||
<path d="M6.44853 26.4507C6.44853 26.4507 7.82063 36.9776 9.46991 38.2783C9.46991 38.2783 6.44853 36.418 3.91225 38.6413C3.89839 38.6564 1.58385 39.0043 6.44853 26.4507Z" fill="#414042"/>
|
||||
<path d="M8.48597 20.1133C8.48597 20.1133 9.92736 42.2711 19.6706 40.6981C19.6706 40.6981 19.2825 42.0442 16.4136 42.2862C16.4136 42.2862 14.0159 42.6643 11.7291 40.199C11.7291 40.199 9.66403 38.384 9.45614 38.2933C9.45614 38.2933 8.29194 37.4916 7.62668 33.3021C7.62668 33.3021 6.25459 26.9043 6.43477 26.4657C6.44863 26.4506 8.47211 20.7485 8.48597 20.1133Z" fill="#6D6E71"/>
|
||||
<path d="M14.8059 31.5932C14.8059 31.5932 19.7676 33.7863 21.2367 33.1057C21.2367 33.1057 20.8486 34.6787 20.7378 35.1627C20.7378 35.1627 20.6823 36.66 20.5992 37.0079C20.5853 37.0079 15.3464 37.4919 14.8059 31.5932Z" fill="#414042"/>
|
||||
<path d="M14.8059 31.5932C14.8059 31.5932 15.388 36.4482 20.419 36.6297C20.419 36.6297 19.8092 38.6867 19.8092 39.1405C19.8092 39.1405 12.5884 39.5035 14.8059 31.5932Z" fill="#58595B"/>
|
||||
<g opacity="0.26">
|
||||
<g opacity="0.26">
|
||||
<g opacity="0.26">
|
||||
<path opacity="0.26" d="M30.7304 30.9882C30.7304 30.9882 19.6844 31.8655 14.792 31.5932C14.792 31.5932 19.7953 33.8468 21.2228 33.1057C21.2228 33.1057 26.7527 32.6671 27.5704 32.4553C27.5843 32.4553 29.3167 32.2285 30.7304 30.9882Z" fill="#C49A6C"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M31.3956 33.3931C30.3561 33.6805 27.903 25.982 27.0575 26.4357C26.226 26.8895 25.3805 29.0372 25.3805 29.0372C25.0618 28.2507 24.2163 26.1333 23.2878 26.7987C22.082 27.676 20.7237 31.9714 20.6822 33.8469C20.6129 36.9475 18.3399 41.9538 18.3676 41.7269C18.3676 41.7269 13.891 55.3241 16.3441 53.1007C18.7973 50.8774 21.7078 52.9495 23.0244 54.1897C24.3134 55.3997 25.6993 57.0332 28.5128 57.0332C29.3721 57.0332 31.8252 56.4584 31.8529 55.0367C31.9084 51.1042 33.3359 47.8524 33.3359 47.8524C33.3359 47.8524 34.4169 47.7919 38.8104 47.3382C43.19 46.8844 44.3958 43.7536 44.3958 43.7536C44.3958 43.7536 46.5856 41.3034 42.8851 40.1085C37.3551 38.3238 36.5652 37.6583 36.5652 37.6583C33.5438 31.6992 28.6237 32.6974 28.6237 32.6974C27.8891 32.7125 27.2377 32.7579 26.6418 32.8335C22.4978 33.3326 21.6246 35.0417 21.6246 35.0417" fill="#B4524E"/>
|
||||
<path d="M42.3031 39.927C42.3031 39.927 41.43 41.9235 44.3959 43.7536C44.3959 43.7687 46.8629 41.1521 42.3031 39.927Z" fill="#414042"/>
|
||||
<path d="M30.1763 38.1875C30.1763 38.1875 33.7243 36.4179 34.0292 39.9268C34.0292 39.9268 33.3501 39.7302 32.671 39.9268C32.0334 40.1083 30.9108 40.3201 30.1763 38.1875Z" fill="#414042"/>
|
||||
<path d="M21.4308 34.6786C21.4308 34.6786 21.2367 33.5291 21.4862 32.2284C21.9297 29.8084 23.6622 26.3751 24.4106 27.1313C25.3253 28.0691 25.6441 28.5531 26.046 32.9241C26.0321 32.9241 23.5929 32.8334 21.4308 34.6786Z" fill="#414042"/>
|
||||
<path d="M26.642 32.8332C26.642 32.8332 26.0322 27.1009 27.5844 26.7984C27.7507 26.7984 30.5365 32.7273 30.6335 32.7576C30.8414 32.8029 28.8734 32.4551 26.642 32.8332Z" fill="#414042"/>
|
||||
<path d="M18.3678 41.5603C18.4371 41.8174 22.4287 54.25 23.9116 55.0062C23.9116 55.0062 18.6034 51.0284 16.0672 53.2518C16.081 53.2518 13.5031 54.1139 18.3678 41.5603Z" fill="#414042"/>
|
||||
<path d="M26.9053 46.3548C26.9053 46.3548 31.867 48.5479 33.3361 47.8673C33.3361 47.8673 32.754 49.4403 32.6292 49.9242C32.6292 49.9242 32.3659 50.9376 32.2966 51.3006C32.2966 51.2855 27.4458 52.2535 26.9053 46.3548Z" fill="#414042"/>
|
||||
<path d="M26.9052 46.3548C26.9052 46.3548 27.2655 51.1191 32.2965 51.2855C32.2965 51.2855 31.9085 53.4483 31.9085 53.9021C31.9085 53.9021 24.6877 54.2651 26.9052 46.3548Z" fill="#58595B"/>
|
||||
<g opacity="0.26">
|
||||
<g opacity="0.26">
|
||||
<g opacity="0.26">
|
||||
<path opacity="0.26" d="M42.8437 45.7498C42.8437 45.7498 31.7977 46.627 26.9053 46.3547C26.9053 46.3547 31.9086 48.6083 33.3361 47.8672C33.3361 47.8672 38.866 47.4286 39.6837 47.2169C39.6837 47.2169 41.4162 46.99 42.8437 45.7498Z" fill="#C49A6C"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M3.51025 38.3537C3.51025 38.3537 8.44423 51.6332 16.2471 53.4785L16.4827 50.3628L18.229 44.1465L18.3815 41.545C18.3815 41.545 13.3228 41.666 10.8003 39.2007C10.8003 39.2007 10.2598 38.8528 9.46984 38.2629C8.67985 37.6731 3.92604 36.2967 4.05077 37.7638C4.17551 39.2309 3.85674 37.4916 3.85674 37.4916L3.51025 38.3537Z" fill="#414042"/>
|
||||
<path d="M26.7109 58.1371L28.7067 56.6549C28.7067 56.6549 24.3271 57.4716 22.3036 52.2989C20.2801 47.1262 19.2684 50.2571 19.2684 50.2571L18.2982 52.9342L20.5573 57.1691L25.1309 58.485L26.7109 58.1371Z" fill="#414042"/>
|
||||
<path d="M6.40686 26.6473C6.40686 26.6473 8.38877 49.9849 18.423 41.6662L17.6469 41.2427L15.7759 40.91L13.988 39.5941L11.424 35.3895L8.66596 29.6572L6.40686 26.6473Z" fill="#6D6E71"/>
|
||||
<path d="M3.59341 35.3743C3.59341 35.3743 -1.39601 55.7171 2.87271 54.2651C2.87271 54.2651 12.1724 52.4955 17.8964 57.29C17.8964 57.29 29.2058 66.6825 31.8391 55.1877C31.451 56.9271 20.1001 59.0143 18.6725 51.6031C17.4806 45.4625 9.45597 43.7534 9.45597 43.7534L3.59341 35.3743Z" fill="#414042"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.6 KiB |
@@ -74,7 +74,7 @@ export const Header = props => {
|
||||
<div>
|
||||
|
||||
<div>
|
||||
<nav sx={styles.primary}>
|
||||
<nav sx={styles.external_links}>
|
||||
<div class="box">
|
||||
<ul sx={styles.links}>
|
||||
<li sx={styles.linksli}>
|
||||
|
||||
@@ -16,7 +16,7 @@ export const innerContainer = {
|
||||
px: 4,
|
||||
position: 'relative',
|
||||
justifyContent: 'space-between',
|
||||
height: 80,
|
||||
height: 60, // 80
|
||||
[media.tablet]: {
|
||||
height: 51,
|
||||
},
|
||||
@@ -70,9 +70,8 @@ export const editButton = {
|
||||
borderRadius: 'radius',
|
||||
}
|
||||
|
||||
export const primary = {
|
||||
background: '#fff',
|
||||
borderBottom: '1px solid #e5e5e5',
|
||||
export const external_links = {
|
||||
borderBottom: t => `1px solid ${t.colors.border}`,
|
||||
boxShadow: '0 -5px 0 rgba(0,0,0,.03)',
|
||||
float: 'left',
|
||||
minHeight: '2.35em',
|
||||
@@ -143,7 +142,7 @@ export const linksa = {
|
||||
margin: '0 25px 0 0',
|
||||
width: 'auto',
|
||||
fontFamily: 'Inter var,sans-serif',
|
||||
color: '#943633',
|
||||
color: 'sidebar.navLinkActive',
|
||||
display: 'block',
|
||||
fontWeight: '600',
|
||||
letterSpacing: '1px',
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -4,9 +4,10 @@ export const logo = {
|
||||
letterSpacing: '-0.02em',
|
||||
fontWeight: 600,
|
||||
fontSize: 4,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
[media.tablet]: {
|
||||
left: '45px',
|
||||
top: '5px',
|
||||
position: 'relative',
|
||||
},
|
||||
}
|
||||
@@ -26,15 +27,18 @@ export const img = {
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: '100%',
|
||||
width: '35px',
|
||||
height: '35px',
|
||||
width: '45px',
|
||||
height: '45px',
|
||||
}
|
||||
|
||||
export const circle = {
|
||||
margin: '0 16px 0 0',
|
||||
/*
|
||||
margin: '-10px 20px 0 0',
|
||||
display: 'table',
|
||||
background: '#fff',
|
||||
margin: '-10px 20px 0 0',
|
||||
borderRadius: '50%',
|
||||
padding: '10px',
|
||||
float: 'left',
|
||||
}
|
||||
*/
|
||||
}
|
||||
33
src/gatsby-theme-docz/components/NavLink/styles.js
Normal file
33
src/gatsby-theme-docz/components/NavLink/styles.js
Normal file
@@ -0,0 +1,33 @@
|
||||
export const link = {
|
||||
my: 2,
|
||||
display: 'block',
|
||||
color: 'sidebar.navGroup',
|
||||
textDecoration: 'none',
|
||||
fontSize: 2,
|
||||
'&.active': {
|
||||
color: 'sidebar.navLinkActive',
|
||||
},
|
||||
}
|
||||
|
||||
export const smallLink = {
|
||||
...link,
|
||||
ml: 3,
|
||||
fontSize: 1,
|
||||
position: 'relative',
|
||||
color: 'sidebar.tocLink',
|
||||
'&.active': {
|
||||
color: 'sidebar.tocLinkActive',
|
||||
},
|
||||
'&.active::before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
top: '2px',
|
||||
left: -2,
|
||||
height: '1rem',
|
||||
backgroundColor: 'primary',
|
||||
transition: 'width 200ms ease 0s',
|
||||
width: '2px',
|
||||
borderRadius: 1,
|
||||
},
|
||||
}
|
||||
51
src/gatsby-theme-docz/components/Sidebar/styles.js
Normal file
51
src/gatsby-theme-docz/components/Sidebar/styles.js
Normal file
@@ -0,0 +1,51 @@
|
||||
import { media } from '~theme/breakpoints'
|
||||
|
||||
export const global = {
|
||||
body: {
|
||||
overflow: 'hidden',
|
||||
},
|
||||
}
|
||||
|
||||
const HEADER_HEIGHT = 81
|
||||
|
||||
export const overlay = ({ open }) => ({
|
||||
zIndex: 999,
|
||||
position: 'fixed',
|
||||
top: HEADER_HEIGHT,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
background: 'rgba(0,0,0,0.6)',
|
||||
transition: 'all .2s ease-out',
|
||||
visibility: open ? 'visible' : 'hidden',
|
||||
opacity: open ? 1 : 0,
|
||||
})
|
||||
|
||||
export const wrapper = ({ open }) => ({
|
||||
py: 4,
|
||||
px: 4,
|
||||
flexDirection: 'column',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 1,
|
||||
minWidth: 0,
|
||||
maxHeight: '100vh',
|
||||
borderRight: t => `1px solid ${t.colors.border}`,
|
||||
overflow: 'auto',
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
bg: 'sidebar.bg',
|
||||
|
||||
[media.tablet]: {
|
||||
zIndex: 9999,
|
||||
display: 'block',
|
||||
position: 'fixed',
|
||||
top: HEADER_HEIGHT,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
width: 256,
|
||||
px: 4,
|
||||
bg: 'background',
|
||||
transition: 'transform .2s ease-out',
|
||||
transform: open ? 'translateX(0)' : 'translateX(-100%)',
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user