440 lines
9.9 KiB
CSS
440 lines
9.9 KiB
CSS
|
|
|
|
:root {
|
|
--header-image: url('./bgHOME4.png');
|
|
--body-bg-image: url('./background2.png');
|
|
|
|
/* colors */
|
|
/* --content: #c3aae5; */
|
|
}
|
|
|
|
/* if you have the URL of a font, you can set it below */
|
|
/* feel free to delete this if it's not your vibe */
|
|
|
|
/* this seems like a lot for just one font and I would have to agree
|
|
but I wanted to include an example of how to include a custom font.
|
|
If you download a font file you can upload it onto your Neocities
|
|
and then link it! Many fonts have separate files for each style
|
|
(bold, italic, etc. T_T) which is why there are so many!
|
|
|
|
*/
|
|
|
|
@font-face {
|
|
font-family: Nunito;
|
|
src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
|
|
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Nunito;
|
|
src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
|
|
font-weight: bold;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Nunito;
|
|
src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Nunito;
|
|
src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* @font-face {
|
|
font-family: Win98;
|
|
src: url(./Windows\ Regular.ttf);
|
|
|
|
} */
|
|
|
|
@font-face {
|
|
font-family: typeWriter;
|
|
src: url(./typewriter.ttf);
|
|
|
|
}
|
|
|
|
@font-face {
|
|
font-family: win98;
|
|
src: url(./FreePixel.ttf);
|
|
|
|
}
|
|
|
|
body {
|
|
font-family: 'win98';
|
|
margin: 0;
|
|
/* background-color: #08031A; */
|
|
/* you can delete the line below if you'd prefer to not use an image */
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
color: #e9e4de;
|
|
background-image: var(--body-bg-image);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-family: "win98";
|
|
font-weight: 500;
|
|
padding: 5px 5px;
|
|
}
|
|
/* below this line is CSS for the layout */
|
|
|
|
/* this is a CSS comment
|
|
to uncomment a line of CSS, remove the * and the /
|
|
before and after the text */
|
|
|
|
|
|
/* the "container" is what wraps your entire website */
|
|
/* if you want something (like the header) to be Wider than
|
|
the other elements, you will need to move that div outside
|
|
of the container */
|
|
#container {
|
|
max-width: 905px;
|
|
/* this is the width of your layout! */
|
|
/* if you change the above value, scroll to the bottom
|
|
and change the media query according to the comment! */
|
|
margin: 0 auto;
|
|
/* padding-top: 50px; */
|
|
/* this centers the entire page */
|
|
}
|
|
|
|
#input {
|
|
margin: 0px;
|
|
width: 83%;
|
|
margin-right: 5px;
|
|
font-size: 18px;
|
|
height: 100%;
|
|
margin-top: 10px;
|
|
padding: 5px 5px;
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
#textInput > button{
|
|
font-size: 18px;
|
|
width: 16%;
|
|
padding: 5px 5px;
|
|
margin-top: 10px;
|
|
margin-right: 0px;
|
|
height: 34px;
|
|
/* padding: 1px 2px; */
|
|
/* all:initial; */
|
|
}
|
|
|
|
/* the area below is for all links on your page
|
|
EXCEPT for the navigation */
|
|
#container a {
|
|
/* color: #C84B31; */
|
|
font-weight: bold;
|
|
color: #1896CA;
|
|
/* if you want to remove the underline
|
|
you can add a line below here that says:
|
|
text-decoration:none; */
|
|
}
|
|
.icon{
|
|
width: 25px;
|
|
}
|
|
|
|
#header {
|
|
width: 100%;
|
|
/* background-color: #5e4e8c; */
|
|
/* header color here! */
|
|
height: 150px;
|
|
/* this is only for a background image! */
|
|
/* if you want to put images IN the header,
|
|
you can add them directly to the <div id="header"></div> element! */
|
|
background-image: var(--header-image);
|
|
background-size: 100%;
|
|
}
|
|
|
|
/* navigation section!! */
|
|
#navbar {
|
|
height: 40px;
|
|
padding-bottom: 50px;
|
|
/* margin-bottom: 10px; */
|
|
/* background-color: #13092D; */
|
|
/* navbar color */
|
|
width: 100%;
|
|
vertical-align: center;
|
|
|
|
}
|
|
|
|
#navbar ul {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border: 3px solid #bebebe;
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style-type: none;
|
|
justify-content: space-between;
|
|
vertical-align: bottom !important;
|
|
/* vertical-align: middle; */
|
|
}
|
|
|
|
#navbar li {
|
|
/* padding: 5px 5px; */
|
|
border: 2px solid #bebebe;
|
|
background-color: #047e7e;
|
|
border-bottom:none;
|
|
border-top: none;
|
|
/* color: white; */
|
|
/* border-top-right-radius: 12px;
|
|
border-top-left-radius: 12px; */
|
|
/* border-bottom-left-radius: 12px;
|
|
border-bottom-right-radius: 12px; */
|
|
|
|
width: 100%;
|
|
flex-direction: row;
|
|
|
|
text-align: center;
|
|
margin:auto 0;
|
|
|
|
}
|
|
|
|
.right-box{
|
|
width: 250px;
|
|
/* background-color: #15223857; */
|
|
/* background-color: #152238; */
|
|
margin-left: 10px;
|
|
}
|
|
.left-box{
|
|
/* width: 740px; */
|
|
}
|
|
|
|
canvas {
|
|
/* image-rendering: optimizeSpeed; */
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
border: 8px solid;
|
|
border-image-source: url(./boder.png);
|
|
border-image-slice: 8;
|
|
|
|
|
|
}
|
|
|
|
|
|
/* navigation links*/
|
|
#navbar li a {
|
|
color: #ffffff;
|
|
font-size: large;
|
|
margin:0px;
|
|
/* navbar text color */
|
|
font-weight: 800;
|
|
text-decoration: none;
|
|
vertical-align: middle;
|
|
/* this removes the underline */
|
|
}
|
|
|
|
/* navigation link when a link is hovered over */
|
|
#navbar li a:hover {
|
|
color: #a49cba;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#flex {
|
|
display: flex;
|
|
|
|
}
|
|
.title-bar{
|
|
font-family: 'win98';
|
|
font-size:small;
|
|
}
|
|
|
|
.window{
|
|
margin-bottom: 10px;
|
|
background: transparent;
|
|
}
|
|
.window-body{
|
|
/* font-family: 'win98'; */
|
|
font-family: sans-serif;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
|
|
/* background-color: #000055a6; */
|
|
}
|
|
/* this colors BOTH sidebars
|
|
if you want to style them separately,
|
|
create styles for #leftSidebar and #rightSidebar */
|
|
aside {
|
|
|
|
padding: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
/* this is the color of the main content area,
|
|
between the sidebars! */
|
|
main {
|
|
/* background-color: #2a2a2a; */
|
|
/* background-color: #00003e; */
|
|
|
|
flex: 1;
|
|
/* padding: 0px 20px; */
|
|
padding: 0px 2px;
|
|
order: 2;
|
|
/* border: #383838 3px solid; */
|
|
/* border-radius: 4px; */
|
|
|
|
/* width: 600px; */
|
|
}
|
|
.main-right{
|
|
background-color: #1522387b;
|
|
backdrop-filter: blur(16px);
|
|
|
|
}
|
|
.main-left{
|
|
background-color: rgba(0, 0, 0, 0.45);
|
|
backdrop-filter: blur(32px);
|
|
}
|
|
h4{
|
|
display: inline;
|
|
vertical-align: middle;
|
|
font-size: large;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
/* what's this "order" stuff about??
|
|
allow me to explain!
|
|
if you're using both sidebars, the "order" value
|
|
tells the CSS the order in which to display them.
|
|
left sidebar is 1, content is 2, and right sidebar is 3! */
|
|
|
|
*/ #leftSidebar {
|
|
order: 1;
|
|
}
|
|
|
|
#rightSidebar {
|
|
order: 3;
|
|
/* background-color: #152238; */
|
|
}
|
|
/* iframe {
|
|
font-family: win98 !important;
|
|
|
|
} */
|
|
|
|
footer {
|
|
/* background-color: #6d40dd; */
|
|
/* background color for footer */
|
|
width: 100%;
|
|
height: 40px;
|
|
padding: 10px;
|
|
text-align: center;
|
|
/* this centers the footer text */
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
/* color: #49adff; */
|
|
color: white;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 25px;
|
|
}
|
|
p {
|
|
font-size: medium;
|
|
color: white;
|
|
}
|
|
strong {
|
|
/* this styles bold text */
|
|
/* color: #06ffff; */
|
|
color:#97a6f0;
|
|
}
|
|
|
|
/* this is just a cool box, it's the darker colored one */
|
|
.box {
|
|
background-color: #13092D;
|
|
border: 1px solid #ED64F5;
|
|
padding: 10px;
|
|
}
|
|
.bottomWindow{
|
|
width: 49%;
|
|
float: left;
|
|
}
|
|
#statuscafe {
|
|
/* padding: .5em; */
|
|
font-size: medium;
|
|
background-color: none;
|
|
/* border: 1px solid midnightblue; */
|
|
}
|
|
#statuscafe-username {
|
|
margin-bottom: .5em;
|
|
}
|
|
#statuscafe-content {
|
|
margin: 0 1em 0.5em 1em;
|
|
}
|
|
.updates{
|
|
height: 120px;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
/* CSS for extras */
|
|
|
|
#topBar {
|
|
width: 100%;
|
|
height: 30px;
|
|
padding: 10px;
|
|
font-size: smaller;
|
|
background-color: #13092D;
|
|
}
|
|
|
|
|
|
/* #navbar li.active{
|
|
background-color:#00cece;
|
|
|
|
} */
|
|
button.active {
|
|
box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a,
|
|
inset -2px -2px #dfdfdf, inset 2px 2px #808080;
|
|
}
|
|
|
|
/* BELOW THIS POINT IS MEDIA QUERY */
|
|
|
|
/* so you wanna change the width of your page?
|
|
by default, the container width is 900px.
|
|
in order to keep things responsive, take your new height,
|
|
and then subtrack it by 100. use this new number as the
|
|
"max-width" value below
|
|
*/
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
#flex {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
aside {
|
|
width: 100%;
|
|
}
|
|
|
|
/* the order of the items is adjusted here for responsiveness!
|
|
since the sidebars would be too small on a mobile device.
|
|
feel free to play around with the order!
|
|
*/
|
|
main {
|
|
order: 1;
|
|
}
|
|
|
|
#leftSidebar {
|
|
order: 2;
|
|
}
|
|
|
|
#rightSidebar {
|
|
order: 3;
|
|
}
|
|
|
|
#navbar ul {
|
|
flex-wrap: wrap;
|
|
}
|
|
} |