133 lines
2.4 KiB
CSS
133 lines
2.4 KiB
CSS
/* f0ck.me Stylesheet v2 */
|
|
/* Created in April of 2019 by the notorious and super sexy Alman Abu Ottermann */
|
|
/* This style makes use of the Milligram CSS framework and might not work as expected without! */
|
|
/* Contact: sirx @ f0ck . it */
|
|
/* This style is not meant to be used anywhere else than on f0ck.me or any other f0ck related website! */
|
|
|
|
/*Theming*/
|
|
:root {
|
|
--primary-color: #302AE6;
|
|
--secondary-color: #536390;
|
|
--font-color: #424242;
|
|
--bg-color: #090f13;
|
|
--heading-color: #292922;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--primary-color: #9A97F3;
|
|
--secondary-color: #818cab;
|
|
--font-color: #e1e1ff;
|
|
--bg-color: black;
|
|
--heading-color: #818cab;
|
|
}
|
|
/*End of Theming*/
|
|
|
|
/* Body */
|
|
body {
|
|
background-color: var(--bg-color);
|
|
color: var(--font-color);
|
|
}
|
|
/* End of Body */
|
|
|
|
/* Fieldset & Legend
|
|
legend {
|
|
border-radius: 2px;
|
|
background: black;
|
|
font-family: monospace;
|
|
border: 1px white solid;
|
|
color: white;
|
|
}
|
|
|
|
fieldset {
|
|
border: 1px solid white;
|
|
padding: 20px;
|
|
background: black;
|
|
}
|
|
End of Fieldset & Legend */
|
|
|
|
/* NAV */
|
|
button {
|
|
background: #000101;
|
|
border: 1px solid white;
|
|
border-radius: 0px;
|
|
vertical-align: bottom !important;
|
|
}
|
|
|
|
img.logo {
|
|
height: 48px;
|
|
}
|
|
/* END OF NAV */
|
|
|
|
/* f0ck Grid! */
|
|
.f0ckgrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
|
|
grid-gap: 20px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.f0ckgrid img {
|
|
box-shadow: 2px 2px 6px 0px rgb(0, 0, 0);
|
|
max-width: 100%;
|
|
}
|
|
/* End of f0ck Grid! */
|
|
|
|
/* Image Thumbs */
|
|
a img.thumb {
|
|
border: 2px solid black;
|
|
transition: .1s ease-out;
|
|
}
|
|
|
|
img.thumb:hover {
|
|
box-shadow: 0px 0px 0px 2px #dac8d2;
|
|
border-radius: 5px;
|
|
transition: .1s ease-in;
|
|
}
|
|
/* End of Image Thumbs */
|
|
|
|
/* List Styling
|
|
ul.f0ck-links {
|
|
list-style: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
li.post {
|
|
width: 128px;
|
|
height: 128px;
|
|
margin-top: 5px;
|
|
line-height: 128px;
|
|
float: left;
|
|
margin: 5px;
|
|
transition: .1s ease-out;
|
|
}
|
|
|
|
li.post:hover {
|
|
box-shadow: 0px 0px 0px 2px #dac8d2;
|
|
border-radius: 5px;
|
|
transition: .1s ease-in;
|
|
}
|
|
|
|
li.post:hover img {
|
|
border-radius: 5px;
|
|
opacity: 0.8;
|
|
}
|
|
End of List Styling */
|
|
|
|
/* MISC */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
|
|
}
|