aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--myshit/index.css32
-rw-r--r--styles.css90
2 files changed, 66 insertions, 56 deletions
diff --git a/myshit/index.css b/myshit/index.css
index 86ee9c4..8089392 100644
--- a/myshit/index.css
+++ b/myshit/index.css
@@ -1,28 +1,37 @@
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Google+Sans&display=swap');
-html, body {
+/* Color variables */
+:root{
+ --background-color: #202124;
+ --text-color: #ff80a4;
+ --link-color: #94216a;
+}
+
+html, body{
scroll-behavior: smooth;
- background-color: #202124;
- }
+ background-color: var(--background-color);
+}
- .header{
+.header{
font-family: 'fira sans', serif;
- color: #ff80a4;
+ color: var(--text-color);
text-align: center;
}
+
.notheader{
font-family: 'fira sans', serif;
- color: #ff80a4;
+ color: var(--text-color);
text-align: center;
font-size: small;
}
-.center {
+
+.center{
margin: auto;
width: 60%;
padding: 10px;
text-align: center;
- }
+}
b{
font-size: 140%;
@@ -32,10 +41,11 @@ b{
h3{
margin-top: 0%;
font-family: 'fira sans', serif;
- color: #ff80a4;
- text-align: center;
+ color: var(--text-color);
+ /*text-align: center;*/
font-size: small;
}
+
.desktop{
width: 100%;
height: auto;
@@ -49,7 +59,7 @@ h3{
}
.link{
- color: #94216a;
+ color: var(--link-color);
text-decoration: none;
font-family: 'google sans';
font-size: larger;
diff --git a/styles.css b/styles.css
index be039c6..49d8513 100644
--- a/styles.css
+++ b/styles.css
@@ -1,12 +1,22 @@
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Google+Sans&display=swap');
+
+/* Declare color variables */
+:root{
+ --title-color: #ff80a4;
+ --text-color: #ff2674;
+ --background-color: #202124;
+ --nav-background-color: #333;
+}
+
/* make the scrolling smooth */
-html, body {
+html, body{
scroll-behavior: smooth;
}
+
.header{
- color: #202124;
+ color: var(--background-color);
padding: 10px;
font-size: 40px;
font-weight: bold;
@@ -14,10 +24,12 @@ html, body {
font-family: 'google sans', serif;
animation: colorchange 7s infinite alternate;
}
+
.java{
vertical-align: middle;
font-size: 10px;
}
+
.javaimg{
margin-left: 10%;
width: 50px;
@@ -37,18 +49,11 @@ html, body {
position: fixed;
top: 0;
left: 0;
- width: 100%;
margin: auto;
- width: 100%;
- overflow: hidden;
- background-color: #202124;
- border-bottom: 1px solid #202124;
- border-top: 1px solid #202124;
- border-left: 1px solid #202124;
- border-right: 1px solid #202124;
- box-shadow: 0px 0px 10px #202124;
+ border: 1px solid var(--background-color);
+ box-shadow: 0px 0px 10px var(--background-color);
z-index: 1;
- background-color: #333;
+ background-color: var(--nav-background-color);
overflow: hidden;
width: 100%;
}
@@ -60,26 +65,19 @@ html, body {
width: 100%;
margin: auto;
overflow: hidden;
- background-color: #202124;
- border-bottom: 0px solid #202124;
- border-top: 1px solid #202124;
- border-left: 1px solid #202124;
- border-right: 1px solid #202124;
- box-shadow: 0px 0px 6px #202124;
+ /* Delete these 4 lines after test */
+ border: 1px solid var(--background-color);
+ box-shadow: 0px 0px 6px var(--background-color);
z-index: 1;
- background-color: #333;
- overflow: hidden;
- width: 100%;
-
-
+ background-color: var(--nav-background-color);
}
.imsotired{
margin-left: 1%;
font-family: 'fira sans', serif;
- color: #ff80a4;
+ color: var(--title-color);
}
-.topnav a {
+.topnav a{
float: left;
color: #f2f2f2;
text-align: center;
@@ -89,20 +87,20 @@ html, body {
font-size: 15px;
}
- .topnav a:hover {
+.topnav a:hover{
background-color: #ddd;
color: black;
- }
+}
- .topnav a.active {
- background-color: #ff80a4;
+.topnav a.active{
+ background-color: var(--title-color);
color: white;
- }
+}
.java{
width: 5%;
font-family: 'fira sans', serif;
- color: #ff80a4;
+ color: var(--title-color);
padding: 10px;
font-size: 40px;
font-weight: bold;
@@ -113,18 +111,19 @@ html, body {
.notjava{
margin-left: 3%;
font-family: 'fira sans';
- color: #ff2674;
+ color: var(--text-color);
}
.data{
font-family: 'fira sans', serif;
- color: #ff80a4;
+ color: var(--title-color);
padding: 10px;
font-size: 40px;
font-weight: bold;
margin-left: 10%;
margin-top: 30px;
}
+
.header span::before{
pointer-events: all;
content: "does ";
@@ -135,24 +134,24 @@ html, body {
.being{
margin-left: 11%;
font-family: 'fira sans';
- color: #ff2674;
+ color: var(--text-color);
font-size: 120%
}
-.tooltip {
+.tooltip{
position: relative;
display: inline-block;
margin-left: 13%;
font-family: 'fira sans';
- color: #ff2674;
+ color: var(--text-color);
font-size: 120%
}
-.tooltip .tooltiptext {
+.tooltip .tooltiptext{
visibility: hidden;
width: 120px;
- color: #ff80a4;
+ color: var(--title-color);
text-align: center;
border-radius: 6px;
padding: 5px 0;
@@ -167,7 +166,7 @@ html, body {
transition: opacity 1s;
}
-.tooltip:hover .tooltiptext {
+.tooltip:hover .tooltiptext{
visibility: visible;
opacity: 1;
}
@@ -176,13 +175,13 @@ html, body {
text-decoration: none;
font-family: 'fira sans';
font-size: 120%;
-color: #ff80a4;
+color: var(--title-color);
}
.aboutme{
margin-left: 13%;
font-family: 'fira sans';
- color: #ff2674;
+ color: var(--text-color);
font-size: 120%
}
@@ -193,7 +192,7 @@ color: #ff80a4;
margin-left: 10%;
}
-@keyframes colorchange {
+@keyframes colorchange{
0% {
color: #16171a;
}
@@ -228,8 +227,9 @@ color: #ff80a4;
color: pink;
}
}
+
.mebeinguseless{
- color: #ff80a4;
+ color: var(--title-color);
padding: 10px;
font-size: 15px;
font-weight: bold;
@@ -238,7 +238,7 @@ color: #ff80a4;
}
.runaway{
- color: #ff2674;
+ color: var(--text-color);
padding: 10px;
font-size: 15px;
font-weight: bold;
@@ -269,7 +269,7 @@ color: #ff80a4;
}
html{
- background-color: #202124;
+ background-color: var(--background-color);
}
.go{
generated by cgit (git 2.46.0) at 2024-11-21 22:35:21 +0000