209 lines
3.5 KiB
CSS
209 lines
3.5 KiB
CSS
:root {
|
||
--w: #F6F7F7;
|
||
--d: #000000;
|
||
--b: #2BD2FF;
|
||
--p: #FC9DB8;
|
||
--g: #545454;
|
||
--h: #54545450;
|
||
}
|
||
|
||
::selection {
|
||
background-color: var(--h);
|
||
}
|
||
|
||
html {
|
||
color: var(--d);
|
||
background-color: var(--w);
|
||
|
||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||
font-feature-settings:normal;
|
||
font-variation-settings:normal
|
||
|
||
font-size: 12pt;
|
||
line-height: 1.5em;
|
||
word-spacing: 0.04ch;
|
||
|
||
overflow-x: hidden;
|
||
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
padding: 0 0.75em;
|
||
overflow-x: hidden;
|
||
|
||
height: 100%;
|
||
}
|
||
|
||
body > * {
|
||
width: 100%;
|
||
max-width: max(70ch, 60%);
|
||
margin: 0 auto;
|
||
margin-bottom: 1em;
|
||
}
|
||
|
||
header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
border-image: repeating-linear-gradient(to right,
|
||
var(--b), var(--b) 5px, transparent 5px, transparent 10px,
|
||
var(--p) 10px, var(--p) 15px, transparent 15px, transparent 20px);
|
||
border-image-width: 0 0 3px 0;
|
||
border-image-slice: 1;
|
||
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
header img {
|
||
margin: 0.5rem 1rem 0.5rem 0;
|
||
}
|
||
|
||
header div {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
#nav {
|
||
position: relative;
|
||
}
|
||
|
||
#hamburger:hover, #hamburger:focus, #hamburger:active {
|
||
cursor: pointer;
|
||
}
|
||
|
||
#nav img {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
nav {
|
||
position: absolute;
|
||
display: none;
|
||
|
||
z-index: 1;
|
||
background-color: var(--w);
|
||
right: 0px;
|
||
top: 35px;
|
||
min-width: 160px;
|
||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
nav a {
|
||
display: block;
|
||
|
||
text-align: right;
|
||
|
||
border-image: repeating-linear-gradient(to right,
|
||
var(--b), var(--b) 5px, transparent 5px, transparent 10px,
|
||
var(--p) 10px, var(--p) 15px, transparent 15px, transparent 20px);
|
||
border-image-width: 2px 0 0 0;
|
||
border-image-slice: 1;
|
||
|
||
padding: 4px 4px 4px 0;
|
||
margin: 0;
|
||
}
|
||
|
||
nav a:last-child {
|
||
border-image-width: 2px 0 2px 0;
|
||
}
|
||
|
||
a {
|
||
color: var(--d);
|
||
text-decoration: none;
|
||
|
||
transition-property: color;
|
||
transition-duration: 0.5s;
|
||
}
|
||
|
||
a:not(header a) {
|
||
border-image: repeating-linear-gradient(to right,
|
||
var(--b), var(--b) 5px, transparent 5px, transparent 10px,
|
||
var(--p) 10px, var(--p) 15px, transparent 15px, transparent 20px);
|
||
border-image-width: 0 0 2px 0;
|
||
border-image-slice: 1;
|
||
}
|
||
|
||
a:hover, a:focus, a:active {
|
||
color: var(--g);
|
||
}
|
||
|
||
h1 {
|
||
font-size: 24pt;
|
||
font-weight: 700;
|
||
}
|
||
|
||
h1:not(header h1), h2 {
|
||
margin: 0;
|
||
padding-bottom: 0.5em;
|
||
|
||
border-image: repeating-linear-gradient(to right,
|
||
var(--b), var(--b) 5px, transparent 5px, transparent 10px,
|
||
var(--p) 10px, var(--p) 15px, transparent 15px, transparent 20px);
|
||
border-image-width: 0 0 3px 0;
|
||
border-image-slice: 1;
|
||
}
|
||
|
||
section + section {
|
||
margin-top: 2.5em;
|
||
}
|
||
|
||
.medication div {
|
||
border-image: repeating-linear-gradient(to right,
|
||
var(--b), var(--b) 5px, transparent 5px, transparent 10px,
|
||
var(--p) 10px, var(--p) 15px, transparent 15px, transparent 20px);
|
||
border-image-width: 2px 0 0 0;
|
||
border-image-slice: 1;
|
||
|
||
padding: 1em;
|
||
}
|
||
|
||
.medication div:last-child {
|
||
border-image-width: 2px 0 2px 0;
|
||
}
|
||
|
||
ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
ul li::before {
|
||
content: "–";
|
||
margin: 0.25em 0;
|
||
padding-right: 1em;
|
||
}
|
||
|
||
ul li {
|
||
position: relative;
|
||
left: 1.5em;
|
||
margin: 0.25em 1.5em 0.25em 0;
|
||
text-indent: -1.5em;
|
||
}
|
||
|
||
table {
|
||
overflow: scroll;
|
||
display: inline-block;
|
||
max-width: 70ch;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
td {
|
||
white-space: nowrap;
|
||
padding: 0 5px;
|
||
}
|
||
|
||
div:not(header div) {
|
||
padding: 0;
|
||
margin: 0;
|
||
border: 0;
|
||
}
|
||
|
||
textarea {
|
||
max-width: calc(100% - 0.75em);
|
||
}
|