CSS example

commit 005dcf8043fa8339628bde41705b7b49654ec86f Author: teascade Date: Sun Oct 1 22:01:18 2017 +0300 Initial commit diff --git a/index.html b/index.html new file mode 100644 index 0000000..0008eec --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ + + + + + CSS example + + + + +

Good day! Bold!

Links!

Teasca.de

GitHub

Mastodon

Stuff under the hr!

+ +

Welcome to a thing! This is a list, hello!

The list:

Thing in a list +

Another thing +

+ +

Some stuff

This is a blue box

Hello! I'm under hr!

+ +

+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..772e19c --- /dev/null +++ b/style.css @@ -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); }