172 lines
3.3 KiB
CSS
172 lines
3.3 KiB
CSS
* {
|
|
margin: 0;
|
|
margin-bottom: 20px;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
|
|
}
|
|
:root {
|
|
--rounded-corner: 12px;
|
|
--gnomeblue: #1c71d8;
|
|
--blue1: rgb(153,193,241);
|
|
--blue2: rgb(98,160,234);
|
|
--blue3: rgb(53,132,228);
|
|
--blue4: rgb(28,113,216);
|
|
--blue5: rgb(26,95,180);
|
|
--green1: rgb(143,240,164);
|
|
--green2: rgb(87,227,137);
|
|
--green3: rgb(51,209,122);
|
|
--green4: rgb(46,194,126);
|
|
--green5: rgb(38,162,105);
|
|
--yellow1: rgb(249,240,107);
|
|
--yellow2: rgb(248,228,92);
|
|
--yellow3: rgb(246,211,45);
|
|
--yellow4: rgb(245,194,17);
|
|
--yellow5: rgb(229,165,10);
|
|
--orange1: rgb(255,190,111);
|
|
--orange2: rgb(255,163,72);
|
|
--orange3: rgb(255,120,0);
|
|
--orange4: rgb(230,97,0);
|
|
--orange5: rgb(198,70,0);
|
|
--red1: rgb(246,97,81);
|
|
--red2: rgb(237,51,59);
|
|
--red3: rgb(224,27,36);
|
|
--red4: rgb(192,28,40);
|
|
--red5: rgb(165,29,45);
|
|
--purple1: rgb(220,138,221);
|
|
--purple2: rgb(192,97,203);
|
|
--purple3: rgb(145,65,172);
|
|
--purple4: rgb(129,61,156);
|
|
--purple5: rgb(97,53,131);
|
|
--brown1: rgb(205,171,143);
|
|
--brown2: rgb(181,131,90);
|
|
--brown3: rgb(152,106,68);
|
|
--brown4: rgb(134,94,60);
|
|
--brown5: rgb(99,69,44);
|
|
--light1: rgb(255,255,255);
|
|
--light2: rgb(246,245,244);
|
|
--light3: rgb(222,221,218);
|
|
--light4: rgb(192,191,188);
|
|
--light5: rgb(154,153,150);
|
|
--dark1: rgb(119,118,123);
|
|
--dark2: rgb(94,92,100);
|
|
--dark3: rgb(61,56,70);
|
|
--dark4: rgb(36,31,49);
|
|
--dark5: rgb(0,0,0);
|
|
--text: #f6f5f4;
|
|
}
|
|
|
|
body {
|
|
background: var(--dark3);
|
|
color: var(--text);
|
|
}
|
|
|
|
#page-wrapper {
|
|
display: flex;
|
|
min-height: 100%;
|
|
align-content: center;
|
|
padding-left: 300px;
|
|
padding-right: 300px;
|
|
flex-direction: column;
|
|
margin: 50px;
|
|
}
|
|
|
|
.posts li {
|
|
background: var(--dark2);
|
|
padding: 20px;
|
|
border-radius: var(--rounded-corner);
|
|
list-style-type : none;
|
|
transition: 200ms ease-in-out;
|
|
border: 0px solid transparent;
|
|
margin: 0;
|
|
}
|
|
|
|
.posts {
|
|
padding: 0;
|
|
}
|
|
|
|
.posts * {
|
|
margin: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.posts li {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.posts li h2, .posts a {
|
|
margin-bottom: 10px;
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.posts li:hover {
|
|
transform: scale(1.05);
|
|
margin-bottom: 20px;
|
|
border: 5px solid var(--gnomeblue);
|
|
}
|
|
|
|
.headerbar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.headerbar * {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.headerbar a {
|
|
color: var(--text);
|
|
}
|
|
|
|
.yok {
|
|
color: var(--light5);
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
* {
|
|
margin: 2px !important;
|
|
padding: 5px !important;
|
|
}
|
|
|
|
.headerbar {
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.highlight {
|
|
background: var(--dark4);
|
|
border-radius: 10px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.highlighter-rouge {
|
|
background: var(--dark4);
|
|
border-radius: 10px;
|
|
font-family: "Iosevka Term", monospace;
|
|
}
|
|
|
|
.highlight * {
|
|
font-family: "Iosevka Term", monospace;
|
|
padding: 10px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.highlighter-rouge {
|
|
padding: 3px;
|
|
}
|
|
|
|
blockquote {
|
|
background: var(--dark2);
|
|
border-left: 3px solid var(--light5);
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
blockquote p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--blue1);
|
|
text-decoration: none;
|
|
} |