From ac84a23f00bb7ff7b80144bc44a96749d931f90f Mon Sep 17 00:00:00 2001 From: Teascade Date: Tue, 3 Oct 2017 23:12:15 +0000 Subject: [PATCH] Made the scss a bit neater, added forms and pages --- index.html | 152 ++++++++++++++++++++--------------- style.css | 218 ++++++++++++++++++++++++++++++++++++++++++++++++-- style.css.map | 2 +- style.scss | 148 ++++++++++++++++++++++++++++++---- 4 files changed, 430 insertions(+), 90 deletions(-) diff --git a/index.html b/index.html index 047cc94..883e3b0 100644 --- a/index.html +++ b/index.html @@ -1,74 +1,96 @@ - - - CSS example - - - - +
+

Good day! Bold!

+
+
+

Links!

+
  • + + + +
    • +
    +

    Stuff under the hr!

    + +
    +

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

    +

    The list:

    +
  • +
      Thing in a list
    +
      Another thing
    +
    • +
    +
    +
    +
    +
    +
    +
    +

    Dolorem iusto nihil modi perspiciatis. Omnis nemo sed nam sed sunt qui. Laudantium accusantium architecto sint et necessitatibus quibusdam. Doloribus hic similique ut reiciendis rem ut placeat. Sit doloremque autem dicta quasi commodi nihil qui.

    +
    +

    Some stuff

    +
    +

    This is a blue box

    +
    +

    Hello! I'm under hr!

    +
    +
    +
    +
    +
    +
    +
    + A test form! +

    Name:

    +

    +

    +

    +

    +
    +
    - - - - +
    +

    Hello! Welcome to Page 2

    +
    + + diff --git a/style.css b/style.css index 959be79..0f151a0 100644 --- a/style.css +++ b/style.css @@ -28,9 +28,9 @@ ul { a { color: #c9c9c9; } a:hover { - background-color: #171c94; + cursor: pointer; color: #c9c9c9; - border-color: #c9c9c9; } + background-color: #171c94; } nav ul > li > ul:hover a { color: #c9c9c9; } @@ -53,13 +53,12 @@ nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr { li:not(.button-list) > ul::before { content: "- "; } li.button-list > ul { - width: calc(100% - 1ch); } + width: calc(100% - 1ch); + text-decoration: underline; } li.button-list > ul:hover { background-color: #171c94; color: #c9c9c9; border-color: #c9c9c9; } - li.button-list > ul:hover > a { - color: #c9c9c9; } li.button-list > ul > li { width: 100%; } li.button-list > ul a { @@ -95,10 +94,9 @@ nav > li { padding-left: 1ch; padding-right: 1ch; } nav > li > ul:hover { - background-color: #171c94; + cursor: pointer; color: #c9c9c9; - border-color: #c9c9c9; - cursor: pointer; } + background-color: #171c94; } nav > li > ul:focus { background-color: #171c94; color: #c9c9c9; @@ -197,10 +195,214 @@ nav > li { border-color: #171c94; } .box.blue hr { border-color: #c9c9c9; } + .box.blue button:hover { + background-color: #c9c9c9; + color: #171c94; + border-color: #171c94; } + .box.blue .checkbox-right:hover, .box.blue .checkbox-left:hover, .box.blue .radio-right:hover, .box.blue .radio-left:hover { + background-color: #c9c9c9; + color: #171c94; + border-color: #171c94; } .list-symbol::after { content: " ▼"; } +.no-select { + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; } + +.page-1 { + display: none; } + +#radio-page-1:checked ~ .page-1 { + display: block; } + +.page-2 { + display: none; } + +#radio-page-2:checked ~ .page-2 { + display: block; } + +.page-3 { + display: none; } + +#radio-page-3:checked ~ .page-3 { + display: block; } + +.page-4 { + display: none; } + +#radio-page-4:checked ~ .page-4 { + display: block; } + +.page-5 { + display: none; } + +#radio-page-5:checked ~ .page-5 { + display: block; } + +.page-6 { + display: none; } + +#radio-page-6:checked ~ .page-6 { + display: block; } + +.page-7 { + display: none; } + +#radio-page-7:checked ~ .page-7 { + display: block; } + +.page-8 { + display: none; } + +#radio-page-8:checked ~ .page-8 { + display: block; } + +.page-9 { + display: none; } + +#radio-page-9:checked ~ .page-9 { + display: block; } + +.page-10 { + display: none; } + +#radio-page-10:checked ~ .page-10 { + display: block; } + +.page-11 { + display: none; } + +#radio-page-11:checked ~ .page-11 { + display: block; } + +.page-12 { + display: none; } + +#radio-page-12:checked ~ .page-12 { + display: block; } + +.page-13 { + display: none; } + +#radio-page-13:checked ~ .page-13 { + display: block; } + +.page-14 { + display: none; } + +#radio-page-14:checked ~ .page-14 { + display: block; } + +.page-15 { + display: none; } + +#radio-page-15:checked ~ .page-15 { + display: block; } + +.page-16 { + display: none; } + +#radio-page-16:checked ~ .page-16 { + display: block; } + +.page-17 { + display: none; } + +#radio-page-17:checked ~ .page-17 { + display: block; } + +.page-18 { + display: none; } + +#radio-page-18:checked ~ .page-18 { + display: block; } + +.page-19 { + display: none; } + +#radio-page-19:checked ~ .page-19 { + display: block; } + +.page-20 { + display: none; } + +#radio-page-20:checked ~ .page-20 { + display: block; } + +/* Form styles */ +input[type=checkbox], input[type=radio] { + display: none; } + +.checkbox-right:hover, .checkbox-left:hover, .radio-right:hover, .radio-left:hover { + cursor: pointer; + color: #c9c9c9; + background-color: #171c94; } + +.checkbox-right::after { + content: "[ ]"; } + +.checkbox-left::before { + content: "[ ]"; } + +.radio-right::after { + content: "( )"; } + +.radio-left::before { + content: "( )"; } + +input[type=checkbox]:checked + .checkbox-right::after { + content: "[x]"; } +input[type=checkbox]:checked + .checkbox-left::before { + content: "[x]"; } + +input[type=radio]:checked + .radio-right::after { + content: "(x)"; } +input[type=radio]:checked + .radio-left::before { + content: "(x)"; } + +input[type=text], button { + background-color: inherit; + border: none; + font-family: inherit; + font-size: inherit; + color: inherit; } + input[type=text]:hover, button:hover { + cursor: pointer; + color: #c9c9c9; + background-color: #171c94; } + +button:focus, button:hover, button:active, button::-moz-focus-inner { + border: none; + text-decoration: none; } +button::before { + content: "[ "; } +button::after { + content: " ]"; } + +.textinput { + display: inline-block; } + .textinput:hover { + cursor: pointer; + color: #c9c9c9; + background-color: #171c94; } + .textinput::before { + content: "["; } + .textinput::after { + content: "]"; } + .textinput:hover > input[type=text] { + background-color: #171c94; + color: #c9c9c9; + border-color: #c9c9c9; } + +input[type=text] { + background-color: #c9c9c9; + color: black; + border-color: black; + width: 15ch; } + /* Style helpers, like space-takers */ .space-1em { min-height: 21px; } diff --git a/style.css.map b/style.css.map index bc736a9..ca8965b 100644 --- a/style.css.map +++ b/style.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "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", +"mappings": "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", "sources": ["style.scss"], "names": [], "file": "style.css" diff --git a/style.scss b/style.scss index 71425c8..ec9899e 100644 --- a/style.scss +++ b/style.scss @@ -32,6 +32,14 @@ $box-double-border: 4px; border-color: $default-black; } +@mixin hoverable($hoverFg, $hoverBg) { + &:hover { + cursor: pointer; + color: $hoverFg; + background-color: $hoverBg; + } +} + :root { // Styles applying to everyting font-family: "Iosevka Slab", "Iosevka", "Consolas", "monospace"; @@ -67,9 +75,7 @@ ul { a { color: $default-white; - &:hover { - @include whiteOnBlue; - } + @include hoverable($default-white, $default-blue); } nav ul > li > ul:hover a { @@ -99,13 +105,10 @@ li { } &.button-list > ul { width: calc(100% - 1ch); + text-decoration: underline; &:hover { @include whiteOnBlue; - - & > a { - color: $default-white; - } } & > li { @@ -157,11 +160,8 @@ nav { display: inline-block; padding-left: 1ch; padding-right: 1ch; + @include hoverable($default-white, $default-blue); - &:hover { // Navbar items - @include whiteOnBlue; - cursor: pointer; - } &:focus { @include whiteOnBlue; @@ -250,11 +250,11 @@ nav { box-shadow: 0 0 0 0.25ch $default-white; a { - color: $default-black; - &:hover { - @include whiteOnBlue; - } - } + color: $default-black; + &:hover { + @include whiteOnBlue; + } + } } &.blue { @@ -273,6 +273,16 @@ nav { hr { border-color: $default-white; } + button { + &:hover { + @include blueOnWhite; + } + } + .checkbox-right, .checkbox-left, .radio-right, .radio-left { + &:hover { + @include blueOnWhite; + } + } } } @@ -280,6 +290,112 @@ nav { content: " ▼"; } +.no-select { + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; +} + +@for $i from 1 through 20 { + .page-#{$i} { + display: none; + } + #radio-page-#{$i}:checked ~ .page-#{$i} { + display: block; + } +} + +/* Form styles */ + +input[type=checkbox], input[type=radio] { + display: none; +} + +.checkbox-right, .checkbox-left, .radio-right, .radio-left { + @include hoverable($default-white, $default-blue); +} + +.checkbox-right { + &::after { + content: "[ ]"; + } +} +.checkbox-left { + &::before { + content: "[ ]"; + } +} + +.radio-right { + &::after { + content: "( )"; + } +} +.radio-left { + &::before { + content: "( )"; + } +} + +input[type=checkbox]:checked { + & + .checkbox-right::after { + content: "[x]"; + } + & + .checkbox-left::before { + content: "[x]"; + } +} + +input[type=radio]:checked { + & + .radio-right::after { + content: "(x)"; + } + & + .radio-left::before { + content: "(x)"; + } +} + +input[type=text], button { + background-color: inherit; + border: none; + font-family: inherit; + font-size: inherit; + color: inherit; + + @include hoverable($default-white, $default-blue); +} + +button { + &:focus, &:hover, &:active, &::-moz-focus-inner { + border: none; + text-decoration: none; + } + + &::before { content: "[ "; } + &::after { content: " ]"; } +} + +.textinput { + display: inline-block; + + @include hoverable($default-white, $default-blue); + + &::before { + content: "["; + } + &::after { + content: "]"; + } + &:hover > input[type=text] { + @include whiteOnBlue; + } +} + +input[type=text] { + @include blackOnWhite; + width: 15ch; +} + /* Style helpers, like space-takers */ @for $i from 1 through 5 {