Compare commits
13 Commits
feature/vn
...
main
| Author | SHA1 | Date |
|---|---|---|
 Cat Flynn
|
8df4e68899 | |
|
Cat Flynn
|
7269d2df1a | |
|
Cat Flynn
|
4ea9f759d6 | |
|
ktyl
|
c65854df9f | |
|
ktyl
|
d606dcc1f4 | |
|
ktyl
|
26525fcc43 | |
|
ktyl
|
49333b641e | |
|
ktyl
|
2471160986 | |
|
ktyl
|
592749a5b4 | |
|
Cat Flynn
|
059a5f68bf | |
|
Cat Flynn
|
12fe8baf2b | |
|
Cat Flynn
|
f205c4d3f3 | |
|
ktyl
|
41c52f59d1 |
|
|
@ -18,7 +18,7 @@ steps:
|
|||
- name: build
|
||||
image: archlinux
|
||||
environment:
|
||||
PYTHON_ENV: python python-pipenv python-setuptools
|
||||
PYTHON_ENV: pyenv python python-pipenv python-setuptools
|
||||
|
||||
commands:
|
||||
# set up python
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{
|
||||
"_meta": {
|
||||
"hash": {
|
||||
"sha256": "4f4f4fc0dc77addc9a4bf6c737f31df9507ee22a83548fcff1891a4e7bc27bed"
|
||||
"sha256": "8197b62eaf2c2267235d798d625f266e606263fb3108ba131e012c8ae7814dcd"
|
||||
},
|
||||
"pipfile-spec": 6,
|
||||
"requires": {
|
||||
"python_version": "3.10"
|
||||
"python_version": "3.11"
|
||||
},
|
||||
"sources": [
|
||||
{
|
||||
|
|
@ -18,11 +18,12 @@
|
|||
"default": {
|
||||
"markdown": {
|
||||
"hashes": [
|
||||
"sha256:08fb8465cffd03d10b9dd34a5c3fea908e20391a2a90b88d66362cb05beed186",
|
||||
"sha256:3b809086bb6efad416156e00a0da66fe47618a5d6918dd688f53f40c8e4cfeff"
|
||||
"sha256:48f276f4d8cfb8ce6527c8f79e2ee29708508bf4d40aa410fbc3b4ee832c850f",
|
||||
"sha256:ed4f41f6daecbeeb96e576ce414c41d2d876daa9a16cb35fa8ed8c2ddfad0224"
|
||||
],
|
||||
"index": "pypi",
|
||||
"version": "==3.4.1"
|
||||
"markers": "python_version >= '3.8'",
|
||||
"version": "==3.6"
|
||||
}
|
||||
},
|
||||
"develop": {}
|
||||
|
|
|
|||
2
blog
2
blog
|
|
@ -1 +1 @@
|
|||
Subproject commit 6470541904da6d0a5d9dceeca6959370c4937759
|
||||
Subproject commit 57cb9a24716d1094c4fc3cb491eec296d7a1dc0d
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1000 B |
24
makefile
24
makefile
|
|
@ -1,9 +1,3 @@
|
|||
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
|
||||
IMG_DIR = img
|
||||
OUT_DIR = site
|
||||
|
|
@ -22,7 +16,6 @@ STYLES = $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.css")
|
|||
IMAGES = $(shell find $(IMG_DIR) -wholename "$(IMG_DIR)/*.png")
|
||||
|
||||
HTML_INCLUDES = $(shell find $(SRC_DIR)/inc_html -name *.html)
|
||||
CSS_INCLUDES = $(shell find $(SRC_DIR)/inc_css -name *.css)
|
||||
|
||||
HTML_TARGETS = $(PAGES:$(ROOT_DIR)/%.html=$(OUT_DIR)/%.html)
|
||||
CSS_TARGETS = $(STYLES:$(ROOT_DIR)/%.css=$(OUT_DIR)/%.css)
|
||||
|
|
@ -34,20 +27,15 @@ vn: $(VN) | $(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)/*.jpg $(OUT_DIR)/
|
||||
|
||||
deploy:
|
||||
cp -r $(OUT_DIR) $(SITE_NAME)
|
||||
rsync -rP $(SITE_NAME) $(HOST):~
|
||||
rm -r $(SITE_NAME)
|
||||
ssh $(HOST) "sudo $(REMOTE_SCRIPT)"
|
||||
|
||||
$(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES) $(BLOG_INDEX) | $(OUT_DIR)
|
||||
python ppp/ppp.py $< $(HTML_INCLUDES) $(BLOG_INDEX) > $@
|
||||
python ppp.py $< $(HTML_INCLUDES) $(BLOG_INDEX) > $@
|
||||
|
||||
$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css $(CSS_INCLUDES) | $(OUT_DIR)
|
||||
python ppp/ppp.py $< $(CSS_INCLUDES) > $@
|
||||
$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css | $(OUT_DIR)
|
||||
cp $< $@
|
||||
|
||||
$(OUT_DIR):
|
||||
mkdir -p $@
|
||||
|
|
@ -62,9 +50,9 @@ blog: $(HTML_INCLUDES) $(CSS_TARGETS)
|
|||
make --directory $(BLOG_BASE_DIR) html
|
||||
cp -r $(BLOG_BUILD_DIR)/* $(BLOG_OUT_DIR)
|
||||
for page in `find "$(BLOG_OUT_DIR)" -wholename "*.html"`; do \
|
||||
pipenv run python ppp/ppp.py $$page $(HTML_INCLUDES) > temp ; \
|
||||
python ppp.py $$page $(HTML_INCLUDES) > temp ; \
|
||||
mv temp $$page ; \
|
||||
cp $(CSS_TARGETS) `dirname $$page` ; \
|
||||
cp $(CSS_TARGETS) $(IMG_DIR)/*.ico `dirname $$page` ; \
|
||||
done
|
||||
|
||||
clean:
|
||||
|
|
|
|||
1
ppp
1
ppp
|
|
@ -1 +0,0 @@
|
|||
Subproject commit 2253d24ad239afe2b4fe2cf53471bcc3414879cd
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
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)
|
||||
|
|
@ -1,24 +0,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%);
|
||||
}
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
.footer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer span {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
color: var(--foreground-inactive);
|
||||
padding: 2em;
|
||||
}
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
.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;*/
|
||||
}
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
440px
|
||||
|
|
@ -1 +0,0 @@
|
|||
570px
|
||||
|
|
@ -1 +0,0 @@
|
|||
180px
|
||||
|
|
@ -1 +0,0 @@
|
|||
320px
|
||||
|
|
@ -1 +0,0 @@
|
|||
0.2rem
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,234 +0,0 @@
|
|||
.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: #orbit_thickness.css solid var(--foreground-inactive);*/
|
||||
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;
|
||||
--color: var(--background-alt);
|
||||
|
||||
width: var(--radius);
|
||||
height: var(--radius);
|
||||
|
||||
background-color: var(--color);
|
||||
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);
|
||||
|
||||
border: #orbit_thickness.css solid var(--background-alt);
|
||||
}
|
||||
|
||||
@-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;
|
||||
--color: var(--background-alt);
|
||||
|
||||
width: var(--radius);
|
||||
height: var(--radius);
|
||||
|
||||
background-color: var(--color);
|
||||
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);
|
||||
border: #orbit_thickness.css solid var(--background-alt);
|
||||
}
|
||||
|
||||
@-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;
|
||||
--color: var(--background-alt);
|
||||
|
||||
width: var(--radius);
|
||||
height: var(--radius);
|
||||
|
||||
background-color: var(--color);
|
||||
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);
|
||||
|
||||
border: #orbit_thickness.css solid var(--background-alt);
|
||||
}
|
||||
|
||||
@-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;
|
||||
--color: var(--background-alt);
|
||||
|
||||
width: var(--radius);
|
||||
height: var(--radius);
|
||||
|
||||
background-color: var(--color);
|
||||
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);
|
||||
|
||||
border: #orbit_thickness.css solid var(--background-alt);
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
30px
|
||||
|
|
@ -1 +0,0 @@
|
|||
30px
|
||||
|
|
@ -1 +0,0 @@
|
|||
30px
|
||||
|
|
@ -1 +0,0 @@
|
|||
30px
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1 +0,0 @@
|
|||
0
|
||||
|
|
@ -1 +0,0 @@
|
|||
0
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
.title {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.title h1 {
|
||||
font-size: 1.4em;
|
||||
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);
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
<meta name="keywords" content="Cat Flynn, Ktyl, Portfolio, Showreel, Blog, Gallery"/> <!-- blog, gallery -->
|
||||
<link rel="canonical" href="https://ktyl.dev/">
|
||||
<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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<ul class="nav-links">
|
||||
<li><a href="/about.html">about</a></li>
|
||||
<li><a href="/blog.html">blog</a></li>
|
||||
<li><a href="/gallery.html">gallery</a></li>
|
||||
<li><a href="/vn/books.html">vn</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,62 +0,0 @@
|
|||
<!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>
|
||||
</div>
|
||||
|
||||
#include planets.html
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
#include header.html
|
||||
|
||||
<body>
|
||||
|
||||
#include titlestart.html
|
||||
/contact
|
||||
#include titleend.html
|
||||
|
||||
#include sidebar.html
|
||||
#include planets.html
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -2,6 +2,10 @@
|
|||
|
||||
:root {
|
||||
--title-height: min(20vmin, 90px);
|
||||
|
||||
--orbit-thickness: 0.2em;
|
||||
--sol-pos-x: 0;
|
||||
--sol-pos-y: 0;
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
|
|
@ -10,12 +14,445 @@ body {
|
|||
background-color: var(--background);
|
||||
}
|
||||
|
||||
#include title.css
|
||||
#include nav.css
|
||||
#include page.css
|
||||
#include landing.css
|
||||
#include blog.css
|
||||
#include about.css
|
||||
.title {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.title h1 {
|
||||
font-size: 1.4em;
|
||||
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 {
|
||||
display:inline;
|
||||
|
|
@ -31,7 +468,382 @@ a {
|
|||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
#include socials.css
|
||||
#include gallery.css
|
||||
#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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue