masiv/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Transfer to git

Browse Source
This commit is contained in:
masiv
2026-02-03 19:37:38 -03:00
commit 35d8517e56
137 changed files with 5817 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
css/articles/about-host/about-host.css Normal file
View File

@@ -0,0 +1 @@
@import url('../../global/global-settings.css');

3
css/articles/about/about.css Normal file
View File

@@ -0,0 +1,3 @@
@import url('../../global/global-settings.css');
@import url('./layout/base.css');

4
css/articles/about/layout/base.css Normal file
View File

@@ -0,0 +1,4 @@
.primary {
height: 100%;
justify-content: center;
align-content: center;}

3
css/articles/diy-calculator/diy-calculator.css Normal file
View File

@@ -0,0 +1,3 @@
@import url('../../global/global-settings.css');
@import url('./layout/base.css');

65
css/articles/diy-calculator/layout/base.css Normal file
View File

@@ -0,0 +1,65 @@
.primary > div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--gap);}
.primary > div > div {
height: min(auto, 100%);
flex-basis: 45%;
flex-grow: 1;
display: flex;}
/* I could tecnically change all of this to use
display: grid, it would make a lot more sense
taking into account the mess this code is*/
.calc {
height: auto;
min-width: fit-content;
gap: var(--gap);
padding: var(--gap);
flex-direction: column;
justify-content: center;
align-items: center;}
.buttons {
width: fit-content;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: right;
align-items: stretch;
max-width: calc((70px * 4) + ( 5 * (4px * 2) ) );}
button {
border: 0;
margin: 5px;
height: 70px;
width: 70px;
transition: 0.05s background-color ease-in;}
#equal { flex-grow: 1; }
.viewing {
border-top: 0;
border-left: 0;
border-right: 0;
display: flex;
align-items: center;
width: calc((70px * 4) + ( 2 * (15px) ));
height: 3em;}
.viewing > #output {
padding: 0.5em;
font-size: 40px;
text-align: right;
text-overflow: clip;
overflow-y: auto;
width: 100%;}
.info {
min-width: 50%;
flex-shrink: 1;
flex-direction: column;}

102
css/chat.css Normal file
View File

@@ -0,0 +1,102 @@
* {
font-family: inherit;
box-sizing: inherit;
}
html, body {
height: 100%;
width: 100%;
}
body {
--text-color: rgb(215, 215, 215);
font-family: monospace;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(28, 28, 28);
box-sizing: border-box;
margin: 0;
}
h1, h2, h3, h4, p {
text-align: center;
color: var(--text-color);
}
.chatbox > div {
display: flex;
flex-direction: column;
align-items: center;
margin: 1em;
width: 400px;
}
.chatbox {
border-radius: 5px;
display: flex;
margin: 5em;
max-height: calc(100% - 5em * 2);
background-color: rgb(56, 56, 56);
}
.chatbox > div > div {
margin-bottom: 1em;
width: 100%;
}
.content {
background-color: rgb(28, 28, 28);
border-radius: 10px;
overflow-y: auto;
scrollbar-width: thin;
display: flex;
flex-direction: column-reverse;
}
.message {
margin: 0.5em;
border-bottom: 1px dashed gray;
}
input {
background-color: rgb(84, 84, 84);
border: 0;
color: var(--text-color);
}
button {
border: 0;
background-color: rgb(0, 0, 0);
color: var(--text-color);
flex-grow: 0;
}
.m_content {
text-align: right;
}
.username {
text-align: left;
}
.input > form {
display: flex;
gap: 1em;
}
.input > form > * {
flex-grow: 1;
}
.logout {
width: 100%;
}
.error {
font-weight: bold;
color: red;
}

BIN
css/global/fonts/HonyaJi-Re.ttf Normal file
View File

Binary file not shown.

BIN
css/global/fonts/basiic.ttf Normal file
View File

Binary file not shown.

BIN
css/global/fonts/beefont.ttf Normal file
View File

Binary file not shown.

BIN
css/global/fonts/lmmono10-regular.woff Normal file
View File

Binary file not shown.

BIN
css/global/fonts/specialelite.woff2 Normal file
View File

Binary file not shown.

3
css/global/global-settings.css Normal file
View File

@@ -0,0 +1,3 @@
@import url('styling/reset.css');
@import url('layout/global-layout.css');
@import url('styling/global-styling.css');

171
css/global/layout/global-layout.css Normal file
View File

@@ -0,0 +1,171 @@
/* -------- Variables --------- */
html {
--gap: 2em;
--mobile-topnavbar-height: 125px;
--mobile-botnavbar-height: var(--mobile-topnavbar-height);
--side-bar-width: 240px;
--max-percentage-width-navar: 70%;
}
/* ---- Hide mobile only ---- */
.navbar.bot { display: none; }
/* ---- Hierarchical layout ---- */
.panel { padding: calc(var(--gap) / 2); }
.panel .header {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
height: calc(var(--title-height) + 0.5em );
transform: translateY(-15px);}
.blank { pointer-events: none; }
body {
display: flex;
flex-direction: row;
height: 100%;
overflow: hidden;
}
.navbar {
position: fixed;
z-index: 999;
display: flex;
gap: var(--gap);
padding: var(--gap);
}
.navbar.blank {
position: relative;
flex-shrink: 0;
opacity: 0;}
.navbar.top {
flex-direction: column;
justify-content: space-around;
align-items: center;
width: var(--side-bar-width);
height: 100%;
--max-width: var(--max-percentage-width-navar);
}
.links {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: calc(var(--gap) / 2);}
.links > div {
align-items: center;
height: 50px;
padding: 7px;}
.links a {
margin: 0px;
text-align: left;}
.links .mail { height: fit-content; }
.links > .social-media {
display: flex;
flex-direction: row;
gap: calc(var(--gap) / 4);}
.links img { height: 24px; }
.navbar.top > div { width: 100%; }
.wrapper {
flex-grow: 1;
width: 0%; /* Don't know why this works, forces div to always grow */
overflow-y: auto;
overflow-x: hidden;}
.primary {
display: flex;
flex-direction: row-reverse;
align-content: space-between;
flex-wrap: wrap;
padding: var(--gap);
gap: var(--gap);
height: fit-content;
width: 100%;}
@media only all and (max-width:700px) {
/* -- Ordering -- */
.about { order: 1; }
.logo { order: 2; }
.lang-picker { order: 3; }
/* -- Layout -- */
body {
flex-direction: column;
overflow: hidden;}
.wrapper {
width: 100%;
height: fit-content;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 0;
overflow: auto;
position: relative;}
.navbar.top {
flex-direction: row;
justify-content: space-around;
align-items: center;
height: var(--mobile-topnavbar-height);
gap: var(--gap);
width: 100%;
--max-width: 80%;}
.navbar.top > .links { display: none; }
.navbar.bot { display: flex; }
.navbar.bot.blank {
position: relative;
flex-shrink: 0;
opacity: 0;}
.navbar.bot {
display: flex;
position: fixed;
bottom: 0px;
height: var(--mobile-botnavbar-height);
flex-direction: column;
justify-content: center;
align-content: center;
width: 100%;}
.navbar.bot > div { flex-direction: row; }
.links {
/* Scroll mechanics */
margin-bottom: -1em; /* Trick to hide visual scrollbar */
padding-bottom: 1em;
overflow-x: auto;
overflow-y: hidden;
mask-image: linear-gradient(to right, rgba(0,0,0,1) 80%, rgba(0,0,0,0));
/* Ordering */
justify-content: flex-start;
clip-path: content-box;
align-items: flex-start;
flex-direction: column;}
.links .last { margin-right: 20%; } /* Complementing visual trick by allow extra scrolling to hide previous visual trick, 100% - 80% */
.links > div{ align-items: center;}
}

174
css/global/styling/global-styling.css Normal file
View File

@@ -0,0 +1,174 @@
/* Colors */
/* ---------------- Variables ---------------- */
html {
--border-radius: 5px;
--accent-color-light: aliceblue;
--accent-color-middle: rgb(173, 189, 203);
--accent-color-dark: rgb(24, 47, 56);
--panel-border_one: var(--accent-color-dark);
--panel-border_two: var(--accent-color-dark);
--panel-header: var(--accent-color-dark);
--panel-background: var(--accent-color-light);
--body-background: rgb(255, 255, 255);
--input-background: white;
--input-background-hover: rgb(216, 222, 227);
--input-highlight: rgb(86, 176, 255);
--navvar-background: rgb(179, 200, 218);
--navbar-buttons-bg: var(--accent-color-light);
--navbar-buttons-hover: var(--input-background-hover);
--input-border-radius: var(--border-radius);
--link-color: var(--accent-color-dark);
--link-color-hover: var(--input-highlight);
--logo-outline-color: var(--input-highlight);}
/* Background texture */
body { background-image: url('graphgreen.gif'); }
/* ----------------- Others -------------------- */
* { scrollbar-width: thin;}
img { image-rendering: pixelated;}
.logo { position: relative; }
.logo > img {
position: absolute;
width: 80px;
top: 15px;
right: -40px;}
.links { overflow-y: auto; }
.links a { text-decoration: none;}
/* ----------------- Fonts -------------------- */
@font-face {
font-family: 'special elite';
src: url('../fonts/specialelite.woff2') format('woff');
font-weight: normal;
font-style: normal;}
@font-face {
font-family: 'honyaji';
src: url('../fonts/HonyaJi-Re.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
@font-face {
font-family: 'basiic';
src: url('../fonts/basiic.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
@font-face {
font-family: 'beefont';
src: url('../fonts/beefont.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
* { text-align: center; }
body { font-family: 'special elite', honyaji, basiic, monospace, serif, sans-serif; }
/* ----------------- Color -------------------- */
.navbar { background-color: var(--navvar-background); }
.panel {
position: relative;
border-radius: 5px;
border: 2px solid var(--panel-border_one);
background-color: var(--panel-background);}
.chat-history {
border-radius: var(--chat-border-radius);
background-color: var(--chat-history-background);}
/* ------------- Decorations & dividers (D&D) -------------------- */
.panel .header { position: relative; }
.panel .header::after {
position: absolute;
bottom: -3px;
content: "- - --⛤-- - -";
font-size: 15px;}
/* ------------- Navbars stiling ------------------- */
.about, .links > div, .lang-picker {
border: 5px groove rgb(214, 236, 255);
background: var(--navbar-buttons-bg);}
.about:hover, .links > div:hover, .lang-picker:hover {
background-color: var(--navbar-buttons-hover);
transition: background-color 0.1s;}
/* ------------- Inputs & links ----------------- */
button, .button {
font-family: 'special elite';
background-color: var(--input-background);
border: 0;
border-radius: var(--input-border-radius);
border-bottom: 4px solid var(--input-highlight);
padding: 0.35em;}
button:hover, .button:hover {
background-color: var(--input-background-hover);
border-bottom: 2px solid var(--input-highlight);
padding-bottom: 0.1em;
padding-top: calc((0.35em + (0.25em - 0.1em)) + 2px);
transition: background-color 0.1s;
transition: border-bottom 0.1s;
transition: padding-bottom 0.15s;
transition: padding-top 0.15s;}
input[type=text] {
font-family: 'special elite';
border: 0;
border-radius: var(--input-border-radius);
border-bottom: 4px solid var(--input-highlight);
transition: background-color 0.1s;
transition: border-bottom 0.1s;}
input[type=text]:focus { outline: 0; }
input[type=text]:hover {
border-bottom: 2px solid var(--input-highlight);
background-color: var(--input-background-hover);
transition: background-color 0.1s;}
a, a:visited {
color: var(--link-color);
text-decoration-style: wavy;}
a:hover {
transform: translateY(-2px);
color: var(--link-color-hover);
transition: color 0.1s;
transition: transform 0.1s;}
.logo { position: relative; }
.logo-text {
/* position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%); */
font-size: 40px;
color: white;
text-shadow:
2px 0 var(--logo-outline-color),
-2px 0 var(--logo-outline-color),
0 2px var(--logo-outline-color),
0 -2px var(--logo-outline-color),
1px 1px var(--logo-outline-color),
-1px -1px var(--logo-outline-color),
1px -1px var(--logo-outline-color),
-1px 1px var(--logo-outline-color);}
.logo a {
color: white;
text-decoration: none;
}

BIN
css/global/styling/graphgreen.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 416 B

11
css/global/styling/reset.css Normal file
View File

@@ -0,0 +1,11 @@
/* Reset */
html, body {
box-sizing: border-box;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
* { box-sizing: inherit; }

279
css/main/layouts/base.css Normal file
View File

@@ -0,0 +1,279 @@
/* Base design */
/* ---------------- Variables ---------------- */
html {
--chat-gap: 1em;
--updates-gap: 1em;
--blinkies-gap: 1em;
--blinkies-height: 40px;
--scrolls-height: 50px;
--secondary-width: 200px;
--webrings-heigth: 200px;
--webrings-mobile-height: 100px;
--title-height: 3em;
}
/* --------- Display changes ---------------- */
.verticalscroll, .scroll_below-clip-box, #try_tapping--blinkie, #try_hovering--blinkie { display: none; }
/* --------- Hierarchical layout --------- */
.blinkies {
padding-top: 0;
padding-bottom: 0;
gap: var(--blinkies-gap);
width: 100%;
height: var(--blinkies-height);
flex-grow: 0;
align-content: center;}
.auto-scroll {
display: flex;
flex-direction: row;}
.scroll_one, .scroll_two {
display: flex;
gap: var(--blinkies-gap);}
.blinkies img { height: 30px; }
.content {
overflow-y: auto;
overflow-x: hidden;}
.articles, .chat-webrings { width: var(--secondary-width); }
.articles { flex-grow: 0; }
.articles .content {
display: flex;
flex-direction: column;
gap: calc(var(--gap) / 2);
}
.main {
display: flex;
flex-direction: column;
flex: 1;
gap: var(--gap);}
.updates {
flex-grow: 1;
overflow-y: auto;
flex-basis: 30%;
flex-shrink: 0;}
.updates .update {
display: grid;
grid-template-columns: fit-content 1fr;
grid-template-rows: fit-content 1fr;
gap: var(--updates-gap);}
.update .title {
/* Grid placement */
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
text-align: center;
margin-bottom: 0;}
.update .date {
/* Grid placement */
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
writing-mode: sideways-lr;}
.update .content {
/* Grid placement */
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
text-align: justify;}
.provided {
position: relative;
flex-grow: 1;
overflow-y: auto;
overflow-x: hidden;}
.provided .content {
display: flex;
flex-direction: column;
gap: calc(var(--gap) / 4);
overflow-y: auto;}
.services-hint {
/* Internal layout and positioning */
display: flex;
align-items: center;
justify-content: center;
gap: calc(var(--gap) / 3);
background-color: var(--hint-background);}
.services-hint p {
flex-grow: 0;
vertical-align: center;
padding-left: calc(var(--gap) / 3);
border-left: 2px solid red;
}
.services-hint img {
height: 32px;
flex-grow: 0;
flex-shrink: 0;
margin-right: calc(var(--gap) / 3);}
.services {
display: flex;
gap: var(--gap);
flex-wrap: wrap;
}
.services > div {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: calc(var(--gap) / 2);
}
.chat-webrings {
display: flex;
flex-direction: column;
flex-grow: 0;
flex-shrink: 0;
gap: inherit;}
.chat {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;}
.chat > .content {
flex-grow: 1;
display: flex;
gap: var(--chat-gap);
flex-direction: column;
overflow: hidden;}
.chat-account {
width: 100%;
height: fit-content;
display: flex;
flex-direction: column;
flex-grow: 0;
gap: calc(var(--gap) / 4);}
.chat-account-inputs, .chat-account-buttons {
height: auto;
gap: calc(var(--gap) / 2);
display: flex;
flex-grow: 0;
width: 100%;}
.chat-account input, .chat-account button {
height: fit-content;
width: 50%;}
.chat-history {
display: flex;
flex-direction: column;
padding-top: calc(var(--gap) / 2);
padding-bottom: calc(var(--gap) / 2);
gap: calc(var(--gap) / 2);
width: 100%;
flex-grow: 1;
overflow-y: auto;}
.message > .date_sent { margin: 0;}
.chat-input {
width: 100%;
flex-grow: 0;}
.chat-input input { width: 100%; }
.webrings {
display: flex;
gap: var(--blinkies-gap);
height: var(--webrings-heigth);
flex-grow: 0;
justify-content: center;}
.webrings .auto-scroll {
width: 100%;
display: flex;
flex-direction: column;}
.webrings .scroll_one, .webrings .scroll_two {
display: flex;
flex-direction: column;
gap: var(--blinkies-gap);}
.webrings .auto-scroll > * img {
width: 100%;
}
/* ----------- Animation ------------- */
/* Personalized marquee, did my thing
because I didn't quite get what the owner
of https://minx98.neocities.org/ was doing,
got the idea to use two separate divs and
transform them, not sure how the original
owner clipped them though */
/* Global */
.auto-scroll { width: fit-content; }
.auto-scroll:hover { animation-play-state: paused !important; }
.clip-box { overflow: hidden; }
.auto-scroll {
animation-duration: 10s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
}
/* Blinkies */
.blinkies .clip-box { clip-path: content-box; }
.blinkies .auto-scroll {
animation-name: scroll_blinkies;
animation-duration: 20s;}
@keyframes scroll_blinkies {
from {transform: translateX(calc(-50%));}
to {transform: translateX(0%);}}
/* Second blinkie */
.blinkies.two .auto-scroll { animation-direction: reverse; }
/* Webrings */
.webrings .clip-box {
clip-path: content-box;
width: 100%; }
.webrings .auto-scroll { animation-name: scroll-webring; }
@keyframes scroll-webring {
from {transform: translateY(calc(-50%));}
to {transform: translateY(0%);}}

24
css/main/layouts/desktop-slim.css Normal file
View File

@@ -0,0 +1,24 @@
/* RESPONSIVE DESIGN, LAPTOP SLIM */
@media only all and (max-width:1175px){
/* ------------- Order ------------- */
.blinkies.one { order: 1; }
.articles { order: 4; }
.main { order: 2; }
.chat-webrings { order: 3; }
.blinkies.two { order: 5; }
/* ------------- Layout ------------ */
.articles { flex-grow: 1; }
.chat-webrings { flex-grow: 0; }
.main {
flex-grow: 999;
min-width: 50%}
.services { overflow-y: auto; }
/* --- Decoration --- */
}

21
css/main/layouts/desktop-slimmer.css Normal file
View File

@@ -0,0 +1,21 @@
/* RESPONSIVE DESIGN, LAPTOP SLIMMER */
@media only all and (max-width:750px){
/* ------------- Order ------------- */
/* ------------ Layout ------------ */
.main {
flex-basis: 100%;
flex-shrink: 0;}
.articles {
flex-grow: 1;
width: auto;}
.chat-webrings {
width: var(--secondary-width);
flex-grow: 1;}
.services { overflow-y: auto; }
}

16
css/main/layouts/desktop.css Normal file
View File

@@ -0,0 +1,16 @@
/* RESPONSIVE DESIGN, LAPTOP FULL */
@media only all and (min-width:1175px) {
/* ------------- Layout ------------- */
.primary {
padding-right: 150px;
padding-left: 150px;}
.chat-webrings, .main, .articles { height: calc(100vh - (var(--blinkies-height) * 2) - (var(--gap) * 4)); }
.services { overflow-y: auto; }
/* ---- Display changes ---- */
#try_hovering--blinkie { display: block; }
}

149
css/main/layouts/mobile.css Normal file
View File

@@ -0,0 +1,149 @@
/* RESPONSIVE DESIGN, MOBILE */
@media only all and (max-width:700px){
/* ------------- Order ------------- */
.blinkies.one { order: 0; }
.main { order: 1; }
.articles { order: 2; }
.chat-webrings { order: 3; }
.verticalscroll { order: 4; }
/* -------- Display changes ---------- */
.blinkies.two { display: none; }
.verticalscroll { display: flex; }
.scroll_below-clip-box { display: block; }
.navbar.bot > .about, .navbar.bot > .logo, .navbar.bot > .lang-picker { display: none; }
/* Decoration */
#try_hovering--blinkie { display: none; }
#try_tapping--blinkie { display: block; }
/* ------------- Layout ------------- */
.primary {
width: calc(100% - var(--scrolls-height) - var(--gap) * 2);
height: fit-content;
flex-direction: column;
padding-right: 0;}
.primary > * {
width: 100%;}
.main {
height: fit-content;
flex-grow: 1;
flex-basis: auto;}
.verticalscroll {
position: fixed;
right: 0; /* There is a slight inconsistency with this, as scrollbar width isn't considered with fixed, but the blank version does contemplate, creating a gap wider than expected */
margin: var(--gap);
justify-content: center;
height: calc(100% - var(--mobile-botnavbar-height) - var(--mobile-topnavbar-height) - var(--gap) * 2);
width: var(--scrolls-height);
overflow: hidden;}
.verticalscroll.blank {
height: 100%;
position: relative;
opacity: 0;}
.vertical-scroll-wrapper {
height: fit-content;}
.verticalscroll .clip-box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: fit-content;
display: flex;
justify-content: center;}
.verticalscroll .auto-scroll{
display: flex;
flex-direction: column;}
.verticalscroll p {
writing-mode: vertical-lr;
text-orientation: sideways;
text-wrap: nowrap;}
.webrings {
gap: var(--blinkies-gap);
height: var(--webrings-mobile-height);
flex-shrink: 0;
padding-top: 0;
padding-bottom: 0;}
.webrings .clip-box {
align-content: center;}
.webrings .auto-scroll {
flex-direction: row;
animation-name: scroll-webring-mobile;}
.webrings .scroll_one, .webrings .scroll_two {
flex-direction: row;}
.webrings .auto-scroll > * > div img {
height: 60px;
width: auto;}
.scroll_below-clip-box {
position: absolute;
bottom: 0;
top: 50px;
width: 100%;
height: 100%;
pointer-events: none;
clip-path: border-box;}
.scroll_below {
position: fixed;
left: 0px;
bottom: var(--mobile-botnavbar-height);
margin-bottom: 0px;
height: fit-content;
width: fit-content;
padding-left: 1em;
padding-right: 1em;
text-align: center;}
/* ----------- Animation ----------- */
/* Blinkies */
.blinkies.one .auto-scroll {
animation-duration: 20s;
animation-direction: reverse;}
/* Webrings */
.webrings .clip-box {
height: 100%;
width: 100%;}
@keyframes scroll-webring-mobile {
from {transform: translateX(calc(-50%));}
to {transform: translateX(0%);}}
/* Vertical scroll text */
.verticalscroll .auto-scroll {
animation-name: scroll-vertical;
animation-direction: reverse;
animation-duration: 20s;}
@keyframes scroll-vertical {
from {transform: translateY(calc(-50%));}
to {transform: translateY(0%);}}
/* Opacity enhancements */
.webrings .clip-box{
mask-image: linear-gradient(to right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,1) 5%,
rgba(0,0,0,1) 95%,
rgba(0,0,0,0) 100%);}
}

11
css/main/main.css Normal file
View File

@@ -0,0 +1,11 @@
@import url('../global/global-settings.css');
@import url('styling.css');
@import url('layouts/base.css');
@import url('layouts/desktop.css');
@import url('layouts/desktop-slim.css');
@import url('layouts/desktop-slimmer.css');
@import url('layouts/mobile.css');
@import url('others/noaiwebring.css');

21
css/main/others/noaiwebring.css Normal file
View File

@@ -0,0 +1,21 @@
/* See comment on html directly */
.noaiwebring { position: relative;}
.noaiwebring > img {
width: 100%;
height: 100%;}
.noaiwebring > a > div { position: absolute; }
.noaiwebring > a > .nxt {
left: 76.1%; top: 6.5%; width: 20.5%; height: 48.4%;}
.noaiwebring > a > .prv {
left: 2.3%; top: 6.5%; width: 20.5%; height: 48.4%;}
.noaiwebring > a > .rnd {
left: 71.6%; top: 61.3%; width: 12.5%; height: 35.5%;}
.noaiwebring > a > .home {
left: 26.1%; top: 48.4%; width: 44.3%; height: 48.4%;}

73
css/main/styling.css Normal file
View File

@@ -0,0 +1,73 @@
/* Colors */
/* ---------------- Variables ---------------- */
html {
--chat-history-background: white;
--chat-border-radius: var(--border-radius);
--login-error-color: rgb(231, 90, 90);
--hint-background: ;
--chat-user: var(--input-highlight);
--chat-message: rgb(147, 153, 158);}
/* ----------------- Others -------------------- */
.auto-scroll { transform: translateZ(0); } /* Force to use gpu */
.services img:hover {
scale: 1.1;
transition: scale 0.2s;}
/* --------------- Color filtering ------------- */
.blinkies > * img, .webrings .auto-scroll > * > div, .services img {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(180deg);}
.blinkies > * img:hover, .webrings .auto-scroll > * > div:hover, .services img:hover { filter: none; }
/* ----------------- Color -------------------- */
.chat-history {
border-radius: var(--chat-border-radius);
background-color: var(--chat-history-background);}
.chat-account-errors { color: var(--login-error-color); }
.scroll_below-clip-box { mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 90%, rgba(0,0,0,0)); }
.message .user { color: var(--chat-user); }
.message .date_sent { color: var(--chat-message); }
/* ------------- Decorations & dividers (D&D) -------------------- */
/* ----- Helpers ----- */
#try_hovering--blinkie {
scale: 3;
position: absolute;
bottom: -27px;
left: -63px;
z-index: 999;}
#try_sliding_down { width: 150px; }
#try_tapping--blinkie {
scale: 3;
position: absolute;
right: -60px;
bottom: -28px;
z-index: 999;}
/* ------ Opacity tricks for marquee -------- */
.blinkies .clip-box{
mask-image: linear-gradient(to right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,1) 5%,
rgba(0,0,0,1) 95%,
rgba(0,0,0,0) 100%);}
.webrings .clip-box{
mask-image: linear-gradient(to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,1) 5%,
rgba(0,0,0,1) 95%,
rgba(0,0,0,0) 100%);}