Reorganize repo into cargo workspace
This commit is contained in:
@@ -0,0 +1,256 @@
|
||||
main {
|
||||
--page-margin: calc(0.333 * 100vi / 2);
|
||||
--page-content-size: calc(100% - (var(--page-margin) * 2));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--default-padding);
|
||||
margin-block-end: 40svb;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 60rem) {
|
||||
main {
|
||||
block-size: calc(100svb - 8rem
|
||||
/*the most magic number of all...*/
|
||||
);
|
||||
margin-block-end: unset;
|
||||
max-inline-size: var(--page-content-size);
|
||||
}
|
||||
|
||||
.blog-admin {
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
.admin-widget-user {
|
||||
flex-direction: row !important;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.admin-widget ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
flex: 1;
|
||||
min-block-size: 0;
|
||||
block-size: 100%;
|
||||
overflow: auto;
|
||||
max-block-size: 100%;
|
||||
margin-block: 0;
|
||||
gap: var(--default-padding);
|
||||
|
||||
li {
|
||||
@media screen and (min-width: 60rem) {
|
||||
min-block-size: 6rem;
|
||||
flex: 0 1 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-widget-user {
|
||||
padding: var(--default-padding);
|
||||
flex-direction: column;
|
||||
gap: var(--default-padding);
|
||||
|
||||
&>* {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
#user-info {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
transition: opacity 0.3s ease;
|
||||
transform: translate(calc(var(--default-padding) * -1), calc(var(--default-padding) * -1));
|
||||
box-sizing: border-box;
|
||||
opacity: 0;
|
||||
text-wrap: nowrap;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
background: var(--color-bg);
|
||||
|
||||
.close {
|
||||
aspect-ratio: 1;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:target {
|
||||
z-index: 100;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
form {
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.user-info-form {
|
||||
display: contents;
|
||||
|
||||
&>* {
|
||||
padding-block: 0;
|
||||
min-inline-size: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>*:not(#user-info) {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:has(#user-info:target) {
|
||||
&>*:not(#user-info) {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-widget:not(.admin-widget-user) {
|
||||
min-block-size: 0;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.blog-admin {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
gap: var(--default-padding);
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
min-block-size: 0;
|
||||
flex: 1;
|
||||
justify-content: stretch;
|
||||
|
||||
ul {
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
flex-direction: column;
|
||||
gap: var(--default-padding);
|
||||
box-sizing: border-box;
|
||||
min-block-size: 0;
|
||||
flex: 0 1 100%;
|
||||
|
||||
|
||||
.empty-message {
|
||||
@media screen and (min-width: 60rem) {
|
||||
margin-block-start: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.form-action {
|
||||
transition: all 0.3s ease;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
min-block-size: 0;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
border-block-start: var(--border);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
gap: var(--default-padding);
|
||||
box-sizing: content-box;
|
||||
justify-content: end;
|
||||
max-block-size: 0;
|
||||
padding: 0 var(--default-padding);
|
||||
min-block-size: 0;
|
||||
}
|
||||
|
||||
&:has(:checked) {
|
||||
.form-actions {
|
||||
border-block: var(--border);
|
||||
transition: all 0.3s ease;
|
||||
max-block-size: calc(var(--default-padding) * 2);
|
||||
padding-block: var(--default-padding);
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
& {
|
||||
max-block-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.form-action {
|
||||
transition: all 0.3s ease;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
min-inline-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.admin-widget {
|
||||
position: relative;
|
||||
min-block-size: 0;
|
||||
border: var(--border);
|
||||
display: flex;
|
||||
|
||||
&>*:not(form, a) {
|
||||
padding-inline: var(--default-padding);
|
||||
}
|
||||
|
||||
.widget-header {
|
||||
display: flex;
|
||||
min-block-size: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
li {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: calc(2 * var(--default-padding)) var(--default-padding);
|
||||
border-inline-start: 0px solid black;
|
||||
}
|
||||
|
||||
.widget-entry {
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:has(.entry-content:hover),
|
||||
&:has(.entry-content:focus) {
|
||||
border-inline-start-width: 3px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.entry-content {
|
||||
&>* {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a.entry-content {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
inline-size: 90%;
|
||||
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: translateX(1ch);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
.blog-roll-entry {
|
||||
margin-block: 1rem;
|
||||
|
||||
a {
|
||||
border: var(--border);
|
||||
background: var(--color-bg-accent);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
outline: none;
|
||||
|
||||
--content-padding: 1rem;
|
||||
|
||||
.entry-content {
|
||||
padding: var(--content-padding);
|
||||
transition: padding-inline-start 0.3s ease, box-shadow 0.3s ease;
|
||||
|
||||
* {
|
||||
margin-block: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
.entry-content {
|
||||
padding-inline-start: calc(var(--content-padding) * 2);
|
||||
box-shadow: inset 3px 0px 0px var(--color-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
border-inline: none;
|
||||
border-block-start: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
main {
|
||||
@media screen and (min-width: 60rem) {
|
||||
min-block-size: calc(100svb - 8rem
|
||||
/*the most magic number of all...*/
|
||||
) !important;
|
||||
}
|
||||
|
||||
margin-block-end: 0;
|
||||
|
||||
border: solid 1px var(--color-text);
|
||||
padding: 2rem;
|
||||
min-block-size: 80%;
|
||||
/* display: flex; */
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
h1 {
|
||||
font-size: calc(var(--font-size) * 3.33);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(var(--font-size) * 2.66);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(var(--font-size) * 2);
|
||||
}
|
||||
|
||||
:is(h4, h5, h6) {
|
||||
font-size: calc(var(--font-size) * 1.33);
|
||||
}
|
||||
|
||||
:is(h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6) {
|
||||
margin-block: 2rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ce-block:not(:first-child) {
|
||||
|
||||
*:is(h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6) {
|
||||
margin-block: 0rem 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ce-header {
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
font-family: var(--font-family-display) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ce-delimiter {
|
||||
width: 100%;
|
||||
margin-block: 1rem;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.cdx-input {
|
||||
border-radius: 0 !important;
|
||||
border: var(--border) !important;
|
||||
background-color: var(--color-bg) !important;
|
||||
}
|
||||
|
||||
.ce-delimiter::before {
|
||||
display: block;
|
||||
content: "" !important;
|
||||
height: 1px !important;
|
||||
inline-size: 100%;
|
||||
position: absolute;
|
||||
background: var(--color-text);
|
||||
color: green
|
||||
}
|
||||
|
||||
.image-tool__image_preloader::after {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
height: 0 !important;
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
@media all and (max-width: 650px) {
|
||||
.ce-toolbar__actions {
|
||||
&>*:nth-child(1),
|
||||
&>*:nth-child(2) {
|
||||
border-radius: 0;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cdx-warning {
|
||||
&::before {
|
||||
display: none !important;
|
||||
inline-size: 0 !important;
|
||||
}
|
||||
|
||||
.cdx-warning__message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cdx-warning__title {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cdx-input[data-placeholder]::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.cdx-input {
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
font-size: calc(var(--font-size) * 1.3);
|
||||
border: 1px solid var(--color-text);
|
||||
border-inline-start: 4px solid var(--color-text);
|
||||
padding: 1rem 2rem !important;
|
||||
max-inline-size: 100%;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.codex-editor__redactor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--default-padding);
|
||||
}
|
||||
|
||||
* {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.ce-block__content {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.ce-block {
|
||||
margin-block: 0;
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
.cdx-block {
|
||||
margin-block: 0;
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
.codex-editor {
|
||||
&>*:first-child {
|
||||
|
||||
& h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
padding-block-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ce-popover--opened>.ce-popover__container {
|
||||
border: solid 1px var(--color-text) !important;
|
||||
border-radius: 0;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ce-paragraph {
|
||||
font-size: calc(var(--font-size) * 1.3);
|
||||
line-height: calc(var(--font-size) * 2);
|
||||
}
|
||||
|
||||
.cdx-block {
|
||||
&>span {
|
||||
background-color: var(--color-selection) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ce-block--selected .ce-block__content {
|
||||
background-color: var(--color-selection) !important;
|
||||
}
|
||||
|
||||
.embed-tool__caption {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 50rem) {
|
||||
body {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
body>div {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
all: unset;
|
||||
max-block-size: 100%;
|
||||
min-block-size: 25%;
|
||||
min-inline-size: 50%;
|
||||
max-inline-size: 100%;
|
||||
background: url("/assets/images/login.jpg");
|
||||
filter: invert();
|
||||
background-size: cover;
|
||||
mask-size: 100%;
|
||||
mask-image: linear-gradient(rgb(0 0 0 / 100%), transparent);
|
||||
|
||||
@media screen and (min-width: 50rem) {
|
||||
mask-image: linear-gradient(90deg, rgb(0 0 0 / 100%), transparent);
|
||||
}
|
||||
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* block-size: 100%; */
|
||||
max-block-size: 100%;
|
||||
|
||||
&>:first-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: var(--border);
|
||||
padding: 1rem;
|
||||
align-items: center;
|
||||
|
||||
h1 {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label:has(input:not([type="checkbox"])) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
padding: 0.5ch;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-inline-size: 40ch;
|
||||
gap: 1rem;
|
||||
}
|
||||
@@ -0,0 +1,434 @@
|
||||
@font-face {
|
||||
src: url("/assets/fonts/Redaction-Regular.woff2");
|
||||
font-family: Redaction;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
src: url("/assets/fonts/Atkinson-Hyperlegible-Regular.woff2");
|
||||
font-family: Atkinson-Hyperlegible;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-bg: #faf9f6;
|
||||
--color-bg-accent: #fffefb;
|
||||
--color-text: #000000;
|
||||
--color-accent: oklch(70.92% 0.1619 310);
|
||||
--color-selection: color-mix(in srgb, var(--color-bg) 85%, var(--color-accent) 15%);
|
||||
--font-family-display: Redaction;
|
||||
--font-family-text: Atkinson-Hyperlegible;
|
||||
--border: 1px solid var(--color-text);
|
||||
|
||||
--default-padding: 1rem;
|
||||
|
||||
--transition-timing: 0.3s ease;
|
||||
|
||||
--header-size: 6rem;
|
||||
|
||||
--font-size: 1rem;
|
||||
font-size: var(--font-size);
|
||||
line-height: 1.15;
|
||||
/* 1. Correct the line height in all browsers. */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2. Prevent adjustments of font size after orientation changes in iOS. */
|
||||
tab-size: 4;
|
||||
/* 3. Use a more readable tab size (opinionated). */
|
||||
color: var(--color-text);
|
||||
|
||||
scroll-behavior: smooth;
|
||||
|
||||
*::selection {
|
||||
background-color: var(--color-selection);
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
margin: 0;
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
font-family: var(--font-family-text);
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
button,
|
||||
.button,
|
||||
input,
|
||||
label,
|
||||
a,
|
||||
blockquote,
|
||||
aside,
|
||||
ol,
|
||||
ul {
|
||||
font-size: calc(var(--font-size) * 1.33);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-family-display);
|
||||
}
|
||||
|
||||
aside,
|
||||
blockquote {
|
||||
border: var(--border);
|
||||
}
|
||||
|
||||
blockquote,
|
||||
aside {
|
||||
padding: var(--default-padding) calc(var(--default-padding) * 2);
|
||||
max-inline-size: 100%;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
&::before {
|
||||
content: '“';
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '”';
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
appearance: none;
|
||||
list-style: none;
|
||||
padding-inline: unset;
|
||||
}
|
||||
|
||||
a {
|
||||
color: unset;
|
||||
text-decoration: unset;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: var(--color-bg-accent);
|
||||
outline: none;
|
||||
border: var(--border);
|
||||
transition: box-shadow var(--transition-timing);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input:is([type="text"], [type="password"], [type="search"]) {
|
||||
padding: 0.5ch 1ch;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
box-shadow: inset 3px 0px 0px var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
min-inline-size: 1ch;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border: 0px solid var(--color-bg);
|
||||
outline: 0px solid var(--color-text);
|
||||
|
||||
&:not(:checked)::before {
|
||||
outline: 3px solid var(--color-text);
|
||||
}
|
||||
|
||||
&:checked::before {
|
||||
outline: 3px solid var(--color-text);
|
||||
border: 3px solid var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
aspect-ratio: 1;
|
||||
background: var(--color-bg);
|
||||
outline: 1px solid var(--color-text);
|
||||
box-shadow: inset 0px 0px 0px var(--color-text), inset 0px 0px 0px var(--color-text);
|
||||
}
|
||||
|
||||
&,
|
||||
&::before {
|
||||
transition: box-shadow var(--transition-timing), background var(--transition-timing), outline var(--transition-timing);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
box-shadow: inset 1px 1px 0px var(--color-text), inset -1px -1px 0px var(--color-text);
|
||||
}
|
||||
|
||||
&:checked::before {
|
||||
background: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
appearance: unset;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
border: var(--border);
|
||||
transition: box-shadow var(--transition-timing);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
box-shadow: 0px 2px 0px var(--color-text);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow:
|
||||
0px 1px 0px var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
.animated-link {
|
||||
background-size: 100% 0%;
|
||||
}
|
||||
|
||||
.animated-link-underline {
|
||||
background-size: 100% 1px;
|
||||
}
|
||||
|
||||
.animated-link,
|
||||
.animated-link-underline {
|
||||
text-decoration: unset;
|
||||
background-position: left bottom;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
transition: background-size var(--transition-timing), background-image var(--transition-timing), color var(--transition-timing);
|
||||
background-image: linear-gradient(var(--color-text), var(--color-text));
|
||||
|
||||
color: var(--color-text);
|
||||
|
||||
* {
|
||||
transition: color var(--transition-timing);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
color: var(--color-bg);
|
||||
|
||||
* {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
box-sizing: content-box;
|
||||
flex-direction: column;
|
||||
border-block-end: var(--border);
|
||||
max-inline-size: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: var(--default-padding);
|
||||
position: sticky;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
background: var(--color-bg);
|
||||
|
||||
&>:first-child {
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-block: 0.25ch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
flex-wrap: wrap;
|
||||
max-inline-size: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
a {
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-family-display);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
gap: var(--default-padding);
|
||||
|
||||
font-size: calc(var(--font-size) * 1.8);
|
||||
}
|
||||
|
||||
|
||||
form {
|
||||
min-inline-size: min(100%, 10ch);
|
||||
flex: 0;
|
||||
align-items: center;
|
||||
border: var(--border);
|
||||
background: var(--color-bg-accent);
|
||||
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
|
||||
padding-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
input {
|
||||
min-inline-size: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
transition: flex var(--transition-timing),
|
||||
padding-inline var(--transition-timing);
|
||||
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-results-button,
|
||||
input[type="search"]::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&>* {
|
||||
box-sizing: content-box;
|
||||
background: transparent;
|
||||
margin-inline: 0;
|
||||
margin-block: 0;
|
||||
padding-block: 0;
|
||||
block-size: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
main {
|
||||
margin-block: var(--default-padding) 40svb;
|
||||
margin-inline: auto;
|
||||
max-inline-size: min(60ch, 80%);
|
||||
padding-block: var(--default-padding);
|
||||
gap: var(--default-padding);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&>:first-child {
|
||||
margin-block-start: 0;
|
||||
|
||||
&:is(a) {
|
||||
&+* {
|
||||
margin-block-start: 0rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>* {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
&>* {
|
||||
|
||||
&:is(h1) {
|
||||
font-size: calc(var(--font-size) * 3.33);
|
||||
}
|
||||
|
||||
&:is(h2) {
|
||||
font-size: calc(var(--font-size) * 2.66);
|
||||
}
|
||||
|
||||
&:is(h3) {
|
||||
font-size: calc(var(--font-size) * 2);
|
||||
}
|
||||
|
||||
&:is(h4, h5, h6) {
|
||||
font-size: calc(var(--font-size) * 1.33);
|
||||
}
|
||||
|
||||
&:is(h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6) {
|
||||
margin-block: 2rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
min-inline-size: 100%;
|
||||
max-inline-size: 100%;
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
border: var(--border);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* anything wider than mobile */
|
||||
@media all and (min-width: 60rem) {
|
||||
header {
|
||||
box-sizing: border-box;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
nav {
|
||||
justify-content: flex-end;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
margin-block: var(--default-padding);
|
||||
}
|
||||
}
|
||||
|
||||
/* tablet */
|
||||
@media all and (min-width: 60rem) and (max-width: 80rem) {}
|
||||
|
||||
/* desktop */
|
||||
@media all and (min-width: 80rem) {}
|
||||
Reference in New Issue
Block a user