-
Conrad Zelck authored
Signed-off-by:
Conrad Zelck <git@simpel.cc>
Conrad Zelck authoredSigned-off-by:
Conrad Zelck <git@simpel.cc>
style.css 7.19 KiB
: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;
}
/* *****************************************************************************
personal 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 {
height: calc(100vh - 3vmin); /* minus margin-top - margin bottom is 0 */
font-size: inherit;
font-family: helvetica, Arial, sans-serif;
background-color: #555;
color: white;
/* margin-bottom is calculated here to 0
this margin must be set by the lowest elements,
because they should go to the very bottom */
margin: 3vmin 4vmin calc(var(--default-body-bottom-margin) - 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: 1.0em;
}
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;
}
/* *****************************************************************************
reset user agent styles
see: https://andy-bell.co.uk/a-modern-css-reset
***************************************************************************** */
/* Box sizing rules */
/* unset here makes select w/o round corners */
*, *::before, *::after {
/* box-sizing: border-box; */
box-sizing: unset;
}
/* Remove default margin */
body, h1, h2, h3, h4,
p, figure, blockquote, dl, dd {
margin-block-end: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'], ol[role='list'] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
/* disable because of my personal header */
/* min-height: 100vh; */
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img, picture {
max-width: 100%;
/* alt text should be very different */
font-style: italic;
}
/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* *****************************************************************************
font
***************************************************************************** */
/* Just for this special page */
body {
font-size: 2em;
}
#dialogText {
font-size: 23vw;
line-height: 0.8em;
}
/* *****************************************************************************
colors
***************************************************************************** */
#dialog-wrapper {
background: rgba(85,85,85,0.97);
}
#dialogText {
color: #fff;
background-color: #555;
}
/* avoids blue default text color from select in iOS Safari */
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;
}
/* *****************************************************************************
borders and outlines
***************************************************************************** */
#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;
}
/* *****************************************************************************
specials
***************************************************************************** */
body {
hyphens: auto;
}
/* prevents scrolling in the background if dialog popup is opened */
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;
}
/* *****************************************************************************
all margins and paddings to have them together
***************************************************************************** */
main .first-in-main {
padding-top: calc(var(--default-top-padding) - 0.8em);
}
.horizontal {
margin-top: 10px;
}
.horizontal label {
margin-right: 10px;
}
#dialogText {
padding: 0.25em;
}
th, td {
padding: 0;
padding-left: 10px;
padding-right: 10px;
}
#copyIcon {
margin-left: 10px;
}
.space {
margin: 0.6em;
}
p.label {
margin-right: 15px;
}
p {
margin-block-start: 0;
}
ul {
margin-block-start: 0;
}
p#source {
margin-top: 2em;
margin-left: auto;
}
/* *****************************************************************************
positioning of elements
***************************************************************************** */
body {
display: flex;
flex-direction: column;
/* disabled here because my personal default body seen on top */
/* height: 100%; */
}
main {
display: flex;
flex-direction: column;
height: 100%
}
#logo img {
width: 2em;
height: auto;
}
#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;
}
/* Safari adds nasty top and bottom paddings - this way to omit them */
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;
}
p#source {
width: fit-content;
}
/* *****************************************************************************
media queries here
***************************************************************************** */
/* iPhone 13 mini portrait (max-width: 375px) */
/* @media (max-width: 600px) {
} */