@import url('fonts.googleapis.com/css2?family=Petit+Formal+Script&display=swap'); @import url('fonts.googleapis.com/css2?family=Roboto&display=swap');
:root{ –primary: e0d7d7; }
*,::before,::after{
box-sizing: border-box;
} body{
margin: 0; padding: 0; line-height: 1.5; font-size:18px; height: 100vh; width: 100%; font-family: Roboto, sans-serif;
}
article.container{
min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 100%;
}
h1,h2,h3{
font-family: 'Petit Formal Script', cursive;
}
header{
background: var(--primary); display: grid; grid-template-columns: minmax(1.2rem, 1fr) minmax(auto, 70ch) minmax(1.2rem, 1fr); grid-template-rows: inherit; grid-template-areas: "... metaheader ....";
}
header h1{
grid-area: metaheader;
}
.container > *{
/*padding: .4em;*/
}
main{
display: grid; grid-template-columns: minmax(1.2rem, 1fr) minmax(auto, 70ch) minmax(1.2rem, 1fr); grid-template-rows: inherit; grid-template-areas: ".... metamain ...";
}
main > div {
grid-area: metamain;
}
footer{
background: var(--primary); margin-top: auto; display: grid; grid-template-columns: minmax(1.2rem, 1fr) minmax(auto, 70ch) minmax(1.2rem, 1fr); grid-template-rows: inherit; grid-template-areas: "... metafooter ...";
}
footer > *{
grid-area: metafooter;
}
.footerInnerContainer{
display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr 1fr; grid-template-areas: "copyright ... text" "icons ... text";
}
.nav-ul{
padding-left: 1em; font-family: 'Petit Formal Script', cursive; font-weight: 600; cursor: pointer; grid-area: ...;
} nav{
margin:0; padding: 0;
} .nav-ul li{
list-style: none;
}
img{
max-width: 100%;
}
blockquote{
border-left: 4px solid var(--primary); background: cornsilk; padding:0.4em; margin: 0;
}
pre{
border:2px solid var(--primary); background: cornsilk; padding:0.4em; overflow-x: auto;
}
.iconList{
list-style: none; margin-top: 1em; padding: 0; grid-area: text;
}
.iconList li{
display: inline-block; margin-right:.5em;
}
table{
width: 100%; border-collapse: collapse;
}
thead{
display: table-header-group; vertical-align: middle; border-color: inherit;
}
tbody{
display: table-row-group; vertical-align: middle; border-color: inherit;
} th,td{
padding: 5px 10px; border-bottom: 1px solid #e5e5e5;
}
.post-list{
list-style: none; margin: 0; padding: 0;
}
.post-list-item{
/*margin-bottom: 1.5em;*/
}
.post-title{
margin-top:0em;
}
.post-date{
font-size: 0.6em; margin: 0;
}
.post-excerpt{
margin: 0; padding: 0; font-size: 3.5em;
}
body.dark-theme {
color: #eee; background: #121212; --primary: #252525; transition: color .5s ease, background .5s ease; }
body.dark-theme a {
color: #809fff;
}
body.light-theme {
color: #222; background: #fff; --primary: #e0d7d7; transition: color .5s ease, background .5s ease;
}
body.light-theme a {
color: #0033cc;
}
a{
text-decoration: none; }
.theme-switch-wrapper{
grid-area: metaheader; direction: rtl;
}
@media (max-width:800px){
body{ font-size:20px; } main{ display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "nav" "main"; } .wrapper{ grid-area: main; margin-left:1em; } h1,h2,h3{ margin:0.5em; margin-left: 0;
}
}
.theme-switch-wrapper {
display: flex; align-items: center; em { margin-left: 10px; font-size: 1rem; } } .theme-switch { display: inline-block; height: 34px; position: relative; width: 60px; } .theme-switch input { display:none; } .slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; } .slider:before { background-color: #fff; bottom: 4px; content: ""; height: 26px; left: 4px; position: absolute; transition: .4s; width: 26px; } input:checked + .slider { background-color: #66bb6a; } input:checked + .slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }