mirror of
https://git.sr.ht/~roxwize/mipilin
synced 2025-05-10 23:33:07 +00:00
mipilin r9... Fimally
Signed-off-by: roxwize <rae@roxwize.xyz>
This commit is contained in:
parent
961d963677
commit
fa8fae4638
GPG key ID:
5B1A0FAB9BAB81EE
9 changed files with 217 additions and 150 deletions
|
|
@ -1,231 +1,239 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
background-color: #21211d;
|
||||
background-image: url("/img/bg.png");
|
||||
background-size: cover;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
font-family: "Gohufont 14", sans-serif;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
background-color: #21211d;
|
||||
background-image: url("/img/bg.png");
|
||||
background-size: cover;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
font-family: "Gohufont 14", sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: #faf8da;
|
||||
width: 95%;
|
||||
max-width: 953px;
|
||||
height: 95%;
|
||||
background-color: #faf8da;
|
||||
width: 95%;
|
||||
max-width: 953px;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4630df;
|
||||
color: #4630df;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
background-color: #e0d665;
|
||||
background-image: linear-gradient(to bottom, #f6ef98, #c7c07d);
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
background-color: #e0d665;
|
||||
background-image: linear-gradient(to bottom, #f6ef98, #c7c07d);
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#header-logo {
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
|
||||
height: 40px;
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
header nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
header nav a {
|
||||
text-decoration: none;
|
||||
text-shadow: 0 0px 4px rgba(0, 0, 0, 0.8);
|
||||
color: #faf8da;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 0px 4px rgba(0, 0, 0, 0.8);
|
||||
color: #faf8da;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
header nav a:visited {
|
||||
color: #faf8da;
|
||||
color: #faf8da;
|
||||
}
|
||||
header nav a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#ticker {
|
||||
position: relative;
|
||||
border: 1px solid #25251d;
|
||||
background-color: #454542;
|
||||
height: 1.5em;
|
||||
color: #faf8da;
|
||||
position: relative;
|
||||
border: 1px solid #25251d;
|
||||
background-color: #454542;
|
||||
height: 1.5em;
|
||||
color: #faf8da;
|
||||
}
|
||||
#ticker > div {
|
||||
display: flex;
|
||||
float: left;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 1px solid #25251d;
|
||||
background-color: #3b3b33;
|
||||
padding: 0 4px;
|
||||
min-width: 255px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
float: left;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 1px solid #25251d;
|
||||
background-color: #3b3b33;
|
||||
padding: 0 4px;
|
||||
min-width: 255px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
#ticker div a {
|
||||
color: #faf8da;
|
||||
color: #faf8da;
|
||||
}
|
||||
#ticker #ticker-marquee {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#page {
|
||||
position: relative;
|
||||
height: calc(100% - 1.5em - 76px);
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
height: calc(100% - 1.5em - 76px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
float: left;
|
||||
border-right: 1px solid #afa870;
|
||||
padding: 1em;
|
||||
width: 256px;
|
||||
height: 100%;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
float: left;
|
||||
border-right: 1px solid #afa870;
|
||||
padding: 1em;
|
||||
width: 256px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 1em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#content > *:nth-child(2) {
|
||||
margin-top: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-top: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
#content > *:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-inline-end: 0;
|
||||
margin-bottom: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
#flashes div {
|
||||
margin-bottom: 8px;
|
||||
padding: 8px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
margin-bottom: 8px;
|
||||
padding: 8px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
#flashes div:first-child {
|
||||
margin-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
.flash-error {
|
||||
background-color: #e06583;
|
||||
border-color: #911533;
|
||||
background-color: #e06583;
|
||||
border-color: #911533;
|
||||
}
|
||||
.flash-info {
|
||||
background-color: #8ca3f2;
|
||||
border-color: #6371a1;
|
||||
background-color: #8ca3f2;
|
||||
border-color: #6371a1;
|
||||
}
|
||||
.flash-success {
|
||||
background-color: #8cf2a6;
|
||||
border-color: #3da758;
|
||||
background-color: #8cf2a6;
|
||||
border-color: #3da758;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #c51e48;
|
||||
color: #c51e48;
|
||||
}
|
||||
.subtle {
|
||||
opacity: 0.5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
button,
|
||||
textarea,
|
||||
select,
|
||||
input {
|
||||
border: 1px solid #757462;
|
||||
background-color: white;
|
||||
padding: 4px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
border: 1px solid #757462;
|
||||
background-color: white;
|
||||
padding: 4px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
button:focus,
|
||||
textarea:focus,
|
||||
select:focus,
|
||||
input:focus {
|
||||
outline: 0;
|
||||
border: 1px solid #000000;
|
||||
outline: 0;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
button,
|
||||
select {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
table button {
|
||||
padding: 0 4px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
th, td {
|
||||
text-align: left;
|
||||
padding-right: 1em;
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding-right: 1em;
|
||||
}
|
||||
tr:nth-child(odd) td {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
tr:hover td {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.feed-update {
|
||||
background-color: #d5d4bb;
|
||||
height: fit-content;
|
||||
word-wrap: break-word;
|
||||
background-color: #d5d4bb;
|
||||
height: fit-content;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.feed-update div:first-child {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.feed-update div:last-child {
|
||||
text-align: right;
|
||||
color: #3f3f38;
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
color: #3f3f38;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gohufont 14";
|
||||
src: url("/fonts/gohufont-14.ttf") format("truetype"),
|
||||
url("/fonts/gohufont-14.woff") format("woff");
|
||||
font-display: swap;
|
||||
font-family: "Gohufont 14";
|
||||
src: url("/fonts/gohufont-14.ttf") format("truetype"),
|
||||
url("/fonts/gohufont-14.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
#feed {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
.feed-update {
|
||||
padding: 4px;
|
||||
width: 280px;
|
||||
}
|
||||
#feed {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
.feed-update {
|
||||
padding: 4px;
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 900px) {
|
||||
.feed-update {
|
||||
border-bottom: 1px solid #afa870;
|
||||
padding: 8px;
|
||||
}
|
||||
.feed-update {
|
||||
border-bottom: 1px solid #afa870;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue