afacanc38.github.io/assets/style.css

172 lines
No EOL
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;
}