basant/basant/assets/main.css

295 lines
5.2 KiB
CSS

/* RESET CSS BY ANDY BELL */
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 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 {
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%;
display: block;
}
/* 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;
}
}
/* CHISAI CSS BY THOMASORUS */
:root {
--text: black;
--background: white;
--dots: radial-gradient(currentColor 1px, transparent 1px), radial-gradient(currentColor 1px, transparent 1px);
--ratio: 1.5;
--s-5: calc(var(--s-4) / var(--ratio));
--s-4: calc(var(--s-3) / var(--ratio));
--s-3: calc(var(--s-2) / var(--ratio));
--s-2: calc(var(--s-1) / var(--ratio));
--s-1: calc(var(--s0) / var(--ratio));
--s0: 1rem;
--s1: calc(var(--s0) * var(--ratio));
--s2: calc(var(--s1) * var(--ratio));
--s3: calc(var(--s2) * var(--ratio));
--s4: calc(var(--s3) * var(--ratio));
--s5: calc(var(--s4) * var(--ratio));
font-size: calc(1rem + 0.5vw);
}
@media (prefers-color-scheme: dark) {
:root {
--text: white;
--background: black;
--dots: radial-gradient(white 1px, transparent 1px), radial-gradient(white 1px, transparent 1px);
}
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background-color: var(--background);
color: var(--text);
}
header {
width: 100%;
text-align: center;
font-size: var(--s1);
padding-top: var(--s3);
}
header nav {
display: flex;
justify-content: space-around;
}
header a {
color: var(--text);
text-transform: uppercase;
font-weight: 700;
}
a {
color: var(--text);
text-decoration: none;
}
nav em {
font-size: var(--s0);
}
h1 {
font-size: var(--s2);
color: var(--text);
line-height: 1;
}
h2 {
font-size: var(--s1);
color: var(--text);
}
h3 {
font-size: var(--s0);
color: var(--text);
}
main {
padding: var(--s0);
padding: var(--s-1);
background-image: var(--dots);
background-size: calc(4 * 1px) calc(4 * 1px);
background-position: 0 0, calc(2 * 1px) calc(2 * 1px);
}
article {
background-color: var(--background);
padding: var(--s0);
}
main a {
color: var(--text);
border-bottom: 2px solid var(--text);
}
main date {
display: block;
}
li {
line-height: 1.3;
}
ul>*+* {
margin-top: var(--s0);
}
.container {
--space: var(--s1);
display: flex;
flex-direction: column;
justify-content: flex-start;
max-width: 60ch;
margin-left: auto;
margin-right: auto;
padding: 0 var(--s0);
}
.flow>*+* {
margin-top: var(--s0);
}
.flow-small>*+* {
margin-top: var(--s-3);
}
.flow-large>*+* {
margin-top: var(--s3);
}
.logo {
border-radius: 100%;
margin: 0 auto;
max-width: 180px;
padding: 15px;
}
.youtube {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.youtube>iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
}
.listing {
padding: 0;
list-style: none;
line-height: 1;
}
.listing h3 {
font-weight: 300;
}
.listing small {
display: block;
font-size: var(--s-1);
}
.listing>*+* {
margin-top: var(--s-2);
}
@media (max-width: 520px) {
:root {
--s1: var(--s0);
}
.logo {
max-width: 120px;
padding: 5px;
}
}
/*
@media (prefers-color-scheme: dark) {
:root {
--purple-light: rgb(172, 16, 239);
--purple-light-transparent: rgba(172, 16, 239, 0.7);
--purple-medium: #5927e0;
--purple-strong: #3f1ca0;
--background: #111;
--text: hsl(221, 19%, 66%);
--title: white;
--article-shadow: black;
--link: var(--purple-medium);
}
}
@media (prefers-color-scheme: light) {
:root {
--purple-light: rgb(172, 16, 239);
--purple-light-transparent: rgba(172, 16, 239, 0.7);
--purple-medium: #5927e0;
--purple-strong: #3f1ca0;
--background: white;
--text: #6b7280;
--title: black;
--article-shadow: #333;
--link: var(--purple-light-transparent);
}
} */