i dont understand css

This commit is contained in:
KZacharski 2023-08-27 00:55:10 +02:00
parent dcd18c8276
commit 78b982f6bc
4 changed files with 33 additions and 8 deletions

View File

@ -1,4 +1,4 @@
/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+bash+batch+go+go-module+markdown&plugins=toolbar+copy-to-clipboard */
code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}
div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}
div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:scroll;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}

View File

@ -12,6 +12,7 @@
<script src="./assets/prism.js"></script>
</head>
<body>
<div class="hhh">
<div class="navbar">
<img onclick="openNav()" class="navicon" src="./assets/ic_fluent_navigation_24_filled.svg" height="25px">
<a href="./index.html"><img src="./assets/dijidocs.png" height="40px" style="display: block;"></a>
@ -74,8 +75,7 @@
</div>
</div>
<div id="drawer" class="navdrawer">
@ -98,6 +98,7 @@
</div>-->
</div>
<div id="drawerbg" class="navdrawerbg" onclick="closeNav()"></div>
</div>
<div class="footer">
<p class="ftrtext">Created by <a href="https://puffercat.xyz" class="footerlink">KZacharski (Puffercat)</a></p>
<p class="ftrtext">Project created with diji 1.1</p>

View File

@ -10,6 +10,7 @@
<script src="script.js"></script>
</head>
<body>
<div class="hhh">
<div class="navbar">
<img onclick="openNav()" class="navicon" src="./assets/ic_fluent_navigation_24_filled.svg" height="25px">
<a href="./index.html"><img src="./assets/dijidocs.png" height="40px" style="display: block;"></a>
@ -62,8 +63,8 @@
</div>
</div>
<div id="drawer" class="navdrawer">
@ -86,10 +87,12 @@
</div>-->
</div>
<div id="drawerbg" class="navdrawerbg" onclick="closeNav()"></div>
</div>
<div class="footer">
<p class="ftrtext">Created by <a href="https://puffercat.xyz" class="footerlink">KZacharski (Puffercat)</a></p>
<p class="ftrtext">Project created with diji 1.1</p>
<p class="ftrtext"><a href="https://diji.puffercat.xyz" class="footerlink ftlpadding">Main website</a> <a href="https://github.com/KZacharski/diji" class="footerlink ftlpadding">GitHub</a> <a href="https://github.com/KZacharski/diji/tree/github-files/docs/docs" class="footerlink ftlpadding">Docs Github</a></p>
</div>
</body>
</html>

View File

@ -12,6 +12,7 @@ color: white;
display: flex;
flex-direction: column;
} .navbar {
position: sticky;
top: 0px;
@ -20,6 +21,7 @@ flex-direction: column;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.473);
display: flex;
align-items: center;
z-index: 1;
padding: 10px;
padding-right: 0;
padding-left: 0;
@ -33,10 +35,12 @@ flex-direction: column;
margin-left: auto;
max-width: 1000px;
flex: 1 0 auto;
}
.anotherfuckingcontainer {
margin: 20px;
overflow: auto;
}
.t1 {
@ -68,7 +72,7 @@ flex-direction: column;
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
z-index: 3; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #000000; /* Black*/
@ -83,7 +87,7 @@ flex-direction: column;
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 0; /* Stay on top */
z-index: 2; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: transparent; /* Black*/
@ -390,12 +394,19 @@ flex-direction: column;
pre[class*="language-"] {
position: relative;
overflow: auto;
overflow: scroll;
/* make space */
margin: 5px 0;
padding: 1.75rem 0 1.75rem 1rem;
border-radius: 10px;
max-width: 100%;
overflow: scroll;
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
overflow-x: scroll;
width: 100%;
}
pre[class*="language-"] button {
@ -418,6 +429,16 @@ pre[class*="language-"] button:hover {
}
pre {
max-width: 100%;
overflow: scroll;
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
overflow-x: scroll;
width: 100%;
} code {
overflow: scroll;
max-width: 100%;
} .hhh {
height: auto;
flex: 1 0 auto;
}