diff --git a/style.css b/style.css index a8399e91ccac34c9be0210dd513ec2dfd6daaa9f..dd341b0e2c37776c9e57ba13c5f30646887b9b6c 100644 --- a/style.css +++ b/style.css @@ -9,74 +9,14 @@ /* ***************************************************************************** - personal header styling + adjust header styling -***************************************************************************** */ - -html { - /* see: https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/#comment-1769978 - comment by MaxDesign */ - font-size:calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560)); - font-size: clamp(var(--default-min-font-size-px), calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560)), var(--default-max-font-size-px)); -} - -body { - font-size: inherit; - font-family: helvetica, Arial, sans-serif; - background-color: #555; - color: white; - margin: 3vmin 4vmin var(--default-body-bottom-margin) 4vmin; -} - -*:focus { - outline: 2px solid white; - outline-offset: 2px; -} - -a { - color: #ffffff; -} - -header a { - text-decoration: none; -} - -/* kind of disabled link - text-decoration will be none automatically */ -a:not([href]) { - color: #AAAAAA; -} + ***************************************************************************** */ header { margin-bottom: 1em; } -header a { - display: inline-flex; -} - -header img { - width: 1.9em; - height: auto; -} - -nav { - display: flex; - align-items: center; - column-gap: 0.7em; -} - -h1 { - font-size: 1.5em; - margin: 0; -} - -#github { - margin-left: auto; -} - -#github-cat { - transform: scale(0.5) translate(50%, -50%); -} - /* ***************************************************************************** reset user agent styles diff --git a/style.min.css b/style.min.css index f85ba7246b9669e5c562f5c11f95f19c539dc420..6d8bcf8ff2778487d41a0aacf821429f1109d52d 100644 --- a/style.min.css +++ b/style.min.css @@ -1 +1 @@ -:root{--default-top-padding:1.5em;--default-body-bottom-margin:2vmin;--default-min-font-size-px:12px;--default-min-font-size:12;--default-max-font-size-px:18px;--default-max-font-size:18;}html{font-size:calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560));font-size:clamp(var(--default-min-font-size-px),calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560)),var(--default-max-font-size-px));}body{font-size:inherit;font-family:helvetica,Arial,sans-serif;background-color:#555;color:white;margin:3vmin 4vmin var(--default-body-bottom-margin) 4vmin;}*:focus{outline:2px solid white;outline-offset:2px;}a{color:#ffffff;}header a{text-decoration:none;}a:not([href]){color:#AAAAAA;}header{margin-bottom:1em;}header a{display:inline-flex;}header img{width:1.9em;height:auto;}nav{display:flex;align-items:center;column-gap:.7em;}h1{font-size:1.5em;margin:0;}#github{margin-left:auto;}#github-cat{transform:scale(.5) translate(50%,-50%);}*,*::before,*::after{box-sizing:unset;}h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0;}ul[role='list'],ol[role='list']{list-style:none;}html:focus-within{scroll-behavior:smooth;}body{text-rendering:optimizeSpeed;line-height:1.5;}a:not([class]){text-decoration-skip-ink:auto;}img,picture{max-width:100%;font-style:italic;}input,button,textarea,select{font:inherit;}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}body{font-size:2em;}#dialogText{font-size:23vw;line-height:.8em;}details[open] h2{font-size:1.5em;}summary h2{font-size:inherit;}#dialog-wrapper{background:rgba(85,85,85,.97);}#dialogText{color:#fff;background-color:#555;}select{color:#000;}button,input{color:white;background-color:#333;}input[type=radio]{accent-color:#333;}th{background-color:#444444;}tr:nth-child(even){background-color:#505050;}#dialogText{border:1px solid white;border-radius:10px;}button,input,select{border:2px solid white;}button,input{-webkit-border-radius:5px;border-radius:5px;}select#channel{border-radius:5px;}body{hyphens:auto;}body:has(dialog[open]){overflow:hidden;}button,input,select,details summary{cursor:pointer;}#dialog-wrapper{cursor:pointer;}#dialogText{cursor:pointer;}#copyIcon{text-decoration:none;}td:nth-child(even){cursor:pointer;}main .first-in-main{padding-top:calc(var(--default-top-padding) - .8em);}.horizontal{margin-top:10px;}.horizontal label{margin-right:10px;}#dialogText{padding:.25em;}th,td{padding:0;padding-left:10px;padding-right:10px;}#copyIcon{margin-left:10px;}.space{margin-bottom:1.2em;}summary h2{margin-left:.2em;}p.label{margin-right:15px;}p{margin-block-start:0;}ul{margin-block-start:0;}p#source{margin-top:2em;margin-left:auto;}body{display:flex;flex-direction:column}main{display:flex;flex-direction:column;height:100%}#dialog-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}.horizontal{display:inline-flex;}th{text-align:left;}table,tr,td{overflow:hidden;}th:nth-child(1),td:nth-child(1){width:2ch;}th:nth-child(2),td:nth-child(2){width:13ch;}th:nth-child(3),td:nth-child(3){width:fit-content;}select#channel{width:fit-content;height:1.3em;}summary h2{display:inline-block;}details[open] h2{vertical-align:sub;}p#source{width:fit-content;} \ No newline at end of file +:root{--default-top-padding:1.5em;--default-body-bottom-margin:2vmin;--default-min-font-size-px:12px;--default-min-font-size:12;--default-max-font-size-px:18px;--default-max-font-size:18;}header{margin-bottom:1em;}*,*::before,*::after{box-sizing:unset;}h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0;}ul[role='list'],ol[role='list']{list-style:none;}html:focus-within{scroll-behavior:smooth;}body{text-rendering:optimizeSpeed;line-height:1.5;}a:not([class]){text-decoration-skip-ink:auto;}img,picture{max-width:100%;font-style:italic;}input,button,textarea,select{font:inherit;}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}body{font-size:2em;}#dialogText{font-size:23vw;line-height:.8em;}details[open] h2{font-size:1.5em;}summary h2{font-size:inherit;}#dialog-wrapper{background:rgba(85,85,85,.97);}#dialogText{color:#fff;background-color:#555;}select{color:#000;}button,input{color:white;background-color:#333;}input[type=radio]{accent-color:#333;}th{background-color:#444444;}tr:nth-child(even){background-color:#505050;}#dialogText{border:1px solid white;border-radius:10px;}button,input,select{border:2px solid white;}button,input{-webkit-border-radius:5px;border-radius:5px;}select#channel{border-radius:5px;}body{hyphens:auto;}body:has(dialog[open]){overflow:hidden;}button,input,select,details summary{cursor:pointer;}#dialog-wrapper{cursor:pointer;}#dialogText{cursor:pointer;}#copyIcon{text-decoration:none;}td:nth-child(even){cursor:pointer;}main .first-in-main{padding-top:calc(var(--default-top-padding) - .8em);}.horizontal{margin-top:10px;}.horizontal label{margin-right:10px;}#dialogText{padding:.25em;}th,td{padding:0;padding-left:10px;padding-right:10px;}#copyIcon{margin-left:10px;}.space{margin-bottom:1.2em;}summary h2{margin-left:.2em;}p.label{margin-right:15px;}p{margin-block-start:0;}ul{margin-block-start:0;}p#source{margin-top:2em;margin-left:auto;}body{display:flex;flex-direction:column}main{display:flex;flex-direction:column;height:100%}#dialog-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}.horizontal{display:inline-flex;}th{text-align:left;}table,tr,td{overflow:hidden;}th:nth-child(1),td:nth-child(1){width:2ch;}th:nth-child(2),td:nth-child(2){width:13ch;}th:nth-child(3),td:nth-child(3){width:fit-content;}select#channel{width:fit-content;height:1.3em;}summary h2{display:inline-block;}details[open] h2{vertical-align:sub;}p#source{width:fit-content;} \ No newline at end of file