summaryrefslogtreecommitdiff
path: root/assets/css/main.css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/main.css')
-rw-r--r--assets/css/main.css128
1 files changed, 91 insertions, 37 deletions
diff --git a/assets/css/main.css b/assets/css/main.css
index 22772dc..e118162 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -500,13 +500,16 @@ body {
}
#blogitem {
}
- #blogitem div {
+ #blogitem .content {
margin: 25px;
}
- #blogitem div ul {
+ #blogitem .content video {
+ width: 100%;
+ }
+ #blogitem .content ul {
font-size: var(--shortdescription-font-size);
}
- #blogitem div ul li code {
+ #blogitem .content ul li code {
color: white;
background-color: rgba(34, 37, 38);
margin: 5px;
@@ -516,10 +519,10 @@ body {
padding-bottom: 5px;
border-radius: var(--code-border-radius);
}
- #blogitem div h1 {
+ #blogitem .content h1 {
font-size: var(--title-font-size);
}
- #blogitem div h1 code {
+ #blogitem .content h1 code {
color: white;
background-color: rgba(34, 37, 38);
margin: 5px;
@@ -529,11 +532,11 @@ body {
padding-bottom: 5px;
border-radius: var(--code-border-radius);
}
- #blogitem div h2 {
+ #blogitem .content h2 {
color: rgba(45, 124, 234);
font-size: var(--body-font-size);
}
- #blogitem div h2 code {
+ #blogitem .content h2 code {
color: white;
background-color: rgba(34, 37, 38);
margin: 5px;
@@ -543,10 +546,10 @@ body {
padding-bottom: 5px;
border-radius: var(--code-border-radius);
}
- #blogitem div h3 {
+ #blogitem .content h3 {
font-size: calc(var(--body-font-size) - 0.25rem);
}
- #blogitem div h3 code {
+ #blogitem .content h3 code {
color: white;
background-color: rgba(34, 37, 38);
margin: 5px;
@@ -556,20 +559,20 @@ body {
padding-bottom: 5px;
border-radius: var(--code-border-radius);
}
- #blogitem div p {
+ #blogitem .content p {
font-size: var(--shortdescription-font-size);
}
- #blogitem div p img {
+ #blogitem .content p img {
max-width: 100%;
}
- #blogitem div figure img {
+ #blogitem .content figure img {
max-width: 100%;
}
- #blogitem div h4 {
+ #blogitem .content h4 {
color: rgba(229, 181, 103);
font-size: calc(var(--body-font-size) - 0.5rem);
}
- #blogitem div h4 code {
+ #blogitem .content h4 code {
color: white;
background-color: rgba(34, 37, 38);
margin: 5px;
@@ -579,11 +582,11 @@ body {
padding-bottom: 5px;
border-radius: var(--code-border-radius);
}
- #blogitem div h5 {
+ #blogitem .content h5 {
color: rgba(227, 62, 62);
font-size: calc(var(--body-font-size) - 0.75rem);
}
- #blogitem div h5 code {
+ #blogitem .content h5 code {
color: white;
background-color: rgba(34, 37, 38);
margin: 5px;
@@ -593,7 +596,7 @@ body {
padding-bottom: 5px;
border-radius: var(--code-border-radius);
}
- #blogitem div p code {
+ #blogitem .content p code {
font-size: var(--shortdescription-font-size);
color: white;
background-color: rgba(34, 37, 38);
@@ -604,10 +607,14 @@ body {
padding-bottom: 5px;
border-radius: var(--code-border-radius);
}
- #blogitem div .code-toolbar pre {
+ #blogitem .content .code-toolbar pre {
border-radius: 5px 5px 5px;
background-color: rgba(34, 37, 38);
}
+
+ #blogitem .fullscreenImg {
+ display: none;
+ }
}
/* Desktop */
@@ -937,16 +944,61 @@ body {
/* Blog Item */
:root {
--code-border-radius: 5px 5px 5px;
+ --full-screen-button-width: 40px;
+ --full-screen-button-height: var(--full-screen-button-width);
+ --full-screen-image-width: 80%;
+ --full-screen-image-height: auto;
+ --full-screen-image-radius: 10px 10px 10px;
+ }
+
+ #blogitem .fullscreenImg {
+ display: flex;
+ justify-content: center;
+ position: fixed;
+ width: var(--full-screen-image-width);
+ height: var(--full-screen-image-height);
+ top: calc((100% - var(--full-screen-image-height)) / 2);
+ left: calc((100% - var(--full-screen-image-width)) / 2);
+ background-color: var(--bg-color);
+ border-radius: var(--full-screen-image-radius);
+ transition: opacity 1s;
}
- #blogitem div {
+ #blogitem .fullscreenImg img {
+ width: 90%;
+ }
+ #blogitem .fullscreenImg div {
+ position: absolute;
+ width: var(--full-screen-button-width);
+ height: var(--full-screen-button-height);
+ background-color: var(--main-color);
+ font-size: 2rem;
+ font-weight: bold;
+ cursor: pointer;
+ text-align: center;
+ }
+ #blogitem .fullscreenImg .closeFullscreenImage {
+ right: 0;
+ top: 0;
+ text-align: center;
+ }
+ #blogitem .fullscreenImg .navleft {
+ top: 50%;
+ left: 0;
+ }
+ #blogitem .fullscreenImg .navright {
+ top: 50%;
+ right: 0;
+ }
+
+ #blogitem .content {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
- #blogitem div h1 {
+ #blogitem .content h1 {
font-size: var(--title-font-size);
}
- #blogitem div h1 code {
+ #blogitem .content h1 code {
color: white;
background-color: rgba(34, 37, 38);
margin: 5px;
@@ -956,11 +1008,11 @@ body {
padding-bottom: 5px;
border-radius: var(--code-border-radius);
}
- #blogitem div h2 {
+ #blogitem .content h2 {
color: rgba(45, 124, 234);
font-size: var(--body-font-size);
}
- #blogitem div h2 code {
+ #blogitem .content h2 code {
color: white;
background-color: rgba(34, 37, 38);
margin: 5px;
@@ -970,10 +1022,10 @@ body {
padding-bottom: 5px;
border-radius: var(--code-border-radius);
}
- #blogitem div h3 {
+ #blogitem .content h3 {
font-size: calc(var(--body-font-size) - 0.25rem);
}
- #blogitem div h3 code {
+ #blogitem .content h3 code {
color: white;
background-color: rgba(34, 37, 38);
margin: 5px;
@@ -983,20 +1035,22 @@ body {
padding-bottom: 5px;
border-radius: var(--code-border-radius);
}
- #blogitem div p {
+ #blogitem .content p {
font-size: var(--shortdescription-font-size);
}
- #blogitem div p img {
+ #blogitem .content p img {
max-width: 100%;
+ cursor: pointer;
}
- #blogitem div figure img {
+ #blogitem .content figure img {
max-width: 100%;
+ cursor: pointer;
}
- #blogitem div h4 {
+ #blogitem .content h4 {
color: rgba(229, 181, 103);
font-size: calc(var(--body-font-size) - 0.5rem);
}
- #blogitem div h4 code {
+ #blogitem .content h4 code {
color: white;
background-color: rgba(34, 37, 38);
margin: 5px;
@@ -1006,11 +1060,11 @@ body {
padding-bottom: 5px;
border-radius: var(--code-border-radius);
}
- #blogitem div h5 {
+ #blogitem .content h5 {
color: rgba(227, 62, 62);
font-size: calc(var(--body-font-size) - 0.75rem);
}
- #blogitem div h5 code {
+ #blogitem .content h5 code {
color: white;
background-color: rgba(34, 37, 38);
margin: 5px;
@@ -1020,10 +1074,10 @@ body {
padding-bottom: 5px;
border-radius: var(--code-border-radius);
}
- #blogitem div ul {
+ #blogitem .content ul {
font-size: var(--shortdescription-font-size);
}
- #blogitem div ul li code {
+ #blogitem .content ul li code {
font-size: var(--shortdescription-font-size);
color: white;
background-color: rgba(34, 37, 38);
@@ -1034,7 +1088,7 @@ body {
padding-bottom: 5px;
border-radius: var(--code-border-radius);
}
- #blogitem div p code {
+ #blogitem .content p code {
font-size: var(--shortdescription-font-size);
color: white;
background-color: rgba(34, 37, 38);
@@ -1045,11 +1099,11 @@ body {
padding-bottom: 5px;
border-radius: var(--code-border-radius);
}
- #blogitem div .code-toolbar pre {
+ #blogitem .content .code-toolbar pre {
border-radius: 5px 5px 5px;
background-color: rgba(34, 37, 38);
}
- #blogitem div .code-toolbar .toolbar .toolbar-item {
+ #blogitem .content .code-toolbar .toolbar .toolbar-item {
text-align: right;
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.52.0) at 2026-01-11 20:26:14 +0000