207 lines
8.6 KiB
HTML
207 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!--Low contrast theme-->
|
|
<style>
|
|
:root {
|
|
/*Fallback is a thing with the var() function
|
|
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#defining_fallbacks_in_the_var_function
|
|
*/
|
|
--main-bg-color: #adadad;
|
|
--alt-bg-color: #e6e6e6;
|
|
--main-font-color: #134e13;
|
|
--disabled-bg-color: #666666;
|
|
--border-style: 0.25rem outset pink;
|
|
}
|
|
body {
|
|
background-color: var(--main-bg-color);
|
|
color: var(--main-font-color);
|
|
}
|
|
|
|
textarea, input {
|
|
background-color: #a6a6a6;
|
|
color: var(--main-font-color);
|
|
}
|
|
|
|
input[type=button] {
|
|
border: var(--border-style);
|
|
}
|
|
|
|
/*On button press / hold*/
|
|
input[type=button]:active {
|
|
border: 3px solid var(--alt-bg-color);
|
|
}
|
|
|
|
::placeholder {
|
|
color: var(--main-font-color);
|
|
}
|
|
|
|
*:disabled {
|
|
background-color: var(--disabled-bg-color);
|
|
}
|
|
</style>
|
|
<!--End themes-->
|
|
<style>
|
|
:root {
|
|
--default-font-size: 16px;
|
|
--default-spacing: 10px;
|
|
}
|
|
body {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
p, h1, h2, h3, h4, h5, textarea, input, fieldset {
|
|
margin: var(--default-spacing);
|
|
}
|
|
|
|
legend {
|
|
padding: 5px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
textarea, input {
|
|
padding: var(--default-spacing);
|
|
font-size: var(--default-font-size);
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.flex > * {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
header {
|
|
grid-area: header;
|
|
border: solid 1px black;
|
|
}
|
|
|
|
article {
|
|
grid-area: content;
|
|
border: solid 1px black;
|
|
}
|
|
|
|
aside {
|
|
grid-area: sidebar;
|
|
border: solid 1px black;
|
|
}
|
|
|
|
.details {
|
|
grid-area: details;
|
|
border: solid 1px black;
|
|
}
|
|
|
|
footer {
|
|
grid-area: footer;
|
|
border: solid 1px black;
|
|
}
|
|
</style>
|
|
<style media="all and (min-width: 1200px)">
|
|
.main-layout {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"header header header"
|
|
"sidebar content details"
|
|
"footer footer footer";
|
|
grid-template-columns: 1fr 3fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
/*.grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr;
|
|
}
|
|
.main-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr 2fr;
|
|
}*/
|
|
</style>
|
|
<style media="all and (max-width: 1200px)">
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.container {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"header"
|
|
"content"
|
|
"details"
|
|
"sidebar"
|
|
"footer";
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
}
|
|
</style>
|
|
</header>
|
|
<body>
|
|
<div class="main-layout">
|
|
<header>
|
|
<ul>
|
|
<li>Link 1</li>
|
|
<li>Link 2</li>
|
|
<li>Link 321</li>
|
|
<li class="push-right">Link 43</li>
|
|
</ul>
|
|
</header>
|
|
<article>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim lobortis scelerisque fermentum dui faucibus in. Sed id semper risus in hendrerit gravida. Ac auctor augue mauris augue neque gravida in. Et malesuada fames ac turpis egestas. Mi sit amet mauris commodo quis imperdiet massa. Quis viverra nibh cras pulvinar mattis nunc. In egestas erat imperdiet sed euismod nisi. Sed libero enim sed faucibus turpis in eu. Quam nulla porttitor massa id. Accumsan in nisl nisi scelerisque. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus in. Quam pellentesque nec nam aliquam sem et tortor consequat id.
|
|
|
|
Elementum sagittis vitae et leo duis ut diam quam nulla. Pharetra sit amet aliquam id diam maecenas ultricies mi. Donec et odio pellentesque diam volutpat commodo. Interdum consectetur libero id faucibus nisl tincidunt eget. Non nisi est sit amet. Tortor vitae purus faucibus ornare suspendisse sed. Varius morbi enim nunc faucibus a pellentesque sit. Donec massa sapien faucibus et molestie ac feugiat. Varius vel pharetra vel turpis nunc eget lorem. Pellentesque nec nam aliquam sem. Pulvinar mattis nunc sed blandit libero. At auctor urna nunc id cursus metus aliquam eleifend mi. Quam nulla porttitor massa id neque aliquam. Eget duis at tellus at urna condimentum mattis pellentesque id. Pharetra diam sit amet nisl suscipit adipiscing bibendum est.</p>
|
|
</article>
|
|
<div class="details">
|
|
<div class="flex">
|
|
<input type="text" />
|
|
<p>DETAILS: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim lobortis scelerisque fermentum dui faucibus in. Sed id semper risus in hendrerit gravida. Ac auctor augue mauris augue neque gravida in.</p>
|
|
<textarea placeholder="Placeholder text here...."></textarea>
|
|
<textarea disabled="true" placeholder="Disabled Placeholder text here...."></textarea>
|
|
<input type="button" value="My button"/>
|
|
</div>
|
|
</div>
|
|
<aside>
|
|
<h1>An asid here</h1>
|
|
</aside>
|
|
<footer>
|
|
<h2>Copyrights crusading like a mad man for that shit</h2>
|
|
<label>
|
|
<input type="checkbox" checked="checked">
|
|
<span class="checkmark">One</span>
|
|
</label>
|
|
<fieldset>
|
|
<legend>A radio button group, with a "name" property set</legend>
|
|
<!--TODO: How well does this setup work with accessibility tech?-->
|
|
<!--A radio button group, not the "name" property-->
|
|
<label>
|
|
<input type="radio" name="radio">
|
|
<span class="checkmark">No relations</span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="radio">
|
|
<span class="checkmark">Uncle Rucuks</span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="radio">
|
|
<span class="checkmark">The real Uncle Ruckus</span>
|
|
</label>
|
|
</fieldset>
|
|
</footer>
|
|
</div>
|
|
<!--<div class="main-layout">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim lobortis scelerisque fermentum dui faucibus in. Sed id semper risus in hendrerit gravida. Ac auctor augue mauris augue neque gravida in. Et malesuada fames ac turpis egestas. Mi sit amet mauris commodo quis imperdiet massa. Quis viverra nibh cras pulvinar mattis nunc. In egestas erat imperdiet sed euismod nisi. Sed libero enim sed faucibus turpis in eu. Quam nulla porttitor massa id. Accumsan in nisl nisi scelerisque. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus in. Quam pellentesque nec nam aliquam sem et tortor consequat id.
|
|
|
|
Elementum sagittis vitae et leo duis ut diam quam nulla. Pharetra sit amet aliquam id diam maecenas ultricies mi. Donec et odio pellentesque diam volutpat commodo. Interdum consectetur libero id faucibus nisl tincidunt eget. Non nisi est sit amet. Tortor vitae purus faucibus ornare suspendisse sed. Varius morbi enim nunc faucibus a pellentesque sit. Donec massa sapien faucibus et molestie ac feugiat. Varius vel pharetra vel turpis nunc eget lorem. Pellentesque nec nam aliquam sem. Pulvinar mattis nunc sed blandit libero. At auctor urna nunc id cursus metus aliquam eleifend mi. Quam nulla porttitor massa id neque aliquam. Eget duis at tellus at urna condimentum mattis pellentesque id. Pharetra diam sit amet nisl suscipit adipiscing bibendum est.</p>
|
|
<picture>
|
|
<!-- Selects the best picture based on screen size. Img tag is a fallback if nothing works.-->
|
|
<!--<source srcset="desktop-1920x1080.png" media="all and (min-width: 1200px)" alt="my bigger alt test" />
|
|
<source srcset="Screenshot_2024-01-16_01-13-47.jpg" media="all and (max-width: 1200px)" />
|
|
<img src="Unit 3.1 700.png" alt="my alt text" />
|
|
</picture>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim lobortis scelerisque fermentum dui faucibus in. Sed id semper risus in hendrerit gravida. Ac auctor augue mauris augue neque gravida in. Et malesuada fames ac turpis egestas. Mi sit amet mauris commodo quis imperdiet massa. Quis viverra nibh cras pulvinar mattis nunc. In egestas erat imperdiet sed euismod nisi. Sed libero enim sed faucibus turpis in eu. Quam nulla porttitor massa id. Accumsan in nisl nisi scelerisque. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus in. Quam pellentesque nec nam aliquam sem et tortor consequat id.
|
|
|
|
Elementum sagittis vitae et leo duis ut diam quam nulla. Pharetra sit amet aliquam id diam maecenas ultricies mi. Donec et odio pellentesque diam volutpat commodo. Interdum consectetur libero id faucibus nisl tincidunt eget. Non nisi est sit amet. Tortor vitae purus faucibus ornare suspendisse sed. Varius morbi enim nunc faucibus a pellentesque sit. Donec massa sapien faucibus et molestie ac feugiat. Varius vel pharetra vel turpis nunc eget lorem. Pellentesque nec nam aliquam sem. Pulvinar mattis nunc sed blandit libero. At auctor urna nunc id cursus metus aliquam eleifend mi. Quam nulla porttitor massa id neque aliquam. Eget duis at tellus at urna condimentum mattis pellentesque id. Pharetra diam sit amet nisl suscipit adipiscing bibendum est.</p>
|
|
</div>-->
|
|
</body>
|
|
</html> |