Initial commit
This commit is contained in:
228
src/style.css
Normal file
228
src/style.css
Normal file
@@ -0,0 +1,228 @@
|
||||
:root {
|
||||
--bg: #2d353b;
|
||||
--fg: #c3c6aa;
|
||||
--yellow: #dbbc7f;
|
||||
--yellow2: #4d4c43;
|
||||
--orange: #e69875;
|
||||
--green: #a7c080;
|
||||
--red: #e67e80;
|
||||
--blue: #7fbbb3;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
p { margin-top: 1px; }
|
||||
|
||||
h1 {
|
||||
color: var(--yellow);
|
||||
text-align: center;
|
||||
}
|
||||
h2 { color: var(--orange) }
|
||||
h3 { color: var(--yellow) }
|
||||
h4 { color: var(--blue) }
|
||||
|
||||
h1::before { content: "# "; }
|
||||
|
||||
body {
|
||||
color: var(--fg);
|
||||
background-color: var(--bg);
|
||||
margin: 0px;
|
||||
padding: 20px;
|
||||
/* font-family: "Fira Sans", sans-serif; */
|
||||
line-height: 1.5em;
|
||||
font-size: 1.1em;
|
||||
/* font-family: "Fira Code", monospace; */
|
||||
/* font-style: medium; */
|
||||
font-family: "Fira Code", monospace;
|
||||
font-optical-sizing: auto;
|
||||
font-style: normal;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
ul, li {
|
||||
list-style:none;
|
||||
list-style: symbols(cyclic "*");
|
||||
}
|
||||
li {
|
||||
padding-left: 5px;
|
||||
}
|
||||
/* li:before { */
|
||||
/* content: "*" */
|
||||
/* } */
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background: var(--green);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
a[href^="gemini://"]:hover {
|
||||
background: var(--blue);
|
||||
}
|
||||
a[href^="gemini://"]:hover::before {
|
||||
content: "🌐 ";
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
a[href^="gemini://"]::before {
|
||||
content: "🌐 ";
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
a[href^="mailto:"]::before {
|
||||
/* content: "📧 "; */
|
||||
content: "[@] ";
|
||||
color: var(--blue);
|
||||
}
|
||||
a[href^="https://matrix.to"]::before {
|
||||
content: "[Matrix] ";
|
||||
color: var(--blue);
|
||||
}
|
||||
a[href^="xmpp:"]::before {
|
||||
content: "[XMPP] ";
|
||||
color: var(--blue);
|
||||
}
|
||||
a[href^="mailto:"]:hover::before, a[href^="https://matrix.to"]:hover::before, a[href^="xmpp:"]:hover::before {
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
a::selection {
|
||||
background-color: var(--yellow2);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--yellow);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
.center { text-align: center; }
|
||||
.bold { text-decoration: bold; }
|
||||
|
||||
/* Footer */
|
||||
#footer > * {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
#footer > aside {
|
||||
/* margin-top: auto; */
|
||||
/* margin-bottom: auto; */
|
||||
background-color: #1e2326;
|
||||
box-shadow: 0px 0px 40px 10px #1e2326;
|
||||
border-radius: 10px;
|
||||
max-width: 80%;
|
||||
}
|
||||
@media (orientation: landscape) {
|
||||
#footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#footer > aside {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
#footer > * {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: monospace;
|
||||
white-space: pre;
|
||||
}
|
||||
pre.smaller {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
border-radius: 25px;
|
||||
height: 150px;
|
||||
width: 400px;
|
||||
overflow: hidden;
|
||||
margin: 10px;
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
#services a:hover div.bubble {
|
||||
border-color: var(--green);
|
||||
}
|
||||
|
||||
#services a:hover {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.bubble .bubble-blur {
|
||||
width: 100%;
|
||||
height: 120%;
|
||||
-webkit-backdrop-filter: blur(3px);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.bubble-blur h3, .bubble p {
|
||||
color: var(--fg);
|
||||
text-align: center;
|
||||
}
|
||||
.bubble-blur h3 {
|
||||
font-size: 170%;
|
||||
}
|
||||
|
||||
#matrix {
|
||||
background-image: url("./assets/matrix.png");
|
||||
}
|
||||
#gitea {
|
||||
background-image: url("./assets/gitea.png");
|
||||
}
|
||||
#hedgedoc {
|
||||
background-image: url("./assets/hedgedoc.png");
|
||||
}
|
||||
#kanidm {
|
||||
background-image: url("./assets/kanidm.png");
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
/* margin: 0 auto; */
|
||||
padding: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
grid-column-gap: 10px;
|
||||
/* grid-template-columns: auto auto auto; */
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
max-width: 1300px;
|
||||
}
|
||||
.asciicontainer {
|
||||
display: grid;
|
||||
/* margin: 0 auto; */
|
||||
padding: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
grid-column-gap: 20px;
|
||||
grid-template-columns: 250px repeat(auto-fit, minmax(250px, 1fr));
|
||||
max-width: 1300px;
|
||||
}
|
||||
@media (min-width: 1570px) {
|
||||
.bigcontainer {
|
||||
display: flex;
|
||||
gap: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.bigcontainer {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user