Initial commit

This commit is contained in:
Sofia 2017-10-01 22:01:18 +03:00
commit 005dcf8043
2 changed files with 342 additions and 0 deletions

71
index.html Normal file
View 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
View 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); }