.
This commit is contained in:
Flummi
@ -1,9 +1,3 @@
|
||||
/* 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;
|
||||
@ -22,108 +16,26 @@
|
||||
}
|
||||
/*End of Theming*/
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--font-color);
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
div.pageWrapper {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* END OF NAV */
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* Flummikram lol */
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
div.content {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 8px;
|
||||
bottom: 25px;
|
||||
right: 8px;
|
||||
margin-top: 25px;
|
||||
overflow: hidden;
|
||||
}
|
||||
div.posts {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 0.2fr 2.6fr 0fr;
|
||||
}
|
||||
|
||||
div.posts > a {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
box-shadow: 2px 2px 6px 0px rgb(0, 0, 0);
|
||||
margin: 4px;
|
||||
float: left;
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 10px #4c4a4a;
|
||||
}
|
||||
div.posts > a > img.thumb {
|
||||
border: 2px solid black;
|
||||
transition: .1s ease-out;
|
||||
}
|
||||
div.posts > a > img.thumb:hover {
|
||||
box-shadow: 0px 0px 0px 2px #dac8d2;
|
||||
border-radius: 5px;
|
||||
transition: .1s ease-in;
|
||||
}
|
||||
|
||||
/* fml */
|
||||
div#header {
|
||||
height: 65px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
div#header, div#footer {
|
||||
z-index: 9999;
|
||||
background-color: #292922;
|
||||
}
|
||||
|
||||
#logoHead {
|
||||
margin: 6px 0 0 4px;
|
||||
padding: 0;
|
||||
@ -147,7 +59,7 @@ div#header {
|
||||
#pagePosition, #itemPosition {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 6px;
|
||||
top: 6px;
|
||||
padding: 0;
|
||||
color: #7d7b6a;
|
||||
background-color: #333;
|
||||
@ -162,32 +74,21 @@ div#header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#wrapper {
|
||||
display: block;
|
||||
div#content {
|
||||
position: relative;
|
||||
}
|
||||
div#itemview {
|
||||
z-index: 999;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
|
||||
div.wrapper {
|
||||
display: none;
|
||||
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.items {
|
||||
/*position: relative;*/
|
||||
flex: 1 1 0px;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
img.item {
|
||||
position: absolute;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div#howtowrapper {
|
||||
overflow: hidden;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
|
||||
div.arrow {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
@ -67,22 +67,25 @@ div.right:before {
|
||||
}
|
||||
|
||||
div.arrow.top {
|
||||
top: 80px;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
div.arrow.bottom {
|
||||
bottom: 80px;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
div.arrow.left {
|
||||
left: 20px;
|
||||
position: fixed !important;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
div.arrow.right {
|
||||
right: 20px;
|
||||
position: fixed !important;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
|
||||
28
public/css/itemview.css
Normal file
28
public/css/itemview.css
Normal file
@ -0,0 +1,28 @@
|
||||
div#itemwrapper {
|
||||
overflow: hidden;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
div#i_items {
|
||||
width: 300%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-areas: ". . .";
|
||||
}
|
||||
div.i_item {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
3
public/css/milligram.min.css
vendored
3
public/css/milligram.min.css
vendored
File diff suppressed because one or more lines are too long
34
public/css/pageview.css
Normal file
34
public/css/pageview.css
Normal file
@ -0,0 +1,34 @@
|
||||
div#pagewrapper {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div#p_items {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
div.p_item {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
div.p_item > a {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
box-shadow: 2px 2px 6px 0px rgb(0, 0, 0);
|
||||
margin: 4px;
|
||||
float: left;
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 10px #4c4a4a;
|
||||
}
|
||||
div.p_item > a > img.thumb {
|
||||
border: 2px solid black;
|
||||
transition: .1s ease-out;
|
||||
}
|
||||
div.p_item > a > img.thumb:hover {
|
||||
box-shadow: 0px 0px 0px 2px #dac8d2;
|
||||
border-radius: 5px;
|
||||
transition: .1s ease-in;
|
||||
}
|
||||
Reference in New Issue
Block a user