From 788ad8134eafae552f4a89919a7d28ac56f6dc96 Mon Sep 17 00:00:00 2001 From: teascade Date: Sun, 1 Oct 2017 22:55:29 +0300 Subject: [PATCH] Went pretty sassy --- .gitignore | 1 + index.html | 9 +- style.css | 425 +++++++++++++++++++++++--------------------------- style.css.map | 7 + style.scss | 291 ++++++++++++++++++++++++++++++++++ 5 files changed, 500 insertions(+), 233 deletions(-) create mode 100644 .gitignore create mode 100644 style.css.map create mode 100644 style.scss diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6a6dc3d --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/.sass-cache/ diff --git a/index.html b/index.html index 0008eec..f936550 100644 --- a/index.html +++ b/index.html @@ -45,18 +45,21 @@

Stuff under the hr!

-
+

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

The list:

    • Thing in a list
      Another thing
    • +

    new line

    +

    6th line

    -
    +
    +

    Some stuff

    @@ -64,7 +67,7 @@

    Hello! I'm under hr!

    - +
    diff --git a/style.css b/style.css index 772e19c..f75d252 100644 --- a/style.css +++ b/style.css @@ -1,271 +1,236 @@ -:root { /* Styles applying to everyting */ +@charset "UTF-8"; +:root { 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); + background-color: black; + color: #c9c9c9; font-weight: 400; -} + font-size: 16px; + line-height: 21px; } -/* General styles for elements */ - -* { /* Remove margin and padding from everything by default */ +* { margin: 0; - padding: 0; -} + padding: 0; } p { - width: auto; -} + width: auto; } -b { /* Bolded text */ - font-weight: 1000; -} +b { + font-weight: 1000; } li { - list-style: none; -} + list-style: none; } ul { - padding-left: 1ch; -} + 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); -} + color: #c9c9c9; } + a :hover { + background-color: #171c94; + color: #c9c9c9; } -nav a { - color: var(--default-black); - display: block; - width: 100%; - text-decoration: none; -} -nav ul > li >ul:hover a { - color: var(--default-white); -} +.white a { + color: black; } + +.white a:hover { + color: #c9c9c9; } + +.blue a:hover { + background-color: #c9c9c9; + color: #171c94; } + +nav ul > li > ul:hover a { + color: #c9c9c9; } .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); -} + height: 21px; } -/* Lists */ +hr { + height: 10.5px; + border: 0; + border-bottom: 1px solid #c9c9c9; } + +.blue hr { + border-color: #c9c9c9; } + +nav li hr, li.button-list > ul a hr, .white hr { + border-color: black; } + +nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr { + border-color: #c9c9c9; } 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 { + content: "- "; } +li .button-list > ul { + width: calc(100% - 1ch); } + li .button-list > ul:hover { + background-color: #171c94; + color: #c9c9c9; } + li .button-list > ul:hover > a { + color: #c9c9c9; } + li .button-list > ul > li { + width: 100%; } + li .button-list > ul a { display: block; - width: 100%; -} + 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); -} + background-color: #c9c9c9; + color: 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); -} + color: black; } @keyframes hide { 0% { opacity: 0; - left: inherit; - } + left: inherit; } 1% { - opacity: 0; - } + 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 */ + left: -9999px; } } +nav a { + color: black; 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); -} + width: 100%; + text-decoration: none; } +nav ul::before { + content: "" !important; } +nav > li { + background-color: #c9c9c9; + color: black; + margin-left: 0; } + nav > li > ul { + margin: 0; + padding: 0; + display: inline-block; + padding-left: 1ch; + padding-right: 1ch; } + nav > li > ul:hover { + background-color: #171c94; + color: #c9c9c9; + cursor: pointer; } + nav > li > ul:focus { + background-color: #171c94; + color: #c9c9c9; } + nav > li > ul:focus li { + display: block; + opacity: 1; + left: inherit; + animation-name: hide; + animation-name: none; } + nav > li > ul > li { + position: absolute; + border: 2px solid #c9c9c9; + border-color: black; + box-shadow: 0 0 0 0.25ch #c9c9c9; + background-color: #c9c9c9; + margin-left: calc(2px - 1ch); + margin-right: calc(2px - 1ch); + margin-top: 10.5px; + margin-bottom: 10.5px; + padding: calc(0.25ch + 2px); + padding-top: 10.5px; + padding-bottom: 10.5px; + opacity: 0; + left: -9999px; + animation-name: hide; + animation-duration: 0.5s; } + nav > li > ul > li > ul { + background-color: #c9c9c9; + color: black; + padding-left: 1ch; + padding-right: 1ch; + min-height: 21px; } + nav > li > ul > li > ul:hover { + background-color: #171c94; + color: #c9c9c9; } + nav > li .submenu { + display: inline-block; + animation-name: show; + animation-duration: 0.5s; } .box { - border: 2px solid var(--default-white); - margin: calc(0.5ch - 1px); - padding: calc(0.5ch - 1px); + border: 2px solid #c9c9c9; + margin: 0.5ch; + padding: calc(0.5ch - 2px); 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); -} + margin-top: 10.5px; + margin-bottom: 10.5px; + padding-top: 8.5px; + padding-bottom: 8.5px; + vertical-align: top; } + .box.double { + border-style: double; + border-width: 6px; + margin: calc(0.5ch - 2.5px); + padding: calc(0.5ch - 2.5px); + margin-top: 10.5px; + margin-bottom: 10.5px; + padding-top: 4.5px; + padding-bottom: 4.5px; } + .box.black { + background-color: black; + color: #c9c9c9; + border-color: #c9c9c9; + box-shadow: 0 0 0 0.25ch black; } + .box.white { + background-color: #c9c9c9; + color: black; + border-color: black; + box-shadow: 0 0 0 0.25ch #c9c9c9; } + .box.blue { + background-color: #171c94; + color: #c9c9c9; + border-color: #c9c9c9; + box-shadow: 0 0 0 0.25ch #171c94; } .list-symbol::after { - content: " ▼"; -} + content: " ▼"; } -/* Style helpers, like space-takers */ -.space-1em { min-height: calc(1em + 5px); } -.space-2em { min-height: calc(2em + 10px); } +.space-1em { + min-height: 21px; } -.width-50 { min-width: 50ch; } -.width-100 { min-width: 100ch; } -.width-150 { min-width: 150ch; } -.width-200 { min-width: 200ch; } +.space-2em { + min-height: 42px; } -.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); } +.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: 21px; + padding-bottom: 21px; } + +.padding-2 { + padding: 2ch; + padding-top: 42px; + padding-bottom: 42px; } + +.padding-3 { + padding: 3ch; + padding-top: 63px; + padding-bottom: 63px; } + +.padding-4 { + padding: 4ch; + padding-top: 84px; + padding-bottom: 84px; } + +.padding-5 { + padding: 5ch; + padding-top: 105px; + padding-bottom: 105px; } + +/*# sourceMappingURL=style.css.map */ diff --git a/style.css.map b/style.css.map new file mode 100644 index 0000000..371ebfc --- /dev/null +++ b/style.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["style.scss"], +"names": [], +"file": "style.css" +} \ No newline at end of file diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..d8a360f --- /dev/null +++ b/style.scss @@ -0,0 +1,291 @@ +@charset "UTF-8"; + +$default-black: rgb(0, 0, 0); +$default-white: rgb(201, 201, 201); +$default-blue: rgb(23, 28, 148); + +$em-height: 16px; +$line-overflow: 5px; +$line-height: $em-height + $line-overflow; + +$box-border: 2px; +$box-double-border: 6px; + +:root { // Styles applying to everyting + font-family: "Iosevka Slab", "Iosevka", "Consolas", "monospace"; + + background-color: $default-black; + color: $default-white; + font-weight: 400; + + font-size: $em-height; + line-height: $line-height; +} + +// 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: $default-white; + :hover { + background-color: $default-blue; + color: $default-white; + } +} +.white a { + color: $default-black; +} +.white a:hover { + color: $default-white; +} +.blue a:hover { + background-color: $default-white; + color: $default-blue; +} + +nav ul > li > ul:hover a { + color: $default-white; +} + +.hr { + height: $line-height; +} +hr { + height: $line-height / 2; + border: 0; + border-bottom: 1px solid $default-white; +} +.blue hr { + border-color: $default-white; +} +nav li hr, li.button-list > ul a hr, .white hr { + border-color: $default-black; +} +nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr { + border-color: $default-white; +} + +// Lists + +li { + &:not(.button-list) > ul::before { + content: "- "; + } + .button-list > ul { + width: calc(100% - 1ch); + + &:hover { + background-color: $default-blue; + color: $default-white; + + & > a { + color: $default-white; + } + } + + & > li { + width: 100%; + } + + a { + display: block; + width: 100%; + } + } +} + +.blue li.button-list > ul:hover { + background-color: $default-white; + color: $default-black; +} +.blue li.button-list > ul:hover > a { + color: $default-black; +} + + // Navbars + + @keyframes hide { + 0% { + opacity: 0; + left: inherit; + } + 1% { + opacity: 0; + } + 100% { + opacity: 0; + left: -9999px; + } + } + +nav { + a { + color: $default-black; + display: block; + width: 100%; + text-decoration: none; + } + + ul::before { + content: "" !important; + } + + & > li { // Navbar + background-color: $default-white; + color: $default-black; + margin-left: 0; + + & > ul { // Navbar items + margin: 0; + padding: 0; + display: inline-block; + padding-left: 1ch; + padding-right: 1ch; + + &:hover { // Navbar items + background-color: $default-blue; + color: $default-white; + cursor: pointer; + } + &:focus { + background-color: $default-blue; + color: $default-white; + + li { // Display inner items on focus + display: block; + opacity: 1; + left: inherit; + animation-name: hide; + + animation-name: none; + } + } + + & > li { // Navbar inner lists + position: absolute; + border: 2px solid $default-white; + border-color: $default-black; + box-shadow: 0 0 0 0.25ch $default-white; + background-color: $default-white; + margin-left: calc(2px - 1ch); + margin-right: calc(2px - 1ch); + margin-top: $line-height / 2; + margin-bottom: $line-height / 2; + padding: calc(0.25ch + 2px); + padding-top: $line-height / 2; + padding-bottom: $line-height / 2; + + opacity: 0; + left: -9999px; + + animation-name: hide; + animation-duration: 0.5s; + + & > ul { // Inner Items + background-color: $default-white; + color: $default-black; + padding-left: 1ch; + padding-right: 1ch; + min-height: $line-height; + + &:hover { // Navbar inner items hover + background-color: $default-blue; + color: $default-white; + } + } + } + } + + .submenu { + display: inline-block; + animation-name: show; + animation-duration: 0.5s; + } + } +} + +// Classes + +.box { + border: $box-border solid $default-white; + margin: 0.5ch; + padding: calc(0.5ch - 2px); + width: auto; + display: inline-block; + margin-top: $line-height / 2; + margin-bottom: $line-height / 2 ; + padding-top: $line-height / 2 - $box-border; + padding-bottom: $line-height / 2 - $box-border; + vertical-align: top; + + &.double { + border-style: double; + border-width: $box-double-border; + margin: calc(0.5ch - 2.5px); + padding: calc(0.5ch - 2.5px); + margin-top: $line-height / 2 ; + margin-bottom: $line-height / 2 ; + padding-top: $line-height / 2 - $box-double-border; + padding-bottom: $line-height / 2 - $box-double-border; + } + + &.black { + background-color: $default-black; + color: $default-white; + border-color: $default-white; + box-shadow: 0 0 0 0.25ch $default-black; + } + + &.white { + background-color: $default-white; + color: $default-black; + border-color: $default-black; + box-shadow: 0 0 0 0.25ch $default-white; + } + + &.blue { + background-color: $default-blue; + color: $default-white; + border-color: $default-white; + box-shadow: 0 0 0 0.25ch $default-blue; + } +} + +.list-symbol::after { + content: " ▼"; +} + +// Style helpers, like space-takers +.space-1em { min-height: $line-height; } +.space-2em { min-height: $line-height * 2; } + +.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: $line-height; padding-bottom: $line-height; } +.padding-2 { padding: 2ch; padding-top: $line-height * 2; padding-bottom: $line-height * 2; } +.padding-3 { padding: 3ch; padding-top: $line-height * 3; padding-bottom: $line-height * 3; } +.padding-4 { padding: 4ch; padding-top: $line-height * 4; padding-bottom: $line-height * 4; } +.padding-5 { padding: 5ch; padding-top: $line-height * 5; padding-bottom: $line-height * 5; }