InValidFire/quack.gay
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Compare commits

base: InValidFire:styles-refactor
Branches Tags
InValidFire:main
InValidFire:styles-refactor
InValidFire:blog
InValidFire:nix
..
compare: InValidFire:main
Branches Tags
InValidFire:styles-refactor
InValidFire:blog
InValidFire:nix
InValidFire:main

No commits in common. "styles-refactor" and "main" have entirely different histories.
styles-ref ... main

5 changed files with 135 additions and 85 deletions
Show stats Expand all files Collapse all files

37
index-styles.css
View file

@ -1,37 +0,0 @@
:root {
--social-text-color: #683655;
--mastodon-text-color: #3088D4;
--discord-text-color: #7289DA;
}
.social {
color: #683655;
font-size: large;
font-weight: bold;
display: block;
}
#mastodon {
font-style: italic;
text-decoration: none;
color: #3088D4;
}
#discord {
font-style: italic;
text-decoration: none;
color: #7289DA;
}
#contact {
border-style: solid;
border-width: .2vh;
border-color: var(--border-color);
padding: 1vh;
background-color: var(--header-background-color);
display: block;
}
#contact h2 {
margin: 0;
}

1
index.html
View file

@ -6,7 +6,6 @@
<meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-type" content="text/html">
<title>Quack! ur gay!</title> <title>Quack! ur gay!</title>
<link rel="stylesheet" href="./styles.css"> <link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="./index-styles.css">
<link rel="icon" href="./res/icon.png"> <link rel="icon" href="./res/icon.png">
</head> </head>
<body> <body>

102
stoplight-styles.css
View file

@ -1,26 +1,100 @@
:root { body {
--body-background-color: #424242; background-color: #424242;
--header-background-color: linear-gradient(20deg, #6E9277 20%, #FFD483 50%, #FC6467 85%); }
--nav-background-color: #424242;
--nav-text-color: #B2C5D6; #wrapper {
--nav-hover-color: #4B4B4B; background-color: #B2C5D6;
--wrapper-background-color: #B2C5D6; margin-left: auto;
--border-color: #424242; margin-right: auto;
--text-color: #424242; width: 90%;
display: flex;
flex-direction: column;
}
#content {
margin: 0;
padding-top: 0;
padding-left: 1vh;
padding-right: 1vh;
overflow: visible;
}
body {
margin: 0;
height: 100vh;
} }
header { header {
background: var(--header-background-color); background: linear-gradient(20deg, #6E9277 20%, #FFD483 50%, #FC6467 85%);
margin-bottom: 1vh;
}
h1, h2, h3, h4, h5, h6 {
color: #424242;
}
nav ul {
list-style-type: none;
margin-left: .3%;
margin-right: .3%;
margin-top: .3%;
margin-bottom: .3%;
padding: 0;
overflow: hidden;
background-color: #424242;
display: block;
}
nav li {
margin: 0;
display: inline;
float: left;
}
nav li a {
display: block;
color: #B2C5D6;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #4B4B4B;
}
footer {
background: linear-gradient(20deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff);
margin-top: auto;
}
footer p {
text-align: center;
}
h1 {
text-align: center;
}
h2 {
margin-top: 1vh;
margin-bottom: 1vh;
}
p {
color: #424242;
margin-top: 1%;
margin-bottom: 1%;
} }
li { li {
color: var(--text-color); color: #424242;
} }
hr { hr {
border-style: dashed; border-style: dashed;
border-color: var(--border-color); border-color: #424242;
color: var(--text-color); color: #424242;
margin: auto; margin: auto;
} }
@ -44,7 +118,7 @@ img {
} }
figcaption { figcaption {
color: var(--text-color); color: #424242;
} }
.example-img-container { .example-img-container {

1
stoplight.html
View file

@ -5,7 +5,6 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-type" content="text/html">
<title>Stoplight Schema</title> <title>Stoplight Schema</title>
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="./stoplight-styles.css"> <link rel="stylesheet" href="./stoplight-styles.css">
<link rel="icon" href="./res/icon.png"> <link rel="icon" href="./res/icon.png">
</head> </head>

79
styles.css
View file

@ -1,23 +1,15 @@
:root { body {
--body-background-color: #293B2A; background-color: #293B2A;
--header-background-color: #646D5A;
--nav-background-color: #505948;
--nav-text-color: #8CAA8C;
--nav-hover-color: #464F3E;
--wrapper-background-color: #647E5A;
--border-color: #101010;
--text-color: #101010;
--footer-gradient: linear-gradient(20deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff);
} }
#wrapper { #wrapper {
background-color: var(--wrapper-background-color); background-color: #647E5A;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
border-left: 1px solid var(--border-color); border-left: 1px solid #101010;
border-right: 1px solid var(--border-color); border-right: 1px solid #101010;
width: 90%; width: 90%;
min-height: 100vh; /* keeps the wrapper at least the length of the screen */ height: 100vh; /* remove once content grows enough */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -33,27 +25,19 @@
body { body {
margin: 0; margin: 0;
height: 100vh; height: 100vh;
background-color: var(--body-background-color);
}
h1, h2, h3, h4, h5, h6 {
color: var(--text-color);
} }
header { header {
background-color: var(--header-background-color); background-color: #646D5A;
margin-bottom: 1vh; margin-bottom: 1vh;
} }
nav ul { nav ul {
list-style-type: none; list-style-type: none;
margin-left: .3%; margin: 0;
margin-right: .3%;
margin-top: .3%;
margin-bottom: .3%;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background-color: var(--nav-background-color); background-color: #505948;
display: block; display: block;
} }
@ -65,25 +49,25 @@ nav li {
nav li a { nav li a {
display: block; display: block;
color: var(--nav-text-color); color: #8CAA8C;
text-align: center; text-align: center;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;
} }
nav li a:hover { nav li a:hover {
background-color: var(--nav-hover-color); background-color: #464F3E;
} }
footer { footer {
background: var(--footer-gradient); background: linear-gradient(20deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff);
margin-top: auto; margin-top: auto;
} }
footer hr { footer hr {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: var(--border-color); border-color: #101010;
margin: auto; margin: auto;
} }
@ -101,7 +85,7 @@ h2 {
} }
p { p {
color: var(--text-color); color: #101010;
margin-top: 1%; margin-top: 1%;
margin-bottom: 1%; margin-bottom: 1%;
} }
@ -109,7 +93,38 @@ p {
hr { hr {
border-width: 1px; border-width: 1px;
border-style: dashed; border-style: dashed;
border-color: var(--border-color); border-color: #101010;
color: var(--border-color);
margin: auto; margin: auto;
} }
.social {
color: #683655;
font-size: large;
font-weight: bold;
display: block;
}
#mastodon {
font-style: italic;
text-decoration: none;
color: #3088D4;
}
#discord {
font-style: italic;
text-decoration: none;
color: #7289DA;
}
#contact {
border-style: solid;
border-width: .2vh;
border-color: #101010;
padding: 1vh;
background-color: #646D5A;
display: block;
}
#contact h2 {
margin: 0;
}