Something went wrong. Try again.
Source code of my website codeka.io
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420body { --sidebar-bg-color: #5ea4e2; --sidebar-img-border-color: #515151; --sidebar-p-color: #111111; --sidebar-h1-color: #FFF; --sidebar-a-color: #FFF; --sidebar-socials-color: #FFF; --text-color: #222; --bkg-color: #FAF9F6; --post-title-color: #303030; --list-color: #5a5a5a; --link-color: #268bd2; --date-color: #515151; --table-border-color: #E5E5E5; --table-stripe-color: #F9F9F9; --code-color: #d44950; --code-background-color: #f0f0f0; --code-block-color: #333; --code-block-background-color: #eeeeee; --moon-sun-color: #FFF; --moon-sun-background-color: #515151; background-color: var(--bkg-color);}
.lead { font-size: 1rem;}
.sidebar-nav { border-top: solid 1px white;}
.certifications { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 1rem;
border-top: solid 1px white; padding: 1rem 0 1rem 0; margin: 0;
li { width: 96px; flex-shrink: 1; list-style-type: none; text-align: center; }
img { width: 96px; height: 96px; border: 2px solid white; border-radius: 2rem; }}
.sidebar-socials { border-top: solid 1px white; padding: 1rem 0 1rem 0;
display: flex; justify-content: space-evenly;}
@media (max-width: 48em) { .sidebar { padding: 1rem; .certifications { display: none; } .sidebar-nav { margin-top: 0; margin-bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 1rem; border-top: none; .heading { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 1%; } .sub-heading { display: none; } .bullet { display: none; } } .sidebar-socials { display: none; } .footnote { display: none; } .lead { margin-bottom: 0; } .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem;
a { display: flex; } img{ width: 90px; height: 90px; margin: 0; flex-shrink: 0; } } }}
/* links style for projects list view in home page */.projects .info { margin-bottom: 4em;}
.projects .info a .featuredImage { max-height: 5rem;}
.projects .info .links { float: none; display: flex; flex-flow: row wrap; justify-content: flex-start; gap: 5px; padding: 0;}
.projects .info .links li { list-style: none; margin: 0; padding: 0;}
.projects .info .links li a img { margin: 0;}
/* styles for list pages */.entries h3 { text-align: center;}
/* links style for books list view in home page */.books .info { margin-bottom: 4em;}
.books .info .links { float: none; display: flex; flex-flow: row wrap; justify-content: flex-start; gap: 5px; padding: 0;}
.books .info .links li { list-style: none; margin: 0; padding: 0;}
.books .info .links li a img { margin: 0;}
.books .info a .featuredImage { width: 200px; height: 250px;}
/* article headline style */.headline { flex-direction: column; align-items: start;}.headline > div { flex: 1 0 auto;}.headline > .tags { flex: 0 1 auto;}
.post-date { margin-bottom: 0;}
.info ul.tags li { margin-left: 0; margin-right: .25em;}
/* On small screens, stack metadata and show tags on a separate line */@media (max-width: 48em) { .headline { align-items: flex-start; } /* Ensure the tags block drops below the date/reading-time */ .headline > .tags { flex: 0 0 auto; width: 100%; } /* Override theme float so the tags don't stay on the right */ .headline .tags { float: none; display: block; }}
/* Blockquote styling with transparent quote character */blockquote { position: relative; padding: 1.5rem 1rem 1rem 2rem; margin: 1.5rem 0; background-color: rgba(0, 0, 0, 0.03); border-radius: 5px; overflow: hidden;}
blockquote::before { content: '"'; position: absolute; top: -20px; left: 5px; font-size: 9rem; font-family: 'Playfair Display', 'Times New Roman', serif; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.05)); -webkit-background-clip: text; background-clip: text; color: transparent; transform: rotate(-5deg); line-height: 1; z-index: 0;}
blockquote p { position: relative; z-index: 1;}
/* Alert blockquotes */blockquote.alert { padding: 0; background-color: white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}blockquote.alert::before{ content:"";}.alert > .alert-heading { padding: 1rem 1rem 0.5rem 1rem; margin: 0; font-weight: bolder;}.alert > .alert-content,.alert > p{ padding: 1rem 1rem 0.5rem 1rem; margin: 0; color: black;}.alert-warning > .alert-heading { background-color: #fbf4ea; color: #cb8e38;}
.alert-warning { border-color: #cb8e38; color: #cb8e38;}
.alert-info { border-color: #2858e2; color: #2858e2;}
.alert-info > .alert-heading { background-color: #e9effd; color: #2858e2;}
/* Talks list styling */.talks-year { text-align: center;}
.talks-item { list-style: none; margin-bottom: 2rem;}
/* Event card styling for talks */.events-container { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; width: 100%;}
.event-card { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.5rem 0.8rem; border-radius: 5px; box-shadow: 0 1px 3px var(--sidebar-bg-color);}
.event-name { font-weight: bold; color: var(--post-title-color); font-size: 0.9rem;}
.event-date { color: var(--date-color); font-style: italic; font-size: 0.9rem;}
/* background color of mermaid diagrams */.content pre.mermaid{ color: var(--code-block-color); background-color: var(--bkg-color) !important;}
/* Tags terms page styling */.tags-container { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem;
.tag-card { display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.6rem 1rem; border-radius: 8px; background-color: white; box-shadow: 0 1px 3px var(--sidebar-bg-color); border: 1px solid var(--sidebar-bg-color); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tag-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.tag-name { font-weight: bold; color: var(--post-title-color); }
.tag-count { background-color: var(--sidebar-bg-color); color: white; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.8rem; font-weight: bold; }}
.images-grid-2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem;}
.images-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem;}
.bluesky-likes { text-decoration: none; border: 1px solid #0085ff; border-radius: 4px; padding: 1px 6px; font-size: 0.8rem; color: #0085ff; transition: all 0.2s ease;}
.bluesky-likes:hover { background-color: #0085ff; color: white; text-decoration: none;}
.photo-gallery { display: grid; grid-template-columns: repeat(3, auto); a{ img{ margin-bottom: 0; } }}
.article-translations { margin-bottom: 1rem;}