feat: Restore BS icons, separate styles to modules
This commit is contained in:
daudix-UFO
2090
sass/_bootstrap-icons.scss
Normal file
2090
sass/_bootstrap-icons.scss
Normal file
File diff suppressed because it is too large
Load Diff
31
sass/_buttons.scss
Normal file
31
sass/_buttons.scss
Normal file
@ -0,0 +1,31 @@
|
||||
.dialog-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.inline-button {
|
||||
background-color: var(--fg-muted-1);
|
||||
border-radius: var(--rounded-corner);
|
||||
color: var(--fg-color);
|
||||
display: inline-block;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.4rem 1rem;
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.colored {
|
||||
color: var(--primary-color);
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-color-alpha);
|
||||
}
|
||||
}
|
||||
}
|
||||
70
sass/_crt.scss
Normal file
70
sass/_crt.scss
Normal file
@ -0,0 +1,70 @@
|
||||
.crt {
|
||||
margin: 1rem 0 1rem;
|
||||
border-radius: var(--rounded-corner);
|
||||
box-shadow: var(--glow);
|
||||
background: var(--crt-bg);
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: var(--primary-color);
|
||||
padding: 1rem 1rem;
|
||||
text-shadow: var(--primary-color-alpha) 0 0 4px,
|
||||
var(--primary-color) 0 0 12px;
|
||||
// Unset some <pre> stuff
|
||||
background-color: unset;
|
||||
box-shadow: unset;
|
||||
margin: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.scanlines {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scanlines::after {
|
||||
animation: scanlines 250ms linear infinite;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.25),
|
||||
rgba(0, 0, 0, 0.25) 1px,
|
||||
transparent 3px,
|
||||
transparent 4px
|
||||
);
|
||||
content: "";
|
||||
display: block;
|
||||
height: calc(100% + 8px);
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
@keyframes scanlines {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cursor {
|
||||
animation: blicking 1s infinite;
|
||||
|
||||
@keyframes blicking {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -5,6 +5,7 @@
|
||||
font-display: swap;
|
||||
src: url("./fonts/InterVariable.woff2?v=4.0") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: InterVariable;
|
||||
font-style: italic;
|
||||
|
||||
10
sass/_footer.scss
Normal file
10
sass/_footer.scss
Normal file
@ -0,0 +1,10 @@
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 3rem 0 3rem;
|
||||
font-size: 1rem;
|
||||
margin-top: 4rem;
|
||||
|
||||
details {
|
||||
all: unset;
|
||||
}
|
||||
}
|
||||
7
sass/_johnvertisement.scss
Normal file
7
sass/_johnvertisement.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.johnvertisement {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: min(728px, 100vw);
|
||||
height: min(90px, 12.367vw);
|
||||
border: none;
|
||||
}
|
||||
7
sass/_links.scss
Normal file
7
sass/_links.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.link-page::after {
|
||||
content: " →";
|
||||
}
|
||||
|
||||
.link-site::after {
|
||||
content: " ↗";
|
||||
}
|
||||
378
sass/_main.scss
378
sass/_main.scss
@ -159,10 +159,14 @@ dl {
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0.125rem solid var(--fg-muted-3);
|
||||
margin: 3rem auto;
|
||||
width: 40%;
|
||||
border-radius: 9999px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--fg-muted-2);
|
||||
margin: 2rem auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blog-list hr:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@ -309,369 +313,3 @@ th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// MEDIA
|
||||
img,
|
||||
video {
|
||||
display: block;
|
||||
margin: 2rem auto;
|
||||
max-width: 100%;
|
||||
border-radius: var(--rounded-corner);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
img {
|
||||
transition: var(--transition-longer);
|
||||
|
||||
&:not(.no-hover):hover {
|
||||
transform: scale(125%);
|
||||
border-radius: 0;
|
||||
box-shadow: var(--shadow-raised);
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
&:not(.no-hover):hover {
|
||||
transform: scale(110%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pixels {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.transparent {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// NAVBAR
|
||||
.nav {
|
||||
overflow: auto;
|
||||
width: 80vw;
|
||||
max-width: calc(var(--content-width) + 10rem);
|
||||
margin: 1rem auto;
|
||||
box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
|
||||
border-radius: var(--rounded-corner-big);
|
||||
background-color: var(--nav-bg);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
z-index: 1;
|
||||
|
||||
&-container {
|
||||
margin: 0.5rem 0.5rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 1rem 0 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
li {
|
||||
transition: var(--transition);
|
||||
color: var(--default-color);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: transparent;
|
||||
color: var(--fg-muted-4);
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
& {
|
||||
width: 90vw;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
& {
|
||||
border-radius: 9999px;
|
||||
|
||||
&-container {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
ul {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// FOOTER
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 3rem 0 3rem;
|
||||
font-size: 1rem;
|
||||
margin-top: 4rem;
|
||||
|
||||
details {
|
||||
all: unset;
|
||||
}
|
||||
}
|
||||
|
||||
// LINK ARROWS
|
||||
.link-page::after {
|
||||
content: " →";
|
||||
}
|
||||
|
||||
.link-site::after {
|
||||
content: " ↗";
|
||||
}
|
||||
|
||||
// BUTTONS
|
||||
.dialog-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.inline-button {
|
||||
background-color: var(--fg-muted-1);
|
||||
border-radius: var(--rounded-corner);
|
||||
color: var(--fg-color);
|
||||
display: inline-block;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.4rem 1rem;
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.colored {
|
||||
color: var(--primary-color);
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-color-alpha);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CRT
|
||||
.crt {
|
||||
margin: 1rem 0 1rem;
|
||||
border-radius: var(--rounded-corner);
|
||||
box-shadow: var(--glow);
|
||||
background: var(--crt-bg);
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: var(--primary-color);
|
||||
padding: 1rem 1rem;
|
||||
text-shadow: var(--primary-color-alpha) 0 0 4px,
|
||||
var(--primary-color) 0 0 12px;
|
||||
// Unset some <pre> stuff
|
||||
background-color: unset;
|
||||
box-shadow: unset;
|
||||
margin: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.scanlines {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scanlines::after {
|
||||
animation: scanlines 250ms linear infinite;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.25),
|
||||
rgba(0, 0, 0, 0.25) 1px,
|
||||
transparent 3px,
|
||||
transparent 4px
|
||||
);
|
||||
content: "";
|
||||
display: block;
|
||||
height: calc(100% + 8px);
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
@keyframes scanlines {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cursor {
|
||||
animation: blicking 1s infinite;
|
||||
|
||||
@keyframes blicking {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// STATEMENTS
|
||||
.statement-container {
|
||||
margin: 1rem 0 1rem;
|
||||
padding: 1rem 1rem 0.5rem 1rem;
|
||||
border-radius: var(--rounded-corner);
|
||||
box-shadow: var(--shadow);
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
margin: 0.5rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&.archive {
|
||||
background-color: var(--purple-bg);
|
||||
color: var(--purple-fg);
|
||||
}
|
||||
|
||||
&.disclaimer {
|
||||
background-color: var(--red-bg);
|
||||
color: var(--red-fg);
|
||||
}
|
||||
|
||||
&.trigger {
|
||||
background-color: var(--yellow-bg);
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
}
|
||||
|
||||
.johnvertisement {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: min(728px, 100vw);
|
||||
height: min(90px, 12.367vw);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tags {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 0.2rem 0.4rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
border-radius: 9999px;
|
||||
color: var(--fg-color);
|
||||
padding: 0.25rem 0.75rem;
|
||||
transition: var(--transition);
|
||||
background-color: var(--fg-muted-1);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--primary-color-alpha);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "#";
|
||||
}
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
display: flex;
|
||||
margin-top: 6rem;
|
||||
border-top: 1px solid var(--fg-muted-2);
|
||||
|
||||
.post-nav-item {
|
||||
font-weight: 600;
|
||||
width: 50%;
|
||||
padding-top: 1rem;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover .post-title {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
padding-left: 0;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
text-align: right;
|
||||
padding-right: 0;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
font-weight: 400;
|
||||
color: var(--fg-muted-5);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
color: var(--fg-color);
|
||||
transition: var(--transition);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: -.125rem;
|
||||
}
|
||||
|
||||
.not-found {
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-right: 35%;
|
||||
padding-left: 35%;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
37
sass/_media.scss
Normal file
37
sass/_media.scss
Normal file
@ -0,0 +1,37 @@
|
||||
img,
|
||||
video {
|
||||
display: block;
|
||||
margin: 2rem auto;
|
||||
max-width: 100%;
|
||||
border-radius: var(--rounded-corner);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
img {
|
||||
transition: var(--transition-longer);
|
||||
|
||||
&:not(.no-hover):hover {
|
||||
transform: scale(125%);
|
||||
border-radius: 0;
|
||||
box-shadow: var(--shadow-raised);
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
&:not(.no-hover):hover {
|
||||
transform: scale(110%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pixels {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.transparent {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
77
sass/_nav.scss
Normal file
77
sass/_nav.scss
Normal file
@ -0,0 +1,77 @@
|
||||
.nav {
|
||||
overflow: auto;
|
||||
width: 80vw;
|
||||
max-width: calc(var(--content-width) + 10rem);
|
||||
margin: 1rem auto;
|
||||
box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
|
||||
border-radius: var(--rounded-corner-big);
|
||||
background-color: var(--nav-bg);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
z-index: 1;
|
||||
|
||||
&-container {
|
||||
margin: 0.5rem 0.5rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 1rem 0 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
li {
|
||||
transition: var(--transition);
|
||||
color: var(--default-color);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
border-radius: var(--rounded-corner);
|
||||
color: var(--fg-muted-4);
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
padding: 0.4rem 1rem;
|
||||
transform: scale(1);
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
& {
|
||||
width: 90vw;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
& {
|
||||
border-radius: 9999px;
|
||||
|
||||
&-container {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
ul {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
sass/_not-found.scss
Normal file
7
sass/_not-found.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.not-found {
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-right: 35%;
|
||||
padding-left: 35%;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
34
sass/_post-nav.scss
Normal file
34
sass/_post-nav.scss
Normal file
@ -0,0 +1,34 @@
|
||||
.post-nav {
|
||||
display: flex;
|
||||
|
||||
.post-nav-item {
|
||||
width: 50%;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover .post-title {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
padding-left: 0;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
text-align: right;
|
||||
padding-left: 1rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
font-weight: 400;
|
||||
color: var(--fg-muted-5);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
color: var(--fg-color);
|
||||
transition: var(--transition);
|
||||
}
|
||||
}
|
||||
}
|
||||
35
sass/_statements.scss
Normal file
35
sass/_statements.scss
Normal file
@ -0,0 +1,35 @@
|
||||
.statement-container {
|
||||
margin: 1rem 0 1rem;
|
||||
padding: 1rem 1rem 0.5rem 1rem;
|
||||
border-radius: var(--rounded-corner);
|
||||
box-shadow: var(--shadow);
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
margin: 0.5rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&.archive {
|
||||
background-color: var(--purple-bg);
|
||||
color: var(--purple-fg);
|
||||
}
|
||||
|
||||
&.disclaimer {
|
||||
background-color: var(--red-bg);
|
||||
color: var(--red-fg);
|
||||
}
|
||||
|
||||
&.trigger {
|
||||
background-color: var(--yellow-bg);
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
}
|
||||
28
sass/_tags.scss
Normal file
28
sass/_tags.scss
Normal file
@ -0,0 +1,28 @@
|
||||
.tags {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 0.2rem 0.4rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
background-color: var(--fg-muted-1);
|
||||
border-radius: 9999px;
|
||||
color: var(--fg-color);
|
||||
padding: 0.25rem 0.75rem;
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--primary-color-alpha);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "#";
|
||||
}
|
||||
}
|
||||
@ -9,11 +9,24 @@
|
||||
*/
|
||||
|
||||
@use "normalize";
|
||||
@use "variables";
|
||||
@use "gnome-hig";
|
||||
@use "fonts";
|
||||
@use "main";
|
||||
|
||||
@use "bootstrap-icons";
|
||||
@use "buttons";
|
||||
@use "comments";
|
||||
@use "crt";
|
||||
@use "fonts";
|
||||
@use "footer";
|
||||
@use "gnome-hig";
|
||||
@use "johnvertisement";
|
||||
@use "links";
|
||||
@use "main";
|
||||
@use "media";
|
||||
@use "nav";
|
||||
@use "not-found";
|
||||
@use "post-nav";
|
||||
@use "statements";
|
||||
@use "tags";
|
||||
@use "variables";
|
||||
|
||||
@import url("syntax-theme-dark.css") (prefers-color-scheme: dark);
|
||||
@import url("syntax-theme-light.css") (prefers-color-scheme: light);
|
||||
|
||||
Reference in New Issue
Block a user