sashaastiadi/www_mycelium
1
0
Fork 1
forked from hero/www_hero_project
Code Pull Requests Activity

new web

Browse Source
This commit is contained in:
sasha-astiadi
2024-05-03 22:15:09 +02:00
parent eda53e2dcd
commit 0176ba951a
328 changed files with 8855 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
css/admonition.css Normal file
View File

@@ -0,0 +1,81 @@
:root {
--md-admonition-icon--note: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z'/></svg>");
--md-admonition-icon--abstract: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'/></svg>");
--md-admonition-icon--info: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z'/></svg>");
--md-admonition-icon--tip: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27z'/></svg>");
--md-admonition-icon--success: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 20.42-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42z'/></svg>");
--md-admonition-icon--question: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10z'/></svg>");
--md-admonition-icon--warning: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 14h-2v-2h2m0 6h-2v-4h2m-.29-11.71c.39-.39.39-1.02 0-1.41l-4.59-4.59c-.39-.39-1.02-.39-1.41 0L4.21 6.38c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0zM5.71 16.88l4.59-4.59c.39-.39.39-1.02 0-1.41l-4.59-4.59c-.39-.39-1.02-.39-1.41 0L3.29 10.47c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0z'/></svg>");
}
.md-typeset .admonition {
display: flex;
border-radius: 0.25rem;
margin: 1rem 0;
padding: 1rem;
position: relative;
}
.md-typeset .admonition.note {
background-color: var(--md-admonition-background-color--note, #f9fafb);
border: 1px solid var(--md-admonition-border-color--note, #e9ecef);
}
.md-typeset .admonition.abstract {
background-color: var(--md-admonition-background-color--abstract, #f9f9f9);
border: 1px solid var(--md-admonition-border-color--abstract, #e1e4e8);
}
.md-typeset .admonition.info {
background-color: var(--md-admonition-background-color--info, #e7f1fb);
border: 1px solid var(--md-admonition-border-color--info, #addbee);
}
.md-typeset .admonition.tip {
background-color: var(--md-admonition-background-color--tip, #e5f8ec);
border: 1px solid var(--md-admonition-border-color--tip, #a3e1b1);
}
.md-typeset .admonition.success {
background-color: var(--md-admonition-background-color--success, #d4edda);
border: 1px solid var(--md-admonition-border-color--success, #c3e6cb);
}
.md-typeset .admonition.question {
background-color: var(--md-admonition-background-color--question, #fefefe);
border: 1px solid var(--md-admonition-border-color--question, #dadada);
}
.md-typeset .admonition.warning {
background-color: var(--md-admonition-background-color--warning, #fff3cd);
border: 1px solid var(--md-admonition-border-color--warning, #ffeeba);
}
.md-typeset .admonition-title {
font-size: 1rem;
font-weight: 700;
margin: 0;
}
.md-typeset .admonition-content {
margin: 0;
padding: 0 1rem;
flex: 1;
}
.md-typeset .admonition-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
position: absolute;
top: 0;
left: 0;
}
.md-typeset .admonition-icon > svg {
fill: var(--md-admonition-icon-fill, #212529);
width: 1.5rem;
height: 1.5rem;
}

80
css/code.css Normal file
View File

@@ -0,0 +1,80 @@
/* Syntax Highlighting */
code.language-html,
code.language-css,
code.language-md,
code.language-cmd,
code.language-bash,
code.language-text,
code.language-js,
span.o,
span.nx {
color: rgb(255, 255, 255);
line-height: 1.4;
}
span.c {
color: hsl(120, 100%, 20%);
}
span.p,
span.s1,
span.s2,
span.nt {
color: hsl(40, 100%, 30%);
}
span.gs,
span.gh,
span.ge {
color: hsl(208, 100%, 50%);
}
span.gs {
font-weight: bold;
}
span.ge {
font-style: italic;
}
pre,
code {
font-family: monospace;
}
code {
background-color: hsl(0, 0%, 98%);
border-radius: 3px;
color: hsl(120, 100%, 20%);
font-size: 85%;
}
pre {
margin: 0;
padding: 1rem;
overflow: scroll;
}
pre code {
background-color: transparent;
color: inherit;
font-size: 100%;
padding: 0;
}
.highlight {
background-color: transparent;
border-radius: 3px;
margin: 0 0 0.5rem;
padding: 0;
& pre {
margin-bottom: 0;
overflow-x: auto;
}
& .lineno {
color: hsla(0, 0%, 67%, 0.72);
display: inline-block;
padding: 0 0.9rem 0 0.25rem;
}
}

115
css/index.css Normal file
View File

@@ -0,0 +1,115 @@
/* Tailwind CSS Base */
@import "tailwindcss/base";
/* Tailwind CSS Components */
@import "tailwindcss/components";
/* Tailwind CSS Utilities */
@import "tailwindcss/utilities";
/* Importing external CSS files */
@import "code.css";
@import "layout.css";
@import "admonition.css";
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');
/* Global styles */
.backdrop-blur {
-webkit-backdrop-filter: blur(40px);
}
* {
font-family: 'Reddit Sans', sans-serif;
}
.bg-semi-white {
background-color: rgba(255, 255, 255, 0.75);
}
/* Image styling in markdown */
img[src*="#mx-auto"] { margin: auto; }
img[src*="#small"] { width: 68px; }
img[src*="#sm"] { width: 200px; }
img[src*="#md"] { width: 300px; }
img[src*="#medium"] { width: 500px; }
img[src*="#logo"] { max-width: min(250px, 100%); margin: auto; }
img[src*="#large"] { width: min(60vw, 100vh); margin: auto; }
img[src*="#fill"] { width: 100%; height: 100%; }
img[src*="#tft_img"] { width: 150px; margin: 8px; }
img[src*="#icon"] { width: 65px; margin: 4px; }
img[src*="#fig"] { width: 150px; }
.logo_size { width: 200px; }
/* Layer components */
@layer components {
h1 { @apply text-xl lg:text-4xl xl:text-5xl font-bold leading-4 my-4; font-family: "Reddit Sans", sans-serif; font-weight: 900; line-height: 1em; }
h1 strong { @apply font-extrabold; }
h2 { @apply text-xl md:text-2xl lg:text-4xl font-bold leading-4 my-4; font-family: "Reddit Sans", sans-serif; line-height: 1; font-weight: 600; }
h2 strong { @apply font-medium; }
h3 { @apply text-xl lg:text-2xl font-normal my-4; color: #4207ab; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
h3 strong { @apply font-medium; font-weight: 400; }
h4 { @apply text-xl lg:text-2xl font-normal my-4; color: #4207ab; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
h5 { @apply text-xl lg:text-xl font-normal; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
h6 { @apply text-lg not-italic font-normal my-1; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
p { @apply text-base lg:text-lg leading-tight tracking-normal font-normal my-0; font-family: "Reddit Sans", sans-serif; font-weight: 300; letter-spacing: 0.05em; }
blockquote { @apply border-l-4 border-gray-400 mx-2 my-2 p-2; font-family: "Reddit Sans", sans-serif; font-weight: 300; }
li { @apply text-lg lg:text-xl font-normal my-2; font-family: "Reddit Sans", sans-serif; font-weight: 200; }
li li { @apply text-sm lg:text-sm font-light;font-family: "Reddit Sans", sans-serif; font-weight: 200; }
button { @apply inline-block text-base lg:text-lg px-8 py-1 my-3 border-2 shadow;font-family: "Reddit Sans", sans-serif; font-weight: 400; }
article h2 { @apply text-xl lg:text-3xl font-medium; font-family: "Reddit Sans", sans-serif; font-weight: 500; }
article p, li { @apply text-base lg:text-lg;font-family: "Reddit Sans", sans-serif; font-weight: 300; }
}
/* Link styles */
a:hover { color: #4207ab; }
button:hover { color: #4207ab; }
button { font-weight: 500; }
.experience-btn { border: none; margin: 0; padding: 0; color: black; padding: 10px; width: fit-content; }
.experience-btn p { @apply text-lg; }
.experience-btn:hover { background: white; }
.experience-btn h4 { white-space: normal; }
header .customize { background-color: transparent; position: absolute; }
footer .customize { color: #fff; background-color: #4207ab; display: flex; flex-direction: column; align-items: center; padding-top: 24px; padding-bottom: 24px; }
footer .customize img { width: 60px; }
header .customize div { box-shadow: none; text-transform: uppercase; font-weight: 700 !important; }
.link2 { color: #4207ab; font-weight: 600;}
/* Header styles */
button { background: transparent; color: black; border-radius: 2px; border: 2px solid black; box-shadow: none; }
a { border: none; }
header { font-family: "Reddit Sans"; }
.nav_btn { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; }
/* Quicklinks styles */
.quicklinks { box-sizing: border-box; display: inline-block; margin: 0 auto; border-radius: 10px; margin-top: 30px; margin-bottom: 20px; }
.quicklinks img { height: auto; max-width: 200px; display: inline-block; padding: 10px; filter: grayscale(100%); position: relative; margin-right: 30px; transition: all 0.2s ease; opacity: 0.5; }
.quicklinks img:hover { opacity: 1; filter: grayscale(0%); }
/* Banner and Header styles */
.banner, .header { width: 100%; margin: 0; padding: 120px 0; text-align: center; position: relative; display: block; color: #fff !important; letter-spacing: 0.5px; overflow: hidden; transition: 1.5s; }
.header { height: auto; background: none; padding: 200px 0; }
.banner h2, .header h1 { margin: auto; color: #fff; position: relative; transition: 0.3s; z-index: 1; white-space: nowrap; }
.header h1 { color: #000; transition: none; }
.banner h2 svg { font-size: 40px; margin-left: 15px; position: absolute; top: 55%; transform: translateY(-50%) scale(0.5); opacity: 0; transition: 0.3s; }
.banner .back, .header .back { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-position: center; background-size: cover; filter: grayscale(1) contrast(1.4); opacity: 0.25; transition: 1.5s; }
.header .back { filter: none; opacity: 1; background-position: center; background-size: cover; background-repeat: no-repeat; }
.banner:hover { background: #4b3a92; }
.header:hover { background: none; }
.banner:hover h2 svg { transform: translateY(-50%) scale(1); opacity: 1; }
.banner:hover h2 { padding-right: 40px; }
.header:hover h1 { padding-right: 0; }
.banner:hover .back { transform: scale(1.03); }
.header:hover .back { transform: none; }
/* Responsive styles */
@media (max-width: 768px) { /* h2 { font-size: 4rem; } */ }
@media (max-width: 640px) { .banner h2 { font: 600 7vw/10vw; } .header h1 { font-size: 35px; } .banner h2 svg { font-size: 30px; } }
@media (max-width: 480px) { .banner, .header { padding: 80px 0; } footer { text-align: center; } /* h2 { font-size: 3rem; } */ }

70
css/layout.css Normal file
View File

@@ -0,0 +1,70 @@
/* Base styles */
main {
padding-top: 0;
}
/* Heading styles */
h1, .h1 { font-size: 2.5rem; font-weight: 900; }
h2, .h2 { font-size: 2rem; font-weight: 700; }
h3, .h3 { font-weight: 400; color: #4207ab; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; font-style: normal; }
h6, .h6 { font-size: 1rem; }
/* Navigation styles */
#xp-heading { margin: 0; }
.navWhite, .navWhite:visited { color: #fff; }
.navWhite:focus, .navWhite:active { color: #cbd5e0; }
.text-blue-light { color: #4299e1; }
.text-blue-dark { color: #3182ce; }
.text-shadow-titles { text-shadow: 4px 4px 2px #000; }
.gradient-titles { background: linear-gradient(to bottom, #4299e1, #000); }
.ctr { text-align: center; }
.legal { font-size: 0.75rem; }
/* Link styles */
a { color: #000; }
a:focus, a:hover { border: none; color: #4299e1; }
a:active { color: #2b6cb0; }
nav h4 a { border: 0; color: #000; }
nav h4 a:hover { border: 0; color: #4299e1; }
nav h4 a:focus, nav h4 a:active { border: 0; color: #000; }
h5 a { color: #4a5568; }
/* Text and paragraph styles */
pre, code { font-feature-settings: normal; }
.height-hero p, .height-post p { line-height: 1.75; }
/* Container and layout styles */
.height-hero, .height-post { height: 45vh; max-height: 45vh; overflow: hidden; }
.imgCover { object-fit: cover; object-position: center; height: 100%; width: 100%; }
.background-hero-image-div { position: relative; overflow: hidden; width: 100%; background-color: #000; height: 80vh; max-height: 80vh; }
.background-hero-title-block-fit { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 2rem 2rem; background: linear-gradient(to top, #000, transparent); }
.background-hero-title-text { text-shadow: 4px 4px 2px #000; }
/* Table styles */
table { border-collapse: collapse; }
table.leagues { width: 91%; margin: 1.5rem auto 0; }
table.leagues td.col { width: 50%; }
table.noborders { width: 91%; margin: 0 auto 1rem; }
table.noborders td { padding: 0.5rem 0; text-align: left; vertical-align: middle; }
table.noborders td img { display: inline-block; }
/* Miscellaneous styles */
.aspect-16x9 { padding-bottom: 56.25%; }
.lazypicturecaption { font-size: 0.875rem; margin-top: 0.5rem; text-align: center; }
.home-colOne p { line-height: 1.6; margin-bottom: 1rem; }
.home-colOne img { margin: 1rem 0; }
.container-comments { margin: 0 auto; font-size: 85%; width: 85%; max-width: 720px; }
.container-comments @media screen and (min-width: 900px) { width: 40%; }
/* Footnote styles */
.footnote-reference, .footnote-sim { font-size: 0.65em; }
.footnotes ol { padding-inline-start: 1.5rem; }
.footnotes ol li { margin-bottom: 0.5rem; font-size: 0.65em; }
.footnote-backref { font-size: 0.75em; }
.footnote-definition { border-top: 1px solid #000; padding-top: 1em; margin-top: 1em; }
.footnote-definition + .footnote-definition { border-top: 0; padding-top: 0; margin-top: 0; }
.footnote-definition-label { top: -0.4em; font-size: 0.65em; }
.footnote-definition-label + p { font-size: 75%; margin-top: -1.75em; margin-left: 1em; line-height: 1.35; }
.footnote-definition-label::after { content: "."; }