Fixed some stuff

This commit is contained in:
Teascade 2017-10-03 23:22:51 +00:00
parent 5ad79f8776
commit 80a5a6ec06
7 changed files with 513 additions and 74 deletions

121
custom.css Normal file
View File

@ -0,0 +1,121 @@
.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; }
/*# sourceMappingURL=custom.css.map */

7
custom.css.map Normal file
View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AACC,OAAY;EACV,OAAO,EAAE,IAAI;;AAEf,+BAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,OAAY;EACV,OAAO,EAAE,IAAI;;AAEf,+BAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,OAAY;EACV,OAAO,EAAE,IAAI;;AAEf,+BAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,OAAY;EACV,OAAO,EAAE,IAAI;;AAEf,+BAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,OAAY;EACV,OAAO,EAAE,IAAI;;AAEf,+BAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,OAAY;EACV,OAAO,EAAE,IAAI;;AAEf,+BAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,OAAY;EACV,OAAO,EAAE,IAAI;;AAEf,+BAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,OAAY;EACV,OAAO,EAAE,IAAI;;AAEf,+BAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,OAAY;EACV,OAAO,EAAE,IAAI;;AAEf,+BAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,QAAY;EACV,OAAO,EAAE,IAAI;;AAEf,iCAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,QAAY;EACV,OAAO,EAAE,IAAI;;AAEf,iCAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,QAAY;EACV,OAAO,EAAE,IAAI;;AAEf,iCAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,QAAY;EACV,OAAO,EAAE,IAAI;;AAEf,iCAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,QAAY;EACV,OAAO,EAAE,IAAI;;AAEf,iCAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,QAAY;EACV,OAAO,EAAE,IAAI;;AAEf,iCAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,QAAY;EACV,OAAO,EAAE,IAAI;;AAEf,iCAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,QAAY;EACV,OAAO,EAAE,IAAI;;AAEf,iCAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,QAAY;EACV,OAAO,EAAE,IAAI;;AAEf,iCAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,QAAY;EACV,OAAO,EAAE,IAAI;;AAEf,iCAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,QAAY;EACV,OAAO,EAAE,IAAI;;AAEf,iCAAwC;EACtC,OAAO,EAAE,KAAK",
"sources": ["custom.scss"],
"names": [],
"file": "custom.css"
}

8
custom.scss Normal file
View File

@ -0,0 +1,8 @@
@for $i from 1 through 2 {
.page-#{$i} {
display: none;
}
#radio-page-#{$i}:checked ~ .page-#{$i} {
display: block;
}
}

View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>CSS example</title> <title>CSS example</title>
<link type="text/css" rel="stylesheet" href="style.css" /> <link type="text/css" rel="stylesheet" href="style.css" />
<link type="text/css" rel="stylesheet" href="custom.css" />
</head> </head>
<body> <body>
<input type="radio" id="radio-page-1" name="pages"> <input type="radio" id="radio-page-1" name="pages">

428
style.css
View File

@ -1,66 +1,368 @@
/* @charset "UTF-8";
Error: Undefined variable: "$i". :root {
on line 302 of style.scss font-family: "Iosevka Slab", "Iosevka", "Consolas", "monospace";
background-color: black;
color: #c9c9c9;
border-color: #c9c9c9;
font-weight: 400;
font-size: 16px;
line-height: 21px; }
297: } /* General styles for elements */
298: * {
299: /* How to add pages: margin: 0;
300: padding: 0; }
301: @for $i from 1 through 20 {
302: .page-#{$i} {
303: display: none;
304: }
305: #radio-page-#{$i}:checked ~ .page-#{$i} {
306: display: block;
307: }
Backtrace: p {
style.scss:302 width: auto; }
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/script/tree/variable.rb:49:in `_perform'
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/script/tree/node.rb:50:in `perform' b {
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/script/tree/interpolation.rb:170:in `_perform' font-weight: 1000; }
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/script/tree/node.rb:50:in `perform'
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/perform.rb:555:in `block in run_interp_no_strip' li {
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/perform.rb:553:in `map' list-style: none; }
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/perform.rb:553:in `run_interp_no_strip'
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/perform.rb:199:in `visit_comment' ul {
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/base.rb:36:in `visit' padding-left: 1ch; }
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/perform.rb:162:in `block in visit'
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/stack.rb:79:in `block in with_base' a {
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/stack.rb:135:in `with_frame' color: #c9c9c9; }
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/stack.rb:79:in `with_base' a:hover {
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/perform.rb:162:in `visit' cursor: pointer;
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/base.rb:52:in `block in visit_children' color: #c9c9c9;
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/base.rb:52:in `map' background-color: #171c94; }
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/base.rb:52:in `visit_children'
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/perform.rb:171:in `block in visit_children' nav ul > li > ul:hover a {
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/perform.rb:183:in `with_environment' color: #c9c9c9; }
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/perform.rb:170:in `visit_children'
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/base.rb:36:in `block in visit' .hr {
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/perform.rb:190:in `visit_root' height: 21px; }
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/perform.rb:161:in `visit' hr {
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/visitors/perform.rb:10:in `visit' height: 10.5px;
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/root_node.rb:36:in `css_tree' border: 0;
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/tree/root_node.rb:29:in `render_with_sourcemap' border-bottom: 1px solid #c9c9c9; }
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/engine.rb:389:in `_render_with_sourcemap'
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/engine.rb:307:in `render_with_sourcemap' nav li hr, li.button-list > ul a hr, .white hr {
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:462:in `update_stylesheet' border-color: black; }
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:209:in `each' nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr {
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:209:in `update_stylesheets' border-color: #c9c9c9; }
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:443:in `on_file_changed'
/usr/lib/ruby/gems/2.4.0/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:320:in `block in watch' /* Lists */
/usr/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/event/config.rb:23:in `call' li:not(.button-list) > ul::before {
/usr/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/event/processor.rb:115:in `_process_changes' content: "- "; }
/usr/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/event/processor.rb:19:in `block in loop_for' li.button-list > ul {
/usr/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/event/processor.rb:15:in `loop' width: calc(100% - 1ch);
/usr/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/event/processor.rb:15:in `loop_for' text-decoration: underline; }
/usr/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/event/loop.rb:84:in `_wait_for_changes' li.button-list > ul:hover {
/usr/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/event/loop.rb:42:in `block in setup' background-color: #171c94;
/usr/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/internals/thread_pool.rb:6:in `block in add' color: #c9c9c9;
border-color: #c9c9c9; }
li.button-list > ul > li {
width: 100%; }
li.button-list > ul a {
display: block;
width: 100%; }
/* Navbars */
@keyframes hide {
0% {
opacity: 0;
left: inherit; }
1% {
opacity: 0; }
100% {
opacity: 0;
left: -9999px; } }
nav a {
color: black;
display: block;
width: 100%;
text-decoration: none; }
nav ul::before {
content: "" !important; }
nav > li {
background-color: #c9c9c9;
color: black;
border-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 {
cursor: pointer;
color: #c9c9c9;
background-color: #171c94; }
nav > li > ul:focus {
background-color: #171c94;
color: #c9c9c9;
border-color: #c9c9c9; }
nav > li > ul:focus li {
display: block;
opacity: 1;
left: inherit;
animation-name: hide;
animation-name: none; }
nav > li > ul > li {
background-color: #c9c9c9;
color: black;
border-color: black;
position: absolute;
border: 2px solid;
box-shadow: 0 0 0 0.25ch #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;
border-color: black;
padding-left: 1ch;
padding-right: 1ch;
min-height: 21px; }
nav > li > ul > li > ul:hover {
background-color: #171c94;
color: #c9c9c9;
border-color: #c9c9c9; }
nav > li .submenu {
display: inline-block;
animation-name: show;
animation-duration: 0.5s; }
/* Miscallaneous Classes */
.box {
border: 2px solid #c9c9c9;
margin: 0.5ch;
padding: calc(0.5ch - 2px);
width: auto;
display: inline-block;
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: 4px;
margin: calc(0.5ch);
padding: calc(0.5ch - (4px));
margin-top: 10.5px;
margin-bottom: 10.5px;
padding-top: 6.5px;
padding-bottom: 6.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.white a {
color: black; }
.box.white a:hover {
background-color: #171c94;
color: #c9c9c9;
border-color: #c9c9c9; }
.box.blue {
background-color: #171c94;
color: #c9c9c9;
border-color: #c9c9c9;
box-shadow: 0 0 0 0.25ch #171c94; }
.box.blue li.button-list > ul:hover {
background-color: #c9c9c9;
color: black;
border-color: black; }
.box.blue li.button-list > ul:hover > a {
color: black; }
.box.blue a:hover {
background-color: #c9c9c9;
color: #171c94;
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; }
/* How to add pages:
*
* (at)for (dollar)i from 1 through 20 {
* .page-dollar i {
* display: none;
* }
* #radio-page-dollar i:checked ~ .page-dollar i {
* display: block;
* }
* }
*/ */
body:before { /* Form styles */
white-space: pre; input[type=checkbox], input[type=radio] {
font-family: monospace; display: none; }
content: "Error: Undefined variable: \"$i\".\A on line 302 of style.scss\A \A 297: }\A 298: \A 299: /* How to add pages:\A 300: \A 301: @for $i from 1 through 20 {\A 302: .page-#{$i} {\A 303: display: none;\A 304: }\A 305: #radio-page-#{$i}:checked ~ .page-#{$i} {\A 306: display: block;\A 307: }"; }
.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; }
.space-2em {
min-height: 42px; }
.space-3em {
min-height: 63px; }
.space-4em {
min-height: 84px; }
.space-5em {
min-height: 105px; }
.width-5 {
width: 5ch; }
.width-10 {
width: 10ch; }
.width-15 {
width: 15ch; }
.width-20 {
width: 20ch; }
.width-25 {
width: 25ch; }
.width-50 {
width: 48ch; }
.width-100 {
width: 98ch; }
.width-150 {
width: 148ch; }
.width-200 {
width: 198ch; }
.width-250 {
width: 248ch; }
.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 */

File diff suppressed because one or more lines are too long

View File

@ -297,15 +297,15 @@ nav {
} }
/* How to add pages: /* How to add pages:
*
@for $i from 1 through 20 { * (at)for (dollar)i from 1 through 20 {
.page-#{$i} { * .page-#{(dollar)i} {
display: none; * display: none;
} * }
#radio-page-#{$i}:checked ~ .page-#{$i} { * #radio-page-#{(dollar)i}:checked ~ .page-#{(dollar)i} {
display: block; * display: block;
} * }
} * }
*/ */
/* Form styles */ /* Form styles */