Initial commit
This commit is contained in:
commit
005dcf8043
71
index.html
Normal file
71
index.html
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS example</title>
|
||||||
|
<link type="text/css" rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav>
|
||||||
|
<li>
|
||||||
|
<ul>GFA.EXE</ul><ul tabindex="0" class="list-symbol">File
|
||||||
|
<li>
|
||||||
|
<ul>Save</ul>
|
||||||
|
<ul>Save As</ul>
|
||||||
|
<ul>Exit</ul>
|
||||||
|
</li>
|
||||||
|
</ul><ul tabindex="0" class="list-symbol">Edit
|
||||||
|
<li>
|
||||||
|
<ul>Scale</ul>
|
||||||
|
<ul>Something</ul>
|
||||||
|
</li></ul><ul tabindex="0" class="list-symbol">View
|
||||||
|
<li>
|
||||||
|
<ul>Style</ul>
|
||||||
|
<ul>Another style</ul>
|
||||||
|
</li></ul><ul tabindex="0" class="list-symbol">Help
|
||||||
|
<li>
|
||||||
|
<ul><a href="https://git.teasca.de/teascade">What is this?</a></ul>
|
||||||
|
<ul>Oh no</ul>
|
||||||
|
<ul><hr></ul>
|
||||||
|
<ul>A thing under hr</ul>
|
||||||
|
</li></ul>
|
||||||
|
</li>
|
||||||
|
</nav>
|
||||||
|
<div class=""></div>
|
||||||
|
<p>Good day! <b>Bold!</b></p>
|
||||||
|
<div>
|
||||||
|
<div class="box white width-50">
|
||||||
|
<p><b>Links!</b></p>
|
||||||
|
<li class="button-list">
|
||||||
|
<ul><a href="https://teasca.de/">Teasca.de</a></ul>
|
||||||
|
<ul><a href="https://github.com/teascade">GitHub</a></ul>
|
||||||
|
<ul><a href="https://social.targaryen.house/@teascade">Mastodon</a></ul>
|
||||||
|
</li>
|
||||||
|
<div class="hr"><hr></div>
|
||||||
|
<p>Stuff under the hr!</p>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
<div class="box white width-50">
|
||||||
|
<p>Welcome to a thing! This is a list, hello!</p>
|
||||||
|
<p>The list:</p>
|
||||||
|
<li>
|
||||||
|
<ul>Thing in a list </ul>
|
||||||
|
<ul>Another thing</ul>
|
||||||
|
</li>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="box blue width-100 padding-2">
|
||||||
|
<div class="">
|
||||||
|
<p><b>Some stuff</b></p>
|
||||||
|
<div class="space-1em"></div>
|
||||||
|
<p>This is a blue box</p>
|
||||||
|
<div class="hr"><hr></div>
|
||||||
|
<p>Hello! I'm under hr!</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
271
style.css
Normal file
271
style.css
Normal file
@ -0,0 +1,271 @@
|
|||||||
|
:root { /* Styles applying to everyting */
|
||||||
|
font-family: "Iosevka Slab", "Iosevka", "Consolas", "monospace";
|
||||||
|
|
||||||
|
--default-black: rgb(0, 0, 0);
|
||||||
|
--default-white: rgb(201, 201, 201);
|
||||||
|
--default-blue: rgb(23, 28, 148);
|
||||||
|
|
||||||
|
background-color: var(--default-black);
|
||||||
|
color: var(--default-white);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* General styles for elements */
|
||||||
|
|
||||||
|
* { /* Remove margin and padding from everything by default */
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
b { /* Bolded text */
|
||||||
|
font-weight: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: 1ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--default-white);
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
background-color: var(--default-blue);
|
||||||
|
color: var(--default-white);
|
||||||
|
}
|
||||||
|
.white a {
|
||||||
|
color: var(--default-black);
|
||||||
|
}
|
||||||
|
.white a:hover {
|
||||||
|
color: var(--default-white);
|
||||||
|
}
|
||||||
|
.blue a:hover {
|
||||||
|
background-color: var(--default-white);
|
||||||
|
color: var(--default-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
color: var(--default-black);
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
nav ul > li >ul:hover a {
|
||||||
|
color: var(--default-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr {
|
||||||
|
height: calc(1em + 5px);
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
height: calc((1em + 4px) / 2);
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 1px solid var(--default-white);
|
||||||
|
}
|
||||||
|
.blue hr {
|
||||||
|
border-color: var(--default-white);
|
||||||
|
}
|
||||||
|
nav li hr, li.button-list > ul a hr, .white hr {
|
||||||
|
border-color: var(--default-black);
|
||||||
|
}
|
||||||
|
nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr {
|
||||||
|
border-color: var(--default-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Lists */
|
||||||
|
|
||||||
|
li:not(.button-list) > ul::before {
|
||||||
|
content: "- ";
|
||||||
|
}
|
||||||
|
|
||||||
|
li.button-list > ul {
|
||||||
|
width: calc(100% - 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
li.button-list > ul > li {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
li.button-list a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
li.button-list > ul:hover {
|
||||||
|
background-color: var(--default-blue);
|
||||||
|
color: var(--default-white);
|
||||||
|
}
|
||||||
|
.blue li.button-list > ul:hover {
|
||||||
|
background-color: var(--default-white);
|
||||||
|
color: var(--default-black);
|
||||||
|
}
|
||||||
|
|
||||||
|
li.button-list > ul:hover > a {
|
||||||
|
color: var(--default-white);
|
||||||
|
}
|
||||||
|
.blue li.button-list > ul:hover > a {
|
||||||
|
color: var(--default-black);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navbars */
|
||||||
|
|
||||||
|
nav > li { /* Navbar */
|
||||||
|
background-color: var(--default-white);
|
||||||
|
color: var(--default-black);
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
nav > li > ul { /* Navbar items */
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 1ch;
|
||||||
|
padding-right: 1ch;
|
||||||
|
}
|
||||||
|
nav ul::before {
|
||||||
|
content: "" !important;
|
||||||
|
}
|
||||||
|
nav > li > ul:hover { /* Navbar items */
|
||||||
|
background-color: var(--default-blue);
|
||||||
|
color: var(--default-white);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
nav > li > ul:focus {
|
||||||
|
background-color: var(--default-blue);
|
||||||
|
color: var(--default-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes hide {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
left: inherit;
|
||||||
|
}
|
||||||
|
1% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
left: -9999px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submenu {
|
||||||
|
display: inline-block;
|
||||||
|
animation-name: show;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li { /* Navbar inner lists */
|
||||||
|
position: absolute;
|
||||||
|
border: 2px solid var(--default-white);
|
||||||
|
border-color: var(--default-black);
|
||||||
|
box-shadow: 0 0 0 0.25ch var(--default-white);
|
||||||
|
background-color: var(--default-white);
|
||||||
|
margin-left: calc(2px - 1ch);
|
||||||
|
margin-right: calc(2px - 1ch);
|
||||||
|
margin-top: calc(0.5em - 3px);
|
||||||
|
margin-bottom: calc(0.5em - 1px);
|
||||||
|
padding: calc(0.25ch + 2px);
|
||||||
|
padding-top: calc(0.5em + 3px - 0.25ch);
|
||||||
|
padding-bottom: calc(0.5em + 3px - 0.25ch);
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
left: -9999px;
|
||||||
|
|
||||||
|
animation-name: hide;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li ul { /* Inner Items */
|
||||||
|
background-color: var(--default-white);
|
||||||
|
color: var(--default-black);
|
||||||
|
padding-left: 1ch;
|
||||||
|
padding-right: 1ch;
|
||||||
|
min-height: calc(1em + 5px);
|
||||||
|
}
|
||||||
|
nav ul:focus li { /* Display inner items on focus */
|
||||||
|
display: block;
|
||||||
|
opacity: 1;
|
||||||
|
left: inherit;
|
||||||
|
animation-name: hide;
|
||||||
|
|
||||||
|
animation-name: none;
|
||||||
|
}
|
||||||
|
nav ul li ul:hover { /* Navbar inner items hover */
|
||||||
|
background-color: var(--default-blue);
|
||||||
|
color: var(--default-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Classes */
|
||||||
|
.main-flexbox {
|
||||||
|
}
|
||||||
|
.mainframe {
|
||||||
|
text-align: left;
|
||||||
|
background: var(--default-black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border: 2px solid var(--default-white);
|
||||||
|
margin: calc(0.5ch - 1px);
|
||||||
|
padding: calc(0.5ch - 1px);
|
||||||
|
width: auto;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: calc(0.5em - 1px + 2.5px);
|
||||||
|
margin-bottom: calc(0.5em - 1px + 2.5px);
|
||||||
|
padding-top: calc(0.5em - 1px + 2.5px);
|
||||||
|
padding-bottom: calc(0.5em - 1px + 2.5px);
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.box.double {
|
||||||
|
border-style: double;
|
||||||
|
border-width: 5px;
|
||||||
|
margin: calc(0.5ch - 2.5px);
|
||||||
|
padding: calc(0.5ch - 2.5px);
|
||||||
|
margin-top: calc(0.5em - 2.5px + 2.5px);
|
||||||
|
margin-bottom: calc(0.5em - 2.5px + 2.5px);
|
||||||
|
padding-top: calc(0.5em - 2.5px + 2.5);
|
||||||
|
padding-bottom: calc(0.5em - 2.5px + 2.5);
|
||||||
|
}
|
||||||
|
.box.black {
|
||||||
|
background-color: var(--default-black);
|
||||||
|
color: var(--default-white);
|
||||||
|
border-color: var(--default-white);
|
||||||
|
box-shadow: 0 0 0 0.25ch var(--default-black);
|
||||||
|
}
|
||||||
|
.box.white {
|
||||||
|
background-color: var(--default-white);
|
||||||
|
color: var(--default-black);
|
||||||
|
border-color: var(--default-black);
|
||||||
|
box-shadow: 0 0 0 0.25ch var(--default-white);
|
||||||
|
}
|
||||||
|
.box.blue {
|
||||||
|
background-color: var(--default-blue);
|
||||||
|
color: var(--default-white);
|
||||||
|
border-color: var(--default-white);
|
||||||
|
box-shadow: 0 0 0 0.25ch var(--default-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-symbol::after {
|
||||||
|
content: " ▼";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style helpers, like space-takers */
|
||||||
|
.space-1em { min-height: calc(1em + 5px); }
|
||||||
|
.space-2em { min-height: calc(2em + 10px); }
|
||||||
|
|
||||||
|
.width-50 { min-width: 50ch; }
|
||||||
|
.width-100 { min-width: 100ch; }
|
||||||
|
.width-150 { min-width: 150ch; }
|
||||||
|
.width-200 { min-width: 200ch; }
|
||||||
|
|
||||||
|
.padding-1 { padding: 1ch; padding-top: calc(1em + 5px); padding-bottom: calc(1em + 5px); }
|
||||||
|
.padding-2 { padding: 2ch; padding-top: calc(2em + 10px); padding-bottom: calc(2em + 10px); }
|
||||||
|
.padding-3 { padding: 3ch; padding-top: calc(3em + 15px); padding-bottom: calc(3em + 15px); }
|
||||||
|
.padding-4 { padding: 4ch; padding-top: calc(4em + 20px); padding-bottom: calc(4em + 20px); }
|
||||||
|
.padding-5 { padding: 5ch; padding-top: calc(5em + 25px); padding-bottom: calc(5em + 25px); }
|
||||||
Loading…
Reference in New Issue
Block a user