Compare commits

..

2 Commits

Author SHA1 Message Date
ktyl e9a1291413 update site colours
continuous-integration/drone/push Build is passing Details
2022-12-24 18:12:13 +00:00
ktyl 03c2cec511 wip start improving colours
continuous-integration/drone/push Build is passing Details
2022-12-23 02:16:44 +00:00
195 changed files with 1278 additions and 1157 deletions

View File

@ -6,7 +6,7 @@ steps:
- name: submodules - name: submodules
image: archlinux image: archlinux
commands: commands:
- pacman -Syu --noconfirm git git-lfs >/dev/null - pacman -Sy --noconfirm git git-lfs >/dev/null
- git lfs install - git lfs install
- git submodule update --init --recursive - git submodule update --init --recursive
- cd blog - cd blog
@ -18,7 +18,7 @@ steps:
- name: build - name: build
image: archlinux image: archlinux
environment: environment:
PYTHON_ENV: pyenv python python-pipenv python-setuptools PYTHON_ENV: python python-pipenv python-setuptools
commands: commands:
# set up python # set up python

View File

@ -9,4 +9,4 @@ markdown = "*"
[dev-packages] [dev-packages]
[requires] [requires]
python_version = "3.11" python_version = "3.10"

11
Pipfile.lock generated
View File

@ -1,11 +1,11 @@
{ {
"_meta": { "_meta": {
"hash": { "hash": {
"sha256": "8197b62eaf2c2267235d798d625f266e606263fb3108ba131e012c8ae7814dcd" "sha256": "4f4f4fc0dc77addc9a4bf6c737f31df9507ee22a83548fcff1891a4e7bc27bed"
}, },
"pipfile-spec": 6, "pipfile-spec": 6,
"requires": { "requires": {
"python_version": "3.11" "python_version": "3.10"
}, },
"sources": [ "sources": [
{ {
@ -18,12 +18,11 @@
"default": { "default": {
"markdown": { "markdown": {
"hashes": [ "hashes": [
"sha256:48f276f4d8cfb8ce6527c8f79e2ee29708508bf4d40aa410fbc3b4ee832c850f", "sha256:08fb8465cffd03d10b9dd34a5c3fea908e20391a2a90b88d66362cb05beed186",
"sha256:ed4f41f6daecbeeb96e576ce414c41d2d876daa9a16cb35fa8ed8c2ddfad0224" "sha256:3b809086bb6efad416156e00a0da66fe47618a5d6918dd688f53f40c8e4cfeff"
], ],
"index": "pypi", "index": "pypi",
"markers": "python_version >= '3.8'", "version": "==3.4.1"
"version": "==3.6"
} }
}, },
"develop": {} "develop": {}

2
blog

@ -1 +1 @@
Subproject commit 57cb9a24716d1094c4fc3cb491eec296d7a1dc0d Subproject commit 6dade5c67d76772680b9cc914e7038e3abf5c72f

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1000 B

1
local
View File

@ -8,4 +8,3 @@ make all
sudo rm -r $dest/* sudo rm -r $dest/*
sudo cp -r $outdir/* $dest sudo cp -r $outdir/* $dest
sudo apachectl start

View File

@ -1,62 +1,89 @@
SITE_NAME = ktyl.dev
# configured in ~/.ssh/config
HOST = pluto
# a script on the remote server to move it on arrival
REMOTE_SCRIPT = ./deploy-$(SITE_NAME)
SRC_DIR = src SRC_DIR = src
IMG_DIR = img IMG_DIR = img
OUT_DIR = site OUT_DIR = site
ROOT_DIR = $(SRC_DIR)/root ROOT_DIR = $(SRC_DIR)/root
BLOG_BASE_DIR = blog/ BLOG_SRC_DIR = blog/blogs
BLOG_BUILD_DIR = $(BLOG_BASE_DIR)out/html/
BLOG_OUT_DIR = $(OUT_DIR)/blog BLOG_OUT_DIR = $(OUT_DIR)/blog
BLOG_INDEX = $(BLOG_BUILD_DIR)/index.html BLOG_TMP_DIR = .blogtmp
VN = src/vn/
PAGES = $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.html") PAGES = $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.html")
STYLES = $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.css") STYLES = $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.css")
BLOG_PAGES = $(shell find $(BLOG_SRC_DIR) -wholename "$(BLOG_SRC_DIR)*.md")
BLOG_IMAGES = $(shell find $(BLOG_SRC_DIR) -wholename "$(BLOG_SRC_DIR)*.png" -o -wholename "$(BLOG_SRC_DIR)*.jpg")
IMAGES = $(shell find $(IMG_DIR) -wholename "$(IMG_DIR)/*.png") IMAGES = $(shell find $(IMG_DIR) -wholename "$(IMG_DIR)/*.png")
HTML_INCLUDES = $(shell find $(SRC_DIR)/inc_html -name *.html) HTML_INCLUDES = $(shell find $(SRC_DIR)/inc_html -name *.html)
CSS_INCLUDES = $(shell find $(SRC_DIR)/inc_css -name *.css)
BLOG_INDEX = $(OUT_DIR)/blog.html
BLOG_RSS = $(BLOG_OUT_DIR)/index.xml
BLOG_INDEX_LINKS = $(BLOG_TMP_DIR)/blogindexlinks.html
BLOG_TARGETS = $(BLOG_PAGES:$(BLOG_SRC_DIR)/%.md=$(BLOG_OUT_DIR)/%.html)
BLOG_PNG_TARGETS = $(BLOG_IMAGES:$(BLOG_SRC_DIR)/%.png=$(BLOG_OUT_DIR)/%.png)
BLOG_JPG_TARGETS = $(BLOG_IMAGES:$(BLOG_SRC_DIR)/%.jpg=$(BLOG_OUT_DIR)/%.jpg)
HTML_TARGETS = $(PAGES:$(ROOT_DIR)/%.html=$(OUT_DIR)/%.html) HTML_TARGETS = $(PAGES:$(ROOT_DIR)/%.html=$(OUT_DIR)/%.html)
CSS_TARGETS = $(STYLES:$(ROOT_DIR)/%.css=$(OUT_DIR)/%.css) CSS_TARGETS = $(STYLES:$(ROOT_DIR)/%.css=$(OUT_DIR)/%.css)
PNG_TARGETS = $(IMG_DIR)/%.png=$(OUT_DIR)/%.png PNG_TARGETS = $(IMG_DIR)/%.png=$(OUT_DIR)/%.png
all: html blog vn | $(OUT_DIR)
vn: $(VN) | $(OUT_DIR) all: $(HTML_TARGETS) $(CSS_TARGETS) blog | $(OUT_DIR)
cp -r $(VN) $(OUT_DIR)/vn
html: $(HTML_TARGETS) $(CSS_TARGETS) | $(OUT_DIR)
cp $(IMG_DIR)/*.ico $(OUT_DIR)/
cp $(IMG_DIR)/*.png $(OUT_DIR)/ cp $(IMG_DIR)/*.png $(OUT_DIR)/
cp $(IMG_DIR)/*.jpg $(OUT_DIR)/ cp $(IMG_DIR)/*.jpg $(OUT_DIR)/
$(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES) $(BLOG_INDEX) | $(OUT_DIR) deploy: site
python ppp.py $< $(HTML_INCLUDES) $(BLOG_INDEX) > $@ cp -r $(OUT_DIR) $(SITE_NAME)
rsync -rP $(SITE_NAME) $(HOST):~
rm -r $(SITE_NAME)
ssh $(HOST) "sudo $(REMOTE_SCRIPT)"
$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css | $(OUT_DIR) $(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES) $(BLOG_INDEX_LINKS) | $(OUT_DIR)
cp $< $@ python ppp/ppp.py $< $(HTML_INCLUDES) $(BLOG_INDEX_LINKS) > $@
$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css $(CSS_INCLUDES) | $(OUT_DIR)
python ppp/ppp.py $< $(CSS_INCLUDES) > $@
$(OUT_DIR): $(OUT_DIR):
mkdir -p $@ mkdir -p $@
$(BLOG_INDEX): $(BLOG_OUT_DIR)/%.png: $(BLOG_SRC_DIR)/%.png
mkdir -p $(BLOG_OUT_DIR) cp $< $@
make --directory $(BLOG_BASE_DIR) html
# make blog from submodule and apply site templating $(BLOG_OUT_DIR)/%.jpg: $(BLOG_SRC_DIR)/%.jpg
blog: $(HTML_INCLUDES) $(CSS_TARGETS) cp $< $@
mkdir -p $(BLOG_OUT_DIR)
make --directory $(BLOG_BASE_DIR) html blog: $(BLOG_TARGETS) $(BLOG_PNG_TARGETS) $(BLOG_JPG_TARGETS) $(BLOG_RSS) | $(BLOG_TMP_DIR)
cp -r $(BLOG_BUILD_DIR)/* $(BLOG_OUT_DIR)
for page in `find "$(BLOG_OUT_DIR)" -wholename "*.html"`; do \ $(BLOG_RSS): $(BLOG_PAGES)
python ppp.py $$page $(HTML_INCLUDES) > temp ; \ pipenv run python scripts/mkblogrss.py $(BLOG_PAGES) > $@
mv temp $$page ; \
cp $(CSS_TARGETS) $(IMG_DIR)/*.ico `dirname $$page` ; \ $(BLOG_INDEX_LINKS): $(BLOG_TARGETS) | $(BLOG_TMP_DIR)
done pipenv run python scripts/mkblogindex.py $(BLOG_TARGETS) > $@
$(BLOG_OUT_DIR)/%.html: $(BLOG_OUT_DIR)/%.html.tmp $(HTML_INCLUDES) $(CSS_TARGETS)
python ppp/ppp.py $< $(HTML_INCLUDES) > $@
cp $(CSS_TARGETS) `dirname $@`
rm $<
$(BLOG_OUT_DIR)/%.html.tmp: $(BLOG_SRC_DIR)/%.md | $(BLOG_TMP_DIR)
pipenv run python scripts/mkblog.py $< $@
$(BLOG_OUT_DIR): | $(OUT_DIR)
mkdir -p $@
$(BLOG_TMP_DIR):
mkdir -p $@
clean: clean:
make --directory $(BLOG_BASE_DIR) clean rm -rf $(OUT_DIR) $(BLOG_TMP_DIR)
rm -rf $(OUT_DIR)
.PHONY: blog vn .PHONY: site

1
ppp Submodule

@ -0,0 +1 @@
Subproject commit 45fc27f1a837dfb2536e8a7c50537fc6a8b4cfa4

83
ppp.py
View File

@ -1,83 +0,0 @@
import sys
import os.path
import re
err = False
paths = []
def print_usage():
print("\nusage: python ppp.py ROOT TEMPLATES [...]")
# check arguments
argc = len(sys.argv)
if argc < 3:
print_usage()
sys.exit(1)
includes = sys.argv[2:]
# figure out src dir from root argument
sep="/"
src_dir = sep.join(sys.argv[2].split(sep)[:-1])
# regex patterns
p_var = re.compile(r'(#.+?\.css)')
def preprocess_file(path):
lines=0
with open(path) as f:
content = f.readlines()
content = [x.strip('\n') for x in content]
lines=len(content)
for l in content:
# replace lines that start with #include with the contents of a file
if l.startswith("#include"):
include_path = l.split(" ")[1]
# prepend directory
#include_path = "/".join([src_dir, include_path])
for inc in includes:
if os.path.basename(inc) == include_path:
include_path = inc
break
preprocess_file(include_path)
continue
# inline replace any occurrence of #filename with the contents of that file
match = re.search(p_var, l)
if match:
path = "/".join([src_dir, match.group(0)[1:]])
with open(path) as var_file:
var_content = var_file.read().strip()
l = re.sub(p_var, var_content, l)
print(l)
for i in range(1,argc):
path = sys.argv[i]
if not os.path.isfile(path):
print(path + " is not a file")
err = True
continue
if path in paths:
# ignore duplicates
continue
paths.append(path)
if err:
print_usage()
sys.exit(1)
preprocess_file(sys.argv[1])
sys.exit(0)

86
scripts/mkblog.py Normal file
View File

@ -0,0 +1,86 @@
#!/usr/bin/env python
import os
import sys
import markdown
import re
# SRC
# +-2022/
# | +-10/
# | +-12/
# | +-25/
# +-2023/
# | +-1/
# | +-26/
# | +-3/
# ...
def print_usage():
print("\nusage: python mkblog.py SRC DEST\n")
print("\n")
print("\t\tSRC\tinput markdown file")
print("\t\tDEST\tdestination html file")
# check args
if len(sys.argv) != 3:
print_usage()
sys.exit(1)
src_file = sys.argv[1]
dest_file = sys.argv[2]
# check blog root exists
if not os.path.isfile(src_file):
print("{blog_root} doesn't exist")
sys.exit(1)
# make dest dir if it doesnt exist
dest_dir = os.path.dirname(dest_file)
print(dest_dir)
if not os.path.isdir(dest_dir):
os.makedirs(dest_dir)
# write markdown into a dummy file first so that we can add lines before it in the final output
dummy_file = f"{dest_file}.bak"
open(dummy_file, 'w').close()
print(f"{src_file} -> {dummy_file}")
markdown.markdownFromFile(input=src_file, output=dummy_file, extensions=["fenced_code"])
print(f"{dummy_file} -> {dest_file}")
with open(dummy_file, 'r') as read_file, open(dest_file, 'w') as write_file:
write_file.write("#include blogstart.html\n")
# modify the basic html to make it nicer for styling later
html = read_file.read()
# extract images from their enclosing <p> tags and put them in img panels
html = re.sub('(<p>(<img(?:.+)/>)</p>)', r'<div class="img-panel">\2</div>', html)
# insert text-panel start between non-<p> and <p> elements
html = re.sub('((?<!</p>)\n)(<p>)', r'\1<div class="text-panel">\n\2', html)
# insert para-block end between <p> and non-<p> elements
html = re.sub('(</p>\n)((?!<p>))', r'\1</div>\n\2', html)
# insert code-panel start before <pre> elements
html = re.sub('(<pre>)', r'<div class="code-panel">\n\1', html)
# insert code-panel end after </pre> elements
html = re.sub('(</pre>)', r'\1\n</div>', html)
# replace horizontal rules with nice separator dot
html = re.sub('<hr />', r'<div class="separator"></div>', html)
lines = html.split("\n")
# tack on a closing div because we will have opened one without closing it on the final <p>
lines.append("</div>")
for line in lines:
write_file.write(line + "\n")
write_file.write("\n#include blogend.html\n")
os.remove(dummy_file)

59
scripts/mkblogindex.py Normal file
View File

@ -0,0 +1,59 @@
#!/usr/bin/env python3
import sys
import re
# we expect the arguments to be filepaths to each blog post
def print_usage():
print("\nusage: python mkblogindex.py POSTS\n")
print("\n")
print("\t\tPOSTS\tfilepaths of blog posts")
# check args for at least one file path
if len(sys.argv) < 2:
print_usage()
sys.exit(1)
# posts are arguments from index 1 onwards
posts = sys.argv[1:]
dir_pattern = re.compile("(.+)/(blog\/.+\.html)")
path_pattern = re.compile("(.+)\/(\d{4})\/(\d{1,2})\/(\d{1,2})\/(.+).html")
title_pattern = re.compile("<h1>(.+)</h1>")
# filter posts to just those with a date in them
posts = [p for p in posts if path_pattern.match(p)]
posts.reverse()
links = []
# for each file we want to output an <a> tag with a relative href to the site root
for path in posts:
m = re.match(path_pattern, path)
year = m.group(2)
month = m.group(3).rjust(2, '0')
day = m.group(4).rjust(2, '0')
date = f'<span class="post-date">{year}-{month}-{day}</span>'
title = ""
with open(path) as f:
for line in f:
if title_pattern.match(line):
title = re.sub(title_pattern, r'<span class="post-title">\1</span>', line).strip()
break
# clean leading directories to get the relative path we'll use for the link
url = re.sub(dir_pattern, r"\2", path)
item = (date, f'<li><a href="{url}">{date}{title}</a></li>')
links.append(item)
# make sure we're properly ordered in reverse date order lol
links = sorted(links, key=lambda x: x[0])
links.reverse()
for l in links:
print(l[1])

76
scripts/mkblogrss.py Normal file
View File

@ -0,0 +1,76 @@
#!/usr/bin/env python3
import markdown
import pathlib
import sys
import re
def print_usage():
print("\nusage: python mkblogrss.py POSTS\n")
print("\n")
print("\t\tPOSTS\tfilepaths of blog posts")
# check args for at least one file path
if len(sys.argv) < 2:
print_usage()
sys.exit(1)
# posts are arguments from index 1 onwards
posts = sys.argv[1:]
# header and footer to enclose feed items
header = """<?xml version="1.0" encoding="utf-8" ?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
<channel>
<title>ktyl.dev</title>
<link>https://ktyl.dev/blog/index.html</link>
<description>mostly computer stuff!</description>
<atom:link href="https://ktyl.dev/blog/index.xml" rel="self" type="application/rss+xml"/>
"""
footer = "</channel></rss>"
# regex patterns
title_pattern = re.compile("<h1>(.+)</h1>")
path_pattern = re.compile("(.+)\/(\d{4})\/(\d{1,2})\/(\d{1,2})\/(.+).md")
def make_item(path):
str = "<item>\n"
# get the HTML version of the file
text = ""
with open(path) as f:
text = f.read()
html = markdown.markdown(text, extensions=["fenced_code"])
# title
title = ""
m = title_pattern.match(html)
title = m.group(1)
str += f"<title>{title}</title>\n"
# link
url = "/".join(pathlib.Path(path).parts[2:])
url = url.replace(".md", ".html")
link = f"https://ktyl.dev/blog/{url}"
str += f"<link>{link}</link>\n"
# content
description = html
description = re.sub('<', '&lt;', description)
description = re.sub('>', '&gt;', description)
str += f"<description>{description}</description>\n"
# pub date
date = re.sub(path_pattern, r'\2-\3-\4', path)
str += f"<pubDate>{date}</pubDate>\n"
str += "</item>"
return str
# print everything!
print(header)
for p in posts:
print(make_item(p))
print(footer)

24
src/inc_css/about.css Normal file
View File

@ -0,0 +1,24 @@
.pfp {
position: relative;
top: 3em;
left: 50%;
width: 20em;
height: 20em;
text-align: center;
overflow: hidden;
border-color: var(--background-alt);
border-style: solid;
border-width: 3px;
border-radius: 50%;
transform: translate(-50%, 0);
margin-bottom: 4em;
}
.pfp img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
transform: translate(-50%, -50%);
}

118
src/inc_css/blog.css Normal file
View File

@ -0,0 +1,118 @@
.page .blog {
}
.page .blog h1 {
font-size: 2.5em;
}
.page .blog .para-block {
color: var(--foreground-inactive);
font-size: 1.1em;
line-height: 1.25em;
background-color: var(--background);
border-color: var(--background-alt);
border-width: 3px;
border-radius: 2em;
border-style: solid;
padding: 1.0em 1.5em;
}
.page .blog .code-panel {
color: var(--lighter);
background-color: var(--darker);
font-size 1.5em;
line-height: 1.3em;
border-color: var(--light);
border-radius: 2em;
border-style: solid;
padding: 1.0em 2.0em;
margin: 2.5em -4.0em;
overflow: hidden;
}
.page .blog .code-panel pre {
overflow: scroll;
}
.page .blog .code-panel pre::-webkit-scrollbar {
height: 0;
width: 0;
background: transparent;
}
.page .blog .separator {
margin: 2em;
}
.page .blog p code {
height: 0.8em;
padding: 0.07em 0.25em;
margin: 0 0.1em;
border-radius: .3em;
}
ul.blog-index li {
display: block;
margin: .2em 0;
}
ul.blog-index li a {
color: var(--darker);
transition: none;
text-decoration: none;
}
.blog-index li a:visited {
color: var(--light);
}
.blog-index li a:hover {
color: var(--accent);
}
.blog-index .post-date {
padding-right: .3em;
left: -1.9em;
position: relative;
}
.blog-index .post-date:hover {
color: var(--accent);
}
.page .blog .img-panel
{
margin-top: 2em;
margin-bottom: 2em;
}
.page .blog .img-panel img {
position: relative;
width: 120%;
max-width: 100vw;
left: -10%;
border-radius: 2em;
}
@media only screen and (max-width: 700px) {
.page .blog .code-panel {
padding: 1.0em 5.0em;
}
.page .blog .img-panel img {
width: 100%;
left: 0;
border-radius: 0;
}
}

18
src/inc_css/demos.css Normal file
View File

@ -0,0 +1,18 @@
.demoTile {
opacity: 0.3;
transition: opacity 0.3s;
max-width: 15vw;
display: inline-block;
}
.demoTile:hover {
opacity: 1.0;
}
.demoTiles {
position: absolute;
background-color:white;
left:27.5%;
top: var(--title-height);
margin-top:40px;
}

11
src/inc_css/footer.css Normal file
View File

@ -0,0 +1,11 @@
.footer {
position: relative;
}
.footer span {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
color: var(--clear);
padding: 2em;
}

107
src/inc_css/gallery.css Normal file
View File

@ -0,0 +1,107 @@
.page.portfolio {
padding-top: 2em;
width: 50%;
margin-left:auto;
margin-right:auto;
transform: translate(-50%,0);
color: var(--darker);
}
.portfolio p {
margin: 1.2em 0 2em;
text-align: center;
border-style: none;
background-color: var(--clear);
}
/* gallery img */
.wrapper {
margin-top: 1em;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-color: var(--light);
border-style: solid;
border-radius: 1em;
border-width: 3px;
overflow: hidden;
}
.wrapper .imgHolder {
position: relative;
width: 100%;
height: 100%;
}
.wrapper img {
pointer-events: none;
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
left: auto;
right: auto;
transition: all 0.2s ease-out;
}
.wrapper .imgHolder span {
position:absolute;
top:100%;
width:100%;
transform: translateY(-50%) scale(0.6);
text-align: center;
opacity: 0;
transition: all 0.3s;
color: var(--accent);
}
.wrapper .imgHolder span p {
padding:0;
margin:0;
opacity: 1;
color: var(--background);
}
.lightTileText {
color: var(--background);
}
.wrapper .imgHolder a {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}
@media only screen and (max-width: 600px) {
.page.portfolio {
width: 100%;
}
.wrapper .imgHolder {
overflow: hidden;
}
.wrapper .imgHolder span {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
transform: none;
}
.icon-link {
display: none;
}
}

66
src/inc_css/landing.css Normal file
View File

@ -0,0 +1,66 @@
.landing {
margin-top: 10%;
text-align: center;
}
.landing a {
color: var(--foreground);
font-size: 2em;
transform: translate(0,50%);
transition: all 0.3s;
}
.landing a:hover {
color: var(--accent);
}
.landing ul {
width: 100%;
padding: .5em 0 0;
margin: 0;
}
.landing li a {
position: relative;
font-size: 3.0em;
margin: 0 .2em;
color: var(--darker);
}
.landing li a:hover {
transform: translateY(-10%);
color: var(--accent);
}
.landing .socials {
position: relative;
top: 1em;
left: auto;
right: auto;
text-align: center;
}
.landing .socials i {
font-size: 2.5em;
padding: 0 .07em;
}
@media only screen and (max-width: 600px) {
.landing.page {
position: fixed;
margin: 0;
padding: 0;
height: 100%;
}
.landing.page .socials {
top: .5em;
bottom: 0;
}
.landing.page .socials i {
font-size: 3em;
}
}

113
src/inc_css/nav.css Normal file
View File

@ -0,0 +1,113 @@
.nav {
position: fixed;
width: max(11vmax, 300px);
top: 0;
bottom:0;
padding-top: 2em;
padding-left: 2em;
color: var(--darker);
}
.nav-links {
position: relative;
padding-top: 1.8em;
padding-bottom: 1em;
padding-left:0;
width: 80%;
}
ul.nav-links {
margin-top: 0;
list-style-type: none;
}
.nav .nav-links li {
display: block;
font-size: 1.6em;
line-height: 2em;
}
/*
.nav li a::before {
content: "/";
}
*/
.nav li a {
display: block;
padding: 2px;
background-color: var(--clear);
transition: background-color 0.5s;
}
.nav li a:hover {
color: var(--accent);
}
@media only screen and (max-width: 1200px) {
.nav .socials a {
padding: .2em 0;
display: block;
text-align: center;
}
}
@media only screen and (max-width: 1000px) {
.nav {
background-color: var(--light);
position: fixed;
width: 100%;
padding: 0;
z-index: 1;
top: 0;
height: 3em;
border-bottom: 3px solid var(--darker);
}
.nav .title {
padding-top: .6em;
padding-left: .6em;
height: 2em;
}
.nav .nav-links {
position: absolute;
top: 0;
right: 0;
padding: 0;
padding-right: 0.8em;
float: right;
text-align: right;
width: auto;
}
.nav .nav-links li {
display: inline-block;
}
.nav .nav-links li a::before {
content: "";
}
.nav .pageTitle {
display: none;
}
.nav .socials {
position: fixed;
left: .5em;
bottom: .5em;
}
}
@media only screen and (max-width: 700px) {
.nav .socials {
display: none;
}
}

1
src/inc_css/or_earth.css Normal file
View File

@ -0,0 +1 @@
440px

1
src/inc_css/or_mars.css Normal file
View File

@ -0,0 +1 @@
570px

View File

@ -0,0 +1 @@
180px

1
src/inc_css/or_venus.css Normal file
View File

@ -0,0 +1 @@
320px

View File

@ -0,0 +1 @@
0.2rem

78
src/inc_css/page.css Normal file
View File

@ -0,0 +1,78 @@
.page {
position: absolute;
width: max(30vmax,500px);
left:50%;
top:0;
padding: 0px 0 50px;
padding-top: 5vh;
transform: translate(-50%, 0);
}
.page .separator {
position: relative;
background-color: var(--dark);
width: .35em;
height: .35em;
left: 50%;
border-radius: 100%;
transform: translateX(-50%);
}
.page a {
color: var(--accent);
transition: all 0.1s;
}
.page a:hover {
color: var(--light);
}
.page .text-panel {
margin: 0;
margin-left: -1.5em;
padding: .2em 1.3em;
color: var(--darker);
font-size: 1.1em;
line-height: 1.25em;
background-color: var(--lighter);
border-radius: 1.5em;
width: 100%;
border-color: var(--darker);
border-width: 3px;
border-style: solid;
}
.page h1, h2 {
color: var(--darker);
font-size: 1.7em;
margin-top: 1.2em;
padding: 0.2em 0.4em;
text-align: center;
}
@media (max-width: 700px) {
.page {
margin-top: 2.5em;
width: 100%;
padding: 0;
overflow: hidden;
}
.page .text-panel p {
padding: 0 .5em;
margin-right: .5em;
}
}

221
src/inc_css/planets.css Normal file
View File

@ -0,0 +1,221 @@
.planets {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
right: 0;
bottom: 0;
z-index: -1;
background-color: transparent;
}
@media only screen and (max-width: 600px) {
.planets {
height: 200vmax;
width: 200vmax;
transform: scale(0.5) translate(50%, 50%);
}
}
.planet {
background-color: var(--light);
position: absolute;
border-radius: 50%;
display: inline-block;
width: var(--radius);
height: var(--radius);
}
.orbit {
position: absolute;
border: #orbit_thickness.css solid var(--light);
border-radius: 100%;
background-color: transparent;
z-index:-1;
}
@-webkit-keyframes orbit_mercury {
from { -webkit-transform: rotate(360deg) translateX(#or_mercury.css) rotate(360deg); }
to { -webkit-transform: rotate(0deg) translateX(#or_mercury.css) rotate(0deg); }
}
@-moz-keyframes orbit_mercury {
from { -moz-transform: rotate(360deg) translateX(#or_mercury.css) rotate(360deg); }
to { -moz-transform: rotate(0deg) translateX(#or_mercury.css) rotate(0deg); }
}
@-o-keyframes orbit_mercury {
from { -o-transform: rotate(360deg) translateX(#or_mercury.css) rotate(360deg); }
to { -o-transform: rotate(0deg) translateX(#or_mercury.css) rotate(0deg); }
}
@keyframes orbit_mercury {
from { transform: rotate(360deg) translateX(#or_mercury.css) rotate(360deg); }
to { transform: rotate(0deg) translateX(#or_mercury.css) rotate(0deg); }
}
#mercury {
--period: 4.82s;
--radius: 30px;
width: var(--radius);
height: var(--radius);
right: #solposx.css;
bottom: #solposy.css;
-webkit-animation: orbit_mercury var(--period) linear infinite;
-moz-animation: orbit_mercury var(--period) linear infinite;
-o-animation: orbit_mercury var(--period) linear infinite;
animation: orbit_mercury var(--period) linear infinite;
}
#mercury-orbit {
--orbit-radius: #or_mercury.css;
--planet-radius: #pr_mercury.css;
--orbit-thickness: #orbit_thickness.css;
--diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
right: #solposx.css;
bottom: #solposy.css;
transform: translate(#or_mercury.css, #or_mercury.css);
width: var(--diameter);
height: var(--diameter);
}
@-webkit-keyframes orbit_venus {
from { -webkit-transform: rotate(360deg) translateX(#or_venus.css) rotate(360deg); }
to { -webkit-transform: rotate(0deg) translateX(#or_venus.css) rotate(0deg); }
}
@-moz-keyframes orbit_venus {
from { -moz-transform: rotate(360deg) translateX(#or_venus.css) rotate(360deg); }
to { -moz-transform: rotate(0deg) translateX(#or_venus.css) rotate(0deg); }
}
@-o-keyframes orbit_venus {
from { -o-transform: rotate(360deg) translateX(#or_venus.css) rotate(360deg); }
to { -o-transform: rotate(0deg) translateX(#or_venus.css) rotate(0deg); }
}
@keyframes orbit_venus {
from { transform: rotate(360deg) translateX(#or_venus.css) rotate(360deg); }
to { transform: rotate(0deg) translateX(#or_venus.css) rotate(0deg); }
}
#venus {
--period: 12.3s;
--radius: #pr_venus.css;
width: var(--radius);
height: var(--radius);
right: #solposx.css;
bottom: #solposy.css;
-webkit-animation: orbit_venus var(--period) linear infinite;
-moz-animation: orbit_venus var(--period) linear infinite;
-o-animation: orbit_venus var(--period) linear infinite;
animation: orbit_venus var(--period) linear infinite;
}
#venus-orbit {
--orbit-radius: #or_venus.css;
--planet-radius: #pr_venus.css;
--orbit-thickness: #orbit_thickness.css;
--diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
right: #solposx.css;
bottom: #solposy.css;
transform: translate(#or_venus.css, #or_venus.css);
width: var(--diameter);
height: var(--diameter);
}
@-webkit-keyframes orbit_earth {
from { -webkit-transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); }
to { -webkit-transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); }
}
@-moz-keyframes orbit_earth {
from { -moz-transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); }
to { -moz-transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); }
}
@-o-keyframes orbit_earth {
from { -o-transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); }
to { -o-transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); }
}
@keyframes orbit_earth {
from { transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); }
to { transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); }
}
#earth {
--period: 20s;
--radius: #pr_earth.css;
width: var(--radius);
height: var(--radius);
right: #solposx.css;
bottom: #solposy.css;
-webkit-animation: orbit_earth var(--period) linear infinite;
-moz-animation: orbit_earth var(--period) linear infinite;
-o-animation: orbit_earth var(--period) linear infinite;
animation: orbit_earth var(--period) linear infinite;
}
#earth-orbit {
--orbit-radius: #or_earth.css;
--planet-radius: #pr_earth.css;
--orbit-thickness: #orbit_thickness.css;
--diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
right: #solposx.css;
bottom: #solposy.css;
transform: translate(#or_earth.css, #or_earth.css);
width: var(--diameter);
height: var(--diameter);
}
@-webkit-keyframes orbit_mars {
from { -webkit-transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
to { -webkit-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
}
@-moz-keyframes orbit_mars {
from { -moz-transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
to { -moz-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
}
@-o-keyframes orbit_mars{
from { -o-transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
to { -o-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
}
@keyframes orbit_mars {
from { transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
to { transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
}
#mars {
--period: 37.6s;
--radius: #pr_mars.css;
width: var(--radius);
height: var(--radius);
right: #solposx.css;
bottom: #solposy.css;
-webkit-animation: orbit_mars var(--period) linear infinite;
-moz-animation: orbit_mars var(--period) linear infinite;
-o-animation: orbit_mars var(--period) linear infinite;
animation: orbit_mars var(--period) linear infinite;
}
#mars-orbit {
--orbit-radius: #or_mars.css;
--planet-radius: #pr_mars.css;
--orbit-thickness: #orbit_thickness.css;
--diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
right: #solposx.css;
bottom: #solposy.css;
transform: translate(#or_mars.css, #or_mars.css);
width: var(--diameter);
height: var(--diameter);
}

1
src/inc_css/pr_earth.css Normal file
View File

@ -0,0 +1 @@
30px

1
src/inc_css/pr_mars.css Normal file
View File

@ -0,0 +1 @@
30px

View File

@ -0,0 +1 @@
30px

1
src/inc_css/pr_venus.css Normal file
View File

@ -0,0 +1 @@
30px

23
src/inc_css/socials.css Normal file
View File

@ -0,0 +1,23 @@
.socials {
position: absolute;
background-color: var(--clear);
bottom: 1.6em;
}
.socials i {
font-size: 2.0em;
padding-right: .1em;
color: var(--darker);
transition: color 0.3s;
}
.socials i:hover {
color: var(--accent);
}
.socials a {
text-decoration: none;
transition: color 0.3s;
}

1
src/inc_css/solposx.css Normal file
View File

@ -0,0 +1 @@
0

1
src/inc_css/solposy.css Normal file
View File

@ -0,0 +1 @@
0

19
src/inc_css/title.css Normal file
View File

@ -0,0 +1,19 @@
.title {
font-size: 1em;
position: relative;
bottom: 0.25em;
}
.title h1 {
margin: 0;
}
.title a {
transition: all 0.1s ease-in;
color: var(--darker);
}
.title a:hover {
color: var(--accent);
}

View File

@ -1,4 +1,7 @@
</div> </div>
#include footer.html
</div> </div>
#include planets.html #include planets.html

3
src/inc_html/footer.html Normal file
View File

@ -0,0 +1,3 @@
<div class="footer">
<span>© Cat Flynn 2021-2022</span>
</div>

View File

@ -6,7 +6,6 @@
<meta name="keywords" content="Cat Flynn, Ktyl, Portfolio, Showreel, Blog, Gallery"/> <!-- blog, gallery --> <meta name="keywords" content="Cat Flynn, Ktyl, Portfolio, Showreel, Blog, Gallery"/> <!-- blog, gallery -->
<link rel="canonical" href="https://ktyl.dev/"> <link rel="canonical" href="https://ktyl.dev/">
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<script src="https://kit.fontawesome.com/ad50bb2e16.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/ad50bb2e16.js" crossorigin="anonymous"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> --> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->

View File

@ -1,5 +1,5 @@
<ul class="nav-links"> <ul class="nav-links">
<li><a href="/blog.html">blog</a></li> <li><a href="/about.html" class="fsText">about</a></li>
<li><a href="/gallery.html">gallery</a></li> <li><a href="/blog.html" class="fsText">blog</a></li>
<li><a href="/vn/books.html">vn</a></li> <li><a href="/gallery.html" class="fsText">gallery</a></li>
</ul> </ul>

View File

@ -1,2 +1,2 @@
<div class="title"> <div class="title">
<h1><a href="https://ktyl.dev/">ktyl.dev</a><span class="pageTitle"> <h1 class="fsText"><a href="https://ktyl.dev/">ktyl.dev</a><span class="pageTitle">

65
src/root/about.html Normal file
View File

@ -0,0 +1,65 @@
<!doctype html>
<html>
#include header.html
<body>
<title>ktyl ~ about</title>
<div class="nav">
#include titlestart.html
/about
#include titleend.html
#include nav.html
#include socials.html
</div>
<div class="page">
<div class="pfp">
<img src="pfp.jpg"></img>
</div>
<h1>Hi, I'm Cat</h1>
<div class="text-panel">
<p>
I am an engineer/artist exploring human technology.
</p>
<div class="separator"></div>
<p>
In my day job I find novel uses for interactive, immersive and games technology for training and simulation.
I am passionate about free and open source software, and the importance of developing tools that serve everyone.
</p>
<p>
I tinker for fun and when I can, make things inspired by physics, the universe and boundaries, physical, imagined or otherwise.
I am currently most enamoured by optics, orbital mechanics and relativity.
</p>
<p>
Besides computing, I like caring for my plants, photography, and studying language, culture and philosophy.
I explore fashion, makeup, gender expression and regularly see live music.
</p>
<div class="separator"></div>
<p>
For inquiries, professional or otherwise, please <a href="mailto:me@ktyl.dev">send me an email</a>!
</p>
</div>
#include footer.html
</div>
#include planets.html
</body>
</html>

View File

@ -19,17 +19,15 @@
<h1>Just Testing</h1> <h1>Just Testing</h1>
<div class="text-panel"> <div class="text-panel">
<p><span>Hello, World! Opinions are my own. Content subject to change. Updates published to my <a href="https://ktyl.dev/blog/index.xml">RSS feed</a>!</span></p>
</div>
<div class="separator"></div>
<div class="text-panel">
<ul class="blog-index"> <ul class="blog-index">
#include index.html #include blogindexlinks.html
</ul> </ul>
</div> </div>
#include footer.html
</div> </div>
#include planets.html #include planets.html

View File

@ -1,21 +1,8 @@
:root { :root {
/* Special */ --lighter: #eee;
--background: #eee; --light: #aaa;
--background-alt: #b8b8b8; --dark: #888;
--foreground: #444; --darker: #383838;
--foreground-inactive: #777; --accent: #d522ae;
--accent: #ff369a;
--clear: rgba(0,0,0,0); --clear: rgba(0,0,0,0);
/* Colors */
--color0: #0000ff;
--color1: #00ff00;
--color2: #ff0000;
--color3: #ff00ff;
--color4: #ffff00;
--color5: #00ffff;
/* TODO: extract general varibles file ? */
/* Text */
--font-size: 1.4em;
} }

17
src/root/contact Normal file
View File

@ -0,0 +1,17 @@
<!doctype html>
<html>
#include header.html
<body>
#include titlestart.html
/contact
#include titleend.html
#include sidebar.html
#include planets.html
</body>
</html>

View File

@ -156,6 +156,9 @@
</div> </div>
</div> </div>
#include footer.html
</div> </div>
#include planets.html #include planets.html

View File

@ -2,457 +2,21 @@
:root { :root {
--title-height: min(20vmin, 90px); --title-height: min(20vmin, 90px);
--orbit-thickness: 0.2em;
--sol-pos-x: 0;
--sol-pos-y: 0;
} }
body { body {
font-family: sans-serif; font-family: sans-serif;
margin: 0; margin: 0;
background-color: var(--background); background-color: var(--dark);
} }
.title { #include title.css
font-size: 1em; #include nav.css
} #include page.css
#include landing.css
.title h1 { #include blog.css
font-size: 1.4em; #include about.css
padding-bottom: 0;
margin-bottom:0;
margin-top:0;
}
.title a {
transition: all 0.1s ease-in;
color: var(--foreground-active);
}
.title a:hover {
color: var(--accent);
transform: translateY(50%);
}
.pageTitle {
margin-left: -0.15em;
color: var(--foreground-inactive);
}
.nav {
position: fixed;
width: max(11vmax, 200px);
top: 0;
bottom:0;
padding-top: 2em;
padding-left: 2em;
background-color: var(--background);
color: var(--foreground);
}
.nav-links {
position: relative;
padding-top: 2em;
padding-bottom: 1em;
padding-left:0;
width: 80%;
}
ul.nav-links {
margin-top: 0;
list-style-type: none;
}
.nav .nav-links li {
display: block;
margin-bottom: 0.8em;
}
.nav .nav-links li a {
color: var(--foreground-inactive);
font-size: 1.4em;
display: block;
}
.nav li a::before {
content: "/";
}
.nav li a {
display: block;
padding: 2px;
background-color: var(--clear);
transition: background-color 0.5s;
}
.nav li a:hover {
color: var(--accent);
}
@media only screen and (max-width: 1200px) {
.nav .socials a {
padding: .2em 0;
display: block;
text-align: center;
}
}
@media only screen and (max-width: 1000px) {
.nav {
position: fixed;
width: 100%;
padding: 0;
z-index: 1;
top: 0;
height: 3em;
border-bottom: 3px solid var(--background-alt);
}
.nav .title {
padding-top: .6em;
padding-left: .6em;
height: 2em;
}
.nav .nav-links {
position: absolute;
top: 0;
right: 0;
padding: .6em .6em 0 0;
float: right;
text-align: right;
width: auto;
}
.nav .nav-links li {
display: inline-block;
}
.nav .nav-links li a::before {
content: "";
}
.nav .pageTitle {
display: none;
}
.nav .socials {
position: fixed;
left: .5em;
bottom: .5em;
}
}
@media only screen and (max-width: 700px) {
.nav .socials {
display: none;
}
}
.page {
position: absolute;
width: max(30vmax,500px);
left:50%;
top:0;
padding: 0px 0 50px;
padding-top: 5vh;
transform: translate(-50%, 0);
}
.page .separator {
position: relative;
background-color: var(--foreground-inactive);
width: .35em;
height: .35em;
left: 50%;
border-radius: 100%;
transform: translateX(-50%);
}
.page a {
color: var(--accent);
transition: all 0.1s;
}
.page a:hover {
color: var(--foreground);
}
.page .text-panel {
margin: 0;
margin-left: -1.5em;
padding: .2em 1.3em;
color: var(--foreground-inactive);
font-size: 1.1em;
/*font-weight: bold;*/
line-height: 1.25em;
background-color: var(--background);
border-radius: 1.5em;
width: 100%;
border-color: var(--background-alt);
border-width: 3px;
border-style: solid;
}
.page h1, h2 {
color: var(--foreground-inactive);
font-size: 1.7em;
margin-top: 1.2em;
padding: 0.2em 0.4em;
text-align: center;
}
@media (max-width: 700px) {
.page {
margin-top: 2.5em;
width: 100%;
padding: 0;
overflow: hidden;
}
.page .text-panel p {
padding: 0 .5em;
margin-right: .5em;
}
}
.landing {
margin-top: 10%;
text-align: center;
}
.landing a {
color: var(--foreground-inactive);
font-size: 2em;
transform: translate(0,50%);
transition: all 0.3s;
}
.landing a:hover {
color: var(--accent);
}
.landing ul {
width: 100%;
padding: .5em 0 0;
margin: 0;
}
.landing li a {
position: relative;
font-size: 2.5em;
margin: 0 .2em;
color: var(--foreground-inactive);
}
.landing li a:hover {
transform: translateY(-10%);
color: var(--accent);
}
.landing .socials {
position: relative;
background-color: var(--clear);
top: 1em;
left: auto;
right: auto;
text-align: center;
}
.landing .socials i {
color: var(--foreground-inactive);
padding: 0 .07em;
}
@media only screen and (max-width: 600px) {
.landing.page {
position: fixed;
margin: 0;
padding: 0;
height: 100%;
}
.landing.page .socials {
top: .5em;
bottom: 0;
}
.landing.page .socials i {
font-size: 3em;
}
}
.page .blog {
}
.page .blog h1 {
font-size: 2.5em;
}
.page .blog .para-block {
color: var(--foreground-inactive);
font-size: 1.1em;
line-height: 1.25em;
background-color: var(--background);
border-color: var(--background-alt);
border-width: 3px;
border-radius: 2em;
border-style: solid;
padding: 1.0em 1.5em;
}
.page .blog .text-panel ul li {
display: block;
}
.page .blog .text-panel ul li::before {
content: "• "
}
.page .blog .code-panel {
color: var(--background);
background-color: var(--foreground);
font-size 1.5em;
line-height: 1.3em;
border-color: var(--accent);
border-width: 2px;
border-radius: 2em;
border-style: solid;
padding: 1.0em 2.0em;
margin: 2.5em -4.0em;
overflow: hidden;
}
.page .blog .code-panel pre {
overflow: scroll;
}
.page .blog .code-panel pre::-webkit-scrollbar {
height: 0;
width: 0;
background: transparent;
}
.page .blog p code {
height: 0.8em;
padding: 0.07em 0.25em;
margin: 0 0.1em;
background-color: var(--foreground-inactive);
color: var(--background);
border-radius: .3em;
}
ul.blog-index li {
display: block;
margin: .2em 0;
}
ul.blog-index li a {
color: var(--foreground-inactive);
transition: none;
text-decoration: none;
}
.blog-index li a:hover {
color: var(--accent);
}
.blog-index li a:visited {
color: var(--foreground);
}
.page ul.blog-index li a::before {
content: "• "
}
.blog-index .post-date {
padding-right: 1em;
}
.page .blog .img-panel
{
margin-top: 2em;
margin-bottom: 2em;
}
.page .blog .img-panel img {
position: relative;
width: 120%;
max-width: 100vw;
left: -10%;
border-radius: 2em;
}
@media only screen and (max-width: 700px) {
.page .blog .code-panel {
padding: 1.0em 5.0em;
}
.page .blog .img-panel img {
width: 100%;
left: 0;
border-radius: 0;
}
}
.pfp {
position: relative;
top: 3em;
left: 50%;
width: 20em;
height: 20em;
text-align: center;
overflow: hidden;
border-color: var(--background-alt);
border-style: solid;
border-width: 3px;
border-radius: 50%;
transform: translate(-50%, 0);
margin-bottom: 4em;
}
.pfp img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
transform: translate(-50%, -50%);
}
li { li {
display:inline; display:inline;
@ -460,390 +24,11 @@ li {
a { a {
text-decoration: none; text-decoration: none;
color: var(--foreground); color: var(--darker);
transition: color 0.2s;
} }
.separator { #include socials.css
margin-top: 2em; #include gallery.css
margin-bottom: 2em; #include planets.css
} #include footer.css
.socials {
position: absolute;
background-color:var(--background);
bottom: 1.6em;
}
.socials i {
font-size: 2.0em;
padding-right: .1em;
color: var(--foreground-inactive);
transition: color 0.3s;
}
.socials i:hover {
color: var(--accent);
}
.socials a {
text-decoration: none;
transition: color 0.3s;
}
.page.portfolio {
padding-top: 0;
width: 50%;
margin-left:auto;
margin-right:auto;
transform: translate(-50%,0);
}
.portfolio p {
margin: 1.2em 0 2em;
text-align: center;
border-style: none;
background-color: var(--clear);
}
.glass {
padding: 0.4em 0.6em;
color: var(--foreground-inactive);
background-color: var(--background);
opacity:0.9;
border-style:solid;
border-radius:2em;
border-color:var(--clear);
}
/* gallery img */
.wrapper {
margin-top: 1em;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.wrapper .imgHolder {
position: relative;
width: 100%;
height: 100%;
}
.wrapper img {
pointer-events: none;
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
left: auto;
right: auto;
transition: all 0.2s ease-out;
}
.wrapper .imgHolder span {
position:absolute;
top:100%;
width:100%;
transform: translateY(-50%) scale(0.6);
text-align: center;
opacity: 0;
transition: all 0.3s;
color: var(--accent);
}
.wrapper .imgHolder span p {
padding:0;
margin:0;
opacity: 1;
color: var(--background);
}
.lightTileText {
color: var(--background);
}
.wrapper .imgHolder a {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}
@media only screen and (max-width: 600px) {
.page.portfolio {
width: 100%;
}
.wrapper .imgHolder {
overflow: hidden;
}
.wrapper .imgHolder span {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
transform: none;
}
.icon-link {
display: none;
}
.wrapper .imgHolder span i {
/*display: none;*/
}
}
.planets {
overflow: hidden;
position: fixed;
height: 80vmax;
width: 80vmax;
right: 0;
bottom: 0;
z-index: -1;
/*background-color: var(--background);*/
background-color: transparent;
}
@media only screen and (max-width: 600px) {
.planets {
height: 200vmax;
width: 200vmax;
transform: scale(0.5) translate(50%, 50%);
}
}
.planet {
position: absolute;
border-radius: 50%;
display: inline-block;
width: var(--radius);
height: var(--radius);
}
.orbit {
position: absolute;
border-radius: 100%;
background-color: transparent;
z-index:-1;
}
:root {
--mercury-orbit-radius: 180px;
--venus-orbit-radius: 320px;
--earth-orbit-radius: 440px;
--mars-orbit-radius: 570px;
--planet-radius: 30px;
}
@-webkit-keyframes orbit_mercury {
from { -webkit-transform: rotate(360deg) translateX(var(--mercury-orbit-radius)) rotate(360deg); }
to { -webkit-transform: rotate(0deg) translateX(var(--mercury-orbit-radius)) rotate(0deg); }
}
@-moz-keyframes orbit_mercury {
from { -moz-transform: rotate(360deg) translateX(var(--mercury-orbit-radius)) rotate(360deg); }
to { -moz-transform: rotate(0deg) translateX(var(--mercury-orbit-radius)) rotate(0deg); }
}
@-o-keyframes orbit_mercury {
from { -o-transform: rotate(360deg) translateX(var(--mercury-orbit-radius)) rotate(360deg); }
to { -o-transform: rotate(0deg) translateX(var(--mercury-orbit-radius)) rotate(0deg); }
}
@keyframes orbit_mercury {
from { transform: rotate(360deg) translateX(var(--mercury-orbit-radius)) rotate(360deg); }
to { transform: rotate(0deg) translateX(var(--mercury-orbit-radius)) rotate(0deg); }
}
#mercury {
--period: 4.82s;
--radius: 30px;
--color: var(--background-alt);
width: var(--radius);
height: var(--radius);
background-color: var(--color);
right: var(--sol-pos-x);
bottom: var(--sol-pos-y);
-webkit-animation: orbit_mercury var(--period) linear infinite;
-moz-animation: orbit_mercury var(--period) linear infinite;
-o-animation: orbit_mercury var(--period) linear infinite;
animation: orbit_mercury var(--period) linear infinite;
}
#mercury-orbit {
--orbit-radius: var(--mercury-orbit-radius);
--diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
right: var(--sol-pos-x);
bottom: var(--sol-pos-y);
transform: translate(var(--mercury-orbit-radius), var(--mercury-orbit-radius));
width: var(--diameter);
height: var(--diameter);
border: var(--orbit-thickness) solid var(--background-alt);
}
@-webkit-keyframes orbit_venus {
from { -webkit-transform: rotate(360deg) translateX(var(--venus-orbit-radius)) rotate(360deg); }
to { -webkit-transform: rotate(0deg) translateX(var(--venus-orbit-radius)) rotate(0deg); }
}
@-moz-keyframes orbit_venus {
from { -moz-transform: rotate(360deg) translateX(var(--venus-orbit-radius)) rotate(360deg); }
to { -moz-transform: rotate(0deg) translateX(var(--venus-orbit-radius)) rotate(0deg); }
}
@-o-keyframes orbit_venus {
from { -o-transform: rotate(360deg) translateX(var(--venus-orbit-radius)) rotate(360deg); }
to { -o-transform: rotate(0deg) translateX(var(--venus-orbit-radius)) rotate(0deg); }
}
@keyframes orbit_venus {
from { transform: rotate(360deg) translateX(var(--venus-orbit-radius)) rotate(360deg); }
to { transform: rotate(0deg) translateX(var(--venus-orbit-radius)) rotate(0deg); }
}
#venus {
--period: 12.3s;
--color: var(--background-alt);
width: var(--planet-radius);
height: var(--planet-radius);
background-color: var(--color);
right: var(--sol-pos-x);
bottom: var(--sol-pos-y);
-webkit-animation: orbit_venus var(--period) linear infinite;
-moz-animation: orbit_venus var(--period) linear infinite;
-o-animation: orbit_venus var(--period) linear infinite;
animation: orbit_venus var(--period) linear infinite;
}
#venus-orbit {
--diameter: calc(2 * var(--venus-orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
right: var(--sol-pos-x);
bottom: var(--sol-pos-y);
transform: translate(var(--venus-orbit-radius), var(--venus-orbit-radius));
width: var(--diameter);
height: var(--diameter);
border: var(--orbit-thickness) solid var(--background-alt);
}
@-webkit-keyframes orbit_earth {
from { -webkit-transform: rotate(360deg) translateX(var(--earth-orbit-radius)) rotate(360deg); }
to { -webkit-transform: rotate(0deg) translateX(var(--earth-orbit-radius)) rotate(0deg); }
}
@-moz-keyframes orbit_earth {
from { -moz-transform: rotate(360deg) translateX(var(--earth-orbit-radius)) rotate(360deg); }
to { -moz-transform: rotate(0deg) translateX(var(--earth-orbit-radius)) rotate(0deg); }
}
@-o-keyframes orbit_earth {
from { -o-transform: rotate(360deg) translateX(var(--earth-orbit-radius)) rotate(360deg); }
to { -o-transform: rotate(0deg) translateX(var(--earth-orbit-radius)) rotate(0deg); }
}
@keyframes orbit_earth {
from { transform: rotate(360deg) translateX(var(--earth-orbit-radius)) rotate(360deg); }
to { transform: rotate(0deg) translateX(var(--earth-orbit-radius)) rotate(0deg); }
}
#earth {
--period: 20s;
--color: var(--background-alt);
width: var(--planet-radius);
height: var(--planet-radius);
background-color: var(--color);
right: var(--sol-pos-x);
bottom: var(--sol-pos-y);
-webkit-animation: orbit_earth var(--period) linear infinite;
-moz-animation: orbit_earth var(--period) linear infinite;
-o-animation: orbit_earth var(--period) linear infinite;
animation: orbit_earth var(--period) linear infinite;
}
#earth-orbit {
--diameter: calc(2 * var(--earth-orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
right: var(--sol-pos-x);
bottom: var(--sol-pos-y);
transform: translate(var(--earth-orbit-radius), var(--earth-orbit-radius));
width: var(--diameter);
height: var(--diameter);
border: var(--orbit-thickness) solid var(--background-alt);
}
@-webkit-keyframes orbit_mars {
from { -webkit-transform: rotate(360deg) translateX(var(--mars-orbit-radius)) rotate(360deg); }
to { -webkit-transform: rotate(0deg) translateX(var(--mars-orbit-radius)) rotate(0deg); }
}
@-moz-keyframes orbit_mars {
from { -moz-transform: rotate(360deg) translateX(var(--mars-orbit-radius)) rotate(360deg); }
to { -moz-transform: rotate(0deg) translateX(var(--mars-orbit-radius)) rotate(0deg); }
}
@-o-keyframes orbit_mars{
from { -o-transform: rotate(360deg) translateX(var(--mars-orbit-radius)) rotate(360deg); }
to { -o-transform: rotate(0deg) translateX(var(--mars-orbit-radius)) rotate(0deg); }
}
@keyframes orbit_mars {
from { transform: rotate(360deg) translateX(var(--mars-orbit-radius)) rotate(360deg); }
to { transform: rotate(0deg) translateX(var(--mars-orbit-radius)) rotate(0deg); }
}
#mars {
--period: 37.6s;
--color: var(--background-alt);
width: var(--planet-radius);
height: var(--planet-radius);
background-color: var(--color);
right: var(--sol-pos-x);
bottom: var(--sol-pos-y);
-webkit-animation: orbit_mars var(--period) linear infinite;
-moz-animation: orbit_mars var(--period) linear infinite;
-o-animation: orbit_mars var(--period) linear infinite;
animation: orbit_mars var(--period) linear infinite;
}
#mars-orbit {
--diameter: calc(2 * var(--mars-orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
right: var(--sol-pos-x);
bottom: var(--sol-pos-y);
transform: translate(var(--mars-orbit-radius), var(--mars-orbit-radius));
width: var(--diameter);
height: var(--diameter);
border: var(--orbit-thickness) solid var(--background-alt);
}
.footer {
position: relative;
}
.footer span {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
color: var(--foreground-inactive);
padding: 2em;
}

View File

@ -1,24 +0,0 @@
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="styles.css" />
</head>
<html>
<body onload="advance()">
<div class="column">
<div class=img-container>
<img id="portrait" src="img/frog.png"></img>
</div>
<div class="text-box">
<p id="text-box-content">SET_DIALOGUE_TEXT</p>
</div>
<div id="button" onclick="advance()">
<a id="button-text" class="centre" href="#">SET_BUTTON_TEXT</a>
</div>
</div>
</body>
</html>
<script src="main.js"></script>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 235 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 169 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 251 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 155 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 135 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 107 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 174 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 255 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 198 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 237 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 149 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 120 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 374 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 138 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 229 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 173 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 170 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 235 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 169 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 251 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 155 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 135 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 174 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 432 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 255 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 133 KiB

Some files were not shown because too many files have changed in this diff Show More