generated from mirzaev/pot
first init + css
This commit is contained in:
parent
f7a3198e64
commit
294cedf35a
|
|
@ -1,46 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
* {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
/* font-family: , system-ui, sans-serif; */
|
||||
font-family: "dejavu";
|
||||
transition: 0.1s ease-out;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--background, #fafafa);
|
||||
}
|
||||
|
||||
aside {
|
||||
}
|
||||
|
||||
header {
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
transition: 0s;
|
||||
}
|
||||
|
||||
footer {
|
||||
}
|
||||
|
||||
.unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -10,9 +10,9 @@
|
|||
"license": "WTFPL",
|
||||
"authors": [
|
||||
{
|
||||
"name": "svoboda",
|
||||
"email": "svoboda@gmail.com",
|
||||
"homepage": "https://svoboda.page",
|
||||
"name": "Arsen Mirzaev Tatyano-Muradovich",
|
||||
"email": "arsen@mirzaev.sexy",
|
||||
"homepage": "https://mirzaev.sexy",
|
||||
"role": "Programmer"
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
|
||||
server_name svoboda.dev.mirzaev.sexy;
|
||||
|
||||
# 301 302
|
||||
return 301 https://$server_name$request_uri;
|
||||
}
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen 443 quic;
|
||||
listen [::]:443 ssl;
|
||||
listen [::]:443 quic;
|
||||
|
||||
server_name svoboda.dev.mirzaev.sexy;
|
||||
|
||||
http2 on;
|
||||
http3 on;
|
||||
quic_gso on;
|
||||
quic_retry on;
|
||||
|
||||
add_header Alt-Svc 'h3=":$server_port"; ma=86400';
|
||||
add_header x-quic 'h3';
|
||||
|
||||
root /var/www/svoboda.works/svoboda/works/system/public;
|
||||
|
||||
index index.php;
|
||||
|
||||
keepalive_timeout 60;
|
||||
|
||||
include snippets/ssl-params.conf;
|
||||
include snippets/ssl-mirzaev.conf;
|
||||
include snippets/php8_4.conf;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.php?$query_string;
|
||||
}
|
||||
|
||||
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|mp3|ogg|ogv|webm|htc|woff2|woff)$ {
|
||||
expires 1M;
|
||||
access_log off;
|
||||
add_header Cache-Control "max-age=2629746, public";
|
||||
}
|
||||
|
||||
location ~* \.(?:css|js)$ {
|
||||
expires 1y;
|
||||
access_log off;
|
||||
add_header Cache-Control "max-age=31556952, public";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
aside {
|
||||
z-index: 100;
|
||||
margin-top: var(--gap);
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 4;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
aside > * {
|
||||
margin-right: var(--gap);
|
||||
}
|
||||
|
||||
aside > section {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 0.75rem;
|
||||
background-color: var(--section-background-color);
|
||||
-webkit-box-shadow: 0px -3px 18px 2px rgba(0, -3, 0, 0.4);
|
||||
-moz-box-shadow: 0px -3px 18px 2px rgba(0, -3, 0, 0.4);
|
||||
box-shadow: 0px -3px 18px 2px rgba(0, -3, 0, 0.4);
|
||||
}
|
||||
|
||||
aside > section > a.title {
|
||||
z-index: 300;
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
bottom: 1rem;
|
||||
display: inline-flex;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-radius: 0.75rem;
|
||||
background-color: var(--section-aside-button-background-color);
|
||||
backdrop-filter: blur(1px) contrast(1.8);
|
||||
-webkit-box-shadow: 0px 0px 24px 2px rgba(0, 0, 0, 0.4);
|
||||
-moz-box-shadow: 0px 0px 24px 2px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0px 0px 24px 2px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
aside > section:hover > a.title {
|
||||
background-color: var(--section-aside-button-background-color-hover);
|
||||
}
|
||||
|
||||
aside > section > a.title * {
|
||||
margin: unset;
|
||||
color: var(--section-aside-button-color);
|
||||
}
|
||||
|
||||
aside > section > p.description {
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
aside > section:not(:hover) > p.description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
aside > section > img.background {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
aside > section:not(:hover) > img.background {
|
||||
filter: blur(0.5px) contrast(0.8) sepia(0.8) brightness(0.4);
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: max(150px, 15vh) auto;
|
||||
grid-template-columns: 60px auto 60px;
|
||||
gap: var(--gap);
|
||||
overflow: hidden;
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text-color: #c5bbab;
|
||||
--text-color-hover: #e9ddc9;
|
||||
--text-color-active: #9f9686;
|
||||
--text-notice-color: #7e6a5b;
|
||||
--text-warning-color: #df2020;
|
||||
--text-selected-color: #c90000;
|
||||
--text-selected-background-color: #3a0909;
|
||||
|
||||
--link-color: #b97a4b;
|
||||
--link-color-hover: #dd8e54;
|
||||
--link-color-active: #a16438;
|
||||
|
||||
--button-background-color: #9f9b39;
|
||||
--section-border-color: #593535;
|
||||
--section-background-color: #593535;
|
||||
--section-block-background-color: #522d2d;
|
||||
|
||||
--section-menu-background-color: #4b2828;
|
||||
--section-menu-button-color: #fbffb6;
|
||||
--section-menu-button-background-color-hover: #592c2c;
|
||||
--section-menu-button-background-color-active: #412222;
|
||||
--section-menu-button-background-color-selected: #412222;
|
||||
|
||||
--section-timeline-background-color: #143531;
|
||||
--section-timeline-button-color: #859779;
|
||||
--section-timeline-button-color-hover: #96ab89;
|
||||
--section-timeline-button-color-active: #67755e;
|
||||
--section-timeline-button-selected-color: #b0b966;
|
||||
--section-timeline-button-selected-color-hover: #d1db7a;
|
||||
--section-timeline-button-selected-color-active: #989f5b;
|
||||
|
||||
--section-aside-button-color: #fbffb6;
|
||||
--section-aside-button-background-color: rgb(255 237 189 / 30%);
|
||||
--section-aside-button-background-color-hover: rgb(77 9 9 / 70%);
|
||||
--section-aside-button-background-color-active: rgb(77 9 9 / 70%);
|
||||
--header-background-color: #351d1d;
|
||||
--footer-background-color: #351d1d;
|
||||
--background-color: #654949;
|
||||
|
||||
--diagram-text-color: #c3a275;
|
||||
--diagram-text-color-hover: #e5bb83;
|
||||
--diagram-text-color-active: #b99565;
|
||||
--diagram-color-blue: #303032;
|
||||
--diagram-color-white: #a4bd93;
|
||||
--diagram-color-white-hover: #bee5a3;
|
||||
--diagram-color-white-active: #8ca57a;
|
||||
--diagram-color-0: #572626;
|
||||
--diagram-color-1: #572b2b;
|
||||
--diagram-color-2: #552828;
|
||||
--diagram-color-3: #5f2b2b;
|
||||
--diagram-color-4: #6d3030;
|
||||
--diagram-color-5: #773636;
|
||||
--diagram-color-6: #893737;
|
||||
--diagram-legend-text-color: #7c7b61;
|
||||
--diagram-legend-color-0: #461d1d;
|
||||
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--text-color: black;
|
||||
--title-background: blue;
|
||||
--section-background: blue;
|
||||
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
div#diagram {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div#diagram>svg.pie {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
div#diagram>svg.pie>circle {
|
||||
stroke-width: 10;
|
||||
stroke-dasharray: calc(31.4 * var(--size, 0)), 31.4;
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
div#diagram>svg.pie>circle.background {
|
||||
fill: var(--diagram-color-0);
|
||||
}
|
||||
|
||||
div#diagram>svg.pie>circle:nth-of-type(1) {
|
||||
stroke: var(--diagram-color-1);
|
||||
}
|
||||
|
||||
div#diagram>svg.pie>circle:nth-of-type(2) {
|
||||
stroke: var(--diagram-color-2);
|
||||
}
|
||||
|
||||
div#diagram>svg.pie>circle:nth-of-type(3) {
|
||||
stroke: var(--diagram-color-3);
|
||||
}
|
||||
|
||||
div#diagram>svg.pie>circle:nth-of-type(4) {
|
||||
stroke: var(--diagram-color-4);
|
||||
}
|
||||
|
||||
div#diagram>svg.pie>circle:nth-of-type(5) {
|
||||
stroke: var(--diagram-color-5);
|
||||
}
|
||||
|
||||
div#diagram>svg.chart>polyline {
|
||||
stroke-width: 4;
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
div#diagram>svg.chart>a.node>text {
|
||||
font-size: 0.8rem;
|
||||
text-anchor: middle;
|
||||
fill: var(--diagram-text-color);
|
||||
}
|
||||
|
||||
div#diagram>svg.chart>a.node:first-of-type>text {
|
||||
text-anchor: start;
|
||||
}
|
||||
|
||||
div#diagram>svg.chart>a.node:last-of-type>text {
|
||||
text-anchor: end;
|
||||
}
|
||||
|
||||
div#diagram>svg.chart>a.node:is(:hover, :focus)>text {
|
||||
fill: var(--diagram-text-color-hover);
|
||||
}
|
||||
|
||||
div#diagram>svg.chart>a.node:active>text {
|
||||
fill: var(--diagram-text-color-active);
|
||||
}
|
||||
|
||||
div#diagram>svg.chart>a.node>circle {
|
||||
r: 7;
|
||||
stroke-width: 4;
|
||||
stroke: var(--diagram-color-5);
|
||||
fill: var(--diagram-color-white);
|
||||
}
|
||||
|
||||
div#diagram>svg.chart>a.node:is(:hover, :focus)>circle {
|
||||
r: 8;
|
||||
stroke: var(--diagram-color-6);
|
||||
fill: var(--diagram-color-white-hover);
|
||||
}
|
||||
|
||||
div#diagram>svg.chart>a.node:active>circle {
|
||||
stroke: var(--diagram-color-4);
|
||||
fill: var(--diagram-color-white-active);
|
||||
}
|
||||
|
||||
/* div#diagram > svg.chart + div.background {
|
||||
z-index: -100;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 87%;
|
||||
background-color: var(--diagram-color-1);
|
||||
border-radius: 0.75rem;
|
||||
} */
|
||||
|
||||
div#diagram>svg.chart>rect.background {
|
||||
fill: var(--diagram-color-0);
|
||||
}
|
||||
|
||||
div#diagram>svg.chart>polyline.legend {
|
||||
stroke: var(--diagram-legend-color-0);
|
||||
}
|
||||
|
||||
div#diagram>svg.chart>text.legend {
|
||||
font-size: 0.8rem;
|
||||
text-anchor: end;
|
||||
fill: var(--diagram-legend-text-color);
|
||||
}
|
||||
|
||||
div#diagram>svg.chart>text.legend.vertical {
|
||||
rotate: -90deg;
|
||||
}
|
||||
|
||||
div#diagram>svg.chart>polyline:nth-of-type(1) {
|
||||
stroke: transparent;
|
||||
fill: var(--diagram-legend-color-0);
|
||||
}
|
||||
|
||||
div#diagram>svg.chart>polyline:nth-of-type(2) {
|
||||
stroke: var(--diagram-color-5);
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
footer {
|
||||
z-index: 300;
|
||||
position: relative;
|
||||
grid-row: 1 / 3;
|
||||
grid-column: 3 / 4;
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
gap: var(--gap);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: var(--footer-background-color);
|
||||
}
|
||||
|
||||
footer:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
pointer-events: none;
|
||||
border-bottom-right-radius: 50%;
|
||||
box-shadow: 0 20px 0 0 var(--footer-background-color);
|
||||
}
|
||||
|
||||
footer > a#svoboda {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
header {
|
||||
z-index: 400;
|
||||
position: relative;
|
||||
grid-row: 1 / 3;
|
||||
grid-column: 1 / 2;
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
gap: var(--gap);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: var(--header-background-color);
|
||||
}
|
||||
|
||||
header:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -40px;
|
||||
bottom: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
pointer-events: none;
|
||||
border-bottom-left-radius: 50%;
|
||||
box-shadow: 0 20px 0 0 var(--header-background-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
i.icon.camera {
|
||||
position: relative;
|
||||
perspective: 24px;
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
i.icon.camera::after,
|
||||
i.icon.camera::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
i.icon.camera::before {
|
||||
top: 0;
|
||||
right: -7px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 2px solid;
|
||||
border-left-color: transparent;
|
||||
transform: rotateY(-70deg);
|
||||
}
|
||||
|
||||
i.icon.camera::after {
|
||||
top: -5px;
|
||||
right: 2px;
|
||||
width: 10px;
|
||||
height: 5px;
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
i.icon.controller {
|
||||
position: relative;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
i.icon.controller::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
top: -5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
box-shadow: -6px -6px 0 -4px, 6px 6px 0 -4px, 6px -6px 0 -4px, -6px 6px 0 -4px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
i.icon.document {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
border-radius: 1px;
|
||||
border-top-right-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border: 2px solid transparent;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
box-shadow: 0 0 0 2px;
|
||||
}
|
||||
|
||||
i.icon.document::after,
|
||||
i.icon.document::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
i.icon.document::before {
|
||||
left: 0;
|
||||
top: 8px;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
box-shadow: 0 4px 0, -6px -4px 0;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
i.icon.document::after {
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-left: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
i.icon.eye {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border-bottom-right-radius: 100px;
|
||||
border-bottom-left-radius: 100px;
|
||||
}
|
||||
|
||||
i.icon.eye.expanded:not(.offended) {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
i.icon.eye.small {
|
||||
width: 21px;
|
||||
height: 15px;
|
||||
border-bottom-right-radius: 70px;
|
||||
border-bottom-left-radius: 70px;
|
||||
}
|
||||
|
||||
i.icon.eye.small.expanded:not(.offended) {
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
i.icon.eye::after,
|
||||
i.icon.eye::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
i.icon.eye::after {
|
||||
top: 2px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
box-shadow: inset 0 -8px 0 2px, inset 0 0 0 2px;
|
||||
}
|
||||
|
||||
i.icon.eye.small::after {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
i.icon.eye.expanded:not(.offended)::after {
|
||||
box-shadow: inset 0 -6px 0 2px, inset 0 0 0 2px;
|
||||
}
|
||||
|
||||
i.icon.eye.offended::after {
|
||||
box-shadow: inset 0px -8px 0 2px, inset 0 -7px 0 2px;
|
||||
}
|
||||
|
||||
i.icon.eye::before {
|
||||
left: var(--left, 8px);
|
||||
bottom: var(--bottom, 4px);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 2px solid var(--text-color-active);
|
||||
transition: var(--transition, 0) ease-out;
|
||||
transform: rotateX(var(--offset-x, 0)) rotateY(var(--offset-y, 0));
|
||||
}
|
||||
|
||||
i.icon.eye.small::before {
|
||||
left: var(--left, 7px);
|
||||
bottom: var(--bottom, 3px);
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
i.icon.eye.excited::before {
|
||||
width: 6px;
|
||||
/* border: 2px solid var(--text-color-warning, red); */
|
||||
}
|
||||
|
||||
i.icon.eye.excited.small::before {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
i.icon.eye.offended::before {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
i.icon.share {
|
||||
position: relative;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border-radius: 100px;
|
||||
background: currentColor;
|
||||
box-shadow: 10px -6px 0, 10px 6px 0;
|
||||
}
|
||||
|
||||
i.icon.share::after,
|
||||
i.icon.share::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
i.icon.share::before {
|
||||
top: 0;
|
||||
transform: rotate(-35deg);
|
||||
}
|
||||
|
||||
i.icon.share::after {
|
||||
bottom: 0;
|
||||
transform: rotate(35deg);
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
i.icon.code.slash {
|
||||
position: relative;
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
background: currentColor;
|
||||
transform: rotate(15deg) scale(var(--ggs, 1));
|
||||
}
|
||||
|
||||
i.icon.code.slash::after,
|
||||
i.icon.code.slash::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
|
||||
i.icon.code.slash::before {
|
||||
left: -8px;
|
||||
top: 5px;
|
||||
border-left: 2px solid;
|
||||
border-top: 2px solid;
|
||||
}
|
||||
|
||||
i.icon.code.slash::after {
|
||||
top: 3px;
|
||||
right: -8px;
|
||||
border-right: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
main {
|
||||
z-index: 200;
|
||||
margin-bottom: var(--gap);
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
display: grid;
|
||||
grid-template-rows: 2rem 43px auto;
|
||||
gap: var(--gap);
|
||||
}
|
||||
|
||||
main > nav {
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
main > nav > * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
main > nav#timeline {
|
||||
margin-bottom: -0.3rem;
|
||||
grid-row: 1 / 2;
|
||||
padding: 0 0.5rem;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
main > nav#timeline > * {
|
||||
padding: 0.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--section-timeline-button-color);
|
||||
}
|
||||
|
||||
main > nav#timeline > *:is(:hover, :focus) {
|
||||
color: var(--section-timeline-button-color-hover);
|
||||
}
|
||||
|
||||
main > nav#timeline > *:active {
|
||||
color: var(--section-timeline-button-color-active);
|
||||
}
|
||||
|
||||
main > nav#timeline > *.selected {
|
||||
color: var(--section-timeline-button-selected-color);
|
||||
}
|
||||
|
||||
main > nav#timeline > *.selected:is(:hover, :focus) {
|
||||
color: var(--section-timeline-button-selected-color-hover);
|
||||
}
|
||||
|
||||
main > nav#timeline > *.selected:active {
|
||||
color: var(--section-timeline-button-selected-color-active);
|
||||
}
|
||||
|
||||
main > nav#menu {
|
||||
grid-row: 2 / 3;
|
||||
border-radius: 0.75rem;
|
||||
background-color: var(--section-menu-background-color);
|
||||
-webkit-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
main > nav#menu > * {
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
color: var(--section-menu-button-color);
|
||||
}
|
||||
|
||||
main > nav#menu > *:first-child {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
main > nav#menu > *.selected:is(:hover, :focus),
|
||||
main > nav#menu > *:is(:hover, :focus) {
|
||||
background-color: var(--section-menu-button-background-color-hover);
|
||||
}
|
||||
|
||||
main > nav#menu > *.selected {
|
||||
background-color: var(--section-menu-button-background-color-selected);
|
||||
}
|
||||
|
||||
main > nav#menu > *.selected:active,
|
||||
main > nav#menu > *:active {
|
||||
background-color: var(--section-menu-button-background-color-active);
|
||||
}
|
||||
|
||||
main > section {
|
||||
z-index: 200;
|
||||
grid-row: 3 / 4;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--gap);
|
||||
border-radius: 0.75rem;
|
||||
background-color: var(--section-background-color);
|
||||
-webkit-box-shadow: 0px 3px 12px 2px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: 0px 3px 12px 2px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0px 3px 12px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
main > section > h1 {
|
||||
margin: 0.5rem 1rem 0.5rem 1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
main > section > h1.row {
|
||||
align-items: center;
|
||||
gap: var(--gap);
|
||||
}
|
||||
|
||||
main > section > h1 > a {
|
||||
min-width: 1rem;
|
||||
height: 100%;
|
||||
padding: 0.2rem;
|
||||
display: inline-flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
main > section > h1 > a:first-of-type {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
main > section > div.row {
|
||||
padding: 0rem 1rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
main > section .block {
|
||||
background: var(--section-block-background-color);
|
||||
}
|
||||
|
||||
main > section .block.text {
|
||||
padding: 0.6rem 0.8rem;
|
||||
display: inline-flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
main > section .block.text > a.continue {
|
||||
margin-left: auto;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
main > section p.block {
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
main > section ul.block {
|
||||
min-width: 200px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
main > section > div.footer > small.phrase {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main > section > div.footer > small#views {
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
main > section > div.footer > small#views > * {
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
main > section > div.footer > small#views > div.visibility {
|
||||
z-index: 300;
|
||||
position: absolute;
|
||||
right: calc(-100px + 10.5px + 0rem);
|
||||
top: calc(-100px + 0.5rem);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
/* pointer-events: none; */
|
||||
}
|
||||
|
||||
main > section#total > div#diagram.column {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--gap);
|
||||
}
|
||||
|
||||
main > section#total > div#diagram.column:has(svg.chart) {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
main > section#total > div#diagram.column > svg.pie {
|
||||
height: min(30%, 300px);
|
||||
}
|
||||
|
||||
main > section#total > div#diagram.column > small.formula {
|
||||
margin: 0 1.4rem;
|
||||
padding-right: 4rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--diagram-legend-text-color);
|
||||
}
|
||||
|
||||
main > section#total > div#diagram.column > svg.chart {
|
||||
margin: -2.5rem -1rem -3rem;
|
||||
width: calc(100% + 1rem);
|
||||
}
|
||||
|
||||
main > section#total > div#diagram.column > div.background {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
}
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
:root {
|
||||
--gap: min(12px, 1rem);
|
||||
transition: 0.1s ease-out;
|
||||
}
|
||||
|
||||
* {
|
||||
/* font-family: , system-ui, sans-serif; */
|
||||
font-family: "dejavu";
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
|
||||
::selection {
|
||||
border-radius: 2px;
|
||||
color: var(--text-selected-color);
|
||||
background: var(--text-selected-background-color);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
border-radius: 2px;
|
||||
color: var(--text-selected-color);
|
||||
background: var(--text-selected-background-color);
|
||||
}
|
||||
|
||||
.unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Buttons and links */
|
||||
|
||||
a,
|
||||
*[type="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a,
|
||||
a > * {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
a:is(:hover, :focus),
|
||||
a:is(:hover, :focus) > * {
|
||||
color: var(--link-color-hover);
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:active > * {
|
||||
color: var(--link-color-active);
|
||||
}
|
||||
|
||||
/* Wrappers */
|
||||
|
||||
:is(.row, .column) {
|
||||
gap: var(--gap);
|
||||
}
|
||||
|
||||
.row:not(.column) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.column:not(.row) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Macroses */
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
|
||||
:is(ol, ul) {
|
||||
margin: unset;
|
||||
padding: 0.6rem 0.8rem;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
:is(ol, ul):is(.column, .row) {
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
li > span.name:first-child:after {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
li > span.value:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
li > span.value:last-child:before {
|
||||
content: var(--old);
|
||||
margin-right: 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
text-decoration: line-through;
|
||||
color: var(--text-notice-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
section#window {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
|
@ -17,14 +17,11 @@ ini_set('display_startup_errors', 1); */
|
|||
define('PUBLIC', __DIR__);
|
||||
|
||||
// Initializing path to the project root directory
|
||||
define('ROOT', INDEX . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR);
|
||||
define('ROOT', PUBLIC . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR);
|
||||
|
||||
// Initializing path to the directory of views
|
||||
define('VIEWS', realpath('..' . DIRECTORY_SEPARATOR . 'views'));
|
||||
|
||||
// Initializing path to the directory of storage
|
||||
define('STORAGE', realpath('..' . DIRECTORY_SEPARATOR . 'storage'));
|
||||
|
||||
// Initializing path to the directory of settings
|
||||
define('SETTINGS', realpath('..' . DIRECTORY_SEPARATOR . 'settings'));
|
||||
|
||||
Loading…
Reference in New Issue