kankys/testing-docs.cz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responzivní web

Browse Source
This commit is contained in:
Lukáš Kaňka 2024-01-11 18:08:50 +01:00
parent 59b4b53543
commit 02703bbd63
2 changed files with 127 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
index.html
View File

@ -36,38 +36,44 @@
</div> </div>
<hr /> <hr />
<div class="flexbox"> <div class="flexbox">
<div class="navigation"> <div class="navigation">
<table> <div class="dropdown-content
<caption> ">
Rubriky: <table>
</caption> <caption>
<tr> Rubriky:
<th> </caption>
<li> <tr>
<a class="button" href="automatizovane-testovani.html">Automatizované testování</a> <th>
</li> <li>
<li><a class="button" href="nastroje.html">Nástroje</a></li> <a class="button" href="automatizovane-testovani.html">Automatizované testování</a>
<li> </li>
<a class="button" href="penetracni-testovani.html">Penetrační testování</a> <li><a class="button" href="nastroje.html">Nástroje</a></li>
</li> <li>
<li> <a class="button" href="penetracni-testovani.html">Penetrační testování</a>
<a class="button" href="testing-obecne.html">Testing obečně</a> </li>
</li> <li>
<li> <a class="button" href="testing-obecne.html">Testing obečně</a>
<a class="button" href="testovani-mobilnich-aplikaci.html">Testování mobilních aplikací</a> </li>
</li> <li>
<li> <a class="button" href="testovani-mobilnich-aplikaci.html">Testování mobilních
<a class="button" href="testovani-pristupnosti.html">Testování přístupnosti</a> aplikací</a>
</li> </li>
<li> <li>
<a class="button" href="zatezove-testovani.html">Zátěžové testování</a> <a class="button" href="testovani-pristupnosti.html">Testování přístupnosti</a>
</li> </li>
</th> <li>
</tr> <a class="button" href="zatezove-testovani.html">Zátěžové testování</a>
</table> </li>
</th>
</tr>
</table>
</div>
</div> </div>
<div class="content"> <div class="content">
<p class="big-text">Testing Docs CZ</p> <p class="big-text">Testing Docs CZ</p>
<p> <p>

138
style.css
View File

@ -1,100 +1,148 @@
:root { :root {
--special_black: rgb(11, 2, 2); --special_black: rgb(11, 2, 2);
--special_white: white; --special_white: white;
--special_grey: grey; --special_grey: grey;
--special_black_original: black; --special_black_original: black;
} }
/* Body */
body { body {
background-color: var(--special_black); background-color: var(--special_black);
color: var(--special_white); color: var(--special_white);
width: calc(100% - 32px); width: calc(100% - 32px);
max-width: 1200px; max-width: 1200px;
margin: auto; margin: auto;
}
@media screen and (max-width: 600px) {
body {
width: calc(100% - 16px);
}
} }
.menu-item { .menu-item {
display: inline-block; display: inline-block;
width: 200px; width: 200px;
height: 20px; height: 20px;
position: static; position: static;
text-align: center; text-align: center;
} }
.flexbox { .flexbox {
display: flex; display: flex;
/* flex-direction: column; */
} }
.navigation { .navigation {
flex: 1; flex: 1;
/* margin: 0px 0px 0px 50px; */ /* margin: 0px 0px 0px 50px; */
padding: 25px; padding: 25px;
/* margin-top: 20px; */ /* margin-top: 20px; */
} }
/* .dropdown-content {
display: none;
} */
.content { .content {
flex: 3; flex: 3;
margin-bottom: 25px; margin-bottom: 25px;
}
@media screen and (max-width: 600px) {
/* Nastavení sloupcu na sloupce mobil */
.flexbox {
flex-direction: column;
}
/* ˇPořadí zobrazení */
.navigation {
order: -1;
flex-direction: column;
}
/* škrývání */
.navigation:hover .dropdown-content {
display: block;
}
/* roletka posuvník */
.dropdown-content {
overflow: auto;
max-height: 100px; /* or any other value */
}
.content {
order: 1;
flex-direction: column;
}
} }
.articles { .articles {
margin: 0px 50px 0px 0px; margin: 0px 50px 0px 0px;
margin-top: 25px; margin-top: 25px;
}
@media screen and (max-width: 600px) {
.articles {
display: none;
}
} }
footer { footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
} }
.big-text { .big-text {
font-size: 40px; font-size: 40px;
text-align: center; text-align: center;
} }
h1 { h1 {
font-family: cursive; font-family: cursive;
margin: 0px 0px 0px 30px; margin: 0px 0px 0px 30px;
} }
h2 { h2 {
font-family: cursive; font-family: cursive;
margin: 0px 0px 0px 30px; margin: 0px 0px 0px 30px;
} }
/*.link-white*/ /*.link-white*/
.button { .button {
color: var(--special_white); color: var(--special_white);
} }
td, td,
th { th {
border: 1px solid var(--special_white); border: 1px solid var(--special_white);
padding: 10px; padding: 10px;
} }
.code-box { .code-box {
border: 1px solid var(--special_white); border: 1px solid var(--special_white);
padding: 10px; padding: 10px;
background-color: var(--special_grey); background-color: var(--special_grey);
font-family: monospace; font-family: monospace;
color: var(--special_black_original); color: var(--special_black_original);
font-weight: bold; font-weight: bold;
border-radius: 8px; border-radius: 8px;
} }
.not-dot { .not-dot {
list-style-type: none; list-style-type: none;
} }
.link { .link {
color: var(--special_white); color: var(--special_white);
/*cursor: unset;*/
} }
.strong-text { .strong-text {
font-weight: bold; font-weight: bold;
} }
.link-black { .link-black {
color: var(--special_black_original); color: var(--special_black_original);
} }