re #31 Reviewed-on: #34 Co-authored-by: ktyl <me@ktyl.dev> Co-committed-by: ktyl <me@ktyl.dev>
This commit is contained in:
parent
d606dcc1f4
commit
c65854df9f
5
makefile
5
makefile
|
|
@ -16,7 +16,6 @@ STYLES = $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.css")
|
||||||
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)
|
|
||||||
|
|
||||||
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)
|
||||||
|
|
@ -35,8 +34,8 @@ html: $(HTML_TARGETS) $(CSS_TARGETS) | $(OUT_DIR)
|
||||||
$(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES) $(BLOG_INDEX) | $(OUT_DIR)
|
$(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES) $(BLOG_INDEX) | $(OUT_DIR)
|
||||||
python ppp.py $< $(HTML_INCLUDES) $(BLOG_INDEX) > $@
|
python ppp.py $< $(HTML_INCLUDES) $(BLOG_INDEX) > $@
|
||||||
|
|
||||||
$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css $(CSS_INCLUDES) | $(OUT_DIR)
|
$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css | $(OUT_DIR)
|
||||||
python ppp.py $< $(CSS_INCLUDES) > $@
|
cp $< $@
|
||||||
|
|
||||||
$(OUT_DIR):
|
$(OUT_DIR):
|
||||||
mkdir -p $@
|
mkdir -p $@
|
||||||
|
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
|
|
@ -2,6 +2,10 @@
|
||||||
|
|
||||||
: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;
|
||||||
|
|
@ -10,12 +14,445 @@ body {
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
}
|
}
|
||||||
|
|
||||||
#include title.css
|
.title {
|
||||||
#include nav.css
|
font-size: 1em;
|
||||||
#include page.css
|
}
|
||||||
#include landing.css
|
|
||||||
#include blog.css
|
.title h1 {
|
||||||
#include about.css
|
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 {
|
li {
|
||||||
display:inline;
|
display:inline;
|
||||||
|
|
@ -31,7 +468,382 @@ a {
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#include socials.css
|
.socials {
|
||||||
#include gallery.css
|
position: absolute;
|
||||||
#include planets.css
|
|
||||||
#include footer.css
|
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