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.css1175
1 files changed, 0 insertions, 1175 deletions
diff --git a/assets/css/main.css b/assets/css/main.css
deleted file mode 100644
index 0bdaa9e..0000000
--- a/assets/css/main.css
+++ /dev/null
@@ -1,1175 +0,0 @@
-:root {
- --main-color: rgba(240, 134, 62);
- --secondary-color: rgba(24, 26, 27);
- --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));
-
- --title-font-size: 4rem;
- --body-font-size: 2rem;
- --code-font-size: 1.3rem;
- --shortdescription-font-size: 1.3rem;
-
- --button-width: 280px;
- --button-height: 100px;
- --button-border-radius: 20px 20px 20px;
-}
-
-::-webkit-scrollbar {
- width: 5px;
- height: 5px;
-}
-::-webkit-scrollbar-thumb {
- background-color: var(--main-color);
- border-radius: 10px;
-}
-::-webkit-scrollbar-track {
- background-color: var(--secondary-color);
-}
-::selection {
- background: var(--main-color);
-}
-html {
- scroll-behavior: smooth;
-}
-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;
-}
-body {
- margin: 0;
- padding: 0;
-}
-
-#header {
- top: 0;
- left: 0;
- position: fixed;
- width: 100%;
- height: 100vh;
- z-index: 9999;
- pointer-events: none;
-}
-#header .menuIcon {
- margin-top: 145%;
- margin-left: 80%;
- position: relative;
- display: flex;
- flex-direction: row;
- justify-content: center;
- gap: 1rem;
- width: 120px;
- height: 120px;
- background-color: var(--main-color);
- box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.63);
- border-radius: 10rem;
- transition: width 0.5s, height 0.5s, margin-top 0.5s, margin-left 0.5s, gap 0.5s, opacity 0.5s;
- z-index: 99999;
- pointer-events: all;
-}
-#header .menuIcon:active {
- margin-top: calc(145% - 15px);
- margin-left: calc(80% - 15px);
- width: 150px;
- height: 150px;
- gap: 1.5rem;
-}
-#header .menuIcon div {
- margin-top: auto;
- margin-bottom: auto;
- height: 1.3rem;
- width: 1.3rem;
- border-radius: 20rem;
- background-color: var(--secondary-color);
-}
-#header .menulist {
- text-align: center;
- background-color: var(--secondary-color);
- /* * Display none here */
- display: none;
- flex-direction: column;
- width: 100%;
- height: 100%;
- margin-left: auto;
- margin-right: auto;
- justify-content: center;
- gap: 4rem;
- opacity: 0;
- transition: opacity 0.5s;
- pointer-events: all;
-}
-#header .menulist img {
- width: 80%;
- height: auto;
- margin-left: auto;
- margin-right: auto;
-}
-#header .menulist a {
- margin-left: auto;
- margin-right: auto;
- color: white;
- width: 90%;
- font-size: 3rem;
- font-weight: bold;
- border: none;
- border-bottom: 2px solid var(--main-color);
- text-decoration: none;
- transition: width 0.5s, border 0.5s;
-}
-#header .menulist a:hover {
- width: 100%;
- border-bottom: 5px solid var(--main-color);
-}
-#header .menulist .close {
- margin-left: auto;
- margin-right: auto;
- width: 120px;
- height: 120px;
- border-radius: 12rem;
- text-align: center;
-}
-#header .menulist .close p {
- font-size: 10rem;
- font-family: Arial, Halvetica, sans-serif;
- color: var(--main-color);
- transition: font-size 0.5s;
-}
-
-/* Mobile */
-@media screen and (max-width: 1000px) {
- /* Main */
- :root {
- --index-section-height: 80vh;
- }
-
- .code-toolbar {
- font-size: 2rem;
- }
- h1 img {
- width: 100px;
- height: auto;
- }
- th {
- font-size: 2rem;
- }
- td {
- font-size: 2rem;
- }
- pre code {
- font-size: 2rem;
- }
- p code {
- font-size: 1rem;
- padding: 3px;
- background-color: var(--bg-color);
- border-radius: 5px 5px 5px;
- }
- p a img {
- width: 225px;
- height: auto;
- }
- section {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- table {}
- th {
- border: 1px solid lightgray;
- }
- td {
- border: 1px solid lightgray;
- }
-
- #index {
- margin: 0px;
- padding: 0px;
- width: 100%;
- height: var(--index-section-height);
- background-image: var(--gradient);
- }
- #index * {
- text-align: center;
- margin-left: auto;
- margin-right: auto;
- }
- #index .index {
- display: flex;
- flex-direction: column;
- height: 100%;
- width: 80%;
- }
- #index .index h1 {
- margin-top: 20vh;
- font-size: var(--title-font-size);
- }
- #index .index p {
- text-align: center;
- font-size: calc(var(--body-font-size) + 0.25rem);
- }
- #index .index div {
- display: flex;
- flex-direction: row;
- }
- #index .index div button {
- width: var(--button-width);
- height: var(--button-height);
- margin-top: 20px;
- margin-left: 10px;
- margin-right: 10px;
- font-size: var(--body-font-size);
- background-color: var(--main-color);
- border: none;
- border-radius: var(--button-border-radius);
- color: white;
- }
-
- :root {
- --workitem-border-radius: 25px 25px 25px;
- }
- #work {
- width: 100%;
- display: flex;
- flex-direction: column;
- }
- #work * {
- margin-left: auto;
- margin-right: auto;
- }
- #work h1 {
- font-size: var(--title-font-size);
- }
- #work .workitems {
- margin-bottom: 40px;
- width: 100%;
- font-size: var(--body-font-size);
- display: flex;
- flex-direction: column;
- }
- #work .workitems div {
- width: 90%;
- margin-top: 20px;
- margin-bottom: 20px;
- background-color: var(--bg-color);
- border-radius: var(--workitem-border-radius);
- }
- #work .workitems div * {
- text-align: center;
- }
- #work .workitems div h3 {
- font-size: calc(var(--title-font-size) - 1rem);
- }
- #work .workitems div ul {
-
- }
- #work .workitems div ul li {
- font-size: var(--body-font-size);
- margin: 0;
- }
-
- :root {}
- #index-blog {
- width: 100%;
- background-image: var(--gradient);
- }
- #index-blog * {
- margin-left: auto;
- margin-right: auto;
- }
- #index-blog h1 {
- padding-top: 40px;
- text-align: center;
- font-size: calc(var(--title-font-size));
- }
- #index-blog button {
- width: var(--button-width);
- height: var(--button-height);
- margin-bottom: 40px;
- border: none;
- color: white;
- background-color: var(--main-color);
- border-radius: var(--button-border-radius);
- font-size: var(--body-font-size);
- }
- #index-blog .index-blog {
- display: flex;
- flex-direction: column;
- }
- #index-blog .index-blog * {
- text-align: center;
- }
- #index-blog .index-blog div {
- width: 90%;
- margin-bottom: 40px;
- background-color: var(--bg-color);
- border-radius: var(--workitem-border-radius);
- }
- #index-blog .index-blog div h3 {
- text-align: center;
- font-size: calc(var(--title-font-size) - 1rem);
- }
- #index-blog .index-blog div p {
- margin: 40px;
- font-size: var(--shortdescription-font-size);
- }
-
- #mywebsites {}
- #mywebsites * {
- text-align: center;
- }
- #mywebsites h1 {
- font-size: var(--title-font-size);
- text-align: center;
- }
- #mywebsites p {
- font-size: calc(var(--shortdescription-font-size) + 0.5rem);
- }
- #mywebsites .websites {
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 40px;
- padding-top: 40px;
- width: 90%;
- background-color: var(--bg-color);
- border-radius: var(--workitem-border-radius);
- display: flex;
- flex-direction: column;
- }
- #mywebsites .websites * {
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 40px;
- }
- #mywebsites .websites img {
- width: 90%;
- }
-
- :root{
- --input-width: 40rem;
- --input-height: 50px;
- --textarea-height: 100px;
- }
- #contact {
- display: flex;
- flex-direction: column;
- text-align: center;
- }
- #contact h1 {
- font-size: var(--title-font-size);
- }
- #contact .form {
- display: flex;
- flex-direction: column;
- }
- #contact .form * {
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 20px;
- font-size: var(--body-font-size);
- color: white;
- }
- #contact .form input {
- height: var(--input-height);
- width: var(--input-width);
- color: white;
- margin-bottom: 20px;
- border: none;
- border-bottom: 2px solid var(--main-color);
- background-color: var(--secondary-color);
- transition: width 0.5s;
- }
- #contact .form textarea {
- height: var(--textarea-height);
- width: var(--input-width);
- border: none;
- border-bottom: 2px solid var(--main-color);
- background-color: var(--secondary-color);
- transition: height 0.5s;
- }
- #contact .form button {
- width: var(--button-width);
- height: var(--button-height);
- border: none;
- color: white;
- background-color: var(--main-color);
- border-radius: var(--button-border-radius);
- }
- #contact .form input:focus {
- width: calc(var(--input-width) + 10rem);
- }
- #contact .form textarea:focus {
- height: calc(var(--textarea-height) * 3);
- }
-
- /* About */
- :root {
- --image-size: 200px;
- }
-
- #about {}
- #about div {
- width: 80%;
- margin-left: auto;
- margin-right: auto;
- display: flex;
- flex-direction: column;
- text-align: center;
- }
- #about div * {}
- #about div h1 {
- font-size: var(--title-font-size);
- }
- #about div img {
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 20px;
- width: var(--image-size);
- height: var(--image-size);
- border-radius: 50%;
- }
- #about div p {
- font-size: var(--shortdescription-font-size);
- }
-
- /* Blog */
- :root {
- --bloglistitem-width: 85%;
- --blogtitle-font-size: 2.5rem;
- }
- #blog {
- width: 100%;
- }
- #blog h1 {
- font-size: var(--title-font-size);
- margin-left: calc((100% - var(--bloglistitem-width)) / 2);
- }
- #blog div {
- display: flex;
- flex-direction: column;
- }
- #blog div .bloglistitem {
- height: auto;
- width: var(--bloglistitem-width);
- margin-left: auto;
- margin-right: auto;
- margin-top: 20px;
- margin-bottom: 20px;
- padding: 20px;
- cursor: pointer;
- background-color: var(--bg-color);
- border-radius: 10px 10px 10px;
- }
- #blog div .bloglistitem h3 {
- font-size: calc(var(--title-font-size) - 1rem);
- margin-top: 10px;
- margin-left: 10px;
- }
- #blog div .bloglistitem p {
- 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(--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 .content {
- margin: 25px;
- }
- #blogitem .content video {
- width: 100%;
- }
- #blogitem .content ul {
- font-size: var(--shortdescription-font-size);
- }
- #blogitem .content ul li 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 .content h1 {
- font-size: var(--title-font-size);
- }
- #blogitem .content 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 .content h2 {
- color: rgba(45, 124, 234);
- font-size: var(--body-font-size);
- }
- #blogitem .content 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 .content h3 {
- font-size: calc(var(--body-font-size) - 0.25rem);
- }
- #blogitem .content 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 .content p {
- font-size: var(--shortdescription-font-size);
- }
- #blogitem .content p img {
- max-width: 100%;
- }
- #blogitem .content figure img {
- max-width: 100%;
- }
- #blogitem .content h4 {
- color: rgba(229, 181, 103);
- font-size: calc(var(--body-font-size) - 0.5rem);
- }
- #blogitem .content 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 .content h5 {
- color: rgba(227, 62, 62);
- font-size: calc(var(--body-font-size) - 0.75rem);
- }
- #blogitem .content 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 .content 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 .content .code-toolbar pre {
- border-radius: 5px 5px 5px;
- background-color: rgba(34, 37, 38);
- }
-
- #blogitem .fullscreenImg {
- display: none;
- }
-
- /* Footer */
- #footer {
- width: 100%;
- padding-top: 50px;
- }
- :root {
- --copied-width: 200px;
- --copied-height: 50px;
- }
- #footer .copied {
- display: none;
- }
-
- #footer .links {
- max-width: 100%;
- text-align: center;
- }
- #footer .links p {
- line-break: anywhere;
- }
- #footer .links p .footer-links {
- color: var(--link-color);
- text-decoration: underline;
- cursor: pointer;
- }
- #footer .links p .footer-links:hover {
- color: var(--link-highlight-color)
- }
-}
-
-/* Desktop */
-@media screen and (min-width: 1000px) {
- :root {
- --button-size-offset: 20px;
- }
- body button {
- cursor: pointer;
- }
-
- #header .menuIcon {
- width: 80px;
- height: 80px;
- margin-top: 80vh;
- margin-left: 90%;
- cursor: pointer;
- gap: 10px;
- }
- #header .menuIcon:hover {
- margin-top: calc(80vh - 10px);
- margin-left: calc(90% - 10px);
- width: 100px;
- height: 100px;
- gap: 15px;
- }
- #header .menuIcon div {
- width: 15px;
- height: 15px;
- }
- #header .menulist {
- gap: 2%;
- }
- #header .menulist img {
- width: 200px;
- height: auto;
- }
- #header .menulist a {
- font-size: 35px;
- }
- #header .menulist div {
- cursor: pointer;
- }
-
- #index {
- margin: 0px;
- padding: 0px;
- width: 100%;
- height: 80vh;
- background-image: var(--gradient);
- }
- #index * {
- margin-left: auto;
- margin-right: auto;
- }
- #index .index {
- display: flex;
- flex-direction: column;
- height: 100%;
- width: 80%;
- }
- #index .index h1 {
- font-size: calc(var(--title-font-size) - 0.5rem);
- }
- #index .index p {
- font-size: calc(var(--body-font-size) - 0.5rem);
- }
- #index .index div {
- display: flex;
- flex-direction: row;
- }
- #index .index div button {
- width: calc(var(--button-width) - var(--button-size-offset));
- height: calc(var(--button-height) - var(--button-size-offset));
- margin-top: 20px;
- margin-left: 10px;
- margin-right: 10px;
- font-size: var(--body-font-size);
- background-color: var(--main-color);
- border: none;
- border-radius: var(--button-border-radius);
- color: white;
- }
-
- /* Work */
- :root {
- --workitem-border-radius: 25px 25px 25px;
- }
- #work {
- width: 100%;
- display: flex;
- flex-direction: column;
- }
- #work * {
- margin-left: auto;
- margin-right: auto;
- }
- #work h1 {
- font-size: var(--title-font-size);
- }
- #work .workitems {
- margin-bottom: 40px;
- width: 100%;
- font-size: var(--body-font-size);
- display: flex;
- flex-direction: row;
- justify-content: center;
- }
- #work .workitems div {
- width: 45%;
- margin-left: 20px;
- margin-right: 20px;
- background-color: var(--bg-color);
- border-radius: var(--workitem-border-radius);
- }
- #work .workitems div * {
- text-align: center;
- }
- #work .workitems div h3 {
- font-size: var(--body-font-size);
- }
- #work .workitems div ul {}
- #work .workitems div ul li {
- font-size: var(--shortdescription-font-size);
- margin: 0;
- }
-
- /* Index Blog */
- #index-blog {
- width: 100%;
- background-image: var(--gradient);
- }
- #index-blog * {
- margin-left: auto;
- margin-right: auto;
- }
- #index-blog h1 {
- padding-top: 40px;
- text-align: center;
- font-size: calc(var(--title-font-size));
- }
- #index-blog button {
- width: calc(var(--button-width) - var(--button-size-offset));
- height: calc(var(--button-height) - var(--button-size-offset));
- margin-bottom: 40px;
- border: none;
- color: white;
- background-color: var(--main-color);
- border-radius: var(--button-border-radius);
- font-size: var(--body-font-size);
- }
- #index-blog .index-blog {
- display: flex;
- flex-direction: row;
- }
- #index-blog .index-blog * {
- text-align: center;
- }
- #index-blog .index-blog div {
- width: 45%;
- margin-bottom: 40px;
- background-color: var(--bg-color);
- border-radius: var(--workitem-border-radius);
- }
- #index-blog .index-blog div h3 {
- text-align: center;
- font-size: var(--body-font-size);
- }
- #index-blog .index-blog div p {
- margin: 40px;
- font-size: var(--shortdescription-font-size);
- }
-
- /* Mywebsites */
- #mywebsites {
- text-align: center;
- }
- #mywebsites h1 {
- font-size: var(--title-font-size);
- }
- #mywebsites p {
- font-size: var(--shortdescription-font-size);
- }
- #mywebsites .websites {
- margin-left: auto;
- margin-right: auto;
- display: flex;
- flex-direction: row;
- justify-content: center;
- }
- #mywebsites .websites img {
- width: 40%;
- margin-left: 20px;
- margin-right: 20px;
- cursor: pointer;
- }
-
- /* Contact*/
- :root {
- --input-width: 40rem;
- --input-height: 50px;
- --textarea-height: 100px;
- }
- #contact {}
- #contact {
- text-align: center;
- }
- #contact h1 {
- font-size: var(--title-font-size);
- }
- #contact .form {}
- #contact .form * {
- font-size: var(--shortdescription-font-size);
- }
- #contact .form input {
- height: var(--input-height);
- width: var(--input-width);
- color: white;
- margin-bottom: 20px;
- border: none;
- border-bottom: 2px solid var(--main-color);
- background-color: var(--secondary-color);
- transition: width 0.5s;
- }
- #contact .form textarea {
- height: var(--textarea-height);
- width: var(--input-width);
- border: none;
- border-bottom: 2px solid var(--main-color);
- background-color: var(--secondary-color);
- transition: height 0.5s;
- }
- #contact .form button {
- width: calc(var(--button-width) - var(--button-size-offset));
- height: calc(var(--button-height) - var(--button-size-offset));
- font-size: var(--body-font-size);
- margin-top: 40px;
- border: none;
- color: white;
- background-color: var(--main-color);
- border-radius: var(--button-border-radius);
- }
- #contact .form input:focus {
- width: calc(var(--input-width) + 10rem);
- }
- #contact .form textarea:focus {
- height: calc(var(--textarea-height) * 3);
- }
-
- /* About */
- :root {
- --image-size: 200px;
- }
- #about {}
- #about div {
- width: 1000px;
- margin-left: auto;
- margin-right: auto;
- display: flex;
- flex-direction: column;
- text-align: center;
- }
- #about div h1 {
- font-size: var(--title-font-size);
- }
- #about div img {
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 20px;
- width: var(--image-size);
- height: var(--image-size);
- border-radius: 50%;
- }
- #about div p {
- font-size: var(--shortdescription-font-size);
- }
-
- :root {
- --bloglistitem-width: calc(85%);
- --blogtitle-font-size: 2.5rem;
- }
- #blog {
- width: 100%;
- }
- #blog div h1 {
- font-size: var(--title-font-size);
- margin-left: calc((100% - var(--bloglistitem-width)) / 2);
- }
- #blog div {
- display: flex;
- flex-direction: column;
- }
- #blog div .bloglistitem {
- height: auto;
- width: var(--bloglistitem-width);
- margin-left: auto;
- margin-right: auto;
- margin-top: 20px;
- margin-bottom: 20px;
- padding: 20px;
- cursor: pointer;
- background-color: var(--bg-color);
- border-radius: 10px 10px 10px;
- }
- #blog div .bloglistitem h3 {
- font-size: var(--blogtitle-font-size);
- margin-top: 10px;
- margin-left: 10px;
- }
- #blog div .bloglistitem p {
- 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));
- border: none;
- 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;
- --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 .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 .content h1 {
- font-size: var(--title-font-size);
- }
- #blogitem .content 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 .content h2 {
- color: rgba(45, 124, 234);
- font-size: var(--body-font-size);
- }
- #blogitem .content 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 .content h3 {
- font-size: calc(var(--body-font-size) - 0.25rem);
- }
- #blogitem .content 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 .content p {
- font-size: var(--shortdescription-font-size);
- }
- #blogitem .content p img {
- max-width: 100%;
- cursor: pointer;
- }
- #blogitem .content figure img {
- max-width: 100%;
- cursor: pointer;
- }
- #blogitem .content h4 {
- color: rgba(229, 181, 103);
- font-size: calc(var(--body-font-size) - 0.5rem);
- }
- #blogitem .content 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 .content h5 {
- color: rgba(227, 62, 62);
- font-size: calc(var(--body-font-size) - 0.75rem);
- }
- #blogitem .content 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 .content ul {
- font-size: var(--shortdescription-font-size);
- }
- #blogitem .content ul li 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 .content 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 .content .code-toolbar pre {
- border-radius: 5px 5px 5px;
- background-color: rgba(34, 37, 38);
- }
- #blogitem .content .code-toolbar .toolbar .toolbar-item {
- text-align: right;
- }
-
- /* Footer */
- #footer {
- width: 100%;
- padding-top: 50px;
- }
- :root {
- --copied-width: 200px;
- --copied-height: 50px;
- }
- #footer .copied {
- display: none;
- left: calc(50% - (var(--copied-width) / 2));
- width: var(--copied-width);
- height: var(--copied-height);
- position: absolute;
- background-color: var(--main-color);
- }
-
- #footer .links {
- width: 100%;
- display: flex;
- flex-direction: column;
- text-align: center;
- }
- #footer .links p {
- line-break: anywhere;
- }
- #footer .links p .footer-links {
- color: var(--link-color);
- text-decoration: underline;
- cursor: pointer;
- }
- #footer .links p .footer-links:hover {
- color: var(--link-highlight-color);
- }
-}
-
generated by cgit v1.2.3-70-g09d2 (git 2.52.0) at 2026-01-11 20:26:15 +0000