diff --git a/docs/fractals/index.html b/docs/fractals/index.html index b8f9dce..3241923 100644 --- a/docs/fractals/index.html +++ b/docs/fractals/index.html @@ -4,13 +4,24 @@ + Document - My awesome header -

todo: add links

+
+ +
+

fractals go here woo

-

amazing footer

- + +
\ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 6d5de52..612a7b6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,14 +4,25 @@ + CrispyPin.cc - My awesome header -

todo: add links

-

Homepage

+
+ +
+ +

Homepage

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum exercitationem quod laudantium neque. Dolor qui magnam debitis repellendus assumenda tenetur ab aliquam ea sit in harum facere neque ad nemo vel nesciunt distinctio totam, cupiditate, deleniti nam voluptas quia aperiam.

-

amazing footer

- + +
\ No newline at end of file diff --git a/docs/logo.png b/docs/logo.png new file mode 100644 index 0000000..94e37a4 Binary files /dev/null and b/docs/logo.png differ diff --git a/docs/style.css b/docs/style.css new file mode 100644 index 0000000..d70d0d0 --- /dev/null +++ b/docs/style.css @@ -0,0 +1,182 @@ +body { + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + background-color: #181818; + color: #bfb; + display: -ms-grid; + display: grid; + -ms-grid-rows: 50px auto 1fr auto; + grid-template-rows: 50px auto 1fr auto; + -ms-grid-columns: 20px 1fr 20px; + grid-template-columns: 20px 1fr 20px; + margin: 0; + min-height: 100vh; +} + +nav { + grid-column: 1 / -1; +} + +nav ul { + list-style-type: none; + margin: 0; + display: -ms-grid; + display: grid; + padding: 5px 25px; + grid-gap: 5px; + -ms-grid-columns: (minmax(175px, auto))[auto-fill]; + grid-template-columns: repeat(auto-fill, minmax(175px, auto)); +} + +nav li { + padding: 8px; +} + +nav a { + font-size: 24px; + color: #000; + text-decoration: none; + display: block; + text-align: center; +} + +header { + grid-column: 1 / -1; + background-color: #181818; + padding: 0; +} + +header h1 { + font-size: 40px; + margin: 0; +} + +footer { + grid-column: 1 / -1; + margin: 25px; +} + +main { + padding: 0 20px; + grid-column: 2 / -2; + background-color: #282828; +} + +.visual { + margin: 20px; + width: -webkit-min-content; + width: -moz-min-content; + width: min-content; + background-color: #000; +} + +.controlbar { + background-color: #181818; + padding: 2px 5px; + height: -webkit-max-content; + height: -moz-max-content; + height: max-content; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + -ms-flex-line-pack: stretch; + align-content: stretch; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.controlbar button, .controlbar input { + padding: 4px 6px; + height: 25px; + border: 1px solid #000; + border: 0; + cursor: pointer; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + margin: 2px; +} + +.controlbar .slider { + -webkit-appearance: none; + -moz-appearance: none; + outline: none; + border-radius: 0; + height: 25px; + padding: 0; + margin: 2px; + cursor: pointer; +} + +.controlbar .slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + border-radius: 1px; + width: 25px; + height: 25px; + background-color: #46c; + margin: 0; + border-radius: 0; + border: 1px solid #000; +} + +.controlbar .slider::-moz-range-thumb { + /*TODO make this look the same as on chrome*/ + -moz-appearance: none; + width: 25px; + height: 100%; + background-color: #46c; + margin: 0; + padding: 0; + border-radius: 0; + border: 1px solid #000; +} + +.controlbar label { + background-color: #181818; + color: #fb8; + margin: 2px; + font-family: 'Consolas', 'Courier New', Courier, monospace; +} + +.controlbar .play-button { + -ms-flex-preferred-size: 35%; + flex-basis: 35%; +} + +.clickable, nav li, .controlbar button, .controlbar input, .scroll-reset { + background-color: #4a4; +} + +.clickable:hover, nav li:hover, .controlbar button:hover, .controlbar input:hover, .scroll-reset:hover { + background-color: #4af; +} + +.clickable:active, nav li:active, .controlbar button:active, .controlbar input:active, .scroll-reset:active { + background-color: #46c; +} + +.clickable:disabled, nav li:disabled, .controlbar button:disabled, .controlbar input:disabled, .scroll-reset:disabled { + background-color: #8b8; + text-decoration: line-through; + color: #000; + cursor: default; +} + +.scroll-reset { + position: fixed; + right: 20px; + bottom: 20px; + width: 40px; + height: 40px; + border-radius: 25%; + background-image: url("uparrow.png"); + cursor: pointer; +} + +.img-right { + float: right; +} +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/docs/style.css.map b/docs/style.css.map new file mode 100644 index 0000000..1f4cd3d --- /dev/null +++ b/docs/style.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "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", + "sources": [ + "style.scss" + ], + "names": [], + "file": "style.css" +} \ No newline at end of file diff --git a/docs/style.scss b/docs/style.scss new file mode 100644 index 0000000..c8d86ba --- /dev/null +++ b/docs/style.scss @@ -0,0 +1,172 @@ +$main-item: #4a4; + +$main-item-hover: #4af; +$main-item-active: #46c; +$main-item-disabled: #8b8; +$main-bg: #181818; +$main-page-bg: #282828; + +$main-color: #bfb; + + +body { + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + background-color: $main-bg; + color: $main-color; + + display: grid; + grid-template-rows: 50px auto 1fr auto; + + grid-template-columns: 20px 1fr 20px; + + margin: 0; + min-height: 100vh; + +} + +nav { + grid-column: 1 / -1; + ul { + list-style-type: none; + margin: 0; + display: grid; + padding: 5px 25px; + grid-gap: 5px; + grid-template-columns: repeat(auto-fill, minmax(175px, auto)); + } + li { + @extend .clickable; + padding: 8px; + } + a { + font-size: 24px; + color: #000; + text-decoration: none; + display: block; + text-align: center; + } +} + +header { + grid-column: 1 / -1; + background-color: $main-bg; + padding: 0; + h1 { + font-size: 40px; + margin: 0; + } +} + +footer { + grid-column: 1 / -1; + margin: 25px; +} + +main { + padding: 0 20px; + grid-column: 2 / -2; + background-color: $main-page-bg; +} + +.visual { + margin: 20px; + width: min-content; + background-color: #000; +} + +.controlbar { + background-color: $main-bg; + padding: 2px 5px; + height: max-content; + display: flex; + + justify-content: space-evenly; + align-content: stretch; + flex-wrap: wrap; + + button, input { + @extend .clickable; + padding: 4px 6px; + height: 25px; + border: 1px solid #000; + border: 0; + cursor: pointer; + + flex-grow: 1; + margin: 2px; + } + .slider { + -webkit-appearance: none; + -moz-appearance: none; + outline: none; + border-radius: 0; + height: 25px; + padding: 0; + margin: 2px; + cursor: pointer; + + &::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + border-radius: 1px; + width: 25px; + height: 25px; + background-color: $main-item-active; + margin: 0; + border-radius: 0; + border: 1px solid #000; + } + &::-moz-range-thumb { + /*TODO make this look the same as on chrome*/ + -moz-appearance: none; + width: 25px; + height: 100%; + background-color: $main-item-active; + margin: 0; + padding: 0; + border-radius: 0; + border: 1px solid #000; + } + } + label { + background-color: $main-bg; + color: #fb8; + margin: 2px; + font-family: 'Consolas', 'Courier New', Courier, monospace; + } + .play-button { + flex-basis: 35%; + } +} + +.clickable { + background-color: $main-item; + &:hover { + background-color: $main-item-hover; + } + &:active { + background-color: $main-item-active; + } + &:disabled { + background-color: $main-item-disabled; + text-decoration: line-through; + color: #000; + cursor: default; + } +} + +.scroll-reset { + @extend .clickable; + position: fixed; + right: 20px; + bottom: 20px; + width: 40px; + height: 40px; + border-radius: 25%; + background-image: url("uparrow.png"); + cursor: pointer; +} + +.img-right { + float: right; +} \ No newline at end of file diff --git a/docs/uparrow.png b/docs/uparrow.png new file mode 100644 index 0000000..52a3889 Binary files /dev/null and b/docs/uparrow.png differ diff --git a/pages/fractals/index.html b/pages/fractals/index.html index ddb9599..4efee5a 100644 --- a/pages/fractals/index.html +++ b/pages/fractals/index.html @@ -4,6 +4,7 @@ + Document diff --git a/pages/index.html b/pages/index.html index 7897d77..f84c03a 100644 --- a/pages/index.html +++ b/pages/index.html @@ -4,11 +4,12 @@ + CrispyPin.cc &include(header.html) -

Homepage

+

Homepage

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum exercitationem quod laudantium neque. Dolor qui magnam debitis repellendus assumenda tenetur ab aliquam ea sit in harum facere neque ad nemo vel nesciunt distinctio totam, cupiditate, deleniti nam voluptas quia aperiam.

&include(footer.html) diff --git a/templates/footer.html b/templates/footer.html index 8d9d67f..2a77fa1 100644 --- a/templates/footer.html +++ b/templates/footer.html @@ -1 +1,2 @@ -

amazing footer

+ +
\ No newline at end of file diff --git a/templates/header.html b/templates/header.html index 970b848..8e9289d 100644 --- a/templates/header.html +++ b/templates/header.html @@ -1,2 +1,4 @@ -My awesome header +
+ +
&include(navbar.html) \ No newline at end of file diff --git a/templates/navbar.html b/templates/navbar.html index 4cbf8c1..095862b 100644 --- a/templates/navbar.html +++ b/templates/navbar.html @@ -1 +1,9 @@ -

todo: add links

\ No newline at end of file + \ No newline at end of file