sitix doesn't erase huge amounts of data unless you do something dumb. but I have done dumb things before. so I'm backing this up, rather than losing it.
This commit is contained in:
Lazy Hippopotamus
5
README
Normal file
5
README
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
This is the website code for Sitix documentation and stuff. site/ contains the actual Sitix scripts, and output/ contains the site.
|
||||||
|
Run `sitix site -c production` to build (`sitix site` alone will build the development version, which expects to be hosted at http://localhost:8080).
|
||||||
|
If you don't *have* sitix, go to the website (at https://swaous.asuscomm.com/sitix) for install instructions.
|
||||||
|
|
||||||
|
This website keeps Sitix minification on at all times with [@on minify].
|
||||||
8
output/index.html
Normal file
8
output/index.html
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://localhost:8080/res/main.css"> <link rel="stylesheet" href="http://localhost:8080/res/lato/lato.css"> <title>Sitix | Main </title> </head> <body> <div id="nav"> <a href="http://localhost:8080"><img src="http://localhost:8080/res/sitix-large.png"/></a> <div> <a href="http://localhost:8080/pages/about.html">About</a> </div> </div> <div id="main" class="scrolly-container">
|
||||||
|
|
||||||
|
<div id="toppybit"> <div> <div id="imagine" class="huge">Imagine an SSG</div> </div> <div id="switchybit"> <div class="scrolly"> <span class="big">that's FAST</span> </div> <div class="scrolly"> <span class="big">that's project agnostic</span> </div> <div class="scrolly"> <span class="big">that Keeps It Simple, Stupid</span> </div> <div class="scrolly"> <span class="big">that Just Makes Sense</span> </div> <div class="scrolly"> <span class="big">that <i class="highlight">makes no assumptions</i></span> </div> </div> </div> <h1>Sitix</h1> <div class="text toptext"> Sitix is a modern SSG (Static Site Generator) that allows you total control over how your project is assembled, without sacrificing ease. It uses an object/scope model with efficient file includes, conditional branching, looping, and command-line configuration to make stunning websites without the mess. </div>
|
||||||
|
<div class="textimage scrolly">
|
||||||
|
<div class="textimage-text"> Template all the things. Any Sitix file can be a template; the [?] opening phrase indicates that (for whatever reason) the file shouldn't be rendered normally, but still may be included in other files - for configuration, templating, or even modular elements! </div>
|
||||||
|
<img class="textimage-image" src="http://localhost:8080/res/default.html.png"/>
|
||||||
|
</div>
|
||||||
|
</div> <div id="bottom"> <div> <a href="http://localhost:8080"><img src="http://localhost:8080/res/sitix-large.png" /></a> <span>Sitix by Tyler Clarke</span> </div> <div> Links </div> <div> More Links </div> <div> Information </div> </div> <div id="actualbottom">Site designed by Tyler Clarke and built with Sitix.</div> <script src="http://localhost:8080/res/main.js"></script> <script src="http://localhost:8080/res/scrolly.js"></script> </body> </html>
|
||||||
7
output/pages/about.html
Normal file
7
output/pages/about.html
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://localhost:8080/res/main.css"> <link rel="stylesheet" href="http://localhost:8080/res/lato/lato.css"> <title>Sitix | About </title> </head> <body> <div id="nav"> <a href="http://localhost:8080"><img src="http://localhost:8080/res/sitix-large.png"/></a> <div> <a href="http://localhost:8080/pages/about.html">About</a> </div> </div> <div id="main" class="scrolly-container">
|
||||||
|
About
|
||||||
|
</div> <div id="bottom"> <div> <a href="http://localhost:8080"><img src="http://localhost:8080/res/sitix-large.png" /></a> <span>Sitix by Tyler Clarke</span> </div> <div> Links </div> <div> More Links </div> <div> Information </div> </div> <div id="actualbottom">Site designed by Tyler Clarke and built with Sitix.</div> <script src="http://localhost:8080/res/main.js"></script> <script src="http://localhost:8080/res/scrolly.js"></script> </body> </html>
|
||||||
BIN
output/res/default.html.png
Normal file
BIN
output/res/default.html.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
output/res/lato/Lato-Black.ttf
Normal file
BIN
output/res/lato/Lato-Black.ttf
Normal file
Binary file not shown.
BIN
output/res/lato/Lato-BlackItalic.ttf
Normal file
BIN
output/res/lato/Lato-BlackItalic.ttf
Normal file
Binary file not shown.
BIN
output/res/lato/Lato-Bold.ttf
Normal file
BIN
output/res/lato/Lato-Bold.ttf
Normal file
Binary file not shown.
BIN
output/res/lato/Lato-BoldItalic.ttf
Normal file
BIN
output/res/lato/Lato-BoldItalic.ttf
Normal file
Binary file not shown.
BIN
output/res/lato/Lato-Hairline.ttf
Normal file
BIN
output/res/lato/Lato-Hairline.ttf
Normal file
Binary file not shown.
BIN
output/res/lato/Lato-HairlineItalic.ttf
Normal file
BIN
output/res/lato/Lato-HairlineItalic.ttf
Normal file
Binary file not shown.
BIN
output/res/lato/Lato-Italic.ttf
Normal file
BIN
output/res/lato/Lato-Italic.ttf
Normal file
Binary file not shown.
BIN
output/res/lato/Lato-Light.ttf
Normal file
BIN
output/res/lato/Lato-Light.ttf
Normal file
Binary file not shown.
BIN
output/res/lato/Lato-LightItalic.ttf
Normal file
BIN
output/res/lato/Lato-LightItalic.ttf
Normal file
Binary file not shown.
BIN
output/res/lato/Lato-Regular.ttf
Normal file
BIN
output/res/lato/Lato-Regular.ttf
Normal file
Binary file not shown.
92
output/res/lato/OFL.txt
Normal file
92
output/res/lato/OFL.txt
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
Copyright (c) 2010-2011 by tyPoland Lukasz Dziedzic with Reserved Font Name "Lato".
|
||||||
|
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||||
|
This license is copied below, and is also available with a FAQ at:
|
||||||
|
http://scripts.sil.org/OFL
|
||||||
|
|
||||||
|
|
||||||
|
-----------------------------------------------------------
|
||||||
|
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||||
|
-----------------------------------------------------------
|
||||||
|
|
||||||
|
PREAMBLE
|
||||||
|
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||||
|
development of collaborative font projects, to support the font creation
|
||||||
|
efforts of academic and linguistic communities, and to provide a free and
|
||||||
|
open framework in which fonts may be shared and improved in partnership
|
||||||
|
with others.
|
||||||
|
|
||||||
|
The OFL allows the licensed fonts to be used, studied, modified and
|
||||||
|
redistributed freely as long as they are not sold by themselves. The
|
||||||
|
fonts, including any derivative works, can be bundled, embedded,
|
||||||
|
redistributed and/or sold with any software provided that any reserved
|
||||||
|
names are not used by derivative works. The fonts and derivatives,
|
||||||
|
however, cannot be released under any other type of license. The
|
||||||
|
requirement for fonts to remain under this license does not apply
|
||||||
|
to any document created using the fonts or their derivatives.
|
||||||
|
|
||||||
|
DEFINITIONS
|
||||||
|
"Font Software" refers to the set of files released by the Copyright
|
||||||
|
Holder(s) under this license and clearly marked as such. This may
|
||||||
|
include source files, build scripts and documentation.
|
||||||
|
|
||||||
|
"Reserved Font Name" refers to any names specified as such after the
|
||||||
|
copyright statement(s).
|
||||||
|
|
||||||
|
"Original Version" refers to the collection of Font Software components as
|
||||||
|
distributed by the Copyright Holder(s).
|
||||||
|
|
||||||
|
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||||
|
or substituting -- in part or in whole -- any of the components of the
|
||||||
|
Original Version, by changing formats or by porting the Font Software to a
|
||||||
|
new environment.
|
||||||
|
|
||||||
|
"Author" refers to any designer, engineer, programmer, technical
|
||||||
|
writer or other person who contributed to the Font Software.
|
||||||
|
|
||||||
|
PERMISSION & CONDITIONS
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||||
|
redistribute, and sell modified and unmodified copies of the Font
|
||||||
|
Software, subject to the following conditions:
|
||||||
|
|
||||||
|
1) Neither the Font Software nor any of its individual components,
|
||||||
|
in Original or Modified Versions, may be sold by itself.
|
||||||
|
|
||||||
|
2) Original or Modified Versions of the Font Software may be bundled,
|
||||||
|
redistributed and/or sold with any software, provided that each copy
|
||||||
|
contains the above copyright notice and this license. These can be
|
||||||
|
included either as stand-alone text files, human-readable headers or
|
||||||
|
in the appropriate machine-readable metadata fields within text or
|
||||||
|
binary files as long as those fields can be easily viewed by the user.
|
||||||
|
|
||||||
|
3) No Modified Version of the Font Software may use the Reserved Font
|
||||||
|
Name(s) unless explicit written permission is granted by the corresponding
|
||||||
|
Copyright Holder. This restriction only applies to the primary font name as
|
||||||
|
presented to the users.
|
||||||
|
|
||||||
|
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||||
|
Software shall not be used to promote, endorse or advertise any
|
||||||
|
Modified Version, except to acknowledge the contribution(s) of the
|
||||||
|
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||||
|
permission.
|
||||||
|
|
||||||
|
5) The Font Software, modified or unmodified, in part or in whole,
|
||||||
|
must be distributed entirely under this license, and must not be
|
||||||
|
distributed under any other license. The requirement for fonts to
|
||||||
|
remain under this license does not apply to any document created
|
||||||
|
using the Font Software.
|
||||||
|
|
||||||
|
TERMINATION
|
||||||
|
This license becomes null and void if any of the above conditions are
|
||||||
|
not met.
|
||||||
|
|
||||||
|
DISCLAIMER
|
||||||
|
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||||
|
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||||
|
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
|
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||||
|
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||||
|
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||||
1
output/res/lato/lato.css
Normal file
1
output/res/lato/lato.css
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/* Sitix script for the Lato font-face declarations. My editor shows numerous syntax errors; this is because it does not support Sitix scripting. */ @font-face { font-family: Lato; src: url("http://localhost:8080/res/lato/Lato-Italic.ttf"); font-weight: normal; font-style: italic, oblique; } @font-face { font-family: Lato; src: url("http://localhost:8080/res/lato/Lato-Bold.ttf"); font-weight: bold; font-style: normal; } @font-face { font-family: Lato; src: url("http://localhost:8080/res/lato/Lato-BoldItalic.ttf"); font-weight: bold; font-style: italic, oblique; } @font-face { font-family: Lato; src: url("http://localhost:8080/res/lato/Lato-Regular.ttf"); font-weight: normal; font-style: normal; }
|
||||||
BIN
output/res/lato/lato.zip
Normal file
BIN
output/res/lato/lato.zip
Normal file
Binary file not shown.
200
output/res/main.css
Normal file
200
output/res/main.css
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
*, body, html {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
font-family: Lato, Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav {
|
||||||
|
position: sticky;
|
||||||
|
top: 0px;
|
||||||
|
box-shadow: 0px 0px 5px black;
|
||||||
|
padding: 3px;
|
||||||
|
background-color: white;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav > div {
|
||||||
|
padding-top: 0px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
transition: padding 0.5s;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav > a {
|
||||||
|
top: 0px;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav:hover > div {
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.text {
|
||||||
|
padding-top: 50px;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
padding-left: 15vw;
|
||||||
|
padding-right: 15vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom {
|
||||||
|
box-shadow: 0px 0px 5px black;
|
||||||
|
padding: 50px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas: 'top top top'
|
||||||
|
'line1 line2 line3';
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom > div:first-child {
|
||||||
|
grid-area: top;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom > div:first-child > a {
|
||||||
|
display: inline-block;
|
||||||
|
height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom > div:first-child > span {
|
||||||
|
transform: translateY(-1em);
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom > div:first-child > a > img {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom > div:first-child > * {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text.scrolly {
|
||||||
|
transform: translateX(-200px);
|
||||||
|
opacity: 0%;
|
||||||
|
transition: transform 0.5s, opacity 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text.scrolly.scrolly-entered {
|
||||||
|
opacity: 100%;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toppybit {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 10%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.huge {
|
||||||
|
font-size: 6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.big {
|
||||||
|
font-size: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imagine {
|
||||||
|
position: sticky;
|
||||||
|
top: 50vh;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#switchybit > div > span {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #000044;
|
||||||
|
padding: 10px;
|
||||||
|
font-family: monospace;
|
||||||
|
color: white;
|
||||||
|
position: sticky;
|
||||||
|
top: 50vh;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#switchybit > div {
|
||||||
|
height: 100vh;
|
||||||
|
opacity: 0%;
|
||||||
|
transition: opacity 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#switchybit > div.scrolly-center {
|
||||||
|
opacity: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
i.highlight {
|
||||||
|
color: red;
|
||||||
|
font-size: 3rem;
|
||||||
|
text-shadow: 0px 0px 2px red, 0px 0px 4px blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#actualbottom {
|
||||||
|
background-color: black;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.7em;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 10vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.toptext {
|
||||||
|
padding-left: 35vw;
|
||||||
|
padding-right: 15vw;
|
||||||
|
font-size: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textimage {
|
||||||
|
display: flex;
|
||||||
|
padding-left: 10vw;
|
||||||
|
padding-right: 10vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textimage > .textimage-text {
|
||||||
|
flex: 2;
|
||||||
|
padding: 100px;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textimage:nth-child(2n + 1) {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textimage.scrolly {
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 200vw;
|
||||||
|
transform: translate(-50vw);
|
||||||
|
overflow: hidden;
|
||||||
|
transition: width 5s, transform 5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textimage.scrolly.scrolly-entered {
|
||||||
|
width: auto;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
52
output/res/scrolly.js
Normal file
52
output/res/scrolly.js
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
/* Scrolly.JS is an extremely simple framework that gives CSS interoperation to scroll events. */
|
||||||
|
|
||||||
|
var scrollyContainers = document.getElementsByClassName("scrolly-container");
|
||||||
|
|
||||||
|
function scrolly() {
|
||||||
|
var scrollyItems = this.getElementsByClassName("scrolly");
|
||||||
|
var nearest = undefined;
|
||||||
|
var nearestVal = Infinity;
|
||||||
|
for (var i = 0; i < scrollyItems.length; i++) {
|
||||||
|
var position = scrollyItems[i].getBoundingClientRect();
|
||||||
|
var scrollyMargin = 0;
|
||||||
|
if (scrollyItems[i].hasAttribute("--data-scrollyMargin")) {
|
||||||
|
scrollyMargin = scrollyItems[i].getAttribute("--data-scrollyMargin");
|
||||||
|
}
|
||||||
|
if (position.top < window.innerHeight - scrollyMargin && position.bottom > scrollyMargin) {
|
||||||
|
scrollyItems[i].classList.add("scrolly-entered");
|
||||||
|
scrollyItems[i].classList.add("scrolly-in");
|
||||||
|
scrollyItems[i].classList.remove("scrolly-out");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
scrollyItems[i].classList.add("scrolly-out");
|
||||||
|
scrollyItems[i].classList.remove("scrolly-in");
|
||||||
|
}
|
||||||
|
var cDisp = Math.abs(window.innerHeight / 2 - (position.top + position.bottom) / 2);
|
||||||
|
scrollyItems[i].classList.remove("scrolly-center");
|
||||||
|
if (cDisp < nearestVal) {
|
||||||
|
if (nearest) {
|
||||||
|
nearest.classList.remove("scrolly-center");
|
||||||
|
}
|
||||||
|
nearest = scrollyItems[i];
|
||||||
|
scrollyItems[i].classList.add("scrolly-center");
|
||||||
|
nearestVal = cDisp;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i < scrollyContainers.length; i++) {
|
||||||
|
scrollyContainers[i].scrolly = scrolly;
|
||||||
|
scrollyContainers[i].scrolly();
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("scroll", () => {
|
||||||
|
for (var i = 0; i < scrollyContainers.length; i++) {
|
||||||
|
scrollyContainers[i].scrolly()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("wheel", () => {
|
||||||
|
for (var i = 0; i < scrollyContainers.length; i++) {
|
||||||
|
scrollyContainers[i].scrolly()
|
||||||
|
}
|
||||||
|
});
|
||||||
BIN
output/res/sitix-large.png
Normal file
BIN
output/res/sitix-large.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
85
output/res/sitix.svg
Normal file
85
output/res/sitix.svg
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="23.8125mm"
|
||||||
|
height="23.8125mm"
|
||||||
|
viewBox="0 0 23.8125 23.8125"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
|
||||||
|
sodipodi:docname="sitix.svg"
|
||||||
|
inkscape:export-filename="sitix-large.png"
|
||||||
|
inkscape:export-xdpi="273.06668"
|
||||||
|
inkscape:export-ydpi="273.06668"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:zoom="2.653101"
|
||||||
|
inkscape:cx="25.065009"
|
||||||
|
inkscape:cy="38.634037"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1011"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="layer1" />
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<ellipse
|
||||||
|
style="fill:#666666;stroke:none;stroke-width:3.565;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
|
||||||
|
id="path4"
|
||||||
|
cx="11.90625"
|
||||||
|
cy="11.906251"
|
||||||
|
rx="10.910029"
|
||||||
|
ry="10.91003" />
|
||||||
|
<g
|
||||||
|
id="g4"
|
||||||
|
transform="matrix(1.000462,0,0,1.012923,-36.389194,-119.32583)"
|
||||||
|
style="stroke-width:0.993371">
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:85.3334px;line-height:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:center;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:middle;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;opacity:1;vector-effect:none;fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-width:4.96687;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
|
||||||
|
x="184.08168"
|
||||||
|
y="520.47266"
|
||||||
|
id="text4"
|
||||||
|
transform="scale(0.26458333)"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan4"
|
||||||
|
x="184.08168"
|
||||||
|
y="520.47266"
|
||||||
|
style="font-style:italic;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:C059;-inkscape-font-specification:'C059 Italic';fill:#ff0000;stroke:#000000;stroke-width:4.96687;stroke-opacity:1">S<tspan
|
||||||
|
style="font-size:64px;fill:#ff0000;stroke:#000000;stroke-width:4.96687;stroke-opacity:1"
|
||||||
|
id="tspan3">i</tspan></tspan></text>
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:85.3334px;line-height:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:center;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:middle;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;opacity:1;vector-effect:none;fill:#f9f9f9;fill-opacity:1;stroke-width:4.96687;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
|
||||||
|
x="184.08168"
|
||||||
|
y="520.47266"
|
||||||
|
id="text1"
|
||||||
|
transform="scale(0.26458333)"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan1"
|
||||||
|
x="184.08168"
|
||||||
|
y="520.47266"
|
||||||
|
style="font-style:italic;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:C059;-inkscape-font-specification:'C059 Italic';fill:#f9f9f9;stroke-width:4.96687">S<tspan
|
||||||
|
style="font-size:64px;fill:#f9f9f9;stroke-width:4.96687"
|
||||||
|
id="tspan2">i</tspan></tspan></text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
5
site/config.stx
Normal file
5
site/config.stx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
[?][@on minify]
|
||||||
|
[=baseurl http://localhost:8080]
|
||||||
|
[i config production]
|
||||||
|
[=baseurl https://swaous.asuscomm.com/sitix]
|
||||||
|
[/]
|
||||||
37
site/index.html
Normal file
37
site/index.html
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
[!][@on minify]
|
||||||
|
|
||||||
|
[=title Main]
|
||||||
|
[=content-]
|
||||||
|
[#modules/textimage.stx]
|
||||||
|
<div id="toppybit">
|
||||||
|
<div>
|
||||||
|
<div id="imagine" class="huge">Imagine an SSG</div>
|
||||||
|
</div>
|
||||||
|
[=scrollyads-]
|
||||||
|
[=+ that's FAST]
|
||||||
|
[=+ that's project agnostic]
|
||||||
|
[=+ that Keeps It Simple, Stupid]
|
||||||
|
[=+ that Just Makes Sense]
|
||||||
|
[=+ that <i class="highlight">makes no assumptions</i>]
|
||||||
|
[/]
|
||||||
|
<div id="switchybit">
|
||||||
|
[f scrollyads ad]
|
||||||
|
<div class="scrolly">
|
||||||
|
<span class="big">[^ad]</span>
|
||||||
|
</div>
|
||||||
|
[/]
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h1>Sitix</h1>
|
||||||
|
<div class="text toptext">
|
||||||
|
Sitix is a modern SSG (Static Site Generator) that allows you total control over how your project is assembled, without sacrificing ease. It uses an object/scope
|
||||||
|
model with efficient file includes, conditional branching, looping, and command-line configuration to make stunning websites without the mess.
|
||||||
|
</div>
|
||||||
|
[=textimage_text-]
|
||||||
|
Template all the things. Any Sitix file can be a template; the \[?] opening phrase indicates that (for whatever reason) the file shouldn't be rendered normally,
|
||||||
|
but still may be included in other files - for configuration, templating, or even modular elements!
|
||||||
|
[/]
|
||||||
|
[=textimage_source-][^baseurl]/res/default.html.png[/]
|
||||||
|
[^textimage]
|
||||||
|
[/]
|
||||||
|
[#templates/default.html]
|
||||||
8
site/modules/textimage.stx
Normal file
8
site/modules/textimage.stx
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
[?]
|
||||||
|
|
||||||
|
[=textimage-]
|
||||||
|
<div class="textimage scrolly">
|
||||||
|
<div class="textimage-text">[^textimage_text]</div>
|
||||||
|
<img class="textimage-image" src="[^textimage_source]"/>
|
||||||
|
</div>
|
||||||
|
[/]
|
||||||
7
site/pages/about.html
Normal file
7
site/pages/about.html
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
[!]
|
||||||
|
[=isLinked]
|
||||||
|
[=title About]
|
||||||
|
[=content-]
|
||||||
|
About
|
||||||
|
[/]
|
||||||
|
[#templates/default.html]
|
||||||
BIN
site/res/default.html.png
Normal file
BIN
site/res/default.html.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
site/res/lato/Lato-Black.ttf
Normal file
BIN
site/res/lato/Lato-Black.ttf
Normal file
Binary file not shown.
BIN
site/res/lato/Lato-BlackItalic.ttf
Normal file
BIN
site/res/lato/Lato-BlackItalic.ttf
Normal file
Binary file not shown.
BIN
site/res/lato/Lato-Bold.ttf
Normal file
BIN
site/res/lato/Lato-Bold.ttf
Normal file
Binary file not shown.
BIN
site/res/lato/Lato-BoldItalic.ttf
Normal file
BIN
site/res/lato/Lato-BoldItalic.ttf
Normal file
Binary file not shown.
BIN
site/res/lato/Lato-Hairline.ttf
Normal file
BIN
site/res/lato/Lato-Hairline.ttf
Normal file
Binary file not shown.
BIN
site/res/lato/Lato-HairlineItalic.ttf
Normal file
BIN
site/res/lato/Lato-HairlineItalic.ttf
Normal file
Binary file not shown.
BIN
site/res/lato/Lato-Italic.ttf
Normal file
BIN
site/res/lato/Lato-Italic.ttf
Normal file
Binary file not shown.
BIN
site/res/lato/Lato-Light.ttf
Normal file
BIN
site/res/lato/Lato-Light.ttf
Normal file
Binary file not shown.
BIN
site/res/lato/Lato-LightItalic.ttf
Normal file
BIN
site/res/lato/Lato-LightItalic.ttf
Normal file
Binary file not shown.
BIN
site/res/lato/Lato-Regular.ttf
Normal file
BIN
site/res/lato/Lato-Regular.ttf
Normal file
Binary file not shown.
92
site/res/lato/OFL.txt
Normal file
92
site/res/lato/OFL.txt
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
Copyright (c) 2010-2011 by tyPoland Lukasz Dziedzic with Reserved Font Name "Lato".
|
||||||
|
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||||
|
This license is copied below, and is also available with a FAQ at:
|
||||||
|
http://scripts.sil.org/OFL
|
||||||
|
|
||||||
|
|
||||||
|
-----------------------------------------------------------
|
||||||
|
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||||
|
-----------------------------------------------------------
|
||||||
|
|
||||||
|
PREAMBLE
|
||||||
|
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||||
|
development of collaborative font projects, to support the font creation
|
||||||
|
efforts of academic and linguistic communities, and to provide a free and
|
||||||
|
open framework in which fonts may be shared and improved in partnership
|
||||||
|
with others.
|
||||||
|
|
||||||
|
The OFL allows the licensed fonts to be used, studied, modified and
|
||||||
|
redistributed freely as long as they are not sold by themselves. The
|
||||||
|
fonts, including any derivative works, can be bundled, embedded,
|
||||||
|
redistributed and/or sold with any software provided that any reserved
|
||||||
|
names are not used by derivative works. The fonts and derivatives,
|
||||||
|
however, cannot be released under any other type of license. The
|
||||||
|
requirement for fonts to remain under this license does not apply
|
||||||
|
to any document created using the fonts or their derivatives.
|
||||||
|
|
||||||
|
DEFINITIONS
|
||||||
|
"Font Software" refers to the set of files released by the Copyright
|
||||||
|
Holder(s) under this license and clearly marked as such. This may
|
||||||
|
include source files, build scripts and documentation.
|
||||||
|
|
||||||
|
"Reserved Font Name" refers to any names specified as such after the
|
||||||
|
copyright statement(s).
|
||||||
|
|
||||||
|
"Original Version" refers to the collection of Font Software components as
|
||||||
|
distributed by the Copyright Holder(s).
|
||||||
|
|
||||||
|
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||||
|
or substituting -- in part or in whole -- any of the components of the
|
||||||
|
Original Version, by changing formats or by porting the Font Software to a
|
||||||
|
new environment.
|
||||||
|
|
||||||
|
"Author" refers to any designer, engineer, programmer, technical
|
||||||
|
writer or other person who contributed to the Font Software.
|
||||||
|
|
||||||
|
PERMISSION & CONDITIONS
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||||
|
redistribute, and sell modified and unmodified copies of the Font
|
||||||
|
Software, subject to the following conditions:
|
||||||
|
|
||||||
|
1) Neither the Font Software nor any of its individual components,
|
||||||
|
in Original or Modified Versions, may be sold by itself.
|
||||||
|
|
||||||
|
2) Original or Modified Versions of the Font Software may be bundled,
|
||||||
|
redistributed and/or sold with any software, provided that each copy
|
||||||
|
contains the above copyright notice and this license. These can be
|
||||||
|
included either as stand-alone text files, human-readable headers or
|
||||||
|
in the appropriate machine-readable metadata fields within text or
|
||||||
|
binary files as long as those fields can be easily viewed by the user.
|
||||||
|
|
||||||
|
3) No Modified Version of the Font Software may use the Reserved Font
|
||||||
|
Name(s) unless explicit written permission is granted by the corresponding
|
||||||
|
Copyright Holder. This restriction only applies to the primary font name as
|
||||||
|
presented to the users.
|
||||||
|
|
||||||
|
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||||
|
Software shall not be used to promote, endorse or advertise any
|
||||||
|
Modified Version, except to acknowledge the contribution(s) of the
|
||||||
|
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||||
|
permission.
|
||||||
|
|
||||||
|
5) The Font Software, modified or unmodified, in part or in whole,
|
||||||
|
must be distributed entirely under this license, and must not be
|
||||||
|
distributed under any other license. The requirement for fonts to
|
||||||
|
remain under this license does not apply to any document created
|
||||||
|
using the Font Software.
|
||||||
|
|
||||||
|
TERMINATION
|
||||||
|
This license becomes null and void if any of the above conditions are
|
||||||
|
not met.
|
||||||
|
|
||||||
|
DISCLAIMER
|
||||||
|
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||||
|
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||||
|
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
|
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||||
|
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||||
|
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||||
30
site/res/lato/lato.css
Normal file
30
site/res/lato/lato.css
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
[!][@on minify]
|
||||||
|
/* Sitix script for the Lato font-face declarations. My editor shows numerous syntax errors; this is because it does not support Sitix scripting. */
|
||||||
|
[#config.stx]
|
||||||
|
@font-face {
|
||||||
|
font-family: Lato;
|
||||||
|
src: url("[^baseurl]/res/lato/Lato-Italic.ttf");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic, oblique;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Lato;
|
||||||
|
src: url("[^baseurl]/res/lato/Lato-Bold.ttf");
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Lato;
|
||||||
|
src: url("[^baseurl]/res/lato/Lato-BoldItalic.ttf");
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic, oblique;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Lato;
|
||||||
|
src: url("[^baseurl]/res/lato/Lato-Regular.ttf");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
BIN
site/res/lato/lato.zip
Normal file
BIN
site/res/lato/lato.zip
Normal file
Binary file not shown.
200
site/res/main.css
Normal file
200
site/res/main.css
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
*, body, html {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
font-family: Lato, Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav {
|
||||||
|
position: sticky;
|
||||||
|
top: 0px;
|
||||||
|
box-shadow: 0px 0px 5px black;
|
||||||
|
padding: 3px;
|
||||||
|
background-color: white;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav > div {
|
||||||
|
padding-top: 0px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
transition: padding 0.5s;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav > a {
|
||||||
|
top: 0px;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav:hover > div {
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.text {
|
||||||
|
padding-top: 50px;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
padding-left: 15vw;
|
||||||
|
padding-right: 15vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom {
|
||||||
|
box-shadow: 0px 0px 5px black;
|
||||||
|
padding: 50px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas: 'top top top'
|
||||||
|
'line1 line2 line3';
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom > div:first-child {
|
||||||
|
grid-area: top;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom > div:first-child > a {
|
||||||
|
display: inline-block;
|
||||||
|
height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom > div:first-child > span {
|
||||||
|
transform: translateY(-1em);
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom > div:first-child > a > img {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom > div:first-child > * {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text.scrolly {
|
||||||
|
transform: translateX(-200px);
|
||||||
|
opacity: 0%;
|
||||||
|
transition: transform 0.5s, opacity 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text.scrolly.scrolly-entered {
|
||||||
|
opacity: 100%;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toppybit {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 10%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.huge {
|
||||||
|
font-size: 6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.big {
|
||||||
|
font-size: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imagine {
|
||||||
|
position: sticky;
|
||||||
|
top: 50vh;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#switchybit > div > span {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #000044;
|
||||||
|
padding: 10px;
|
||||||
|
font-family: monospace;
|
||||||
|
color: white;
|
||||||
|
position: sticky;
|
||||||
|
top: 50vh;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#switchybit > div {
|
||||||
|
height: 100vh;
|
||||||
|
opacity: 0%;
|
||||||
|
transition: opacity 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#switchybit > div.scrolly-center {
|
||||||
|
opacity: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
i.highlight {
|
||||||
|
color: red;
|
||||||
|
font-size: 3rem;
|
||||||
|
text-shadow: 0px 0px 2px red, 0px 0px 4px blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#actualbottom {
|
||||||
|
background-color: black;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.7em;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 10vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.toptext {
|
||||||
|
padding-left: 35vw;
|
||||||
|
padding-right: 15vw;
|
||||||
|
font-size: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textimage {
|
||||||
|
display: flex;
|
||||||
|
padding-left: 10vw;
|
||||||
|
padding-right: 10vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textimage > .textimage-text {
|
||||||
|
flex: 2;
|
||||||
|
padding: 100px;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textimage:nth-child(2n + 1) {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textimage.scrolly {
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 200vw;
|
||||||
|
transform: translate(-50vw);
|
||||||
|
overflow: hidden;
|
||||||
|
transition: width 5s, transform 5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textimage.scrolly.scrolly-entered {
|
||||||
|
width: auto;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
0
site/res/main.js
Normal file
0
site/res/main.js
Normal file
52
site/res/scrolly.js
Normal file
52
site/res/scrolly.js
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
/* Scrolly.JS is an extremely simple framework that gives CSS interoperation to scroll events. */
|
||||||
|
|
||||||
|
var scrollyContainers = document.getElementsByClassName("scrolly-container");
|
||||||
|
|
||||||
|
function scrolly() {
|
||||||
|
var scrollyItems = this.getElementsByClassName("scrolly");
|
||||||
|
var nearest = undefined;
|
||||||
|
var nearestVal = Infinity;
|
||||||
|
for (var i = 0; i < scrollyItems.length; i++) {
|
||||||
|
var position = scrollyItems[i].getBoundingClientRect();
|
||||||
|
var scrollyMargin = 0;
|
||||||
|
if (scrollyItems[i].hasAttribute("--data-scrollyMargin")) {
|
||||||
|
scrollyMargin = scrollyItems[i].getAttribute("--data-scrollyMargin");
|
||||||
|
}
|
||||||
|
if (position.top < window.innerHeight - scrollyMargin && position.bottom > scrollyMargin) {
|
||||||
|
scrollyItems[i].classList.add("scrolly-entered");
|
||||||
|
scrollyItems[i].classList.add("scrolly-in");
|
||||||
|
scrollyItems[i].classList.remove("scrolly-out");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
scrollyItems[i].classList.add("scrolly-out");
|
||||||
|
scrollyItems[i].classList.remove("scrolly-in");
|
||||||
|
}
|
||||||
|
var cDisp = Math.abs(window.innerHeight / 2 - (position.top + position.bottom) / 2);
|
||||||
|
scrollyItems[i].classList.remove("scrolly-center");
|
||||||
|
if (cDisp < nearestVal) {
|
||||||
|
if (nearest) {
|
||||||
|
nearest.classList.remove("scrolly-center");
|
||||||
|
}
|
||||||
|
nearest = scrollyItems[i];
|
||||||
|
scrollyItems[i].classList.add("scrolly-center");
|
||||||
|
nearestVal = cDisp;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i < scrollyContainers.length; i++) {
|
||||||
|
scrollyContainers[i].scrolly = scrolly;
|
||||||
|
scrollyContainers[i].scrolly();
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("scroll", () => {
|
||||||
|
for (var i = 0; i < scrollyContainers.length; i++) {
|
||||||
|
scrollyContainers[i].scrolly()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("wheel", () => {
|
||||||
|
for (var i = 0; i < scrollyContainers.length; i++) {
|
||||||
|
scrollyContainers[i].scrolly()
|
||||||
|
}
|
||||||
|
});
|
||||||
BIN
site/res/sitix-large.png
Normal file
BIN
site/res/sitix-large.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
85
site/res/sitix.svg
Normal file
85
site/res/sitix.svg
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="23.8125mm"
|
||||||
|
height="23.8125mm"
|
||||||
|
viewBox="0 0 23.8125 23.8125"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
|
||||||
|
sodipodi:docname="sitix.svg"
|
||||||
|
inkscape:export-filename="sitix-large.png"
|
||||||
|
inkscape:export-xdpi="273.06668"
|
||||||
|
inkscape:export-ydpi="273.06668"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:zoom="2.653101"
|
||||||
|
inkscape:cx="25.065009"
|
||||||
|
inkscape:cy="38.634037"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1011"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="layer1" />
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<ellipse
|
||||||
|
style="fill:#666666;stroke:none;stroke-width:3.565;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
|
||||||
|
id="path4"
|
||||||
|
cx="11.90625"
|
||||||
|
cy="11.906251"
|
||||||
|
rx="10.910029"
|
||||||
|
ry="10.91003" />
|
||||||
|
<g
|
||||||
|
id="g4"
|
||||||
|
transform="matrix(1.000462,0,0,1.012923,-36.389194,-119.32583)"
|
||||||
|
style="stroke-width:0.993371">
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:85.3334px;line-height:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:center;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:middle;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;opacity:1;vector-effect:none;fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-width:4.96687;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
|
||||||
|
x="184.08168"
|
||||||
|
y="520.47266"
|
||||||
|
id="text4"
|
||||||
|
transform="scale(0.26458333)"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan4"
|
||||||
|
x="184.08168"
|
||||||
|
y="520.47266"
|
||||||
|
style="font-style:italic;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:C059;-inkscape-font-specification:'C059 Italic';fill:#ff0000;stroke:#000000;stroke-width:4.96687;stroke-opacity:1">S<tspan
|
||||||
|
style="font-size:64px;fill:#ff0000;stroke:#000000;stroke-width:4.96687;stroke-opacity:1"
|
||||||
|
id="tspan3">i</tspan></tspan></text>
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:85.3334px;line-height:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:center;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:middle;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;opacity:1;vector-effect:none;fill:#f9f9f9;fill-opacity:1;stroke-width:4.96687;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
|
||||||
|
x="184.08168"
|
||||||
|
y="520.47266"
|
||||||
|
id="text1"
|
||||||
|
transform="scale(0.26458333)"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan1"
|
||||||
|
x="184.08168"
|
||||||
|
y="520.47266"
|
||||||
|
style="font-style:italic;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:C059;-inkscape-font-specification:'C059 Italic';fill:#f9f9f9;stroke-width:4.96687">S<tspan
|
||||||
|
style="font-size:64px;fill:#f9f9f9;stroke-width:4.96687"
|
||||||
|
id="tspan2">i</tspan></tspan></text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
49
site/templates/default.html
Normal file
49
site/templates/default.html
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
[?][@on minify]
|
||||||
|
[#config.stx]
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="[^baseurl]/res/main.css">
|
||||||
|
<link rel="stylesheet" href="[^baseurl]/res/lato/lato.css">
|
||||||
|
<title>Sitix |
|
||||||
|
[i exists title]
|
||||||
|
[^title]
|
||||||
|
[e]
|
||||||
|
Untitled Page
|
||||||
|
[/]
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="nav">
|
||||||
|
<a href="[^baseurl]"><img src="[^baseurl]/res/sitix-large.png"/></a>
|
||||||
|
<div>
|
||||||
|
[f pages i]
|
||||||
|
<a href="[^baseurl]/pages/[^i.filename]">[^i.title]</a>
|
||||||
|
[/]
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="main" class="scrolly-container">
|
||||||
|
[^content]
|
||||||
|
</div>
|
||||||
|
<div id="bottom">
|
||||||
|
<div>
|
||||||
|
<a href="[^baseurl]"><img src="[^baseurl]/res/sitix-large.png" /></a>
|
||||||
|
<span>Sitix by Tyler Clarke</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Links
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
More Links
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Information
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="actualbottom">Site designed by Tyler Clarke and built with Sitix.</div>
|
||||||
|
<script src="[^baseurl]/res/main.js"></script>
|
||||||
|
<script src="[^baseurl]/res/scrolly.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user