forked from hero/www_hero_project
116 lines
6.1 KiB
CSS
116 lines
6.1 KiB
CSS
|
/* 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; } */ }
|