468 lines
10 KiB
CSS
Executable File
468 lines
10 KiB
CSS
Executable File
/*
|
||
Copyright (C) 2024 Hexaitos
|
||
This file is part of "Predator Pics"
|
||
|
||
Predator Pics is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||
|
||
Predator Pics is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
|
||
|
||
You should have received a copy of the GNU General Public License along with Foobar. If not, see <https://www.gnu.org/licenses/>.
|
||
|
||
Contact: me@bateleur.org, me@hexaitos.com.
|
||
*/
|
||
|
||
@font-face {
|
||
font-family: "Merriweather";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
src: url("/assets/fonts/merriweather-v21-latin-regular.eot");
|
||
src: local("Merriweather Regular"), local("Merriweather-Regular"), url("/assets/fonts/merriweather-v21-latin-regular.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/merriweather-v21-latin-regular.woff2") format("woff2"), url("/assets/fonts/merriweather-v21-latin-regular.woff") format("woff"), url("/assets/fonts/merriweather-v21-latin-regular.ttf") format("truetype"), url("/assets/fonts/merriweather-v21-latin-regular.svg#Merriweather") format("svg");
|
||
font-display: swap
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "Merriweather";
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
src: url("/assets/fonts/merriweather-v21-latin-italic.eot");
|
||
src: local("Merriweather Italic"), local("Merriweather-Italic"), url("/assets/fonts/merriweather-v21-latin-italic.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/merriweather-v21-latin-italic.woff2") format("woff2"), url("/assets/fonts/merriweather-v21-latin-italic.woff") format("woff"), url("/assets/fonts/merriweather-v21-latin-italic.ttf") format("truetype"), url("/assets/fonts/merriweather-v21-latin-italic.svg#Merriweather") format("svg");
|
||
font-display: swap
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "Merriweather Sans";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
src: url("/assets/fonts/merriweather-sans-v13-latin-regular.eot");
|
||
src: local(""), url("/assets/fonts/merriweather-sans-v13-latin-regular.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/merriweather-sans-v13-latin-regular.woff2") format("woff2"), url("/assets/fonts/merriweather-sans-v13-latin-regular.woff") format("woff"), url("/assets/fonts/merriweather-sans-v13-latin-regular.ttf") format("truetype"), url("/assets/fonts/merriweather-sans-v13-latin-regular.svg#MerriweatherSans") format("svg");
|
||
font-display: swap
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "Merriweather Sans";
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
src: url("/assets/fonts/merriweather-sans-v13-latin-italic.eot");
|
||
src: local(""), url("/assets/fonts/merriweather-sans-v13-latin-italic.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/merriweather-sans-v13-latin-italic.woff2") format("woff2"), url("/assets/fonts/merriweather-sans-v13-latin-italic.woff") format("woff"), url("/assets/fonts/merriweather-sans-v13-latin-italic.ttf") format("truetype"), url("/assets/fonts/merriweather-sans-v13-latin-italic.svg#MerriweatherSans") format("svg");
|
||
font-display: swap
|
||
}
|
||
|
||
:root {
|
||
--body-bg: #9f9287;
|
||
--main-bg: #cdcac4;
|
||
--menu-bg: #2b2623;
|
||
--foot-bg: #2b2623;
|
||
--btn-col: #dba047;
|
||
--btn-hov: #ae4e26;
|
||
}
|
||
|
||
* {
|
||
font-family: Merriweather, Merriweather Sans
|
||
}
|
||
|
||
q {
|
||
quotes: "“" "”" "‘" "’";
|
||
font-family: Merriweather
|
||
}
|
||
|
||
q::before {
|
||
content: open-quote
|
||
}
|
||
|
||
q::after {
|
||
content: close-quote
|
||
}
|
||
|
||
body {
|
||
margin-left: 10%;
|
||
margin-right: 10%;
|
||
padding: 10px;
|
||
background-color: var(--body-bg)
|
||
}
|
||
|
||
.main h1,
|
||
h2,
|
||
h3 {
|
||
font-variant: small-caps;
|
||
padding: .3em .3em
|
||
}
|
||
|
||
.main h1 {
|
||
border-top: 5px double #a72f14;
|
||
border-bottom: 5px double #a72f14;
|
||
text-align: center
|
||
}
|
||
|
||
.main h2 {
|
||
border-bottom: 5px solid #a72f14
|
||
}
|
||
|
||
.main p {
|
||
font-size: 16px;
|
||
text-align: justify
|
||
}
|
||
|
||
.main img {
|
||
max-width: 100%
|
||
}
|
||
|
||
div.pfp {
|
||
padding: .5em
|
||
}
|
||
|
||
div.main {
|
||
background-color: var(--main-bg);
|
||
padding: 2em;
|
||
border-radius: 10px;
|
||
min-height: 500px
|
||
}
|
||
|
||
.pfp img {
|
||
border: 5px double #a72f14;
|
||
border-radius: 10px;
|
||
max-width: 150px;
|
||
display: block;
|
||
margin-left: auto;
|
||
margin-right: auto
|
||
}
|
||
|
||
.pfp p {
|
||
text-align: center;
|
||
font-style: italic;
|
||
font-size: 12px
|
||
}
|
||
|
||
div.menu {
|
||
background: var(--menu-bg);
|
||
padding: .5em;
|
||
margin-bottom: 2em;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
border-radius: 10px;
|
||
min-height: 3em;
|
||
height: auto
|
||
}
|
||
|
||
.menu p {
|
||
color: #fff;
|
||
text-decoration: none;
|
||
padding: .5em .5em;
|
||
margin-left: .5em;
|
||
text-align: right;
|
||
border-radius: 10px
|
||
}
|
||
|
||
.menu a {
|
||
color: #fff;
|
||
text-decoration: none;
|
||
padding: .8em .8em;
|
||
margin-right: 1em;
|
||
margin-left: 1em;
|
||
min-width: 100px;
|
||
text-align: center;
|
||
background-color: var(--btn-col);
|
||
display: inline-block;
|
||
font-size: medium;
|
||
border-radius: 10px;
|
||
margin-bottom: .5em;
|
||
margin-top: .5em
|
||
}
|
||
|
||
.menu a:hover,
|
||
.contact a:hover,
|
||
a.webring-btn:hover {
|
||
background-color: var(--btn-hov);
|
||
}
|
||
|
||
.main a, footer a {
|
||
color: #ae4e26;
|
||
}
|
||
|
||
.main a:hover, footer a:hover {
|
||
text-decoration: none;
|
||
}
|
||
|
||
div.contact {
|
||
text-align: center;
|
||
}
|
||
|
||
.contact a {
|
||
color: #fff;
|
||
text-decoration: none;
|
||
padding: .8em .8em;
|
||
text-align: center;
|
||
background-color: var(--btn-col);
|
||
display: grid;
|
||
font-size: medium;
|
||
border-radius: 10px;
|
||
margin-bottom: 1em
|
||
}
|
||
|
||
a.webring-btn {
|
||
color: #fff;
|
||
text-decoration: none;
|
||
padding: .5em .5em;
|
||
margin-right: .5em;
|
||
margin-left: .5em;
|
||
min-width: 75px;
|
||
text-align: center;
|
||
background-color: var(--btn-col);
|
||
display: inline-block;
|
||
font-size: medium;
|
||
border-radius: 10px
|
||
}
|
||
|
||
div.webring {
|
||
border-top: 2px solid var(--btn-hov);
|
||
border-bottom: 2px solid var(--btn-hov);
|
||
text-align: right;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 50px;
|
||
justify-content: space-between;
|
||
margin-top: 5px
|
||
}
|
||
|
||
.webring span {
|
||
float: left;
|
||
padding: auto 0
|
||
}
|
||
|
||
footer {
|
||
background: var(--foot-bg);
|
||
padding: 1em;
|
||
margin-top: 2em;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
height: auto;
|
||
border-radius: 10px;
|
||
min-height: 3em
|
||
}
|
||
|
||
footer p {
|
||
color: #fff
|
||
}
|
||
|
||
footer p:first-of-type {
|
||
float: left
|
||
}
|
||
|
||
footer p:last-of-type {
|
||
float: right
|
||
}
|
||
|
||
@media only screen and (max-width: 900px) {
|
||
.menu a {
|
||
font-size: medium;
|
||
min-width: 90px
|
||
}
|
||
div.menu {
|
||
padding: .5em;
|
||
height: auto
|
||
}
|
||
body {
|
||
margin-left: 5%;
|
||
margin-right: 5%
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: 700px) {
|
||
.menu a {
|
||
font-size: smaller;
|
||
min-width: 80px;
|
||
margin-left: .1em;
|
||
margin-right: .1em
|
||
}
|
||
footer p:first-of-type,
|
||
footer p:last-of-type {
|
||
float: none
|
||
}
|
||
}
|
||
|
||
div.art {
|
||
display: flex;
|
||
justify-content: center
|
||
}
|
||
|
||
div.gallery {
|
||
border: 5px double rgba(167, 47, 20, .3)
|
||
}
|
||
|
||
div.gallery:hover {
|
||
border: 5px double #dba047
|
||
}
|
||
|
||
div.gallery img {
|
||
width: 100%;
|
||
height: 200px;
|
||
object-fit: scale-down
|
||
}
|
||
|
||
div.desc {
|
||
padding: 10px;
|
||
text-align: center
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box
|
||
}
|
||
|
||
.responsive {
|
||
padding: 0 6px;
|
||
float: left;
|
||
width: 24.99999%
|
||
}
|
||
|
||
section.colour-cols {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
text-align: center
|
||
}
|
||
|
||
div[class*=colour-col-] {
|
||
display: flex;
|
||
justify-content: center
|
||
}
|
||
|
||
div[class*=colour-col-]>div {
|
||
height: 75px;
|
||
width: 25%
|
||
}
|
||
|
||
div[class*=colour-col-][class*="1"] :nth-child(1) {
|
||
background-color: #2b2623
|
||
}
|
||
|
||
div[class*=colour-col-][class*="1"] :nth-child(2) {
|
||
background-color: #db9f47
|
||
}
|
||
|
||
div[class*=colour-col-][class*="1"] :nth-child(3) {
|
||
background-color: #ae4e26
|
||
}
|
||
|
||
div[class*=colour-col-][class*="1"] :nth-child(4) {
|
||
background-color: #a72f14
|
||
}
|
||
|
||
div[class*=colour-col-][class*="2"] :nth-child(1) {
|
||
background-color: #fff
|
||
}
|
||
|
||
div[class*=colour-col-][class*="2"] :nth-child(2) {
|
||
background-color: #133042
|
||
}
|
||
|
||
div[class*=colour-col-][class*="2"] :nth-child(3) {
|
||
background-color: #2b2623
|
||
}
|
||
|
||
div[class*=colour-col-][class*="3"] :nth-child(1) {
|
||
background-color: #c0b6ad
|
||
}
|
||
|
||
div[class*=colour-col-][class*="3"] :nth-child(2) {
|
||
background-color: #9f9387
|
||
}
|
||
|
||
div[class*=colour-col-][class*="3"] :nth-child(3) {
|
||
background-color: #2b2623
|
||
}
|
||
|
||
div[class*=colour-col-][class*="3"] :nth-child(4) {
|
||
background-color: #894518
|
||
}
|
||
|
||
div[class*=hex-code-col-] {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: row;
|
||
margin-bottom: 15px
|
||
}
|
||
|
||
div[class*=hex-code-col-]>span {
|
||
width: 25%;
|
||
display: inline;
|
||
text-align: center;
|
||
font-family: monospace
|
||
}
|
||
|
||
span.colour-heading {
|
||
margin-bottom: 5px;
|
||
font-size: large
|
||
}
|
||
|
||
img.refsheet {
|
||
width: 100%
|
||
}
|
||
|
||
@media only screen and (max-width: 700px) {
|
||
.responsive {
|
||
width: 49.99999%;
|
||
margin: 6px 0
|
||
}
|
||
div.art {
|
||
display: inherit;
|
||
justify-content: inherit
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: 500px) {
|
||
.responsive {
|
||
width: 100%
|
||
}
|
||
div.art {
|
||
display: inherit;
|
||
justify-content: inherit
|
||
}
|
||
a.webring-btn {
|
||
min-width: 40px;
|
||
margin-right: .2em;
|
||
margin-left: .2em
|
||
}
|
||
}
|
||
|
||
.clearfix:after {
|
||
content: "";
|
||
display: table;
|
||
clear: both
|
||
}
|
||
|
||
code {
|
||
font-family: monospace;
|
||
background-color: #d3d3d3;
|
||
border: 1px gray
|
||
}
|
||
|
||
@media(prefers-color-scheme: dark) {
|
||
:root {
|
||
--body-bg: rgb(49, 49, 49);
|
||
--main-bg: #191919;
|
||
--menu-bg: #191919;
|
||
--foot-bg: #191919;
|
||
--btn-hov: #dba047;
|
||
--btn-col: #ae4e26;
|
||
}
|
||
code {
|
||
background-color: #a9a9a9
|
||
}
|
||
div.gallery {
|
||
border: 5px double #a72f14
|
||
}
|
||
.main a, footer a {
|
||
color: #dba047
|
||
}
|
||
.contact a,
|
||
li,
|
||
span,
|
||
a.webring-btn,
|
||
div.desc,
|
||
p,
|
||
h1,
|
||
h2,
|
||
h3,
|
||
b {
|
||
color: #fff
|
||
}
|
||
} |