forked from hero/www_hero_project
mycelium
This commit is contained in:
sasha-astiadi
@@ -30,9 +30,18 @@
|
||||
}
|
||||
|
||||
.bg-purple {
|
||||
background-color: #4207ab ;
|
||||
background-color: #40B9C9 ;
|
||||
}
|
||||
|
||||
.bg-black {
|
||||
color: #000 ;
|
||||
}
|
||||
|
||||
.bg-transparent {
|
||||
background-color: rgba(66, 7, 171, 0); /* Fully transparent */
|
||||
}
|
||||
|
||||
|
||||
/* Image styling in markdown */
|
||||
img[src*="#mx-auto"] { margin: auto; }
|
||||
img[src*="#small"] { width: 68px; margin: auto; }
|
||||
@@ -50,20 +59,20 @@ img[src*="#3col"] { width: 100px; margin-left: auto; margin-right: auto; }
|
||||
|
||||
/* Layer components */
|
||||
@layer components {
|
||||
h1 { @apply text-xl lg:text-4xl xl:text-7xl font-bold leading-4 my-4; font-family: "Reddit Sans", sans-serif; font-weight: 900; line-height: 1em; }
|
||||
h1 { @apply text-xl lg:text-4xl xl:text-7xl; 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 { @apply text-xl md:text-2xl lg:text-4xl; font-weight: 600; 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 { @apply text-xl lg:text-2xl font-normal my-4; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
|
||||
h3 strong { @apply font-medium; font-weight: 400; }
|
||||
h4 { @apply text-xl lg:text-xl 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: 300; }
|
||||
h6 { @apply text-lg not-italic font-normal my-1; font-family: "Reddit Sans", sans-serif; font-weight: 300; letter-spacing: 0.02em; }
|
||||
p { @apply text-lg lg:text-xl leading-tight tracking-normal font-normal my-0; font-family: "Reddit Sans", sans-serif; font-weight: 300; letter-spacing: 0.03em; }
|
||||
h4 { @apply text-xl lg:text-xl font-normal my-4; color: #fff; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
|
||||
h5 { @apply text-xl lg:text-lg font-normal; font-family: "Reddit Sans", sans-serif; font-weight: 300; }
|
||||
h6 { @apply text-lg not-italic font-normal my-1; color: #fff; font-family: "Reddit Sans", sans-serif; font-weight: 400; letter-spacing: 0.02em; }
|
||||
p { @apply text-lg lg:text-xl leading-tight tracking-normal font-normal my-0; color: #fff; font-family: "Reddit Sans", sans-serif; font-weight: 300; letter-spacing: 0.03em; }
|
||||
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-sm lg:text-sm font-light 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; }
|
||||
button { @apply inline-block text-base px-3.5 py-2.5 rounded-md; font-family: "Reddit Sans", sans-serif; font-weight: 400; color:#fff; }
|
||||
article h2 { @apply text-xl lg:text-3xl font-medium; font-family: "Reddit Sans", sans-serif; font-weight: 500; }
|
||||
article { @apply text-base lg:text-lg; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
|
||||
}
|
||||
@@ -71,24 +80,24 @@ img[src*="#3col"] { width: 100px; margin-left: auto; margin-right: auto; }
|
||||
|
||||
|
||||
/* Link styles */
|
||||
a:hover { color: #4207ab; }
|
||||
button:hover { color: #4207ab; }
|
||||
button { font-weight: 500; }
|
||||
a:hover { color: #6208ff; }
|
||||
button:hover { color: #6208ff; }
|
||||
button { font-weight: 500; color: #fff; }
|
||||
.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 { color: #fff; background-color: #6208ff; 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; }
|
||||
|
||||
/* Header styles */
|
||||
button { background: transparent; color: black; border-radius: 2px; border: 1px solid black; box-shadow: none; }
|
||||
button { background: transparent; color: #fff; border-radius: 2px; border: 1px solid #fff; 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; }
|
||||
.link2 { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; color: #4207ab !important; font-weight: 600 !important; border: 0px !important; }
|
||||
.link2 { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; color: #6208ff !important; font-weight: 600 !important; border: 0px !important; }
|
||||
|
||||
|
||||
|
||||
@@ -101,7 +110,7 @@ header { font-family: "Reddit Sans"; }
|
||||
.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; }
|
||||
.header h1 { color: #fff; 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; }
|
||||
|
||||
@@ -4,33 +4,33 @@ main {
|
||||
}
|
||||
|
||||
/* Heading styles: color n size */
|
||||
h1, .h1 { font-size: 2.5rem; font-weight: 900; }
|
||||
h2, .h2 { font-size: 2rem; font-weight: 700; }
|
||||
h3, .h3 { font-size: 1.5rem;font-weight: 400; color: #4207ab; }
|
||||
h4, .h4 { font-size: 1.3rem; }
|
||||
h5, .h5 { font-size: 1.15rem; font-style: normal; color:#3f3f3f }
|
||||
h6, .h6 { font-size: 1rem; color:#3f3f3f }
|
||||
p, .p { font-size: 1.2rem; color:#232323}
|
||||
h1, .h1 { font-size: 3.5rem; font-weight: 900; color: #fff; }
|
||||
h2, .h2 { font-size: 2rem; font-weight: 700; color: #fff; }
|
||||
h3, .h3 { font-size: 1.5rem;font-weight: 400; color: #6208ff; }
|
||||
h4, .h4 { font-size: 1.3rem; color:#cbd5e0 }
|
||||
h5, .h5 { font-size: 0.95rem; font-style: normal; color: #cbd5e0 }
|
||||
h6, .h6 { font-size: 1rem; color: #cbd5e0; }
|
||||
p, .p { font-size: 1.2rem; color: #cbd5e0}
|
||||
|
||||
/* Navigation styles */
|
||||
#xp-heading { margin: 0; }
|
||||
.navWhite, .navWhite:visited { color: #fff; }
|
||||
.navWhite:focus, .navWhite:active { color: #cbd5e0; }
|
||||
.text-blue-light { color: #4299e1; }
|
||||
.text-blue-light { color: #6208ff; }
|
||||
.text-blue-dark { color: #3182ce; }
|
||||
.text-shadow-titles { text-shadow: 4px 4px 2px #000; }
|
||||
.gradient-titles { background: linear-gradient(to bottom, #4299e1, #000); }
|
||||
.text-shadow-titles { text-shadow: 4px 4px 2px #fff; }
|
||||
.gradient-titles { background: linear-gradient(to bottom, #6208ff, #fff); }
|
||||
.ctr { text-align: center; }
|
||||
.legal { font-size: 0.75rem; }
|
||||
|
||||
/* Link styles */
|
||||
a { color: #000; }
|
||||
a:focus, a:hover { border: none; color: #4299e1; }
|
||||
a { color: #fff; }
|
||||
a:focus, a:hover { border: none; color: #6208ff; }
|
||||
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: #4207ab; }
|
||||
nav h4 a { border: 0; color: #fff; }
|
||||
nav h4 a:hover { border: 0; color: #6208ff; }
|
||||
nav h4 a:focus, nav h4 a:active { border: 0; color: #fff; }
|
||||
h5 a { color: #6208ff; }
|
||||
|
||||
/* Text and paragraph styles */
|
||||
pre, code { font-feature-settings: normal; }
|
||||
@@ -39,9 +39,9 @@ pre, code { font-feature-settings: normal; }
|
||||
/* 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; }
|
||||
.background-hero-image-div { position: relative; overflow: hidden; width: 100%; background-color: #fff; 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, #fff, transparent); }
|
||||
.background-hero-title-text { text-shadow: 4px 4px 2px #fff; }
|
||||
|
||||
/* Table styles */
|
||||
table { border-collapse: collapse; }
|
||||
@@ -64,7 +64,7 @@ table.noborders td img { display: inline-block; }
|
||||
.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 { border-top: 1px solid #fff; 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; }
|
||||
|
||||
Reference in New Issue
Block a user