summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/main.css226
-rw-r--r--scripts/blog.js4
2 files changed, 218 insertions, 12 deletions
diff --git a/assets/css/main.css b/assets/css/main.css
index e9d3953..322868f 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,7 +1,8 @@
:root {
--main-color: rgba(240, 134, 62);
--secondary-color: rgba(24, 26, 27);
- --link-color: rgba(39, 130, 248);
+ --link-color: rgba(249, 108, 169);
+ --link-highlight-color: rgba(255, 153, 197);
--bg-color: rgba(39, 42, 44, 0.5);
--gradient: linear-gradient(to bottom right, var(--main-color), var(--secondary-color));
@@ -17,6 +18,7 @@
::-webkit-scrollbar {
width: 5px;
+ height: 5px;
}
::-webkit-scrollbar-thumb {
background-color: var(--main-color);
@@ -35,9 +37,14 @@ body {
background-color: var(--secondary-color);
min-height: 100vh;
color: white;
+ line-height: 1.3;
}
a {
color: var(--link-color);
+ transition: color 1s;
+}
+a:hover {
+ color: var(--link-highlight-color);
}
p {
font-size: 1.3rem;
@@ -211,7 +218,7 @@ body {
}
#index .index p {
text-align: center;
- font-size: var(--body-font-size);
+ font-size: calc(var(--body-font-size) + 0.25rem);
}
#index .index div {
display: flex;
@@ -312,7 +319,7 @@ body {
}
#index-blog .index-blog div h3 {
text-align: center;
- font-size: var(--body-font-size);
+ font-size: calc(var(--title-font-size) - 1rem);
}
#index-blog .index-blog div p {
margin: 40px;
@@ -465,8 +472,8 @@ body {
background-color: var(--bg-color);
border-radius: 10px 10px 10px;
}
- #blog div .bloglistitem h2 {
- font-size: var(--blogtitle-font-size);
+ #blog div .bloglistitem h3 {
+ font-size: calc(var(--title-font-size) - 1rem);
margin-top: 10px;
margin-left: 10px;
}
@@ -474,18 +481,114 @@ body {
font-size: var(--shortdescription-font-size);
margin-left: 10px;
}
+ #blog div .bloglistitem .date {
+ font-size: calc(var(--shortdescription-font-size) + 1rem)
+ }
#blog div .bloglistitem button {
width: var(--button-width);
height: var(--button-height);
border: none;
- font-size: var(--blogtitle-font-size);
+ font-size: var(--body-font-size);
color: white;
background-color: var(--main-color);
border-radius: var(--button-border-radius);
}
+
+ /* Blog Item */
+ :root {
+ --code-border-radius: 5px 5px 5px;
+ }
+ #blogitem {
+ }
#blogitem div {
margin: 25px;
}
+ #blogitem div h1 {
+ font-size: var(--title-font-size);
+ }
+ #blogitem div h1 code {
+ color: white;
+ background-color: rgba(34, 37, 38);
+ margin: 5px;
+ padding-top: -5px;
+ padding-left: 15px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ border-radius: var(--code-border-radius);
+ }
+ #blogitem div h2 {
+ color: rgba(45, 124, 234);
+ font-size: var(--body-font-size);
+ }
+ #blogitem div h2 code {
+ color: white;
+ background-color: rgba(34, 37, 38);
+ margin: 5px;
+ padding-top: -5px;
+ padding-left: 15px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ border-radius: var(--code-border-radius);
+ }
+ #blogitem div h3 {
+ font-size: calc(var(--body-font-size) - 0.25rem);
+ }
+ #blogitem div h3 code {
+ color: white;
+ background-color: rgba(34, 37, 38);
+ margin: 5px;
+ padding-top: -5px;
+ padding-left: 15px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ border-radius: var(--code-border-radius);
+ }
+ #blogitem div p {
+ font-size: var(--shortdescription-font-size);
+ }
+ #blogitem div h4 {
+ color: rgba(229, 181, 103);
+ font-size: calc(var(--body-font-size) - 0.5rem);
+ }
+ #blogitem div h4 code {
+ color: white;
+ background-color: rgba(34, 37, 38);
+ margin: 5px;
+ padding-top: -5px;
+ padding-left: 15px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ border-radius: var(--code-border-radius);
+ }
+ #blogitem div h5 {
+ color: rgba(227, 62, 62);
+ font-size: calc(var(--body-font-size) - 0.75rem);
+ }
+ #blogitem div h5 code {
+ color: white;
+ background-color: rgba(34, 37, 38);
+ margin: 5px;
+ padding-top: -5px;
+ padding-left: 15px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ border-radius: var(--code-border-radius);
+ }
+ #blogitem div p code {
+ font-size: var(--shortdescription-font-size);
+ color: white;
+ background-color: rgba(34, 37, 38);
+ margin: 5px;
+ padding-top: -5px;
+ padding-left: 15px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ border-radius: var(--code-border-radius);
+ }
+ #blogitem div .code-toolbar pre {
+ border-radius: 5px 5px 5px;
+ background-color: rgba(34, 37, 38);
+ }
}
/* Desktop */
@@ -707,7 +810,7 @@ body {
}
#about {}
#about div {
- width: 80%;
+ width: 1000px;
margin-left: auto;
margin-right: auto;
display: flex;
@@ -723,6 +826,7 @@ body {
margin-bottom: 20px;
width: var(--image-size);
height: var(--image-size);
+ border-radius: 50%;
}
#about div p {
font-size: var(--shortdescription-font-size);
@@ -735,7 +839,7 @@ body {
#blog {
width: 100%;
}
- #blog h1 {
+ #blog div h1 {
font-size: var(--title-font-size);
margin-left: calc((100% - var(--bloglistitem-width)) / 2);
}
@@ -755,7 +859,7 @@ body {
background-color: var(--bg-color);
border-radius: 10px 10px 10px;
}
- #blog div .bloglistitem h2 {
+ #blog div .bloglistitem h3 {
font-size: var(--blogtitle-font-size);
margin-top: 10px;
margin-left: 10px;
@@ -764,6 +868,9 @@ body {
font-size: var(--shortdescription-font-size);
margin-left: 10px;
}
+ #blog div .bloglistitem .date {
+ font-size: calc(var(--shortdescription-font-size) + 0.25rem);
+ }
#blog div .bloglistitem button {
width: calc(var(--button-width) - var(--button-size-offset));
height: calc(var(--button-height) - var(--button-size-offset));
@@ -773,8 +880,107 @@ body {
background-color: var(--main-color);
border-radius: var(--button-border-radius);
}
+
+ /* Blog Item */
+ :root {
+ --code-border-radius: 5px 5px 5px;
+ }
#blogitem div {
- margin: 25px;
+ width: 1000px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ #blogitem div h1 {
+ font-size: var(--title-font-size);
+ }
+ #blogitem div h1 code {
+ color: white;
+ background-color: rgba(34, 37, 38);
+ margin: 5px;
+ padding-top: -5px;
+ padding-left: 5px;
+ padding-right: 5px;
+ padding-bottom: 5px;
+ border-radius: var(--code-border-radius);
+ }
+ #blogitem div h2 {
+ color: rgba(45, 124, 234);
+ font-size: var(--body-font-size);
+ }
+ #blogitem div h2 code {
+ color: white;
+ background-color: rgba(34, 37, 38);
+ margin: 5px;
+ padding-top: -5px;
+ padding-left: 5px;
+ padding-right: 5px;
+ padding-bottom: 5px;
+ border-radius: var(--code-border-radius);
+ }
+ #blogitem div h3 {
+ font-size: calc(var(--body-font-size) - 0.25rem);
+ }
+ #blogitem div h3 code {
+ color: white;
+ background-color: rgba(34, 37, 38);
+ margin: 5px;
+ padding-top: -5px;
+ padding-left: 5px;
+ padding-right: 5px;
+ padding-bottom: 5px;
+ border-radius: var(--code-border-radius);
+ }
+ #blogitem div p {
+ font-size: var(--shortdescription-font-size);
+ }
+ #blogitem div h4 {
+ color: rgba(229, 181, 103);
+ font-size: calc(var(--body-font-size) - 0.5rem);
+ }
+ #blogitem div h4 code {
+ color: white;
+ background-color: rgba(34, 37, 38);
+ margin: 5px;
+ padding-top: -5px;
+ padding-left: 5px;
+ padding-right: 5px;
+ padding-bottom: 5px;
+ border-radius: var(--code-border-radius);
+ }
+ #blogitem div h5 {
+ color: rgba(227, 62, 62);
+ font-size: calc(var(--body-font-size) - 0.75rem);
+ }
+ #blogitem div h5 code {
+ color: white;
+ background-color: rgba(34, 37, 38);
+ margin: 5px;
+ padding-top: -5px;
+ padding-left: 5px;
+ padding-right: 5px;
+ padding-bottom: 5px;
+ border-radius: var(--code-border-radius);
+ }
+ #blogitem div ul {
+ font-size: var(--shortdescription-font-size);
+ }
+ #blogitem div p code {
+ font-size: var(--shortdescription-font-size);
+ color: white;
+ background-color: rgba(34, 37, 38);
+ margin: 5px;
+ padding-top: -5px;
+ padding-left: 5px;
+ padding-right: 5px;
+ padding-bottom: 5px;
+ border-radius: var(--code-border-radius);
+ }
+ #blogitem div .code-toolbar pre {
+ border-radius: 5px 5px 5px;
+ background-color: rgba(34, 37, 38);
+ }
+ #blogitem div .code-toolbar .toolbar .toolbar-item {
+ text-align: right;
}
}
diff --git a/scripts/blog.js b/scripts/blog.js
index 4f05ff1..9e37248 100644
--- a/scripts/blog.js
+++ b/scripts/blog.js
@@ -23,8 +23,8 @@ class Blog {
output.forEach((value, key) => {
data.body += `
<div class='bloglistitem' id='blogItem'>
- <h2>${value.title}</h2>
- <p>Date: ${(value.date.getMonth() + 1).toString().padStart(2, '0')}/${(value.date.getDate()).toString().padStart(2, '0')}/${value.date.getFullYear()}</p>
+ <h3>${value.title}</h3>
+ <p class='date'>Date: ${(value.date.getMonth() + 1).toString().padStart(2, '0')}/${(value.date.getDate()).toString().padStart(2, '0')}/${value.date.getFullYear()}</p>
<p>${value.short}</p>
<button class='bloglistbutton' value='${key}'>Read more</button>
</div>`
generated by cgit v1.2.3-70-g09d2 (git 2.52.0) at 2026-01-11 23:31:57 +0000