From c65854df9f3f4fffb624e8f9aaf95c395ed28824 Mon Sep 17 00:00:00 2001 From: ktyl Date: Sun, 16 Jun 2024 17:20:51 +0200 Subject: [PATCH] chore: remove CSS templating (#34) re #31 Reviewed-on: https://sauce.pizzawednes.day/ktyl/ktyl.dev/pulls/34 Co-authored-by: ktyl Co-committed-by: ktyl --- makefile | 5 +- src/inc_css/about.css | 24 - src/inc_css/blog.css | 121 ----- src/inc_css/demos.css | 18 - src/inc_css/footer.css | 11 - src/inc_css/gallery.css | 112 ----- src/inc_css/landing.css | 67 --- src/inc_css/nav.css | 114 ----- src/inc_css/or_earth.css | 1 - src/inc_css/or_mars.css | 1 - src/inc_css/or_mercury.css | 1 - src/inc_css/or_venus.css | 1 - src/inc_css/orbit_thickness.css | 1 - src/inc_css/page.css | 79 --- src/inc_css/planets.css | 234 --------- src/inc_css/pr_earth.css | 1 - src/inc_css/pr_mars.css | 1 - src/inc_css/pr_mercury.css | 1 - src/inc_css/pr_venus.css | 1 - src/inc_css/socials.css | 25 - src/inc_css/solposx.css | 1 - src/inc_css/solposy.css | 1 - src/inc_css/title.css | 25 - src/root/styles.css | 832 +++++++++++++++++++++++++++++++- 24 files changed, 824 insertions(+), 854 deletions(-) delete mode 100644 src/inc_css/about.css delete mode 100644 src/inc_css/blog.css delete mode 100644 src/inc_css/demos.css delete mode 100644 src/inc_css/footer.css delete mode 100644 src/inc_css/gallery.css delete mode 100644 src/inc_css/landing.css delete mode 100644 src/inc_css/nav.css delete mode 100644 src/inc_css/or_earth.css delete mode 100644 src/inc_css/or_mars.css delete mode 100644 src/inc_css/or_mercury.css delete mode 100644 src/inc_css/or_venus.css delete mode 100644 src/inc_css/orbit_thickness.css delete mode 100644 src/inc_css/page.css delete mode 100644 src/inc_css/planets.css delete mode 100644 src/inc_css/pr_earth.css delete mode 100644 src/inc_css/pr_mars.css delete mode 100644 src/inc_css/pr_mercury.css delete mode 100644 src/inc_css/pr_venus.css delete mode 100644 src/inc_css/socials.css delete mode 100644 src/inc_css/solposx.css delete mode 100644 src/inc_css/solposy.css delete mode 100644 src/inc_css/title.css diff --git a/makefile b/makefile index f5f74d8..f7ddfb6 100644 --- a/makefile +++ b/makefile @@ -16,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) @@ -35,8 +34,8 @@ html: $(HTML_TARGETS) $(CSS_TARGETS) | $(OUT_DIR) $(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES) $(BLOG_INDEX) | $(OUT_DIR) python ppp.py $< $(HTML_INCLUDES) $(BLOG_INDEX) > $@ -$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css $(CSS_INCLUDES) | $(OUT_DIR) - python ppp.py $< $(CSS_INCLUDES) > $@ +$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css | $(OUT_DIR) + cp $< $@ $(OUT_DIR): mkdir -p $@ diff --git a/src/inc_css/about.css b/src/inc_css/about.css deleted file mode 100644 index f3945b1..0000000 --- a/src/inc_css/about.css +++ /dev/null @@ -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%); -} diff --git a/src/inc_css/blog.css b/src/inc_css/blog.css deleted file mode 100644 index 98d13c7..0000000 --- a/src/inc_css/blog.css +++ /dev/null @@ -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; - } -} diff --git a/src/inc_css/demos.css b/src/inc_css/demos.css deleted file mode 100644 index 8024695..0000000 --- a/src/inc_css/demos.css +++ /dev/null @@ -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; -} diff --git a/src/inc_css/footer.css b/src/inc_css/footer.css deleted file mode 100644 index 05619d8..0000000 --- a/src/inc_css/footer.css +++ /dev/null @@ -1,11 +0,0 @@ -.footer { - position: relative; -} - -.footer span { - position: absolute; - left: 50%; - transform: translate(-50%, 0); - color: var(--foreground-inactive); - padding: 2em; -} diff --git a/src/inc_css/gallery.css b/src/inc_css/gallery.css deleted file mode 100644 index 45e06a1..0000000 --- a/src/inc_css/gallery.css +++ /dev/null @@ -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;*/ - } -} diff --git a/src/inc_css/landing.css b/src/inc_css/landing.css deleted file mode 100644 index 0fec37f..0000000 --- a/src/inc_css/landing.css +++ /dev/null @@ -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; - } -} diff --git a/src/inc_css/nav.css b/src/inc_css/nav.css deleted file mode 100644 index 91f0f37..0000000 --- a/src/inc_css/nav.css +++ /dev/null @@ -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; - } -} diff --git a/src/inc_css/or_earth.css b/src/inc_css/or_earth.css deleted file mode 100644 index 201704f..0000000 --- a/src/inc_css/or_earth.css +++ /dev/null @@ -1 +0,0 @@ -440px diff --git a/src/inc_css/or_mars.css b/src/inc_css/or_mars.css deleted file mode 100644 index eacec92..0000000 --- a/src/inc_css/or_mars.css +++ /dev/null @@ -1 +0,0 @@ -570px diff --git a/src/inc_css/or_mercury.css b/src/inc_css/or_mercury.css deleted file mode 100644 index 727b97e..0000000 --- a/src/inc_css/or_mercury.css +++ /dev/null @@ -1 +0,0 @@ -180px diff --git a/src/inc_css/or_venus.css b/src/inc_css/or_venus.css deleted file mode 100644 index a92b308..0000000 --- a/src/inc_css/or_venus.css +++ /dev/null @@ -1 +0,0 @@ -320px diff --git a/src/inc_css/orbit_thickness.css b/src/inc_css/orbit_thickness.css deleted file mode 100644 index 92db59d..0000000 --- a/src/inc_css/orbit_thickness.css +++ /dev/null @@ -1 +0,0 @@ -0.2rem diff --git a/src/inc_css/page.css b/src/inc_css/page.css deleted file mode 100644 index 2edc563..0000000 --- a/src/inc_css/page.css +++ /dev/null @@ -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; - } -} diff --git a/src/inc_css/planets.css b/src/inc_css/planets.css deleted file mode 100644 index b09e95c..0000000 --- a/src/inc_css/planets.css +++ /dev/null @@ -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); -} diff --git a/src/inc_css/pr_earth.css b/src/inc_css/pr_earth.css deleted file mode 100644 index 9c745f5..0000000 --- a/src/inc_css/pr_earth.css +++ /dev/null @@ -1 +0,0 @@ -30px diff --git a/src/inc_css/pr_mars.css b/src/inc_css/pr_mars.css deleted file mode 100644 index 9c745f5..0000000 --- a/src/inc_css/pr_mars.css +++ /dev/null @@ -1 +0,0 @@ -30px diff --git a/src/inc_css/pr_mercury.css b/src/inc_css/pr_mercury.css deleted file mode 100644 index 9c745f5..0000000 --- a/src/inc_css/pr_mercury.css +++ /dev/null @@ -1 +0,0 @@ -30px diff --git a/src/inc_css/pr_venus.css b/src/inc_css/pr_venus.css deleted file mode 100644 index 9c745f5..0000000 --- a/src/inc_css/pr_venus.css +++ /dev/null @@ -1 +0,0 @@ -30px diff --git a/src/inc_css/socials.css b/src/inc_css/socials.css deleted file mode 100644 index 6e66db6..0000000 --- a/src/inc_css/socials.css +++ /dev/null @@ -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; -} - - diff --git a/src/inc_css/solposx.css b/src/inc_css/solposx.css deleted file mode 100644 index 573541a..0000000 --- a/src/inc_css/solposx.css +++ /dev/null @@ -1 +0,0 @@ -0 diff --git a/src/inc_css/solposy.css b/src/inc_css/solposy.css deleted file mode 100644 index 573541a..0000000 --- a/src/inc_css/solposy.css +++ /dev/null @@ -1 +0,0 @@ -0 diff --git a/src/inc_css/title.css b/src/inc_css/title.css deleted file mode 100644 index fa9752b..0000000 --- a/src/inc_css/title.css +++ /dev/null @@ -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); -} diff --git a/src/root/styles.css b/src/root/styles.css index 3fa0937..894ee9c 100644 --- a/src/root/styles.css +++ b/src/root/styles.css @@ -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; +}