chore: remove CSS templating #34

Merged
ktyl merged 1 commits from refactor/simplify-css into main 2024-06-16 17:20:52 +02:00
24 changed files with 824 additions and 854 deletions

View File

@ -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 $@

View File

@ -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%);
}

View File

@ -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;
}
}

View File

@ -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;
}

View File

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

View File

@ -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;*/
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -1 +0,0 @@
440px

View File

@ -1 +0,0 @@
570px

View File

@ -1 +0,0 @@
180px

View File

@ -1 +0,0 @@
320px

View File

@ -1 +0,0 @@
0.2rem

View File

@ -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;
}
}

View File

@ -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);
}

View File

@ -1 +0,0 @@
30px

View File

@ -1 +0,0 @@
30px

View File

@ -1 +0,0 @@
30px

View File

@ -1 +0,0 @@
30px

View File

@ -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;
}

View File

@ -1 +0,0 @@
0

View File

@ -1 +0,0 @@
0

View File

@ -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);
}

View File

@ -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;
}