mirror of
https://github.com/neon443/neon443.github.io.git
synced 2026-03-11 07:09:12 +00:00
major cleanup
This commit is contained in:
neon443
213
style.css
213
style.css
@@ -1,121 +1,118 @@
|
||||
/* COLOURS*/
|
||||
/* Link: #007AFF */
|
||||
/* Bold: #ff6200 */
|
||||
/* Light */
|
||||
/* Theme: #ddd */
|
||||
/* text: #222 */
|
||||
/* UI item bgs: #aaa */
|
||||
/* for contrast: #aaa */
|
||||
/* transparency: rgba(255, 255, 255, 0.25) */
|
||||
/* box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25); */
|
||||
/* bar link hover bg color: #111 */
|
||||
/* bar link hover text color: #eee */
|
||||
/* Dark */
|
||||
/* Theme: #222 */
|
||||
/* text: #ddd */
|
||||
/* UI item bgs: #555 */
|
||||
/* for contrast: #555 */
|
||||
/* transparency: rgba(0, 0, 0, 0.25) */
|
||||
/* box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25); */
|
||||
/* bar link hover bg color: #eee */
|
||||
/* bar link hover text color: #111 */
|
||||
/* Link: #007AFF */
|
||||
/* Bold: #ff6200 */
|
||||
/* Light */
|
||||
/* Theme: #ddd */
|
||||
/* text: #222 */
|
||||
/* UI item bgs: #aaa */
|
||||
/* for contrast: #aaa */
|
||||
/* transparency: rgba(255, 255, 255, 0.25) */
|
||||
/* box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25); */
|
||||
/* bar link hover bg color: #111 */
|
||||
/* bar link hover text color: #eee */
|
||||
/* Dark */
|
||||
/* Theme: #222 */
|
||||
/* text: #ddd */
|
||||
/* UI item bgs: #555 */
|
||||
/* for contrast: #555 */
|
||||
/* transparency: rgba(0, 0, 0, 0.25) */
|
||||
/* box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25); */
|
||||
/* bar link hover bg color: #eee */
|
||||
/* bar link hover text color: #111 */
|
||||
/* COLOURS */
|
||||
|
||||
/*regular text (body, p, b, h*) styles*/
|
||||
* {
|
||||
margin: 0px;
|
||||
font-family: system-ui;
|
||||
transition: 0.2s;
|
||||
color: #222;
|
||||
|
||||
}
|
||||
b {
|
||||
color: #ff6200
|
||||
}
|
||||
a {
|
||||
color: #007AFF
|
||||
}
|
||||
body {
|
||||
background-color: #ddd;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
font-weight: 750;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
font-weight: 400;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
* {
|
||||
margin: 0px;
|
||||
font-family: system-ui;
|
||||
transition: 0.2s;
|
||||
color: #222;
|
||||
}
|
||||
b {
|
||||
color: #ff6200;
|
||||
}
|
||||
a {
|
||||
color: #007aff;
|
||||
}
|
||||
body {
|
||||
background-color: #ddd;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
font-weight: 750;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
font-weight: 400;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
/* regular text (body, p, b, h*) styles*/
|
||||
|
||||
.contentPush{
|
||||
.contentPush {
|
||||
height: 65px;
|
||||
positon: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Bar styling*/
|
||||
.bar {
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
.bar {
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
-webkit-backdrop-filter: blur(2.5px);
|
||||
-moz-backdrop-filter: blur(2.5px);
|
||||
backdrop-filter: blur(2.5px);
|
||||
}
|
||||
.barItem {
|
||||
float: left;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.barItem * {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-size: 20px;
|
||||
color: #222;
|
||||
padding: 9.2px 12px;
|
||||
}
|
||||
.barItem h1 {
|
||||
font-size: 30px;
|
||||
padding: 2.5px 12px;
|
||||
border-right-style: solid;
|
||||
border-width: 1.5px;
|
||||
border-color: #222;
|
||||
}
|
||||
.barItem:hover {
|
||||
flex: 1.5;
|
||||
background-color: #fff;
|
||||
}
|
||||
.barItem *:hover {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
padding: 2.5px 12px;
|
||||
}
|
||||
.barItem a:hover {
|
||||
background-color: #111;
|
||||
color: #eee;
|
||||
|
||||
-webkit-backdrop-filter: blur(2.5px);
|
||||
-moz-backdrop-filter: blur(2.5px);
|
||||
backdrop-filter: blur(2.5px);
|
||||
}
|
||||
.barItem {
|
||||
float: left;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.barItem * {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-size: 20px;
|
||||
color: #222;
|
||||
padding: 9.2px 12px;
|
||||
}
|
||||
.barItem h1 {
|
||||
font-size: 30px;
|
||||
padding: 2.5px 12px;
|
||||
border-right-style: solid;
|
||||
border-width: 1.5px;
|
||||
border-color: #222;
|
||||
}
|
||||
.barItem:hover {
|
||||
flex: 1.5;
|
||||
background-color: #fff;
|
||||
}
|
||||
.barItem *:hover {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
padding: 2.5px 12px;
|
||||
}
|
||||
.barItem a:hover {
|
||||
background-color: #111;
|
||||
color: #eee;
|
||||
|
||||
-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
|
||||
-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
|
||||
-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
/* Bar styling */
|
||||
|
||||
.box1 {
|
||||
@@ -156,7 +153,6 @@
|
||||
.barItem a:hover {
|
||||
background-color: #eee;
|
||||
color: #111;
|
||||
|
||||
-webkit-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
|
||||
-moz-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
|
||||
@@ -164,5 +160,4 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user