generated from vilor/hyde-template
Ivan Polyakov
2 years ago
36 changed files with 4654 additions and 675 deletions
@ -1,7 +1,4 @@
@@ -1,7 +1,4 @@
|
||||
dist/ |
||||
|
||||
deploy*.sh |
||||
|
||||
.DS_Store |
||||
*~ |
||||
*#* |
||||
.#* |
||||
|
||||
@ -1,58 +0,0 @@
@@ -1,58 +0,0 @@
|
||||
# Copyright (C) 2022 Ivan Polyakov
|
||||
#
|
||||
# This file is part of vilor's website.
|
||||
#
|
||||
# Vilor's website 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.
|
||||
#
|
||||
# Vilor's website 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/>.
|
||||
include config.mk |
||||
|
||||
DIRS := $(shell find $(SRCDIR)/pages/* -type d | sed 's/$(SRCDIR)\/pages/$(OUTDIR)/')
|
||||
|
||||
SRCPAGES := $(shell find $(SRCDIR)/pages/* -name '*.scm')
|
||||
SRCSTYLES := $(shell find $(SRCDIR)/styles/* -name '*.scm')
|
||||
SRCJS := $(shell find $(SRCDIR)/scripts/* -name '*.js')
|
||||
|
||||
BUILDTIME=$(shell date "+%s")
|
||||
|
||||
all: $(OUTDIR) $(STATICDIR) pages styles js |
||||
|
||||
pages: $(SRCPAGES) |
||||
for page in $(SRCPAGES) ; do \
|
||||
$(SCHEME) $(SCHEMEFLAGS) -e "(define build-time $(BUILDTIME))" -s $$page \
|
||||
| sed -f scripts/minify-html.sed \
|
||||
> $$(echo $$page | sed 's/.*\/pages/dist/' | sed 's/scm/xhtml/') \
|
||||
; done
|
||||
|
||||
styles: $(SRCSTYLES) |
||||
for style in $(SRCSTYLES) ; do \
|
||||
$(SCHEME) $(SCHEMEFLAGS) -e "(define build-time $(BUILDTIME))" -s $$style \
|
||||
> $$(echo $$style | sed 's/.*\/styles/dist/' | sed 's/scm/$(BUILDTIME).css/') \
|
||||
; done
|
||||
|
||||
js: $(SRCJS) |
||||
for script in $(SRCJS) ; do \
|
||||
cp $$script $$(echo $$script | sed 's/.*\/scripts/dist/' | sed 's/js/$(BUILDTIME).js/') \
|
||||
; done
|
||||
|
||||
$(OUTDIR): |
||||
mkdir -p $(OUTDIR)
|
||||
mkdir -p $(DIRS)
|
||||
|
||||
$(STATICDIR): $(OUTDIR) |
||||
cp -rf $@/* $< || echo $(STATICDIR) "dir is empty"
|
||||
cp COPYING dist/
|
||||
|
||||
clean: |
||||
rm -rf $(OUTDIR)
|
||||
|
||||
.PHONY: all $(OUTDIR) $(STATICDIR) clean |
||||
@ -1,23 +0,0 @@
@@ -1,23 +0,0 @@
|
||||
# Copyright (C) 2022 Ivan Polyakov
|
||||
#
|
||||
# This file is part of vilor's website.
|
||||
#
|
||||
# Vilor's website 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.
|
||||
#
|
||||
# Vilor's website 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/>.
|
||||
|
||||
SCHEME=csi
|
||||
SCHEMEFLAGS=
|
||||
|
||||
SRCDIR=src
|
||||
STATICDIR=public
|
||||
OUTDIR=dist
|
||||
@ -0,0 +1,7 @@
@@ -0,0 +1,7 @@
|
||||
[*.{js,jsx,ts,tsx,*css}] |
||||
indent_style = space |
||||
indent_size = 2 |
||||
end_of_line = lf |
||||
trim_trailing_whitespace = true |
||||
insert_final_newline = true |
||||
max_line_length = 80 |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,30 @@
@@ -0,0 +1,30 @@
|
||||
{ |
||||
"name": "website", |
||||
"version": "1.0.0", |
||||
"description": "Vilor's personal website", |
||||
"private": true, |
||||
"main": "src/index.js", |
||||
"scripts": { |
||||
"serve": "webpack serve --mode=development", |
||||
"build": "webpack --mode=production" |
||||
}, |
||||
"author": "Ivan Polyakov", |
||||
"license": "GPL-3.0-or-later", |
||||
"devDependencies": { |
||||
"@babel/core": "^7.19.3", |
||||
"babel-loader": "^8.2.5", |
||||
"copy-webpack-plugin": "^11.0.0", |
||||
"css-loader": "^6.7.1", |
||||
"glob": "^8.0.3", |
||||
"html-loader": "^4.2.0", |
||||
"html-webpack-plugin": "^5.5.0", |
||||
"mini-css-extract-plugin": "^2.6.1", |
||||
"sass": "^1.55.0", |
||||
"sass-loader": "^13.1.0", |
||||
"style-loader": "^3.3.1", |
||||
"sxml-loader": "^0.3.0", |
||||
"webpack": "^5.74.0", |
||||
"webpack-cli": "^4.10.0", |
||||
"webpack-dev-server": "^4.11.1" |
||||
} |
||||
} |
||||
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
(define (backend-selectable-option value name) |
||||
`("{% if thumbbstl == \"" ,value "\" %}" |
||||
(option (@ (value ,value) (selected "selected")) ,name) |
||||
"{% else %}" |
||||
(option (@ (value ,value)) ,name) |
||||
"{% endif %}")) |
||||
|
||||
'() |
||||
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
import '@/styles/main.scss'; |
||||
|
||||
console.log('bla'); |
||||
@ -0,0 +1,42 @@
@@ -0,0 +1,42 @@
|
||||
/* |
||||
* Copyright (C) 2022 Ivan Polyakov |
||||
* |
||||
* This file is part of vilor's website. |
||||
* |
||||
* Vilor's website 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. |
||||
* |
||||
* Vilor's website 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/>. |
||||
*/ |
||||
|
||||
.scrollbar-app__demo { |
||||
scrollbar-width: "{{ sbw }}"; |
||||
scrollbar-color: "{{ thumbclr }} {{ trackclr }}"; |
||||
|
||||
&::-webkit-scrollbar { |
||||
width: "{{ sbw }}"; |
||||
} |
||||
|
||||
&::-webkit-scrollbar-thumb { |
||||
background-color: "{{ thumbclr }}"; |
||||
border-width: "{{ thumbbw }}"; |
||||
border-style: "{{ thumbbstl }}"; |
||||
border-color: "{{ thumbbclr }}"; |
||||
border-radius: "{{ thumbbrad }}"; |
||||
} |
||||
|
||||
&::-webkit-scrollbar-track { |
||||
background-color: "{{ trackclr }}"; |
||||
border-radius: "{{ trackbrad }}"; |
||||
margin-top: "{{ trackmt }}"; |
||||
margin-bottom: "{{ trackmb }}"; |
||||
} |
||||
} |
||||
@ -0,0 +1,210 @@
@@ -0,0 +1,210 @@
|
||||
;; Copyright (C) 2022 Ivan Polyakov |
||||
;; |
||||
;; This file is part of vilor's website. |
||||
;; |
||||
;; Vilor's website 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. |
||||
;; |
||||
;; Vilor's website 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/>. |
||||
|
||||
`(,(load "src/templates/default.scm") |
||||
,(load "src/components/backend-selectable-option.scm") |
||||
,(default-tpl |
||||
"vilor/webapps/scrollbar" |
||||
"Scrollbar styling demo" |
||||
'((p "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")) |
||||
(form (@ (method "GET") (action "/webapps/scrollbar.xhtml")) |
||||
(fieldset (@ (class "scrollbar-app__panel")) |
||||
(h3 "Bar:") |
||||
(div (@ (class "scrollbar-app__input")) |
||||
(label (@ (for "sbw")) "Width: ") |
||||
(input (@ |
||||
(type "text") |
||||
(id "sbw") |
||||
(name "sbw") |
||||
(value "{{ sbw }}") |
||||
(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 "{{ thumbclr }}"))) |
||||
(input (@ |
||||
(type "text") |
||||
(id "thumbclrtxt") |
||||
(name "thumbclrtxt") |
||||
(value "{{ thumbclr }}") |
||||
(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")) |
||||
,(map |
||||
(lambda (l) (backend-selectable-option l l)) |
||||
'("none" "hidden" "solid" "dotted" "dashed" |
||||
"double" "groove" "ridge" "inset" "outset")))) |
||||
|
||||
(div (@ (class "scrollbar-app__input")) |
||||
(label (@ (for "thumbbrad")) "Radius: ") |
||||
(input (@ |
||||
(type "text") |
||||
(id "thumbbrad") |
||||
(name "thumbbrad") |
||||
(value "{{ thumbbrad }}") |
||||
(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 "{{ thumbbw }}") |
||||
(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 "{{ thumbbclr }}"))) |
||||
(input (@ |
||||
(type "text") |
||||
(id "thumbbclrtxt") |
||||
(name "thumbbclrtxt") |
||||
(value "{{ thumbbclr }}") |
||||
(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 "{{ trackclr }}"))) |
||||
(input (@ |
||||
(type "text") |
||||
(id "trackclrtxt") |
||||
(name "trackclrtxt") |
||||
(value "{{ trackclr }}") |
||||
(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 "{{ trackbrad }}") |
||||
(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 "{{ trackmt }}") |
||||
(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 "{{ trackmb }}") |
||||
(pattern "\\d+px") |
||||
(title "Size in pixels with format: \"<NUMBER>px\""))))) |
||||
|
||||
(div (@ (class "scrollbar-app__buttons") (id "sbBtns")) |
||||
(button (@ (type "submit") (id "sbUpdBtn")) "update"))) |
||||
|
||||
(pre (@ (class "scrollbar-app__panel") (id "sbScssOut")) |
||||
" |
||||
.selector { |
||||
scrollbar-color: {{ thumbclr }} {{ trackclr }}; |
||||
|
||||
&::-webkit-scrollbar { |
||||
width: {{ sbw }}; |
||||
} |
||||
|
||||
&::-webkit-scrollbar-track { |
||||
background-color: {{ trackclr }}; |
||||
border-radius: {{ trackbrad }}; |
||||
margin-top: {{ trackmt }}; |
||||
margin-bottom: {{ trackmb }}; |
||||
} |
||||
|
||||
&::-webkit-scrollbar-thumb { |
||||
background-color: {{ thumbclr }}; |
||||
border: {{ thumbbw }} {{ thumbbstl }} {{ thumbbclr }}; |
||||
border-radius: {{ thumbbrad }}; |
||||
} |
||||
}") |
||||
(textarea (@ (class "scrollbar-app__demo") |
||||
(readonly "readonly") |
||||
(rows 5) |
||||
(cols 30)) |
||||
"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.")) |
||||
|
||||
;;"/src/styles/webapps/scrollbar-inline.scss" |
||||
'() |
||||
'() |
||||
'(((name "description") |
||||
(content "Demonstration of possible customization of the scrollbar.")) |
||||
((name "keywords") |
||||
(content "CSS, SCSS, scrollbar styling, constructor"))))) |
||||
|
||||
;;;(define page-embedded-style |
||||
;;; '(css+ |
||||
;;; (.scrollbar-app__demo |
||||
;;; (scrollbar-width "{{ sbw }}") |
||||
;;; (scrollbar-color "{{ thumbclr }} {{ trackclr }}") |
||||
;;; |
||||
;;; ((& ::-webkit-scrollbar) |
||||
;;; (width "{{ sbw }}")) |
||||
;;; |
||||
;;; ((& ::-webkit-scrollbar-thumb) |
||||
;;; (background-color "{{ thumbclr }}") |
||||
;;; (border-width "{{ thumbbw }}") |
||||
;;; (border-style "{{ thumbbstl }}") |
||||
;;; (border-color "{{ thumbbclr }}") |
||||
;;; (border-radius "{{ thumbbrad }}")) |
||||
;;; |
||||
;;; ((& ::-webkit-scrollbar-track) |
||||
;;; (background-color "{{ trackclr }}") |
||||
;;; (border-radius "{{ trackbrad }}") |
||||
;;; (margin-top "{{ trackmt }}") |
||||
;;; (margin-bottom "{{ trackmb }}"))))) |
||||
@ -0,0 +1,87 @@
@@ -0,0 +1,87 @@
|
||||
/* |
||||
* Copyright (C) 2022 Ivan Polyakov |
||||
* |
||||
* This file is part of vilor's website. |
||||
* |
||||
* Vilor's website 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. |
||||
* |
||||
* Vilor's website 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/>. |
||||
*/ |
||||
|
||||
.scrollbar-app { |
||||
form { |
||||
margin-bottom: 10px; |
||||
|
||||
fieldset { |
||||
border: none; |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
|
||||
.scrollbar-app__panel { |
||||
margin-bottom: 16px; |
||||
} |
||||
|
||||
h3 { |
||||
font-size: 24px; |
||||
margin: 0; |
||||
} |
||||
|
||||
h4 { |
||||
font-size: 20px; |
||||
margin: 12px 0 0 0; |
||||
} |
||||
|
||||
.scrollbar-app__input { |
||||
display: inline-block; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
padding: 8px; |
||||
} |
||||
} |
||||
|
||||
.scrollbar-app__panel { |
||||
background-color: "#585f70"; |
||||
padding: 12px; |
||||
} |
||||
|
||||
.scrollbar-app__demo { |
||||
height: 300px; |
||||
width: 100%; |
||||
font-size: 32px; |
||||
overflow-y: scroll; |
||||
margin-top: 60px; |
||||
|
||||
&::-webkit-scrollbar { |
||||
margin-bottom: 5px; |
||||
} |
||||
} |
||||
|
||||
.scrollbar-app__buttons { |
||||
margin-top: 24px; |
||||
|
||||
button { |
||||
min-width: 149px; |
||||
font-size: 18px; |
||||
background-color: "#ced9f3"; |
||||
padding: 14px 25px; |
||||
border: none; |
||||
border-radius: 4px; |
||||
outline: none; |
||||
margin-right: 16px; |
||||
|
||||
&:hover { |
||||
background-color: "#a2b8ed"; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,21 @@
@@ -0,0 +1,21 @@
|
||||
/* |
||||
* Copyright (C) 2022 Ivan Polyakov |
||||
* |
||||
* This file is part of vilor's website. |
||||
* |
||||
* Vilor's website 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. |
||||
* |
||||
* Vilor's website 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/>. |
||||
*/ |
||||
|
||||
$bg-primary: #3b4252; |
||||
$bg-secondary: #262d3e; |
||||
@ -0,0 +1,126 @@
@@ -0,0 +1,126 @@
|
||||
/* |
||||
* Copyright (C) 2022 Ivan Polyakov |
||||
* |
||||
* This file is part of vilor's website. |
||||
* |
||||
* Vilor's website 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. |
||||
* |
||||
* Vilor's website 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/>. |
||||
*/ |
||||
|
||||
@import './vars'; |
||||
|
||||
html, |
||||
body { |
||||
height: 100%; |
||||
margin: 0; |
||||
} |
||||
|
||||
body { |
||||
font-family: 'Arial', sans-serif; |
||||
color: white; |
||||
background: $bg-primary; |
||||
} |
||||
|
||||
a { |
||||
color: white; |
||||
|
||||
&:hover { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
&:visited { |
||||
color: #bbb; |
||||
} |
||||
} |
||||
|
||||
.wrapper { |
||||
position: relative; |
||||
min-height: 100%; |
||||
|
||||
hr { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
.container { |
||||
max-width: 937px; |
||||
padding: 0 16px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.under-construction { |
||||
max-width: 300px; |
||||
text-align: center; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.header { |
||||
background: $bg-secondary; |
||||
|
||||
&__logo { |
||||
display: inline-block; |
||||
font-size: 24px; |
||||
padding: 8px 0; |
||||
margin: 0; |
||||
} |
||||
|
||||
&__nav { |
||||
display: inline-block; |
||||
float: right; |
||||
list-style: none; |
||||
font-size: 16px; |
||||
padding: 12px 0; |
||||
margin: 0; |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
padding: 32px 16px 138px 16px; |
||||
|
||||
&__title { |
||||
font-size: 36px; |
||||
margin-top: 0; |
||||
margin-bottom: 12px; |
||||
} |
||||
|
||||
&__description { |
||||
font-size: 16px; |
||||
margin-bottom: 24px; |
||||
|
||||
.note { |
||||
font-size: 16px; |
||||
margin-top: 16px; |
||||
} |
||||
|
||||
p { |
||||
margin: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.footer { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 100%; |
||||
text-align: center; |
||||
background: $bg-secondary; |
||||
padding: 14px 0; |
||||
|
||||
&__authors { |
||||
margin-bottom: 15px; |
||||
|
||||
a { |
||||
margin: 0 5px; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,122 @@
@@ -0,0 +1,122 @@
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin'); |
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); |
||||
const CopyPlugin = require('copy-webpack-plugin'); |
||||
|
||||
const path = require('path'); |
||||
const glob = require('glob'); |
||||
const isDev = process.argv.includes('--mode=development'); |
||||
const pages = glob.sync(__dirname + '/src/pages/**/markup.sxml'); |
||||
|
||||
module.exports = { |
||||
target: 'web', |
||||
entry: pages.reduce((entries, pagePath) => { |
||||
const pathSegments = pagePath.split('/'); |
||||
const pageName = pathSegments[pathSegments.length - 2]; |
||||
const scriptPath = pagePath.replace('markup.sxml', 'script.js'); |
||||
|
||||
entries[pageName] = ['./src/main.js', scriptPath]; |
||||
return entries; |
||||
}, {}), |
||||
output: { |
||||
filename: '[name].[contenthash].js', |
||||
path: path.resolve(__dirname, 'dist'), |
||||
clean: true, |
||||
}, |
||||
resolve: { |
||||
alias: { |
||||
'@': path.resolve(__dirname, 'src'), |
||||
}, |
||||
}, |
||||
devtool: false, |
||||
devServer: { |
||||
static: { |
||||
directory: './dist/', |
||||
publicPath: '/', |
||||
}, |
||||
client: { |
||||
overlay: { |
||||
errors: true, |
||||
warnings: false, |
||||
} |
||||
}, |
||||
hot: true, |
||||
compress: false, |
||||
}, |
||||
module: { |
||||
rules: [ |
||||
{ |
||||
test: /\.s[ac]ss$/i, |
||||
use: [ |
||||
isDev ? 'style-loader' : MiniCssExtractPlugin.loader, |
||||
'css-loader', |
||||
'sass-loader', |
||||
], |
||||
}, |
||||
{ |
||||
test: /\.sxml$/, |
||||
use: [ |
||||
{ |
||||
loader: 'html-loader', |
||||
options: { |
||||
minimize: false, |
||||
}, |
||||
}, |
||||
{ |
||||
loader: 'sxml-loader', |
||||
}, |
||||
] |
||||
}, |
||||
{ |
||||
test: /\.js$/, |
||||
exclude: /node_modules/, |
||||
use: { |
||||
loader: 'babel-loader' |
||||
}, |
||||
}, |
||||
{ |
||||
test: /\.(png|jpg|svg|jpeg|gif|webp)/i, |
||||
type: 'asset/resource', |
||||
generator: { |
||||
filename: '[name][ext]', |
||||
outputPath: 'assets', |
||||
publicPath: 'assets/', |
||||
}, |
||||
}, |
||||
{ |
||||
test: /\.(ttf|woff|woff2)/i, |
||||
type: 'asset/resource', |
||||
generator: { |
||||
filename: '[name][ext]', |
||||
outputPath: 'assets', |
||||
publicPath: 'assets/', |
||||
}, |
||||
}, |
||||
] |
||||
}, |
||||
plugins: [ |
||||
new CopyPlugin({ |
||||
patterns: [ |
||||
{ |
||||
from: path.resolve(__dirname, 'public'), |
||||
} |
||||
] |
||||
}), |
||||
new MiniCssExtractPlugin({ |
||||
filename: '[name].[contenthash].css', |
||||
}), |
||||
...pages.map((fpath) => { |
||||
const pagePath = fpath.split('/pages/')[1]; |
||||
const pagePathSegs = pagePath.split('/'); |
||||
const pageName = pagePathSegs[pagePathSegs.length - 2]; |
||||
|
||||
return new HtmlWebpackPlugin({ |
||||
inject: 'body', |
||||
scriptLoading: 'blocking', |
||||
template: fpath, |
||||
filename: pagePath.replace('/markup.sxml', '.html'), |
||||
minify: false, |
||||
chunks: [pageName], |
||||
}); |
||||
}), |
||||
], |
||||
} |
||||
@ -1,233 +0,0 @@
@@ -1,233 +0,0 @@
|
||||
;; Copyright (C) 2022 Ivan Polyakov |
||||
;; |
||||
;; This file is part of vilor's website. |
||||
;; |
||||
;; Vilor's website 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. |
||||
;; |
||||
;; Vilor's website 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/>. |
||||
|
||||
(import sxml-serializer) |
||||
(import scss) |
||||
|
||||
(load "./src/general.scm") |
||||
|
||||
(define title "vilor/webapps/scrollbar") |
||||
(define page-name "Scrollbar styling") |
||||
(define page-desc |
||||
'((p "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."))) |
||||
(define page-styles '("scrollbar.css")) |
||||
(define page-scripts '("scrollbar.js")) |
||||
|
||||
(define (backend-selectable-option value name) |
||||
`("{% if thumbbstl == \"" ,value "\" %}" |
||||
(option (@ (value ,value) (selected "selected")) ,name) |
||||
"{% else %}" |
||||
(option (@ (value ,value)) ,name) |
||||
"{% endif %}")) |
||||
|
||||
(define page-embedded-style |
||||
'(css+ |
||||
(.scrollbar-app__demo |
||||
(scrollbar-width "{{ sbw }}") |
||||
(scrollbar-color "{{ thumbclr }} {{ trackclr }}") |
||||
|
||||
((& ::-webkit-scrollbar) |
||||
(width "{{ sbw }}")) |
||||
|
||||
((& ::-webkit-scrollbar-thumb) |
||||
(background-color "{{ thumbclr }}") |
||||
(border-width "{{ thumbbw }}") |
||||
(border-style "{{ thumbbstl }}") |
||||
(border-color "{{ thumbbclr }}") |
||||
(border-radius "{{ thumbbrad }}")) |
||||
|
||||
((& ::-webkit-scrollbar-track) |
||||
(background-color "{{ trackclr }}") |
||||
(border-radius "{{ trackbrad }}") |
||||
(margin-top "{{ trackmt }}") |
||||
(margin-bottom "{{ trackmb }}"))))) |
||||
|
||||
(define example-text "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.") |
||||
|
||||
(define content |
||||
`(div (@ (class "scrollbar-app")) |
||||
(form (@ (method "GET") (action "/webapps/scrollbar.xhtml")) |
||||
(fieldset (@ (class "scrollbar-app__panel")) |
||||
(h3 "Bar:") |
||||
(div (@ (class "scrollbar-app__input")) |
||||
(label (@ (for "sbw")) "Width: ") |
||||
(input (@ |
||||
(type "text") |
||||
(id "sbw") |
||||
(name "sbw") |
||||
(value "{{ sbw }}") |
||||
(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 "{{ thumbclr }}"))) |
||||
(input (@ |
||||
(type "text") |
||||
(id "thumbclrtxt") |
||||
(name "thumbclrtxt") |
||||
(value "{{ thumbclr }}") |
||||
(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")) |
||||
,(map |
||||
(lambda (l) (backend-selectable-option l l)) |
||||
'("none" "hidden" "solid" "dotted" "dashed" |
||||
"double" "groove" "ridge" "inset" "outset")))) |
||||
|
||||
(div (@ (class "scrollbar-app__input")) |
||||
(label (@ (for "thumbbrad")) "Radius: ") |
||||
(input (@ |
||||
(type "text") |
||||
(id "thumbbrad") |
||||
(name "thumbbrad") |
||||
(value "{{ thumbbrad }}") |
||||
(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 "{{ thumbbw }}") |
||||
(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 "{{ thumbbclr }}"))) |
||||
(input (@ |
||||
(type "text") |
||||
(id "thumbbclrtxt") |
||||
(name "thumbbclrtxt") |
||||
(value "{{ thumbbclr }}") |
||||
(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 "{{ trackclr }}"))) |
||||
(input (@ |
||||
(type "text") |
||||
(id "trackclrtxt") |
||||
(name "trackclrtxt") |
||||
(value "{{ trackclr }}") |
||||
(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 "{{ trackbrad }}") |
||||
(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 "{{ trackmt }}") |
||||
(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 "{{ trackmb }}") |
||||
(pattern "\\d+px") |
||||
(title "Size in pixels with format: \"<NUMBER>px\""))))) |
||||
|
||||
(div (@ (class "scrollbar-app__buttons") (id "sbBtns")) |
||||
(button (@ (type "submit") (id "sbUpdBtn")) "update"))) |
||||
|
||||
(pre (@ (class "scrollbar-app__panel") (id "sbScssOut")) |
||||
" |
||||
.selector { |
||||
scrollbar-color: {{ thumbclr }} {{ trackclr }}; |
||||
|
||||
&::-webkit-scrollbar { |
||||
width: {{ sbw }}; |
||||
} |
||||
|
||||
&::-webkit-scrollbar-track { |
||||
background-color: {{ trackclr }}; |
||||
border-radius: {{ trackbrad }}; |
||||
margin-top: {{ trackmt }}; |
||||
margin-bottom: {{ trackmb }}; |
||||
} |
||||
|
||||
&::-webkit-scrollbar-thumb { |
||||
background-color: {{ thumbclr }}; |
||||
border: {{ thumbbw }} {{ thumbbstl }} {{ thumbbclr }}; |
||||
border-radius: {{ thumbbrad }}; |
||||
} |
||||
}") |
||||
(textarea (@ (class "scrollbar-app__demo") |
||||
(readonly "readonly") |
||||
(rows 5) |
||||
(cols 30)) |
||||
,example-text))) |
||||
|
||||
(load "./src/templates/default.scm") |
||||
(display xhtml-1.0-doctype) |
||||
(display (serialize-sxml |
||||
(default-tpl |
||||
title |
||||
content |
||||
page-name |
||||
page-desc |
||||
page-embedded-style |
||||
page-styles |
||||
page-scripts |
||||
`(((name "description") |
||||
(content "Demonstration of possible customization of the scrollbar.")) |
||||
((name "keywords") |
||||
(content "CSS, SCSS, scrollbar, styling, constructor")))))) |
||||
@ -1,108 +0,0 @@
@@ -1,108 +0,0 @@
|
||||
;; Copyright (C) 2022 Ivan Polyakov |
||||
;; |
||||
;; This file is part of vilor's website. |
||||
;; |
||||
;; Vilor's website 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. |
||||
;; |
||||
;; Vilor's website 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/>. |
||||
|
||||
(import scss) |
||||
|
||||
(define global-styles |
||||
`(css+ |
||||
(|html, body| |
||||
(height 100%) |
||||
(margin 0)) |
||||
|
||||
(|body| |
||||
(font-family "Arial, sans-serif") |
||||
(color white) |
||||
(background-color "#3b4252")) |
||||
|
||||
(a |
||||
(color white) |
||||
|
||||
((& :hover) |
||||
(text-decoration none)) |
||||
|
||||
((& :visited) |
||||
(color "#bbb"))) |
||||
|
||||
(.wrapper |
||||
(position relative) |
||||
(min-height 100%) |
||||
|
||||
((// > hr) |
||||
(display none))) |
||||
|
||||
(.container |
||||
(max-width 937px) |
||||
(padding 0 16px) |
||||
(margin 0 auto)) |
||||
|
||||
(.under-construction |
||||
(max-width 300px) |
||||
(text-align center) |
||||
(margin 0 auto)) |
||||
|
||||
(.header |
||||
(background-color "#262d3e") |
||||
|
||||
((// .header__logo) |
||||
(display inline-block) |
||||
(font-size 24px) |
||||
(padding 8px 0) |
||||
(margin 0)) |
||||
|
||||
((// .header__nav) |
||||
(display inline-block) |
||||
(float right) |
||||
(list-style none) |
||||
(fonst-size 16px) |
||||
(padding 12px 0) |
||||
(margin 0))) |
||||
|
||||
(.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) |
||||
|
||||
((// .note) |
||||
(font-size 16px) |
||||
(margin-top 16px)) |
||||
|
||||
((// p) |
||||
(margin 0)))) |
||||
|
||||
(.footer |
||||
(position absolute) |
||||
(bottom 0) |
||||
(width 100%) |
||||
(text-align center) |
||||
(background-color "#262d3e") |
||||
(padding 14px 0) |
||||
|
||||
((// .footer__authors) |
||||
(margin-bottom 15px) |
||||
|
||||
((// a) |
||||
(margin 0 5px)))))) |
||||
|
||||
(write-css global-styles) |
||||
(newline) |
||||
@ -1,79 +0,0 @@
@@ -1,79 +0,0 @@
|
||||
;; Copyright (C) 2022 Ivan Polyakov |
||||
;; |
||||
;; This file is part of vilor's website. |
||||
;; |
||||
;; Vilor's website 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. |
||||
;; |
||||
;; Vilor's website 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/>. |
||||
|
||||
(import scss) |
||||
|
||||
(define scrollbar-styles |
||||
`(css+ |
||||
(.scrollbar-app |
||||
((// form) |
||||
(margin-bottom 10px) |
||||
|
||||
((// fieldset) |
||||
(border none) |
||||
(padding 0) |
||||
(margin 0)) |
||||
|
||||
((// .scrollbar-app__panel) |
||||
(margin-bottom 16px)) |
||||
|
||||
((// h3) |
||||
(font-size 24px) |
||||
(margin 0)) |
||||
|
||||
((// h4) |
||||
(font-size 20px) |
||||
(margin 12px 0 0 0)) |
||||
|
||||
((// .scrollbar-app__input) |
||||
(display inline-block) |
||||
(display inline-flex) |
||||
(align-items center) |
||||
(padding 8px))) |
||||
|
||||
((// .scrollbar-app__panel) |
||||
(background-color "#585f70") |
||||
(padding 12px)) |
||||
|
||||
((// .scrollbar-app__demo) |
||||
(height 300px) |
||||
(width 100%) |
||||
(font-size 32px) |
||||
(overflow-y scroll) |
||||
(margin-top 60px) |
||||
|
||||
((& ::-webkit-scrollbar) |
||||
(margin-bottom 5px))) |
||||
|
||||
((// .scrollbar-app__buttons) |
||||
(margin-top 24px) |
||||
|
||||
((// button) |
||||
(min-width 149px) |
||||
(font-size 18px) |
||||
(background-color "#ced9f3") |
||||
(padding 14px 25px) |
||||
(border none) |
||||
(border-radius 4px) |
||||
(outline none) |
||||
(margin-right 16px) |
||||
|
||||
((& :hover) |
||||
(background-color "#a2b8ed"))))))) |
||||
|
||||
(write-css scrollbar-styles) |
||||
(newline) |
||||
@ -1,69 +0,0 @@
@@ -1,69 +0,0 @@
|
||||
;; Copyright (C) 2022 Ivan Polyakov |
||||
;; |
||||
;; This file is part of vilor's website. |
||||
;; |
||||
;; Vilor's website 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. |
||||
;; |
||||
;; Vilor's website 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/>. |
||||
|
||||
(import scss) |
||||
(import (chicken string)) |
||||
|
||||
(define (path-with-build-time path suffix) |
||||
(string-translate* path |
||||
`((,suffix . ,(string-intersperse |
||||
`("." ,(number->string build-time) ,suffix) |
||||
""))))) |
||||
|
||||
(define (clean-tpl |
||||
page-title |
||||
page-content |
||||
|
||||
#!optional |
||||
(page-embedded-style '()) |
||||
(page-styles '()) |
||||
(page-scripts '()) |
||||
(page-meta '())) |
||||
`(html (@ (xmlns "http://www.w3.org/1999/xhtml") |
||||
(xml:lang "en") |
||||
(lang "en")) |
||||
(head |
||||
(meta (@ (http-equiv "Content-Type") |
||||
(content "text/html; charset=ascii"))) |
||||
(meta (@ (name "author") (content "Ivan Polyakov (vilor)"))) |
||||
(meta (@ (name "viewport") |
||||
(content "width=device-width, initial-scale=1"))) |
||||
|
||||
(meta (@ (name "robots") (content "noindex,nofollow"))) |
||||
|
||||
,(map (lambda (args) |
||||
`(meta ,(append '(@) args))) page-meta) |
||||
|
||||
,(map (lambda (l) |
||||
`(link (@ (rel "stylesheet") |
||||
(href ,(path-with-build-time l ".css"))))) |
||||
page-styles) |
||||
|
||||
(title ,page-title) |
||||
|
||||
,(if (not (null? page-embedded-style)) |
||||
`(style ,(scss->css page-embedded-style)) |
||||
'())) |
||||
(body |
||||
,page-content |
||||
|
||||
,(map |
||||
(lambda (l) |
||||
`(script (@ (src ,(path-with-build-time l ".js")) |
||||
(type "text/javascript")) |
||||
" ")) |
||||
page-scripts)))) |
||||
Loading…
Reference in new issue