Add files via upload

css/archives.css

@@ -0,0 +1,43 @@
+/*css for banner*/
+.banner img{
+ height: 350px;
+ width: 100%;
+ border-radius: 8px;
+}
+/*end*/
+/*css for archives*/
+.archives {
+ width: 100%; /* Set parent width to 100% */
+ display: flex; /* Use flexbox */
+ flex-wrap: wrap; /* Allow child elements to wrap */
+ gap: 20px;
+ justify-content: center;
+}
+
+.archive {
+ width: 240px; /* Set width of each child */
+ height: 350px;
+ border: 4px solid #783aff; /* Set border color */
+ transition: border-color 0.3s ease; /* Add transition for smooth border color change */
+}
+
+/* Change border color on hover */
+.archive:hover {
+ border-color: #a67dff;
+}
+
+.archiveImg {
+ height: 70%;
+ width: 100%;
+ overflow: hidden;
+}
+
+.archiveImg img{
+ width: 100%;
+ height: 100%;
+}
+
+.archiveDesc {
+ padding: 3px;
+}
+/*end*/

css/blog.css

@@ -0,0 +1,135 @@
+body {
+ width: -webkit-fill-available;
+} 
+
+/*css for anything in the blog*/
+.blogContent {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.blogContent h1{
+ color: #783aff;
+ margin-bottom: 18px;
+}
+
+.blogContent h3{
+ color: #06945d;
+ margin-top: 0px;
+ margin-bottom: 4px;
+}
+
+.blogContent h3{
+ margin-top: 0px;
+}
+
+.blogContent p{
+ margin-top: 0px;
+ width: 100%
+}
+
+.blogContent a{
+ color: aqua !important;
+ text-decoration: underline !important;
+}
+
+.blogContent img{
+ border-radius: 8px;
+ margin: 16px 0;
+ width: auto;
+ max-width: 100%;
+}
+
+.image-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0px;
+ margin: 0px;
+}
+
+.lbt {
+ display: inline-block;
+ width: 20px; /* Adjust width as needed */
+}
+
+.tab {
+ display:inline-block; 
+ margin-left: 40px; 
+}
+
+.thumbnail{
+ width: 96% !important;
+ border-radius: 8px;
+}
+
+.block {
+ background-color: black; /* Black background */
+ border-radius: 4px; /* Border radius of 8px */
+ border: 1px solid #783aff; /* Purple border */
+ padding: 0 2px; /* Padding left and right of 2px */
+}
+
+.snippet {
+ background-color: #1e1e1e; /* Dark background */
+ border: 1px solid #783aff; /* 1px purple border */
+ padding: 10px;
+ border-radius: 5px;
+ font-family: monospace;
+ margin-bottom: 16px;
+ overflow-x: auto; /* Enable horizontal scrolling */
+ white-space: nowrap; /* Prevent line breaks */
+}
+
+pre {
+ margin: 0px;
+ height: fit-content !important;
+}
+
+.red {
+ color: rgb(255, 41, 41);
+}
+/*end*/
+/*css for the footer*/
+.footer {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ height: 80px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+
+.aboutMe {
+ display: flex;
+ flex-direction: row;
+ gap: 12px;
+ height: 100%;
+ width: 50%;
+ overflow: hidden;
+}
+
+.discord {
+ height: 100%;
+}
+
+.message {
+ display: flex;
+ flex-direction: column;
+}
+/*end*/
+/*ahh shit, here we go again for mobile devices*/
+@media only screen and (max-width: 760px) {
+ /*footer*/
+ .footer {
+ height: 120px;
+ }
+ .aboutMe {
+ width: fit-content;
+ }
+ .pfp {
+ display: none;
+ }
+ /*end*/
+}

css/bloghub.css

@@ -0,0 +1,157 @@
+body {
+ position: fixed !important;
+ overflow-y: hidden !important;
+ height: 100% !important;
+ width: -webkit-fill-available;
+}
+
+/*css for the blog*/
+.bloghub {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ gap: 35px;
+}
+
+.left {
+ display: flex;
+ flex-direction: column;
+ width: 30%;
+ gap: 6px;
+}
+.right {
+ display: flex;
+ flex-direction: column;
+ width: 70%;
+ height: 100%;
+ gap: 6px;
+}
+.blogAnime img{
+ width: 100%;
+ border-radius: 12px;
+}
+.blogNav {
+ height: 48px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ background-color: #222427;
+ cursor: pointer;
+ padding: 0 12px;
+ gap: 12px;
+ border-radius: 8px;
+}
+
+.blogNav:hover {
+ background-color: #783aff;
+}
+
+.blogNavIcon img{
+ height: 20px;
+}
+
+.blogNavSep {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.blogNavRight, .blogNavLeft {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.heading {
+ width: 99%;
+ background-color: black;
+ border: 1px solid #783aff;
+ height: 60px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.displayBlogs {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ height: 900px;
+ overflow-y: scroll;
+}
+
+.blog {
+ background-color:#222427;
+ height: 130px;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ gap: 15px;
+ cursor: pointer;
+ overflow: hidden;
+}
+
+.displayBlogs::-webkit-scrollbar {
+ width: 0;
+}
+
+.blog h4{
+ margin-bottom: 0px;
+}
+
+.blogThumbnail {
+ width: 50%;
+ height: 100%;
+ overflow: hidden;
+ border-top-right-radius: 0%;
+ border-bottom-right-radius: 0%;
+}
+
+.blogThumbnail img{
+ width: 100%;
+ height: 100%;
+}
+
+.blogDetails {
+ display: flex;
+ flex-direction: column;
+}
+/*end*/
+/*bug fixes*/
+ /*on god, no bugs huh*/
+/*end*/
+/*ahh shit, here we go again for mobile*/
+@media (max-width: 980px) {
+ .bloghub{
+ flex-direction: column;
+ width: 100%;
+ }
+ .left {
+ width: 100%;
+ }
+ .blogNavSep{
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ }
+ .blogNavRight {
+ width: 50%;
+ }
+ .blogNavLeft {
+ width: 50%;
+ }
+ .right {
+ width: 100%;
+ }
+ .blogThumbnail {
+ display: none;
+ }
+ .blogDetails{
+ padding: 4px;
+ justify-content: center;
+ align-items: center;
+ }
+ .blogDetails h4{
+ margin-top: 6px;
+ }
+}