2025-10-16 15:12:54 +00:00
<!DOCTYPE html> < html lang = "en" > < head > <!-- favicon --> < link rel = "apple-touch-icon" sizes = "180x180" href = "/favicon/apple-touch-icon.png" > < link rel = "icon" type = "image/png" sizes = "32x32" href = "/favicon/favicon-32x32.png" > < link rel = "icon" type = "image/png" sizes = "16x16" href = "/favicon/favicon-16x16.png" > < link rel = "sitemap" href = "/sitemap-index.xml" > < meta name = "theme-name" content = "pages" > < meta name = "msapplication-TileColor" content = "#000000" > < meta name = "theme-color" media = "(prefers-color-scheme: light)" content = "#fff" > < meta name = "theme-color" media = "(prefers-color-scheme: dark)" content = "#000" > < meta name = "generator" content = "Astro v5.14.5" > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=5" > < title >
2025-10-06 18:00:10 +00:00
Elements
2025-10-06 20:06:15 +00:00
< / title > < meta name = "description" content = "Kristian Takvam ' s website .
">< meta name = "author" content = "Kristian Takvam" > < meta property = "og:title" content = "Elements
">< meta property = "og:description" content = "Kristian Takvam ' s website .
2025-10-11 16:39:32 +00:00
">< meta property = "og:type" content = "website" > < meta property = "og:url" content = "https://kremtastic.github.io/docs/tutorials/elements/" > < meta property = "og:image" content = "https://kremtastic.github.io/_astro/bwca-dusk.D0G3dMZb.png" > < meta name = "twitter:title" content = "Elements
2025-10-06 20:06:15 +00:00
">< meta name = "twitter:description" content = "Kristian Takvam ' s website .
2025-10-16 15:12:54 +00:00
">< meta name = "twitter:image" content = "https://kremtastic.github.io/_astro/bwca-dusk.D0G3dMZb.png" > < meta name = "twitter:card" content = "summary_large_image" > <!-- Katex --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" integrity = "sha384-zh0CIslj+VczCZtlzBcjt5ppRcsAmDnRem7ESsYwWwg3m/OaJ2l4x7YBZl9Kxxib" crossorigin = "anonymous" > < script defer src = "https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.js" integrity = "sha384-Rma6DA2IPUwhNxmrB/7S3Tno0YY7sFu9WSYMCuulLhIqYSGZ2gKCJWIqhBWqMQfh" crossorigin = "anonymous" > < / script > < script defer src = "https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/contrib/auto-render.min.js" integrity = "sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin = "anonymous" onload = "renderMathInElement(document.body);" > < / script > <!-- https://docs.astro.build/en/guides/view - transitions --> < meta name = "astro-view-transitions-enabled" content = "true" > < meta name = "astro-view-transitions-fallback" content = "swap" > < script type = "module" src = "/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CJJOOyb_.js" > < / script > < script type = "application/json" data-tooltips-options > { "interactive" : false , "delay" : [ 333 , 0 ] } < / script > < script type = "module" src = "/_astro/Tooltips.astro_astro_type_script_index_0_lang.Bx2cGmPu.js" > < / script > < link rel = "stylesheet" href = "/_astro/about.DDk7dmDO.css" >
< link rel = "stylesheet" href = "/_astro/about.DDC2K9bJ.css" > < script type = "module" src = "/_astro/page.DM3Rzxjm.js" > < / script > < style > . y t - l i t e { b a c k g r o u n d - c o l o r : # 0 0 0 ; p o s i t i o n : r e l a t i v e ; d i s p l a y : b l o c k ; c o n t a i n : c o n t e n t ; b a c k g r o u n d - p o s i t i o n : 5 0 % ; b a c k g r o u n d - s i z e : c o v e r ; c u r s o r : p o i n t e r } . y t - l i t e . l y t - a c t i v a t e d : b e f o r e { c o n t e n t : " " ; b o x - s i z i n g : c o n t e n t - b o x ; d i s p l a y : b l o c k ; p o s i t i o n : a b s o l u t e ; t o p : 0 ; b a c k g r o u n d - i m a g e : u r l ( d a t a : i m a g e / p n g ; b a s e 6 4 , i V B O R w 0 K G g o A A A A N S U h E U g A A A A E A A A D G C A Y A A A A T + O q F A A A A d k l E Q V Q o z 4 2 Q Q Q 7 A I A g E F / T / D + k b q / R W A l n Q y y a z A 4 a o A B 4 F s B S A / b F j u F 1 E O L 7 V b r I r B u u s m r t 4 Z Z O R f b 6 e h b W d n R H E I i I T a E U K a 5 E J q U a k R S a E Y B J S C Y 2 d E s t Q Y 7 A u x a h w X F r v Z m W l 2 r h 4 J Z 0 7 z 9 d L t e s f N j 5 q 0 F U 3 A 5 O b b w A A A A B J R U 5 E r k J g g g = = ) ; b a c k g r o u n d - p o s i t i o n : t o p ; b a c k g r o u n d - r e p e a t : r e p e a t - x ; h e i g h t : 6 0 p x ; p a d d i n g - b o t t o m : 5 0 p x ; w i d t h : 1 0 0 % ; t r a n s i t i o n : a l l . 2 s c u b i c - b e z i e r ( 0 , 0 , . 2 , 1 ) } . y t - l i t e : a f t e r { c o n t e n t : " " ; d i s p l a y : b l o c k ; p a d d i n g - b o t t o m : v a r ( - - a s p e c t - r a t i o ) } . y t - l i t e > i f r a m e { w i d t h : 1 0 0 % ; h e i g h t : 1 0 0 % ; p o s i t i o n : a b s o l u t e ; t o p : 0 ; l e f t : 0 } . y t - l i t e > . l t y - p l a y b t n { w i d t h : 7 0 p x ; h e i g h t : 4 6 p x ; b a c k g r o u n d - c o l o r : # 2 1 2 1 2 1 ; z - i n d e x : 1 ; o p a c i t y : . 8 ; b o r d e r - r a d i u s : 1 4 % ; t r a n s i t i o n : a l l . 2 s c u b i c - b e z i e r ( 0 , 0 , . 2 , 1 ) } . y t - l i t e : h o v e r > . l t y - p l a y b t n { b a c k g r o u n d - c o l o r : r e d ; o p a c i t y : 1 } . y t - l i t e > . l t y - p l a y b t n : b e f o r e { c o n t e n t : " " ; b o r d e r - c o l o r : t r a n s p a r e n t t r a n s p a r e n t t r a n s p a r e n t # f f f ; b o r d e r - s t y l e : s o l i d ; b o r d e r - w i d t h : 1 1 p x 0 1 1 p x 1 9 p x } . y t - l i t e > . l t y - p l a y b t n , . y t - l i t e > . l t y - p l a y b t n : b e f o r e { p o s i t i o n : a b s o l u t e ; t o p : 5 0 % ; l e f t : 5 0 % ; t r a n s f o r m : t r a n s l a t e 3 d ( - 5 0 % , - 5 0 % , 0 ) } . y t - l i t e . l y t - a c t i v a t e d { c u r s o r : u n s e t } . y t - l i t e . l y t - a c t i v a t e d : b e f o r e , . y t - l i t e . l y t - a c t i v a t e d > . l t y - p l a y b t n { o p a c i t y : 0 ; p o i n t e r - e v e n t s : n o n e }
2025-10-06 18:00:10 +00:00
< / style > < / head > < body > <!-- - - -
// Twinkling Star Background
const numStars = 1600;
const stars = Array.from({ length: numStars }).map(() => ({
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
size: `${Math.random() * 2 + 1}px`,
delay: `${7 * Math.random()}s`,
// hsl: `hsl(${Math.random() * 360}, 100%, 50%)`, // background: ${hsl};
}));
---
< div
class="fixed top-0 left-0 w-full h-full pointer-events-none overflow-hidden"
>
{
stars.map(({ left, top, size, delay }) => (
< div
class="absolute bg-none dark:bg-yellow-50 rounded-full animate-twinkle"
style={`
left: ${left};
top: ${top};
width: ${size};
height: ${size};
animation-delay: ${delay};
`}
/>
))
}
< / div > --><!-- Gradient Cycle Background --> <!-- <div
class="gradient animate-cycleBg fixed top-0 left-0 w-full h-full -z-1 pointer-events-none overflow-hidden"
/>
< style >
.gradient {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
}
< / style > --><!-- Single Image Background --> <!-- <style>
html::before {
content: "";
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background: url(/src/assets/backgrounds/bwca-dusk.png) no-repeat center center;
background-size: cover;
z-index: -1;
pointer-events: none;
}
< / style > --><!-- Dual Image Background --> < header class = "container glass py-2 z-30 mb-4 lg:mt-4 lg:rounded-lg sticky top-0" data-astro-transition-persist = "astro-zg46k4mb-1" > < nav class = "relative flex flex-wrap items-center justify-between" > <!-- navbar toggler --> < input id = "nav-toggle" type = "checkbox" class = "hidden" > < label for = "nav-toggle" class = "order-0 cursor-pointer flex items-center md:hidden text-txt-p dark:text-darkmode-txt-p lg:order-1" > < svg id = "show-button" class = "h-6 fill-current block" viewBox = "0 0 20 20" > < title > Menu Open< / title > < path d = "M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z" > < / path > < / svg > < svg id = "hide-button" class = "h-6 fill-current hidden" viewBox = "0 0 20 20" > < title > Menu Close< / title > < polygon points = "11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2" transform = "rotate(45 10 10)" > < / polygon > < / svg > < / label > <!-- /navbar toggler --> < ul id = "nav-menu" class = "text-center lg:text-left order-3 hidden w-full pb-6 md:order-1 md:flex md:w-auto md:space-x-2 md:pb-0 lg:space-x-4" > < li class = "" > < a href = "/" class = "block p-2 font-secondary font-semibold text-txt-p transition dark:text-darkmode-txt-p lg:px-2 lg:py-3 false" > Home < / a > < / li > < li class = "" > < a href = "/about" class = "block p-2 font-secondary font-semibold text-txt-p transition dark:text-darkmode-txt-p lg:px-2 lg:py-3 false" > About < / a > < / li > < li class = "" > < a href = "/docs" class = "block p-2 font-secondary font-semibold text-txt-p transition dark:text-darkmode-txt-p lg:px-2 lg:py-3 false" > Docs < / a > < / li > < li class = "" > < a href = "/blog" class = "block p-2 font-secondary font-semibold text-txt-p transition dark:text-darkmode-txt-p lg:px-2 lg:py-3 false" > Blog < / a > < / li > < li class = "" > < a href = "/portfolio" class = "block p-2 font-secondary font-semibold text-txt-p transition dark:text-darkmode-txt-p lg:px-2 lg:py-3 false" > Portfolio < / a > < / li > < / ul > < div class = "order-1 ml-auto flex items-center md:order-2 lg:ml-0" > < a class = "mr-4 inline-block border-border text-xl text-txt-p dark:border-darkmode-border dark:text-darkmode-txt-p" href = "/search" aria-label = "search" > < svg stroke = "currentColor" fill = "currentColor" stroke-width = "0" viewBox = "0 0 512 512" height = "1em" width = "1em" xmlns = "http://www.w3.org/2000/svg" > < path d = "M456.69 421.39 362.6 327.3a173.81 173.81 0 0 0 34.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 0 0 327.3 362.6l94.09 94.09a25 25 0 0 0 35.3-35.3zM97.92 222.72a124.8 124.8 0 1 1 124.8 124.8 124.95 124.95 0 0 1-124.8-124.8z" > < / path > < / svg > < / a > < div class = "inline-flex a mr-2" > < input class = "absolute opacity-0" id = "theme-switcher" data-theme-switcher type = "checkbox" > < label class = "relative inline-block h-4 w-6 cursor-pointer" for = "theme-switcher" > < span class = "sr-only" > theme switcher< / span > < span class = "absolute -top-1 left-0 flex h-6 w-6 items-center justify-center rounded-full" > < svg class = "absolute z-10 opacity-100 dark:opacity-0" viewBox = "0 0 24 24" height = "21" width = "21" > < path fill = "#000" d = "M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z" > < / path > < / svg > < svg class = "absolute z-10 opacity-0 dark:opacity-100" viewBox = "0 0 24 24" height = "21" width = "21" > < path fill = "#fff" d = "M6.993 12c0 2 . 761 2 . 246 5 . 007 5 . 007 5 . 007s5 . 007-2 . 246 5 . 007-5 . 007S14 . 761 6 . 993 12 6 . 993 6 . 993 9 . 239 6 . 993 12zM12 8 . 993c1 . 658 0 3 . 007 1 . 349 3 . 007 3 . 007S13 . 658 15 . 007 12 15 . 007 8 . 993 13 . 658 8 . 993 12 10 . 342 8 . 993 12 8 . 993zM10 . 998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4 . 219 18 . 363l2 . 12-2 . 122 1 . 415 1 . 414-2 . 12 2 . 122zM16 . 24 6 . 344l2 . 122-2 . 122 1 . 414 1 . 414-2 . 122 2 . 122zM6 . 342 7 . 759 4 . 22 5 . 637l1 . 415-1 . 414 2 . 12 2 . 122zm13 . 434 10 . 6
const defaultTheme = "system";
function getTheme(defaultTheme) {
var darkMode = defaultTheme === "dark" ? true : false;
if (localStorage.getItem("theme") === "system") {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
darkMode = true;
}
} else if (localStorage.getItem("theme") === "dark") {
darkMode = true;
} else if (localStorage.getItem("theme") === "light") {
darkMode = false;
}
return darkMode;
}
function setTheme(darkMode) {
// Update DOM
darkMode
? document.documentElement.classList.add("dark")
: document.documentElement.classList.remove("dark");
// Update localStorage
localStorage.setItem("theme", darkMode ? "dark" : "light");
}
// This prevents flickering back to default theme before the page is fully loaded
setTheme(getTheme(defaultTheme));
document.addEventListener("astro:page-load", () => {
setTheme(getTheme(defaultTheme));
// Theme switcher
var themeSwitch = document.querySelectorAll("[data-theme-switcher]");
themeSwitch.forEach((el) => {
el.addEventListener("change", (e) => {
setTheme(e.target.checked);
});
});
});
2025-10-11 16:39:32 +00:00
< / script > < / div > < / nav > < / header > < main id = "main-content" class = "flex-1" > < section class = "flex container p-4" > < div class = "max-h-static_sidemenu sticky top-[5rem] mr-4 hidden md:flex md:w-1/4 lg:w-1/5" > < div class = "relative glass rounded-lg p-4 my-2 w-full intersect:animate-fadeRight opacity-0" > < style > astro-island , astro-slot , astro-static-slot { display : contents } < / style > < script > ( ( ) => { var e = async t => { await ( await t ( ) ) ( ) } ; ( self . Astro || ( self . Astro = { } ) ) . only = e ; window . dispatchEvent ( new Event ( "astro:only" ) ) ; } ) ( ) ; < / script > < script > ( ( ) => { var A = Object . defineProperty ; var g = ( i , o , a ) => o in i ? A ( i , o , { enumerable : ! 0 , configurable : ! 0 , writable : ! 0 , value : a } ) : i [ o ] = a ; var d = ( i , o , a ) => g ( i , typeof o != "symbol" ? o + "" : o , a ) ; { let i = { 0 : t => m ( t ) , 1 : t => a ( t ) , 2 : t => new RegExp ( t ) , 3 : t => new Date ( t ) , 4 : t => new Map ( a ( t ) ) , 5 : t => new Set ( a ( t ) ) , 6 : t => BigInt ( t ) , 7 : t => new URL ( t ) , 8 : t => new Uint8Array ( t ) , 9 : t => new Uint16Array ( t ) , 10 : t => new Uint32Array ( t ) , 11 : t => 1 / 0 * t } , o = t => { let [ l , e ] = t ; return l in i ? i [ l ] ( e ) : void 0 } , a = t => t . map ( o ) , m = t => typeof t != "object" || t === null ? t : Object . fromEntries ( Object . entries ( t ) . map ( ( [ l , e ] ) => [ l , o ( e ) ] ) ) ; class y extends HTMLElement { constructor ( ) { super ( ... arguments ) ; d ( this , "Component" ) ; d ( this , "hydrator" ) ; d ( this , "hydrate" , async ( ) => { var b ; if ( ! this . hydrator || ! this . isConnected ) return ; let e = ( b = this . parentElement ) == null ? void 0 : b . closest ( "astro-island[ssr]" ) ; if ( e ) { e . addEventListener ( "astro:hydrate" , this . hydrate , { once : ! 0 } ) ; return } let c = this . querySelectorAll ( "astro-slot" ) , n = { } , h = this . querySelectorAll ( "template[data-astro-template]" ) ; for ( let r of h ) { let s = r . closest ( this . tagName ) ; s != null && s . isSameNode ( this ) && ( n [ r . getAttribute ( "data-astro-template" ) || "default" ] = r . innerHTML , r . remove ( ) ) } for ( let r of c ) { let s = r . closest ( this . tagName ) ; s != null && s . isSameNode ( this ) && ( n [ r . getAttribute ( "name" ) || "default" ] = r . innerHTML ) } let p ; try { p = this . hasAttribute ( "props" ) ? m ( JSON . parse ( this . getAttribute ( "props" ) ) ) : { } } catch ( r ) { let s = this . getAttribute ( "component-url" ) || "<unknown>" , v = this . getAttribute ( "component-export" ) ; throw v && ( s += ` (export ${ v } ) ` ) , console . error ( ` [hydrate] Error parsing props for component ${ s } ` , this . getAttribute ( "props" ) , r ) , r } let u ; await this . hydrator ( this ) ( this . Component , p , n , { client : this . getAttribute ( "client" ) } ) , this . removeAttribute ( "ssr" ) , this . dispatchEvent ( new CustomEvent ( "astro:hydrate" ) ) } ) ; d ( this , "unmount" , ( ) => { this . isConnected || this . dispatchEvent ( new CustomEvent ( "astro:unmount" ) ) } ) } disconnectedCallback ( ) { document . removeEventListener ( "astro:after-swap" , this . unmount ) , document . addEventListener ( "astro:after-swap" , this . unmount , { once : ! 0 } ) } connectedCallback ( ) { if ( ! this . hasAttribute ( "await-children" ) || document . readyState === "interactive" || document . readyState === "complete" ) this . childrenConnectedCallback ( ) ; else { let e = ( ) => { document . removeEventListener ( "DOMContentLoaded" , e ) , c . disconnect ( ) , this . childrenConnectedCallback ( ) } , c = new MutationObserver ( ( ) => { var n ; ( ( n = this . lastChild ) == null ? void 0 : n . nodeType ) === Node . COMMENT _NODE && this . lastChild . nodeValue === "astro:end" && ( this . lastChild . remove ( ) , e ( ) ) } ) ; c . observe ( this , { childList : ! 0 } ) , document . addEventListener ( "DOMContentLoaded" , e ) } } async childrenConnectedCallback ( ) { let e = this . getAttribute ( "before-hydration-url" ) ; e && await import ( e ) , this . start ( ) } async start ( ) { let e = JSON . parse ( this . getAttribute ( "opts" ) ) , c = this . getAttribute ( "client" ) ; if ( Astro [ c ] === void 0 ) { window . addEventListener ( ` astro: ${ c } ` , ( ) => this . start ( ) , { once : ! 0 } ) ; return } try { await Astro [ c ] ( async ( ) => { let n = this . getAttribute ( "renderer-url" ) , [ h , { default : p } ] = await Promise . all ( [ import ( this . getAttribute ( "component-url" ) ) , n ? import ( n ) : ( ) => ( ) => { } ] ) , u = this . getAttribute ( "component-export" ) || "default" ; if ( ! u . includes ( "." ) ) this . Component = h [ u ] ; else { this . Component = h ; for ( let f of u . split ( "." ) ) this . Component = this . Component [ f ] } return this . hydrator = p , this . hydrate } , e , this ) } catch ( n ) { console . error ( ` [astro-island] Error hydrating ${ this . getAttribute ( "component-url" ) } ` , n ) } } attributeChangedCallback ( ) { this . hydrate ( ) } } d ( y , "observedAttributes" , [ "props" ] ) , customElements . get ( "astro-island" ) || customElements . define ( "astro-island" , y ) } } ) ( ) ; < / script > < astro-island uid = "LDzNQ" component-url = "/_astro/ScrollArea.B1KsmG8V.js" component-export = "ScrollA
2025-10-06 18:00:10 +00:00
< h2 id = "heading-2" > Heading 2< / h2 >
< h3 id = "heading-3" > Heading 3< / h3 >
< h4 id = "heading-4" > Heading 4< / h4 >
< h5 id = "heading-5" > Heading 5< / h5 >
< h6 id = "heading-6" > Heading 6< / h6 >
< hr / >
< h3 id = "emphasis" > Emphasis< / h3 >
< ul >
< li > < em > Everyone’ < / em > a slave to something< / li >
< li > Everyone’ < ins > a slave< / ins > to something< / li >
< li > Everyone’ < strong > something< / strong > < / li >
< li > Everyone’ < em > < strong > a slave< / strong > < / em > to something< / li >
< li > Everyone’ < del > a slave< / del > to something< / li >
< / ul >
< hr / >
< h3 id = "link" > Link< / h3 >
< p > < a href = "https://reednel.com" > An inline-style link< / a > < / p >
< p > < a href = "https://reednel.com" title = "Reed Nelson's website" > An inline-style link with tooltip< / a > < / p >
< p > [A reference-style link][arbitrary case-insensitive reference text]< / p >
< p > < a href = "https://reednel.com" > You can use numbers for reference-style link definitions< / a > < / p >
< hr / >
< h3 id = "ordered-list" > Ordered List< / h3 >
< ol >
< li > List item< / li >
< li > List item< / li >
< li > List item< / li >
< / ol >
< hr / >
< h3 id = "unordered-list" > Unordered List< / h3 >
< ul >
< li > List item< / li >
< li > List item< / li >
< li > List item< / li >
< / ul >
< hr / >
< h3 id = "code-and-syntax-highlighting" > Code and Syntax Highlighting< / h3 >
< h4 id = "sql" > SQL< / h4 >
< pre class = "astro-code astro-code-themes light-plus dark-plus" style = "background-color:#FFFFFF;--shiki-dark-bg:#1E1E1E;color:#000000;--shiki-dark:#D4D4D4;overflow-x:auto" tabindex = "0" data-language = "sql" > < code > < span class = "line" > < span style = "color:#0000FF;--shiki-dark:#569CD6" > SELECT< / span > < / span >
< span class = "line" > < span style = "color:#000000;--shiki-dark:#D4D4D4" > p.personID,< / span > < / span >
< span class = "line" > < span style = "color:#000000;--shiki-dark:#D4D4D4" > id.firstName,< / span > < / span >
< span class = "line" > < span style = "color:#000000;--shiki-dark:#D4D4D4" > id.lastName< / span > < / span >
< span class = "line" > < span style = "color:#0000FF;--shiki-dark:#569CD6" > FROM< / span > < / span >
< span class = "line" > < span style = "color:#000000;--shiki-dark:#D4D4D4" > dbo.Person < / span > < span style = "color:#0000FF;--shiki-dark:#569CD6" > AS< / span > < span style = "color:#000000;--shiki-dark:#D4D4D4" > p< / span > < / span >
< span class = "line" > < span style = "color:#0000FF;--shiki-dark:#569CD6" > INNER JOIN< / span > < span style = "color:#000000;--shiki-dark:#D4D4D4" > dbo.Identity < / span > < span style = "color:#0000FF;--shiki-dark:#569CD6" > AS< / span > < span style = "color:#000000;--shiki-dark:#D4D4D4" > id < / span > < span style = "color:#0000FF;--shiki-dark:#569CD6" > ON< / span > < span style = "color:#000000;--shiki-dark:#D4D4D4" > id.identityID = p.currentIdentityID< / span > < / span >
< span class = "line" > < span style = "color:#0000FF;--shiki-dark:#569CD6" > WHERE< / span > < / span >
< span class = "line" > < span style = "color:#000000;--shiki-dark:#D4D4D4" > p.age > < / span > < span style = "color:#098658;--shiki-dark:#B5CEA8" > 30< / span > < span style = "color:#0000FF;--shiki-dark:#569CD6" > AND< / span > < span style = "color:#000000;--shiki-dark:#D4D4D4" > p.eyeColor = < / span > < span style = "color:#A31515;--shiki-dark:#CE9178" > ' grn' < / span > < / span > < / code > < / pre >
< hr / >
< h3 id = "latex" > LaTeX< / h3 >
< p > In the middle of this sentance < span class = "katex" > < span class = "katex-mathml" > < math xmlns = "http://www.w3.org/1998/Math/MathML" > < semantics > < mrow > < msubsup > < mo > ∫< / mo > < mn > 0< / mn > < mi mathvariant = "normal" > ∞< / mi > < / msubsup > < msup > < mi > x< / mi > < mn > 2< / mn > < / msup > < mi > d< / mi > < mi > x< / mi > < mo > =< / mo > < mfrac > < mn > 1< / mn > < mn > 3< / mn > < / mfrac > < / mrow > < annotation encoding = "application/x-tex" > \int_0^\infty x^2 dx = \frac{1}{3}< / annotation > < / semantics > < / math > < / span > < span class = "katex-html" aria-hidden = "true" > < span class = "base" > < span class = "strut" style = "height:1.2151em;vertical-align:-0.3558em" > < / span > < span class = "mop" > < span class = "mop op-symbol small-op" style = "margin-right:0.19445em;position:relative;top:-0.0006em" > ∫< / span > < span class = "msupsub" > < span class = "vlist-t vlist-t2" > < span class = "vlist-r" > < span class = "vlist" style = "height:0.8593em" > < span style = "top:-2.3442em;margin-left:-0.1945em;margin-right:0.05em" > < span class = "pstrut" style = "height:2.7em" > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > 0< / span > < / span > < / span > < span style = "top:-3.2579em;margin-right:0.05em" > < span class = "pstrut" style = "height:2.7em" > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > ∞< / span > < / span > < / span > < / span > < span class = "vlist-s" > < / span > < / span > < span class = "vlist-r" > < span class = "vlist" style = "height:0.3558em" > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = "mspace" style = "margin-right:0.1667em" > < / span > < span class = "mord" > < span class = "mord mathnormal" > x< / span > < span class = "msupsub" > < span class = "vlist-t" > < span class = "vlist-r" > < span class = "vlist" style = "height:0.8141em" > < span style = "top:-3.063em;margin-right:0.05em" > < span class = "pstrut" style = "height:2.7em" > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > 2< / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = "mord mathnormal" > d< / span > < span class = "mord mathnormal" > x< / span > < span class = "mspace" style = "margin-right:0.2778em" > < / span > < span class = "mrel" > =< / span > < span class = "mspace" style = "margin-right:0.2778em" > < / span > < / span > < span class = "base" > < span class = "strut" style = "height:1.1901em;vertical-align:-0.345em" > < / span > < span class = "mord" > < span class = "mopen nulldelimiter" > < / span > < span class = "mfrac" > < span class = "vlist-t vlist-t2" > < span class = "vlist-r" > < span class = "vlist" style = "height:0.8451em" > < span style = "top:-2.655em" > < span class = "pstrut" style = "height:3em" > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > < span class = "mord mtight" > 3< / span > < / span > < / span > < / span > < span style = "top:-3.23em" > < span class = "pstrut" style = "height:3em" > < / span > < span class = "frac-line" style = "border-bottom-width:0.04em" > < / span > < / span > < span style = "top:-3.394em" > < span class = "pstrut" style = "height:3em" > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > < span class = "mord mtight" > 1< / span > < / span > < / span > < / span > < / span > < span class = "vlist-s" > < / span > < / span > < span class = "vlist-r" > < span class = "vlist" style = "height:0.345em" > < span > < / span > < / span > < / span > < / span > < / span > < span class = "mclose nulldelimiter" > < / span > < / span > < / span > < / span > < / span > is an inline expression. And after that is a block expression:< / p >
< span class = "katex-display" > < span class = "katex" > < span class = "katex-mathml" > < math xmlns = "http://www.w3.org/1998/Math/MathML" display = "block" > < semantics > < mrow > < msubsup > < mo > ∫< / mo > < mn > 0< / mn > < mi mathvariant = "normal" > ∞< / mi > < / msubsup > < msup > < mi > x< / mi > < mn > 2< / mn > < / msup > < mi > d< / mi > < mi > x< / mi > < mo > =< / mo > < mfrac > < mn > 1< / mn > < mn > 3< / mn > < / mfrac > < / mrow > < annotation encoding = "application/x-tex" > \int_0^\infty x^2 dx = \frac{1}{3}< / annotation > < / semantics > < / math > < / span > < span class = "katex-html" aria-hidden = "true" > < span class = "base" > < span class = "strut" style = "height:2.3262em;vertical-align:-0.9119em" > < / span > < span class = "mop" > < span class = "mop op-symbol large-op" style = "margin-right:0.44445em;position:relative;top:-0.0011em" > ∫< / span > < span class = "msupsub" > < span class = "vlist-t vlist-t2" > < span class = "vlist-r" > < span class = "vlist" style = "height:1.4143em" > < span style = "top:-1.7881em;margin-left:-0.4445em;margin-right:0.05em" > < span class = "pstrut" style = "height:2.7em" > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > 0< / span > < / span > < / span > < span style = "top:-3.8129em;margin-right:0.05em" > < span class = "pstrut" style = "height:2.7em" > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > ∞< / span > < / span > < / span > < / span > < span class = "vlist-s" > < / span > < / span > < span class = "vlist-r" > < span class = "vlist" style = "height:0.9119em" > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = "mspace" style = "margin-right:0.1667em" > < / span > < span class = "mord" > < span class = "mord mathnormal" > x< / span > < span class = "msupsub" > < span class = "vlist-t" > < span class = "vlist-r" > < span class = "vlist" style = "height:0.8641em" > < span style = "top:-3.113em;margin-right:0.05em" > < span class = "pstrut" style = "height:2.7em" > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > 2< / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = "mord mathnormal" > d< / span > < span class = "mord mathnormal" > x< / span > < span class = "mspace" style = "margin-right:0.2778em" > < / span > < span class = "mrel" > =< / span > < span class = "mspace" style = "margin-right:0.2778em" > < / span > < / span > < span class = "base" > < span class = "strut" style = "height:2.0074em;vertical-align:-0.686em" > < / span > < span class = "mord" > < span class = "mopen nulldelimiter" > < / span > < span class = "mfrac" > < span class = "vlist-t vlist-t2" > < span class = "vlist-r" > < span class = "vlist" style = "height:1.3214em" > < span style = "top:-2.314em" > < span class = "pstrut" style = "height:3em" > < / span > < span class = "mord" > < span class = "mord" > 3< / span > < / span > < / span > < span style = "top:-3.23em" > < span class = "pstrut" style = "height:3em" > < / span > < span class = "frac-line" style = "border-bottom-width:0.04em" > < / span > < / span > < span style = "top:-3.677em" > < span class = "pstrut" style = "height:3em" > < / span > < span class = "mord" > < span class = "mord" > 1< / span > < / span > < / span > < / span > < span class = "vlist-s" > < / span > < / span > < span class = "vlist-r" > < span class = "vlist" style = "height:0.686em" > < span > < / span > < / span > < / span > < / span > < / span > < span class = "mclose nulldelimiter" > < / span > < / span > < / span > < / span > < / span > < / span >
< p > Before this is a block expression.< / p >
< hr / >
< h3 id = "button" > Button< / h3 >
< a href = "/" target = "_blank" class = "no-underline inline-block hover:opacity-100 " > < div class = "glass-t hover:bg-opacity-20 hover:backdrop-blur-none
px-4 py-2 rounded-md font-bold intersect:animate-fade opacity-0">Button< / div > < / a >
< hr / >
< h3 id = "quote" > Quote< / h3 >
< blockquote >
< p > When I saw my devil, I found him serious, thorough, profound, solemn. He was the spirit of gravity, through which all things fall.< / p >
< / blockquote >
< hr / >
< h3 id = "notice" > Notice< / h3 >
< div class = "mb-6 rounded-lg border border-current py-2 px-4
text-[#24a9ab]
false
false
false
">< div class = "flex items-center" > < svg class = "mr-2" width = "20" height = "20" viewBox = "0 0 20 20" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M10 9V14M10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19ZM10.0498 6V6.1L9.9502 6.1002V6H10.0498Z" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" > < / path > < / svg > < p class = "font-secondary text-xl font-semibold text-txt-p dark:text-darkmode-txt-light my-0" > Note< / p > < / div > < div class = "mt-3" > This is a simple note.< / div > < / div >
< div class = "mb-6 rounded-lg border border-current py-2 px-4
false
text-[#65ab24]
false
false
">< div class = "flex items-center" > < svg class = "mr-2" width = "20" height = "20" viewBox = "0 0 24 24" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path fill-rule = "evenodd" clip-rule = "evenodd" d = "M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM12 2.4C6.69807 2.4 2.4 6.69807 2.4 12C2.4 17.3019 6.69807 21.6 12 21.6C17.3019 21.6 21.6 17.3019 21.6 12C21.6 6.69807 17.3019 2.4 12 2.4ZM15.9515 7.55147L9.6 13.9029L8.04853 12.3515C7.5799 11.8828 6.8201 11.8828 6.35147 12.3515C5.88284 12.8201 5.88284 13.5799 6.35147 14.0485L8.75147 16.4485C9.2201 16.9172 9.9799 16.9172 10.4485 16.4485L17.6485 9.24853C18.1172 8.7799 18.1172 8.0201 17.6485 7.55147C17.1799 7.08284 16.4201 7.08284 15.9515 7.55147Z" fill = "currentColor" > < / path > < / svg > < p class = "font-secondary text-xl font-semibold text-txt-p dark:text-darkmode-txt-light my-0" > Tip< / p > < / div > < div class = "mt-3" > This is a simple note.< / div > < / div >
< div class = "mb-6 rounded-lg border border-current py-2 px-4
false
false
text-[#d7af2d]
false
">< div class = "flex items-center" > < svg class = "mr-2" width = "20" height = "20" viewBox = "0 0 20 20" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M9.16109 0.993016C9.97971 1.03952 10.6611 1.42989 11.0721 2.22339L17.7981 15.8014C18.4502 17.1739 17.4403 19.0208 15.7832 19.0474H2.23859C0.730337 19.0234 -0.507163 17.3108 0.231587 15.7864L7.08321 2.20877C7.21146 1.96502 7.26996 1.89452 7.38059 1.76664C7.82534 1.25102 8.31171 0.975016 9.16109 0.993016ZM9.05046 2.49189C8.79284 2.50464 8.55696 2.64902 8.42834 2.87327C6.06134 7.36539 3.77946 11.9036 1.56546 16.4734C1.36071 16.9328 1.71209 17.5223 2.22621 17.547C6.74871 17.6201 11.2731 17.6201 15.7956 17.547C16.2925 17.523 16.666 16.953 16.459 16.4783C14.2866 11.9093 12.0471 7.37102 9.72171 2.87814C9.58446 2.63402 9.38309 2.48739 9.05046 2.49189Z" fill = "currentColor" > < / path > < path d = "M9.61323 13.2153H8.35773L8.21973 7.04688H9.75723L9.61323 13.2153ZM8.17773 15.1015C8.17773 14.8731 8.25161 14.6841 8.39973 14.5338C8.54823 14.3838 8.75036 14.3084 9.00648 14.3084C9.26298 14.3084 9.46511 14.3838 9.61323 14.5338C9.76136 14.6841 9.83561 14.8731 9.83561 15.1015C9.83561 15.3216 9.76323 15.5057 9.61923 15.6539C9.47486 15.802 9.27086 15.8762 9.00648 15.8762C8.74211 15.8762 8.53811 15.802 8.39373 15.6539C8.24973 15.5057 8.17773 15.3216 8.17773 15.1015Z" fill = "currentColor" > < / path > < / svg > < p class = "font-secondary text-xl font-semibold text-txt-p dark:text-darkmode-txt-light my-0" > Info< / p > < / div > < div class = "mt-3" > This is a simple note.< / div > < / div >
< div class = "mb-6 rounded-lg border border-current py-2 px-4
false
false
false
text-[#f43633]
">< div class = "flex items-center" > < svg class = "mr-2" width = "20" height = "20" viewBox = "0 0 20 20" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path fill-rule = "evenodd" clip-rule = "evenodd" d = "M10 0C15.522 0 20 4.478 20 10C20 15.522 15.522 20 10 20C4.478 20 0 15.522 0 10C0 4.478 4.478 0 10 0ZM10 2C5.589 2 2 5.589 2 10C2 14.411 5.589 18 10 18C14.411 18 18 14.411 18 10C18 5.589 14.411 2 10 2ZM12.293 6.293L13.707 7.707L11.414 10L13.707 12.293L12.293 13.707L10 11.414L7.707 13.707L6.293 12.293L8.586 10L6.293 7.707L7.707 6.293L10 8.586L12.293 6.293Z" fill = "currentColor" > < / path > < / svg > < p class = "font-secondary text-xl font-semibold text-txt-p dark:text-darkmode-txt-light my-0" > Warning< / p > < / div > < div class = "mt-3" > This is a simple note.< / div > < / div >
< hr / >
< h3 id = "tab" > Tab< / h3 >
2025-10-07 16:41:11 +00:00
< astro-island uid = "UsIhN" prefix = "r27" component-url = "/_astro/Tabs.Cr---DlP.js" component-export = "default" renderer-url = "/_astro/client.DPSb9UvF.js" props = "{}" ssr client = "load" opts = "{"name":"Tabs","value":true}" await-children > < div class = "overflow-hidden rounded-lg border border-border dark:border-darkmode-border" > < ul class = "glass-t-borderless m-0 list-none flex border-b border-border dark:border-darkmode-border" > < li class = "my-0 px-8 cursor-pointer border-b- [ 3px ] pt-2 pb-1 text-lg text-txt-s dark:text-darkmode-txt-s border-border dark:border-darkmode-border
2025-10-06 18:00:10 +00:00
border-b-[3px] text-txt-p dark:text-darkmode-txt-p border-txt-p dark:border-darkmode-txt-p
" role="tab" tabindex="0">Tab 1< / li > < li class = "my-0 px-8 cursor-pointer border-b- [ 3px ] pt-2 pb-1 text-lg text-txt-s dark:text-darkmode-txt-s border-border dark:border-darkmode-border
false
" role="tab" tabindex="-1">Tab 2< / li > < li class = "my-0 px-8 cursor-pointer border-b- [ 3px ] pt-2 pb-1 text-lg text-txt-s dark:text-darkmode-txt-s border-border dark:border-darkmode-border
false
" role="tab" tabindex="-1">Tab 3< / li > < / ul > < div class = "tab-content block px-5" > < div data-name = "Tab 1" > < h4 id = "on-gambling" > On Gambling< / h4 > < p > If we focus on making the best moves, we will never get the better of our opponent. When necessary, we must be willing to take the big risks and be prepared to lose everything.< / p > < / div > < / div > < div class = "hidden" > < div data-name = "Tab 2" > < h4 id = "on-soldiering" > On Soldiering< / h4 > < p > You should give up on becoming a soldier. Throwing your life away is not the only way to fight.< / p > < / div > < / div > < div class = "hidden" > < div data-name = "Tab 3" > < h4 id = "on-soldering" > On Soldering< / h4 > < p > Maintain a coating of solder on working area of soldering iron tip. Protects the tip from oxidation.< / p > < / div > < / div > < / div > < template data-astro-template > < div data-name = "Tab 1" > < h4 id = "on-gambling" > On Gambling< / h4 > < p > If we focus on making the best moves, we will never get the better of our opponent. When necessary, we must be willing to take the big risks and be prepared to lose everything.< / p > < / div > < div data-name = "Tab 2" > < h4 id = "on-soldiering" > On Soldiering< / h4 > < p > You should give up on becoming a soldier. Throwing your life away is not the only way to fight.< / p > < / div > < div data-name = "Tab 3" > < h4 id = "on-soldering" > On Soldering< / h4 > < p > Maintain a coating of solder on working area of soldering iron tip. Protects the tip from oxidation.< / p > < / div > < / template > <!-- astro:end --> < / astro-island >
< hr / >
< h3 id = "table" > Table< / h3 >
< table > < thead > < tr > < th style = "text-align:left" > #< / th > < th style = "text-align:center" > First< / th > < th style = "text-align:center" > Last< / th > < th style = "text-align:right" > Handle< / th > < / tr > < / thead > < tbody > < tr > < td style = "text-align:left" > 1< / td > < td style = "text-align:center" > Row:1 Cell:1< / td > < td style = "text-align:center" > Row:1 Cell:2< / td > < td style = "text-align:right" > Row:1 Cell:3< / td > < / tr > < tr > < td style = "text-align:left" > 2< / td > < td style = "text-align:center" > Row:2 Cell:1< / td > < td style = "text-align:center" > Row:2 Cell:2< / td > < td style = "text-align:right" > Row:2 Cell:3< / td > < / tr > < tr > < td style = "text-align:left" > 3< / td > < td style = "text-align:center" > Row:3 Cell:1< / td > < td style = "text-align:center" > Row:3 Cell:2< / td > < td style = "text-align:right" > Row:3 Cell:3< / td > < / tr > < / tbody > < / table >
< hr / >
< h3 id = "accordion" > Accordion< / h3 >
2025-10-07 16:41:11 +00:00
< astro-island uid = "Zexmzl" prefix = "r25" component-url = "/_astro/Accordion.CpkKRQO9.js" component-export = "default" renderer-url = "/_astro/client.DPSb9UvF.js" props = "{"title":[0,"Why would you use an accordion?"]}" ssr client = "load" opts = "{"name":"Accordion","value":true}" await-children > < div class = "mb-6 overflow-hidden rounded-lg border border-border dark:border-darkmode-border" > < button class = "glass-t-borderless flex w-full cursor-pointer items-center justify-between px-4 py-2 text-lg text-txt-p dark:text-darkmode-txt-p" > Why would you use an accordion?< svg class = "ml-auto h-[.8em] w-[.8em] transition-transform duration-200 rotate-[-90deg]" x = "0px" y = "0px" viewBox = "0 0 512 512" xml:space = "preserve" > < path fill = "currentColor" d = "M505.755,123.592c-8.341-8.341-21.824-8.341-30.165,0L256.005,343.176L36.421,123.592c-8.341-8.341-21.824-8.341-30.165,0 s-8.341,21.824,0,30.165l234.667,234.667c4.16,4.16,9.621,6.251,15.083,6.251c5.462,0,10.923-2.091,15.083-6.251l234.667-234.667 C514.096,145.416,514.096,131.933,505.755,123.592z" > < / path > < / svg > < / button > < div class = "max-h-0 overflow-hidden px-4 py-0 false" > < astro-slot > < p > Maybe you don’ < / p > < / astro-slot > < / div > < / div > <!-- astro:end --> < / astro-island >
2025-10-06 18:00:10 +00:00
< hr / >
< h3 id = "youtube-video" > Youtube video< / h3 >
2025-10-07 16:41:11 +00:00
< script > ( ( ) => { var e = async t => { await ( await t ( ) ) ( ) } ; ( self . Astro || ( self . Astro = { } ) ) . load = e ; window . dispatchEvent ( new Event ( "astro:load" ) ) ; } ) ( ) ; < / script > < astro-island uid = "Z2aay6U" prefix = "r17" component-url = "/_astro/Youtube.Beh05f3D.js" component-export = "default" renderer-url = "/_astro/client.DPSb9UvF.js" props = "{"id":[0,"9Kfv1WeoAvk"],"title":[0,"Riebeck's Banjo"]}" ssr client = "load" opts = "{"name":"Youtube","value":true}" await-children > < link rel = "preload" href = "https://i.ytimg.com/vi/9Kfv1WeoAvk/hqdefault.jpg" as = "image" / > < article class = "yt-lite rounded-lg " data-title = "Riebeck's Banjo" style = "background-image:url(https://i.ytimg.com/vi/9Kfv1WeoAvk/hqdefault.jpg);--aspect-ratio:56.25%" > < button type = "button" class = "lty-playbtn" aria-label = "Watch Riebeck's Banjo" > < / button > < / article > <!-- astro:end --> < / astro-island >
2025-10-06 18:00:10 +00:00
< hr / >
< h3 id = "image" > Image< / h3 >
2025-10-11 16:39:32 +00:00
< p > < img src = "/_astro/bwca-dusk.D0G3dMZb_28a0v3.webp" alt = "image" title = "BWCA at dusk" loading = "lazy" decoding = "async" fetchpriority = "auto" width = "4000" height = "2949" > < / p > < / section > < / article > < / div > < div class = "max-h-static_sidemenu sticky top-[5rem] ml-4 hidden lg:flex lg:w-1/5" > < div class = "relative glass rounded-lg p-4 my-2 w-full intersect:animate-fadeLeft opacity-0" > < astro-island uid = "LDzNQ" component-url = "/_astro/ScrollArea.B1KsmG8V.js" component-export = "ScrollArea" renderer-url = "/_astro/client.DPSb9UvF.js" props = "{"className":[0,"h-full"]}" ssr client = "only" opts = "{"name":"ScrollArea","value":"react"}" await-children > < template data-astro-template > < h2 class = "text-2xl border-none" > Contents< / h2 > < ul class = "list-none m-0" > < li class = "ml-0" > < a href = "#heading-2" class = " w-full leading-none no-underline" > Heading 2< / a > < / li > < li class = "ml-4" > < a href = "#heading-3" class = " w-full leading-none no-underline" > Heading 3< / a > < / li > < li class = "ml-4" > < a href = "#emphasis" class = " w-full leading-none no-underline" > Emphasis< / a > < / li > < li class = "ml-4" > < a href = "#link" class = " w-full leading-none no-underline" > Link< / a > < / li > < li class = "ml-4" > < a href = "#ordered-list" class = " w-full leading-none no-underline" > Ordered List< / a > < / li > < li class = "ml-4" > < a href = "#unordered-list" class = " w-full leading-none no-underline" > Unordered List< / a > < / li > < li class = "ml-4" > < a href = "#code-and-syntax-highlighting" class = " w-full leading-none no-underline" > Code and Syntax Highlighting< / a > < / li > < li class = "ml-4" > < a href = "#latex" class = " w-full leading-none no-underline" > LaTeX< / a > < / li > < li class = "ml-4" > < a href = "#button" class = " w-full leading-none no-underline" > Button< / a > < / li > < li class = "ml-4" > < a href = "#quote" class = " w-full leading-none no-underline" > Quote< / a > < / li > < li class = "ml-4" > < a href = "#notice" class = " w-full leading-none no-underline" > Notice< / a > < / li > < li class = "ml-4" > < a href = "#tab" class = " w-full leading-none no-underline" > Tab< / a > < / li > < li class = "ml-4" > < a href = "#table" class = " w-full leading-none no-underline" > Table< / a > < / li > < li class = "ml-4" > < a href = "#accordion" class = " w-full leading-none no-underline" > Accordion< / a > < / li > < li class = "ml-4" > < a href = "#youtube-video" class = " w-full leading-none no-underline" > Youtube video< / a > < / li > < li class = "ml-4" > < a href = "#image" class = " w-full leading-none no-underline" > Image< / a > < / li > < / ul > < / template > <!-- astro:end --> < / astro-island > < / div > < / div > < / section > < / main > < footer class = "glass container lg:my-4 lg:rounded-lg intersect:animate-fadeUp opacity-0" > < div class = "row py-2 lg:py-0 items-center flex-wrap-reverse" > < div class = "text-center lg:col-6 lg:mb-0 lg:text-left" > < ul > < li class = "m-2 inline-block" > < a href = "/terms" > © Kristian Emil Takvam 2025< / a > |
2025-10-06 18:00:10 +00:00
< a href = "https://github.com/astrogon/astrogon" target = "_blank" > < strong > Astrogon< / strong > < / a > theme by
2025-10-07 17:05:33 +00:00
< a href = "https://reednel.com/" target = "_blank" > < strong > Reed Nelson< / strong > < / a > < / li > < / ul > < / div > < div class = "text-center lg:col-6 lg:my-0 flex items-center justify-center lg:justify-end" > < ul class = "py-2 flex items-center" > < li class = "inline-block px-1 intersect:animate-fade opacity-0" > < a class = "glass-t rounded text-txt-p dark:text-darkmode-txt-p flex h-9 w-9 items-center justify-center text-center" aria-label = "GitHub" href = "https://www.github.com/Kremtastic" target = "_blank" rel = "noopener noreferrer nofollow" > < span class = "sr-only" > GitHub< / span > < svg stroke = "currentColor" fill = "currentColor" stroke-width = "0" viewBox = "0 0 496 512" class = "w-6 h-6" height = "1em" width = "1em" xmlns = "http://www.w3.org/2000/svg" > < path d = "M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" > < / path > < / svg > < / a > < / li > < li class = "inline-block px-1 intersect:animate-fade opacity-0" > < a class = "glass-t rounded text-txt-p dark:text-darkmode-txt-p flex h-9 w-9 items-center justify-center text-center" aria-label = "LinkedIn" href = "https://www.linkedin.com/in/kristian-emil-takvam-70a475215/" target = "_blank" rel = "noopener noreferrer nofollow" > < span class = "sr-only" > LinkedIn< / span > < svg stroke = "currentColor" fill = "currentColor" stroke-width = "0" viewBox = "0 0 448 512" class = "w-6 h-6" height = "1em" width = "1em" xmlns = "http://www.w3.org/2000/svg" > < path d = "M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" > < / path > < / svg > < / a > < / li > < li class = "inline-block px-1 intersect:animate-fade opacity-0" > < a class = "glass-t rounded text-txt-p dark:text-darkmode-txt-p flex h-9 w-9 items-center justify-center text-center" aria-label = "RSS" href = "/rss.xml" target = "_blank" rel = "noopener noreferrer nofollow" > < span class = "sr-only" > RSS< / span > < svg stroke = "currentColor" fill = "currentColor" stroke-width = "0" viewBox = "0 0 448 512" class = "w-6 h-6" height = "1em" width = "1em" xmlns = "http://www.w3.org/2000/svg" > < path d = "M128.081 415 . 959c0 35 . 369-28 . 672 64 . 041-64 . 041 64 . 041S0 451 . 328 0 415 . 959s28 . 672-64 . 041 64 . 041-64 . 041 64 . 04 28 . 673 64 . 04 64 . 041zm175 . 66 47 . 25c-8 . 354-154 . 6-132 . 185-278 . 587-286 . 95-286 . 95C7 . 656 175 . 765 0 183 . 105 0 192 . 253v48 . 069c0 8 . 415 6 . 49 15 . 472 14 . 887 16 . 018 111 . 832 7 . 284 201 . 473 96 . 702 208 . 772 208 . 772 . 547 8 . 397 7 . 604 14 . 887 16 . 018 14 . 887h48 . 069c9 . 149 . 001 16 . 489-7 . 655 15 . 995-16 . 79zm144 . 249 . 288C439 . 596 229 . 677 251 . 465 40 . 445 16 . 503 32 . 01 7 . 473 31 . 686 0 38 . 981 0 48 . 016v48 . 068c0 8 . 625 6 . 835 15 . 645 15 . 453 15 . 999 191 . 179 7 . 839 344 . 627 161 . 316 352 . 465 352 . 465 . 353 8 . 618 7 . 373 15 . 453 15 . 999 15 . 453h48 . 06
