current website state

.gitignore

@@ -1,5 +1,7 @@
 dist/
 
+deploy*.sh
+
 *~
 *#*
 .#*

README.md

@@ -1,7 +1,5 @@
-hyde-template
+website
-=============
+=======
-Template for hyde projects
-
 Dependencies
 ------------
 Chicken Scheme: http://www.call-cc.org/  

layouts/clean.sxml

@@ -0,0 +1,8 @@
+()
+`((xhtml-1.0-strict)
+  (html (@ (xmlns "http://www.w3.org/1999/xhtml") (xml:lang "en") (lang "en"))
+        (head
+         (meta (@ (http-equiv "Content-Type") (content "text/html; charset=ascii")))
+         (link (@ (rel "stylesheet") (href "/style.css")))
+         (title ,($ 'title)))
+        (body (inject ,contents))))

layouts/default.sxml

@@ -1,28 +1,35 @@
-;; Copyright (C) <year> <author> <email>
-;;
-;; This file is part of <program>.
-;;
-;; <program> is free software: you can redistribute it and/or modify
-;; it under the terms of the GNU General Public License as published by
-;; the Free Software Foundation, either version 3 of the License, or
-;; (at your option) any later version.
-;;
-;; <program> is distributed in the hope that it will be useful,
-;; but WITHOUT ANY WARRANTY; without even the implied warranty of
-;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-;; GNU General Public License for more details.
-;;   
-;; You should have received a copy of the GNU General Public License
-;; along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
 ()
 `((xhtml-1.0-strict)
-  (html (@ (xmlns "http://www.w3.org/1999/xhtml")
+  (html (@ (xmlns "http://www.w3.org/1999/xhtml") (xml:lang "en") (lang "en"))
-           (xml:lang "en") (lang "en"))
+        (head
-   (head
+         (meta (@ (http-equiv "Content-Type") (content "text/html; charset=ascii")))
-    (meta (@ (http-equiv "Content-Type")
+         (link (@ (rel "stylesheet") (href "/style.css")))
-             (content "text/html; charset=ascii")))
+         (title ,($ 'title)))
-    (title ,($ 'title)))
+        (body
-   (body
+         (div (@ (class "wrapper"))
-    (h1 ,($ 'title))
+              (div (@ (class "header"))
-    (inject ,contents))))
+                   (div (@ (class "container"))
+                        (h4 (@ (class "header__logo")) vilor)
+                        (ul (@ (class "header__nav"))
+                            (li (a (@ (href "/index.html")) "Home"))
+                            (li (a (@ (href "/webapps/index.html")) "Web Apps"))
+                            (li (a (@ (href "http://31.184.254.176:8078/")) "Git"))
+                            (li (a (@ (href "/contacts.html")) "Contacts")))))
+
+              (div (@ (class "content container"))
+                   (h1 (@ (class "content__title")) ,($ 'page-name))
+                   (div (@ (class "content__description")) ,($ 'page-desc))
+                   (inject ,contents))
+
+              (div (@ (class "footer"))
+                   (div (@ (class "footer__authors"))
+                        (div "Content: " (a (@ (href "/contacts.html")) "Ivan Polyakov"))
+                        (div "Design: " (a (@ (href "https://t.me/olnaolna")) "Olga Revenkova")))
+                   (div (@ (class "links"))
+                        (a (@ (href "http://validator.w3.org/check?uri=referer"))
+                           (img (@ (src "http://www.w3.org/Icons/valid-xhtml10") (alt "Valid XHTML 1.0 Strict") (height 31) (width 88))))
+                        ;;(a (@ (href "https://notabug.org/vilor/website/"))
+                        ;;   "Source code")
+                        (a (@ (href "http://www.anybrowser.org/campaign/"))
+                           (img (@ (src "/img/anybrowser3.jpg")
+                                   (alt "Viewable With Any Browser"))))))))))

src/contacts.sxml

@@ -0,0 +1,8 @@
+((title . "vilor/contacts")
+ (page-name . "contacts"))
+
+'(ul (@ (class "contacts"))
+     (li "E-mail: " (a (@ (href "mailto:https://v1lor@protonmail.com"))
+                       "v1lor at protonmail dot com"))
+     (li "Matrix: " (a (@ (href "https://matrix.to/#/@vilor:matrix.org"))
+                       "vilor at matrix dot org")))

src/index.sxml

@@ -1,20 +1,6 @@
-;; Copyright (C) <year> <author> <email>
+((title . "vilor")
-;;
+ (page-name . "home"))
-;; This file is part of <program>.
-;;
-;; <program> is free software: you can redistribute it and/or modify
-;; it under the terms of the GNU General Public License as published by
-;; the Free Software Foundation, either version 3 of the License, or
-;; (at your option) any later version.
-;;
-;; <program> is distributed in the hope that it will be useful,
-;; but WITHOUT ANY WARRANTY; without even the implied warranty of
-;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-;; GNU General Public License for more details.
-;;   
-;; You should have received a copy of the GNU General Public License
-;; along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-((title . "title"))
+'(div (@ (class "under-construction"))
-
+      (img (@ (src "img/under-construction.png") (alt "under construction")))
-'(div "content")
+      (h2 "Under construction."))

src/style.scss

@@ -0,0 +1,210 @@
+()
+'((|html, body|
+   (height 100%)
+   (margin 0))
+
+  (|body|
+   (font-family "Arial, sans-serif")
+   (color white)
+   (background-color "#3b4252"))
+
+  (|.wrapper|
+   (position relative)
+   (min-height 100%))
+
+  (|.container|
+   (max-width 937px)
+   (padding 0 16px)
+   (margin 0 auto))
+
+  (|a|
+   (color white))
+
+  (|a:hover|
+   (text-decoration none))
+
+  (|a:visited|
+   (color "#bbb"))
+
+  ;; /general
+  ;; header
+
+  (|.header|
+   (background-color "#262d3e"))
+
+  (|.header .container|
+   (display flex)
+   (justify-content space-between))
+
+  (|.header__logo|
+   (display inline)
+   (font-size 24px)
+   (padding 8px 0)
+   (margin 0))
+
+  (|.header__nav|
+   (display inline)
+   (list-style none)
+   (font-size 16px)
+   (padding 14px 0)
+   (margin 0))
+
+  (|.header__nav li|
+   (display inline))
+
+  ;; /header
+  ;; content
+
+  (|.content|
+   (padding 32px 16px 138px 16px))
+
+  (|.content__title|
+   (font-size 36px)
+   (margin-top 0)
+   (margin-bottom 12px))
+
+  (|.content__description|
+   (font-size 20px)
+   (margin-bottom 24px))
+
+  (|.content__description .note|
+   (font-size 16px)
+   (margin-top 16px))
+
+  (|.content__description p|
+   (margin 0))
+
+  ;; /content
+  ;; footer
+
+  (|.footer|
+   (position absolute)
+   (bottom 0)
+   (width 100%)
+   (text-align center)
+   (background-color "#262d3e")
+   (padding 14px 0))
+
+  (|.footer__authors|
+   (margin-bottom 5px))
+
+  (|.footer .links a|
+   (margin "0 5px"))
+
+  ;; /footer
+
+  (|.under-construction|
+   (max-width 300px)
+   (text-align center)
+   (margin "0 auto"))
+
+  (|.ideas table|
+   (margin "0 auto"))
+
+  (|table, th, td|
+   (border "1px solid black"))
+
+  (|th, td|
+   (padding "5px"))
+
+  (|.scrollbar-app form|
+   (margin-bottom 10px))
+
+  (|.scrollbar-app form fieldset|
+   (border none)
+   (padding 0)
+   (margin 0))
+
+  (|.scrollbar-app form .scrollbar-app__panel|
+   (margin-bottom 16px))
+
+  (|.scrollbar-app form h3|
+   (font-size 24px)
+   (margin 0))
+
+  (|.scrollbar-app form h4|
+   (font-size 20px)
+   (margin 12px 0 0 0))
+
+  (|.scrollbar-app__panel, .scrollbar-app form .scrollbar-app__panel|
+   (background-color "#585F70")
+   (padding 12px))
+
+  (|.scrollbar-app__input|
+   (display inline-block)
+   (display inline-flex)
+   (align-items center)
+   (padding 8px))
+
+  (|.scrollbar-app textarea|
+   ("--sb-w" 10px)
+   ("--thumb-clr" "#9b3e46")
+   ("--thumb-bstl" "solid")
+   ("--thumb-bw" 1px)
+   ("--thumb-bclr" white)
+   ("--thumb-brad" 8px)
+   ("--track-clr" "#3b4252")
+   ("--track-brad" 8px)
+   ("--track-mt" 0px)
+   ("--track-mb" 0px)
+   (height 300px)
+   (font-size 32px)
+   (overflow-y scroll)
+   (scrollbar-width "var(--sb-w)")
+   (scrollbar-color "var(--thumb-clr) var(--track-clr)")
+   (margin-top 60px))
+
+  (|.scrollbar-app textarea::-webkit-scrollbar|
+   (width "var(--sb-w)")
+   (margin-bottom 5px))
+
+  (|.scrollbar-app textarea::-webkit-scrollbar-thumb|
+   (background-color "var(--thumb-clr)")
+   (border-style "var(--thumb-bstl)")
+   (border-width "var(--thumb-bw)")
+   (border-color "var(--thumb-bclr)")
+   (border-radius "var(--thumb-brad)"))
+
+  (|.scrollbar-app textarea::-webkit-scrollbar-track|
+   (background-color "var(--track-clr)")
+   (border-radius "var(--track-brad)")
+   (margin-top "var(--track-mt)")
+   (margin-bottom "var(--track-mb)"))
+
+  (|.scrollbar-app__buttons|
+   (margin-top 24px))
+
+  (|.scrollbar-app__buttons button|
+   (min-width 149px)
+   (font-size 18px)
+   (background-color "#ced9f3")
+   (padding 14px 25px)
+   (border none)
+   (border-radius 4px)
+   (outline none)
+   (margin-right 16px))
+
+  (|.scrollbar-app__buttons button:hover|
+   (background-color "#a2b8ed"))
+
+  (|.rad-app .rtable|
+   (width 100%))
+
+  (|.rad-app table td > div|
+   (resize horizontal)
+   (overflow auto))
+
+  (|.rad-app .rad-app__tree ul|
+   (list-style none)
+   (padding-left 10px))
+
+  (|.rad-app .rad-app__tree ul li|
+   (padding-left 5px)
+   (border-left "1px solid #9b3e46"))
+
+  (|.rad-app .rad-app__tree ul li:hover|
+   (background-color "#9b3e46"))
+
+  (|.rad-app__viewport|
+   (color black)
+   (background-color white)))

src/webapps/index.sxml

@@ -0,0 +1,7 @@
+((title . "vilor/webapps")
+  (page-name . "webapps"))
+
+'(div (@ (class "webapps"))
+      (ul
+       (li
+        (a (@ (href "scrollbar.html")) "Scrollbar styling"))))

src/webapps/scrollbar.js

@@ -0,0 +1,129 @@
+// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
+(function() {
+    var textArea = document.getElementById('sbTextArea');
+    var updBtn = document.getElementById('sbUpdBtn');
+    var printBtn = document.getElementById('sbPrintBtn');
+    var clearBtn = document.getElementById('sbClearBtn');
+    var msg = "Failed to get ELEMENT! Please report this bug to me."
+
+    if (!textArea) {
+        msg.replace("ELEMENT", "textarea");
+    } else if (!updBtn) {
+        msg.replace("ELEMENT", "update button");
+    } else {
+        msg = null;
+    }
+
+    if (msg) {
+        alert(msg);
+        console.error(msg);
+        return;
+    }
+    delete msg;
+
+    var settingsForm = {
+        bar: {
+            width: document.getElementById('sbw'),
+            getStyle() {
+                return "--sb-w:" + this.width.value + ";";
+            },
+        },
+        thumb: {
+            color: document.getElementById('thumbclr'),
+            colortxt: document.getElementById('thumbclrtxt'),
+            bstl: document.getElementById('thumbbstl'),
+            bw: document.getElementById('thumbbw'),
+            bclr: document.getElementById('thumbbclr'),
+            bclrtxt: document.getElementById('thumbbclrtxt'),
+            brad: document.getElementById('thumbbrad'),
+            init() {
+                this.colortxt.oninput = () => {
+                    this.color.value = this.colortxt.value;
+                }
+                this.color.oninput = () => {
+                    this.colortxt.value = this.color.value;
+                }
+
+                this.bclr.oninput = () => {
+                    this.bclrtxt.value = this.bclr.value;
+                }
+                this.bclrtxt.oninput = () => {
+                    this.bclr.value = this.bclrtxt.value;
+                }
+            },
+            getStyle() {
+                return "--thumb-clr:" + this.color.value + ";"
+                    + "--thumb-bstl:" + this.bstl.value + ";"
+                    + "--thumb-bw:" + this.bw.value + ";"
+                    + "--thumb-bclr:" + this.bclr.value + ";"
+                    + "--thumb-brad:" + this.brad.value + ";";
+            },
+        },
+        track: {
+            color: document.getElementById('trackclr'),
+            colortxt: document.getElementById('trackclrtxt'),
+            colorout: document.getElementById('trackclrout'),
+            brad: document.getElementById('trackbrad'),
+            mt: document.getElementById('trackmt'),
+            mb: document.getElementById('trackmb'),
+            init() {
+                this.colortxt.oninput = () => {
+                    this.color.value = this.colortxt.value;
+                }
+                this.color.oninput = () => {
+                    this.colortxt.value = this.color.value;
+                }
+            },
+            getStyle() {
+                return "--track-clr: " + this.color.value + ";"
+                    + "--track-brad:" + this.brad.value + ";"
+                    + "--track-mt:" + this.mt.value + ";"
+                    + "--track-mb:" + this.mb.value + ";";
+            },
+        },
+        output: document.getElementById('sbScssOut'),
+        init() {
+            this.thumb.init();
+            this.track.init();
+        },
+        upd(el) {
+            el.style = this.bar.getStyle() + this.thumb.getStyle()
+                + this.track.getStyle();
+        },
+        print() {
+            this.output.textContent = ".selector {\n" +
+                "  scrollbar-color: " + this.thumb.color.value +
+                    " " + this.track.color.value + ";\n" +
+                "\n  &::-webkit-scrollbar {\n" +
+                "    width: " + this.bar.width.value + ";" +
+                "\n  }\n" +
+                "\n  &::-webkit-scrollbar-track {\n" +
+                "    background-color: " + this.track.color.value + ";\n" +
+                "    border-radius: " + this.track.brad.value + ";\n" +
+                "    margin-top: " + this.track.mt.value + ";\n" +
+                "    margin-bottom: " + this.track.mb.value + ";" +
+                "\n  }\n" +
+                "\n  &::-webkit-scrollbar-thumb {\n" +
+                "    background-color: " + this.thumb.color.value + ";\n" +
+                "    border: " + this.thumb.bw.value + " " + this.thumb.bstl.value + " " + this.thumb.bclr.value + ";\n" +
+                "    border-radius: " + this.thumb.brad.value + ";" +
+                "\n  }" +
+                "\n}";
+            this.output.style = "display:block;"
+        },
+    };
+
+    settingsForm.init();
+
+    updBtn.onclick = function() {
+        settingsForm.upd(textArea);
+    }
+
+    printBtn.onclick = settingsForm.print.bind(settingsForm);
+
+    clearBtn.onclick = function() {
+        settingsForm.output.textContent = "";
+        settingsForm.output.style = "display:none;";
+    }
+})();
+// @license-end

src/webapps/scrollbar.sxml

@@ -0,0 +1,143 @@
+((title . "vilor/webapps/scrollbar")
+ (page-name . "Scrollbar styling")
+ (page-desc . ("Demonstration of possible customization of the scrollbar."
+               (p (@ (class "note")) (b "Note") ": The result will look different in different browsers, try checking the result in browsers based on different engines."))))
+
+'(div (@ (class "scrollbar-app"))
+      (noscript "Sorry, but this crap doesn't work without JavaScript.")
+      (form
+       (fieldset (@ (class "scrollbar-app__panel"))
+        (h3 "Bar:")
+        (div (@ (class "scrollbar-app__input"))
+        (label (@ (for "sbw")) "Width: ")
+        (input (@
+                (type "text")
+                (id "sbw")
+                (name "sbw")
+                (value "10px")
+                (pattern "\\d+px")
+                (title "Size in pixels with format: \"<NUMBER>px\"")))))
+
+       (fieldset (@ (class "scrollbar-app__panel"))
+        (h3 "Thumbnail:")
+        (div (@ (class "scrollbar-app__input"))
+         (label (@ (for "thumbclr")) "Color: ")
+         (input (@
+                 (type "color")
+                 (id "thumbclr")
+                 (name "thumbclr")
+                 (value "\#9b3e46")))
+         (input (@
+                 (type "text")
+                 (id "thumbclrtxt")
+                 (name "thumbclrtxt")
+                 (value "\#9b3e46")
+                 (pattern "\#[0-9A-Fa-f]{6}")
+                 (title "Hexadecimal RGB color with \"\#\" at the beginning"))))
+
+        (fieldset
+         (h4 "Border:")
+         (div (@ (class "scrollbar-app__input"))
+         (label (@ (for "thumbbstl")) "Style: ")
+         (select (@ (id "thumbbstl") (name "thumbbstl"))
+                 (option (@ (value "none")) "none")
+                 (option (@ (value "hidden")) "hidden")
+                 (option (@ (value "solid") (selected "selected")) "solid")
+                 (option (@ (value "dotted")) "dotted")
+                 (option (@ (value "dashed")) "dashed")
+                 (option (@ (value "double")) "double")
+                 (option (@ (value "groove")) "groove")
+                 (option (@ (value "ridge")) "ridge")
+                 (option (@ (value "inset")) "inset")
+                 (option (@ (value "outset")) "outset")))
+
+         (div (@ (class "scrollbar-app__input"))
+         (label (@ (for "thumbbrad")) "Radius: ")
+         (input (@
+                 (type "text")
+                 (id "thumbbrad")
+                 (name "thumbbrad")
+                 (value 8px)
+                 (pattern "\\d+(px|%)")
+                 (title "Radius in pixels or percents with format: \"<NUMBER>px\" or \"<NUMBER>%\""))))
+
+         (div (@ (class "scrollbar-app__input"))
+         (label (@ (for "thumbbw")) "Width: ")
+         (input (@
+                 (type "text")
+                 (id "thumbbw")
+                 (name "thumbbw")
+                 (value 1px)
+                 (pattern "\\d+px")
+                 (title "Size in pixels with format: \"<NUMBER>px\""))))
+
+         (div (@ (class "scrollbar-app__input"))
+          (label (@ (for "thumbbclr")) "Color: ")
+          (input (@
+                  (type "color")
+                  (id "thumbbclr")
+                  (name "thumbbclr")
+                  (value "\#ffffff")))
+          (input (@
+                  (type "text")
+                  (id "thumbbclrtxt")
+                  (name "thumbbclrtxt")
+                  (value "\#ffffff")
+                  (pattern "\#[0-9A-Fa-f]{6}")
+                  (title "Hexadecimal RGB color with \"\#\" at the beginning"))))))
+
+       (fieldset (@ (class "scrollbar-app__panel"))
+        (h3 "Track:")
+        (div (@ (class "scrollbar-app__input"))
+         (label (@ (for "trackclr")) "Color: ")
+         (input (@
+                 (type "color")
+                 (id "trackclr")
+                 (name "trackclr")
+                 (value "\#3b4252")))
+         (input (@
+                 (type "text")
+                 (id "trackclrtxt")
+                 (name "trackclrtxt")
+                 (value "\#3b4252")
+                 (pattern "\#[0-9A-Fa-f]{6}")
+                 (title "Hexadecimal RGB color with \"\#\" at the beginning"))))
+
+        (div (@ (class "scrollbar-app__input"))
+        (label (@ (for "trackbrad")) "Border radius: ")
+        (input (@
+                (type "text")
+                (id "trackbrad")
+                (name "trackbrad")
+                (value 8px)
+                (pattern "\\d+(px|%)")
+                (title "Radius in pixels or percents with format: \"<NUMBER>px\" or \"<NUMBER>%\""))))
+
+        (div (@ (class "scrollbar-app__input"))
+         (label (@ (for "trackmt")) "Margin top: ")
+         (input (@
+                 (type "text")
+                 (id "trackmt")
+                 (name "trackmt")
+                 (value "0px")
+                 (pattern "\\d+px")
+                 (title "Size in pixels with format: \"<NUMBER>px\""))))
+
+        (div (@ (class "scrollbar-app__input"))
+         (label (@ (for "trackmb")) "Margin bottom: ")
+         (input (@
+                 (type "text")
+                 (id "trackmb")
+                 (name "trackmb")
+                 (value "0px")
+                 (pattern "\\d+px")
+                 (title "Size in pixels with format: \"<NUMBER>px\"")))))
+
+       (div (@ (class "scrollbar-app__buttons"))
+       (button (@ (type "button") (id "sbUpdBtn")) "update")
+       (button (@ (type "button") (id "sbPrintBtn")) "print scss")
+       (button (@ (type "button") (id "sbClearBtn")) "clear output")))
+
+      (pre (@ (class "scrollbar-app__panel") (style "display: none") (id "sbScssOut")))
+      (textarea (@ (id "sbTextArea") (readonly "readonly")) "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
+      (script (@ (src "scrollbar.js"))))