diff --git a/TODO.md b/TODO.md
new file mode 100644
index 0000000..a2ece93
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,13 @@
+# ToDo
+- Add webrings
+- more buttons
+- update about
+- icons on contact info
+- update projects page?
+- reduce bottom and top margins on main page title
+- https://zvava.org/stats.html
+- https://zvava.org/wiki/config.html
+- https://zvava.org/wiki/category/music.html
+- https://zvava.org/wiki/about-site.html
+- gradient content background?
+- sophias color thing
\ No newline at end of file
diff --git a/public/assets/webrings/phonewave.png b/public/assets/webrings/phonewave.png
new file mode 100644
index 0000000..390e4ae
Binary files /dev/null and b/public/assets/webrings/phonewave.png differ
diff --git a/public/css/cards.css b/public/css/cards.css
new file mode 100644
index 0000000..07eda08
--- /dev/null
+++ b/public/css/cards.css
@@ -0,0 +1,6 @@
+.link-card-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+ gap: 2rem;
+ padding: 0;
+}
\ No newline at end of file
diff --git a/public/css/classes.css b/public/css/classes.css
index 55dd5ac..ce2b21c 100644
--- a/public/css/classes.css
+++ b/public/css/classes.css
@@ -1,90 +1,9 @@
-.container {
- display: flex;
-}
-
-.column {
- float: left;
- width: 50%;
-}
-
-/* Clear floats after the columns */
-.row:after {
- content: "";
- display: table;
- clear: both;
-}
-
-.navbar-menu {
- flex-grow: initial !important;
- flex-shrink: initial !important;
-}
-
-.navbar {
- display: flex;
- padding-top: 7px;
- padding-bottom: 7px;
-}
-
-.navbar-item {
- font-size: medium;
- padding-right: 10px;
- padding-left: 10px;
- margin-top: 5px;
-}
-
-.navbar .navbar-menu {
- flex-grow: initial;
- flex-shrink: initial;
-}
-
-.astro-a {
- position: absolute;
- top: -32px;
- left: 50%;
- transform: translatex(-50%);
- width: 220px;
- height: auto;
- z-index: -1;
-}
-
-.text-gradient {
- background-image: var(--accent-gradient);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-size: 400%;
- background-position: 0%;
-}
-
-.instructions {
- margin-bottom: 2rem;
- border: 1px solid rgba(var(--accent-light), 25%);
- background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
- padding: 1.5rem;
- border-radius: 8px;
-}
-
-.instructions code {
- font-size: 0.8em;
- font-weight: bold;
- background: rgba(var(--accent-light), 12%);
- color: rgb(var(--accent-light));
- border-radius: 4px;
- padding: 0.3em 0.4em;
-}
-
-.instructions strong {
- color: rgb(var(--accent-light));
-}
-
-.link-card-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
- gap: 2rem;
- padding: 0;
-}
+@import "nav-buttons.css";
+@import "cards.css";
+@import "instructions.class";
.title {
- font-size: 55px;
+ font-size: 50px;
background-image: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@@ -92,16 +11,6 @@
background-position: 0%;
}
-.astro-a {
- position: absolute;
- top: -32px;
- left: 50%;
- transform: translatex(-50%);
- width: 220px;
- height: auto;
- z-index: -1;
-}
-
.text-gradient {
background-image: var(--accent-gradient);
-webkit-background-clip: text;
@@ -110,137 +19,6 @@
background-position: 0%;
}
-.instructions {
- margin-bottom: 2rem;
- border: 1px solid rgba(var(--accent-light), 25%);
- background: linear-gradient(rgba(var(--accent-dark), 66%),
- rgba(var(--accent-dark), 33%));
- padding: 1.5rem;
- border-radius: 8px;
-}
-
-.instructions code {
- font-size: 0.8em;
- font-weight: bold;
- background: rgba(var(--accent-light), 12%);
- color: rgb(var(--accent-light));
- border-radius: 4px;
- padding: 0.3em 0.4em;
-}
-
-.instructions strong {
- color: rgb(var(--accent-light));
-}
-
-.link-card-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
- gap: 2rem;
- padding: 0;
-}
-
-.custom-btn {
- width: 130px;
- height: 40px;
- color: #4c4f69;
- border-radius: 5px;
- padding: 10px 25px;
- font-weight: 500;
- background: transparent;
- cursor: pointer;
- transition: all 0.3s ease;
- position: relative;
- display: inline-block;
- box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
- 7px 7px 20px 0px rgba(0, 0, 0, .1),
- 4px 4px 5px 0px rgba(0, 0, 0, .1);
- outline: none;
-}
-
-/* 8 */
-.btn-1 {
- background-color: #c6d0f5;
- background-image: linear-gradient(315deg, #c6d0f5 0%, #fab387 74%);
- line-height: 42px;
- padding: 0;
- border: none;
-}
-
-.btn-1 span {
- position: relative;
- display: block;
- width: 100%;
- height: 100%;
-}
-
-.btn-1:before,
-.btn-1:after {
- position: absolute;
- content: "";
- right: 0;
- bottom: 0;
- background: #fab387;
- /*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
- -4px -4px 6px 0 rgba(116, 125, 136, .2),
- inset -4px -4px 6px 0 rgba(255,255,255,.5),
- inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
- transition: all 0.3s ease;
-}
-
-.btn-1:before {
- height: 0%;
- width: 2px;
-}
-
-.btn-1:after {
- width: 0%;
- height: 2px;
-}
-
-.btn-1:hover:before {
- height: 100%;
-}
-
-.btn-1:hover:after {
- width: 100%;
-}
-
-.btn-1:hover {
- background: transparent;
-}
-
-.btn-1 span:hover {
- color: #fab387;
-}
-
-.btn-1 span:before,
-.btn-1 span:after {
- position: absolute;
- content: "";
- left: 0;
- top: 0;
- background: #fab387;
- /*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
- -4px -4px 6px 0 rgba(116, 125, 136, .2),
- inset -4px -4px 6px 0 rgba(255,255,255,.5),
- inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
- transition: all 0.3s ease;
-}
-
-.btn-1 span:before {
- width: 2px;
- height: 0%;
-}
-
-.btn-1 span:after {
- height: 2px;
- width: 0%;
-}
-
-.btn-1 span:hover:before {
- height: 100%;
-}
-
-.btn-1 span:hover:after {
- width: 100%;
+.menu {
+ text-align: center;
}
\ No newline at end of file
diff --git a/public/css/colors.css b/public/css/colors.css
new file mode 100644
index 0000000..9a27323
--- /dev/null
+++ b/public/css/colors.css
@@ -0,0 +1,19 @@
+:root {
+ --accent: 250, 179, 135;
+ --accent-light: 250, 221, 201;
+ --accent-dark: 149, 106, 81;
+ --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
+ color: white;
+}
+
+a:link {
+ color: #89b4fa
+}
+
+a:visited {
+ color: #b4befe
+}
+
+a:hover {
+ color: #89dceb
+}
\ No newline at end of file
diff --git a/public/css/instructions.css b/public/css/instructions.css
new file mode 100644
index 0000000..fa8dc50
--- /dev/null
+++ b/public/css/instructions.css
@@ -0,0 +1,21 @@
+.instructions {
+ margin-bottom: 2rem;
+ border: 1px solid rgba(var(--accent-light), 25%);
+ background: linear-gradient(rgba(var(--accent-dark), 66%),
+ rgba(var(--accent-dark), 33%));
+ padding: 1.5rem;
+ border-radius: 8px;
+}
+
+.instructions code {
+ font-size: 0.8em;
+ font-weight: bold;
+ background: rgba(var(--accent-light), 12%);
+ color: rgb(var(--accent-light));
+ border-radius: 4px;
+ padding: 0.3em 0.4em;
+}
+
+.instructions strong {
+ color: rgb(var(--accent-light));
+}
\ No newline at end of file
diff --git a/public/css/mystyle.css b/public/css/limepot.css
similarity index 56%
rename from public/css/mystyle.css
rename to public/css/limepot.css
index 8a8ccbd..8e4a5e2 100644
--- a/public/css/mystyle.css
+++ b/public/css/limepot.css
@@ -1,42 +1,55 @@
@import "classes.css";
+@import "colors.css";
@font-face {
font-family: standardGalactic;
src: url(/fonts/galactic.ttf);
}
-
:root {
background: repeat url("/assets/background.png");
-webkit-background-size: repeat;
-moz-background-size: cover;
-o-background-size: cover;
background-size: repeat;
-
- --accent: 250, 179, 135;
- --accent-light: 250, 221, 201;
- --accent-dark: 149, 106, 81;
- --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
-}
-
-html {
+
font-family: system-ui, sans-serif;
- background: #13151a;
- background-size: 224px;
-}
-
-main {
- margin: auto;
padding: 1rem;
- width: 800px;
+ width: 1000px;
max-width: calc(100% - 2rem);
- color: white;
font-size: 20px;
line-height: 1.6;
+ margin: auto;
+}
+
+.content {
+ width: 85%;
+ max-width: 75em;
+ margin: auto;
+ padding: 0.5em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ border: 3px solid #fab387;
+ border-radius: 5px;
+ opacity: 0.9;
+ background: rgba(0, 0, 0, .66);
+}
+
+.small-quote {
+ font-size: smaller;
+ color: #a6adc8;
+}
+
+footer {
+ text-align: center;
+}
+
+figure {
+ text-align: center;
}
audio {
- width: 100%;
+ width: 100%;;
}
h1 {
@@ -46,27 +59,7 @@ h1 {
margin-bottom: 1em;
}
-a:link {
- color: #89b4fa
-}
-
-a:visited {
- color: #b4befe
-}
-
-a:hover {
- color: #89dceb
-}
-
hr {
width: 32%;
color: #6e738d;
-}
-
-body {
- color: #cdd6f4
-}
-
-p {
- color: #cdd6f4
}
\ No newline at end of file
diff --git a/public/css/nav-buttons.css b/public/css/nav-buttons.css
new file mode 100644
index 0000000..bc41c27
--- /dev/null
+++ b/public/css/nav-buttons.css
@@ -0,0 +1,106 @@
+.custom-btn {
+ width: 130px;
+ height: 40px;
+ color: #4c4f69;
+ border-radius: 5px;
+ padding: 10px 25px;
+ font-weight: 500;
+ background: transparent;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ position: relative;
+ display: inline-block;
+ box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
+ 7px 7px 20px 0px rgba(0, 0, 0, .1),
+ 4px 4px 5px 0px rgba(0, 0, 0, .1);
+ outline: none;
+ font-size: large;
+}
+
+/* 8 */
+.btn-1 {
+ background-color: #c6d0f5;
+ background-image: linear-gradient(315deg, #c6d0f5 0%, #fab387 74%);
+ line-height: 42px;
+ padding: 0;
+ border: none;
+}
+
+.btn-1 span {
+ position: relative;
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+.btn-1:before,
+.btn-1:after {
+ position: absolute;
+ content: "";
+ right: 0;
+ bottom: 0;
+ background: #fab387;
+ /*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
+ -4px -4px 6px 0 rgba(116, 125, 136, .2),
+ inset -4px -4px 6px 0 rgba(255,255,255,.5),
+ inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
+ transition: all 0.3s ease;
+}
+
+.btn-1:before {
+ height: 0%;
+ width: 2px;
+}
+
+.btn-1:after {
+ width: 0%;
+ height: 2px;
+}
+
+.btn-1:hover:before {
+ height: 100%;
+}
+
+.btn-1:hover:after {
+ width: 100%;
+}
+
+.btn-1:hover {
+ background: transparent;
+}
+
+.btn-1 span:hover {
+ color: #fab387;
+}
+
+.btn-1 span:before,
+.btn-1 span:after {
+ position: absolute;
+ content: "";
+ left: 0;
+ top: 0;
+ background: #fab387;
+ /*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
+ -4px -4px 6px 0 rgba(116, 125, 136, .2),
+ inset -4px -4px 6px 0 rgba(255,255,255,.5),
+ inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
+ transition: all 0.3s ease;
+}
+
+.btn-1 span:before {
+ width: 2px;
+ height: 0%;
+}
+
+.btn-1 span:after {
+ height: 2px;
+ width: 0%;
+}
+
+.btn-1 span:hover:before {
+ height: 100%;
+}
+
+.btn-1 span:hover:after {
+ width: 100%;
+}
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 19e7abe..ada53f6 100755
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,110 +1,70 @@
---
const today = new Date();
---
-
-