Skip to content

Commit

Permalink
feat!:Edit styles
Browse files Browse the repository at this point in the history 
- Add new styles for spoilers, named fenced blocks and ellipses animation.
- Add scroll-behavior: smooth (unless it has reduced system preferences)
- Make theme modifier classes inheritable
- Add new print/media exclusive styles.
- Change nav submenu indicator
- Change heading anchor styles.
- Limit border-radius for checkboxes when root has higher corner roundness modifiers (RIP checkboxes: https://tonsky.me/blog/checkbox/)
- Refactor color styles.
- Remove deprecated button modifier styles.
  • Loading branch information
@egeesin
egeesin committed Apr 9, 2024
1 parent 44d630b commit 9c40bb4
Show file tree
Hide file tree
Showing 12 changed files with 1,047 additions and 534 deletions.
24 changes: 17 additions & 7 deletions static/style/abstract/01-font.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,25 @@
/* @import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,[email protected],75..100,200..800&display=swap') */

/* Useful tool to get and self-host a font from Google Fonts
* https://labs.binaryunit.com/localgfonts/
*/

:root {
/* https://modernfontstacks.com/#font-stacks */

/* Sans Serif Stacks */
--fontStackSystemUI: ui-sans-serif, system-ui, sans-serif, color-emoji;
--fontStackSystemUI: ui-sans-serif, system-ui, sans-serif;
--fontStackHumanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
--fontStackGeoHumanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
--fontStackClassicHumanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
--fontStackNeoGrotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
--fontStackIndustrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
--fontStackRounded: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
/* Force fully pixelated fonts and image */
--fontStackSansPixelated: "MS UI Gothic", Verdana, sans-serif;

/* Serif Stacks */
/* --fontStackSerif: Charter, Georgia, Cambria, "Times New Roman", Times, serif; */
Expand All @@ -27,7 +34,7 @@
--fontStackDidone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;

/* Monospaced Stacks */
--fontStackMono: ui-monospace, Consolas, 'Liberation Mono', Menlo, Courier, monospace, color-emoji;
--fontStackMono: ui-monospace, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--fontStackMonoSlab: 'Nimbus Mono PS', 'Courier New', monospace;
--fontStackMonoCode: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

Expand All @@ -36,11 +43,14 @@

/* Verdana is alr too but not sure if all operating systems on the market have that one... */

/* Font Properties in Use */
/* --fontMain: "Recursive", var(--fontStackNeoGrotesque); */
/* --fontMain: var(--fontStackOldStyle); */
--fontMain: "Inter V", var(--fontStackNeoGrotesque);
/* --fontMain: var(--fontStackSystemUI); */
/*
* Font Properties in Use
*/
/* --fontMain: "Recursive", var(--fontStackNeoGrotesque), color-emoji; */
/* --fontMain: var(--fontStackOldStyle), color-emoji; */
--fontMain: "Inter V", var(--fontStackNeoGrotesque), color-emoji;
/* --fontMain: var(--fontStackSansPixelated), color-emoji; */
/* --fontMain: var(--fontStackSystemUI), color-emoji; */
--fontMono: "Iosevka Aegean", var(--fontStackMono);
--fontHeading: var(--fontMain);
/* --fontParagraph: var(--fontMain); */
Expand Down
96 changes: 41 additions & 55 deletions static/style/abstract/01-utility.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@

@media print {
.u-hidden\@print {
display: none;
display: none !important;
}
}

Expand Down Expand Up @@ -178,7 +178,6 @@
/* opacity: .85; */
}


/* @media (prefers-color-scheme: dark) { */
:where(.t-color:is([data-theme=dark],.-forceDark:not([data-theme=dark]))) & {
color: var(--colorTextBolder);
Expand All @@ -187,13 +186,19 @@
color: var(--colorTextBolder);
}
}
.pi {
.pi, .pi& {
/* Add border to all icons inside header modified with -viewMedia */
--iconWeight:1.75px;/*opinionated*/
filter:
drop-shadow(calc(var(--iconWeight)*2) 0 0 var(--stroke))
drop-shadow(0 calc(var(--iconWeight)*2) 0 var(--stroke))
drop-shadow(calc(var(--iconWeight)*-2) calc(var(--iconWeight)*-2) 0 var(--stroke));
drop-shadow(2px 0 0 var(--stroke))
drop-shadow(0 2px 0 var(--stroke))
drop-shadow(-2px 0 0 var(--stroke))
drop-shadow(0 -2px 0 var(--stroke));

/* drop-shadow(calc(var(--iconWeight)*2) 0 0 var(--stroke)) */
/* drop-shadow(0 calc(var(--iconWeight)*2) 0 var(--stroke)) */
/* drop-shadow(calc(var(--iconWeight)*-2) calc(var(--iconWeight)*-2) 0 var(--stroke)); */

/* filter: /1* Glitchy look *1/ */
/* drop-shadow(calc(var(--iconWeight)*2) 0 0 var(--red)) */
/* drop-shadow(0 calc(var(--iconWeight)*2) 0 var(--green)) */
Expand Down Expand Up @@ -264,58 +269,39 @@

/* Heading Anchors in posts generated by Markdown It Anchor plugin */
/* Check Markdown It config and search for "truncate_content" to modify the markup. */
.u-headingAnchor{
cursor: pointer;
/* position: relative; */
.header-anchor{
color: inherit;
text-decoration: none;
/* font-weight: 500; */
/* height: 100%; */
/* position: absolute; */
/* top: 0; */
/* left: 0; */
/* inline-size: 1ch; */
/* margin-left: -1.5ch; */
opacity: .33;

}
.header-anchor:after{
content: "🔗";
position: relative;
display: inline-block;
width: 0;
height: 0;
opacity: .25; /* Default opacity for mobile devices */
transition: opacity .25s ease-in-out;
@media (any-hover: hover) {
opacity: 0;
:where(h1,h2,h3,h4,h5,h6):hover & {
opacity: 1;
}
}

/* padding-top: inherit; */

/* position: absolute; */
/* width: 1em; */
/* top: 0; */
/* left: 0; */
/* margin-left: -1.5em; */

padding: calc(var(--rhythmUnit)/2);

/* @media (any-hover: hover) { */
/* padding: 0 .125em; */
/* } */

/* span:before { */
/* content: "⌗"; */
/* content: "#"; */
/* content: "¶"; */
/* content: "🔗"; */
/* left: 0; */
/* top: 0; */
/* opacity: .33; */
/* transition: opacity .2s ease-in-out; */
/* @media (any-hover: hover) { */
/* opacity: 0; */
/* :where(h1,h2,h3,h4,h5,h6):hover & { */
/* opacity: 1; */
/* } */
/* } */
/* } */
}
/* Opacity behavior for the inputs that can hover */
@media (any-hover: hover) {
.header-anchor:after { opacity: 0; }
.header-anchor:hover:after { opacity: 1; }
}
/* .u-headingAnchor{ */
/* cursor: pointer; */
/* text-decoration: none; */
/* opacity: .33; */
/* user-select: none; */
/**/
/* transition: opacity .25s ease-in-out; */
/* @media (any-hover: hover) { */
/* opacity: 0; */
/* :where(h1,h2,h3,h4,h5,h6):hover & { */
/* opacity: 1; */
/* } */
/* } */
/* padding: calc(var(--rhythmUnit)/2); */
/* } */

.s-healthCheck {
[class] {
Expand Down
73 changes: 68 additions & 5 deletions static/style/abstract/color.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,59 @@
/* Main theme scope for colors (t-color) for both light and dark modes
*/
@media print {
:where(html) {
--colorFront: white;
--colorBack: white;
--colorBackmost: white;
--colorText: black;
--red: red;
--orange: orange;
--yellow: yellow;
--green: green;
--cyan: cyan;
--blue: blue;
--hue01: purple;
--hue02: pink;
--colorFrontmost: white;
--colorTextBolder: black;
--colorTextOpac80: black;
--colorTextOpac60: black;
--colorTextOpac40: black;
--colorTextOpac20: black;
--colorTextOpac075: black;
--colorBaseOpac80: white;
--colorBaseOpac0: white;
/* Uncomment this when Color Module 5 arrives. */
/*
--colorBaseVal: 0 0 0 0;
--colorFront: device-cmyk(0 0 0 0);
--colorBack: device-cmyk(0 0 0 0);
--colorBackmost: device-cmyk(0 0 0 0);
--colorTextVal: 0 0 0 100%;
--colorText: device-cmyk(0 0 0 100%);
--red: device-cmyk(0 100% 100% 100%);
--orange: device-cmyk(0 50% 100% 0);
--yellow: device-cmyk(0 20% 100% 0);
--green: device-cmyk(100% 0 100% 0);
--cyan: device-cmyk(100% 0 0 0);
--blue: device-cmyk(100% 50% 0 0);
--hue01: device-cmyk(50% 50% 0 0);
--hue02: device-cmyk(0% 100% 0 0);
--colorFrontmost: device-cmyk(0 0 0 0);
--colorTextBolder: device-cmyk(0 0 0 100%);
--colorText: device-cmyk(var(--colorTextVal));
--colorTextOpac80: device-cmyk(var(--colorTextVal) / .8);
--colorTextOpac60: device-cmyk(var(--colorTextVal) / .6);
--colorTextOpac40: device-cmyk(var(--colorTextVal) / .4);
--colorTextOpac20: device-cmyk(var(--colorTextVal) / .2);
--colorTextOpac075: device-cmyk(var(--colorTextVal) / .075);
--colorBase: device-cmyk(var(--colorBaseVal));
--colorBaseOpac80: device-cmyk(var(--colorBaseVal) / .8);
--colorBaseOpac0: device-cmyk(var(--colorBaseVal) / 0);
*/
}
} /* end of @media print */
@media screen {
:where(html, .t-color.-forceLight:not([data-theme=light])) {
/*
*
Expand Down Expand Up @@ -76,6 +130,7 @@
--colorTextBolder: #fff;

}
} /* end of @media screen */
:where(
html,
.t-color[class*=-force]:not([data-theme])
Expand All @@ -99,26 +154,33 @@

/* --colorTextBolder: var(--colorText); */

/*** Set font and accent color
*/
color: var(--colorText);
accent-color: var(--colorAccent);
}
@media screen {
:where(
html,
.t-color[class*=-force]:not([data-theme])
){
/* Text color with different transparency/alpha values */
--colorText: rgb(var(--colorTextVal));
--colorTextOpac80: rgb(var(--colorTextVal) / .8);
--colorTextOpac60: rgb(var(--colorTextVal) / .6);
--colorTextOpac40: rgb(var(--colorTextVal) / .4);
--colorTextOpac20: rgb(var(--colorTextVal) / .2);
--colorTextOpac075: rgb(var(--colorTextVal) / .075);
/* TODO: Get rid of multiple opacities of text color variables with color-mix/relative-color syntax in 2025. (Once Safari 18 arrives.)
/* Base color with different transparency/alpha values */
--colorBase: rgb(var(--colorBaseVal));
--colorBaseOpac80: rgb(var(--colorBaseVal) / .8);
--colorBaseOpac0: rgb(var(--colorBaseVal) / 0);

--colorLinkDead: var(--red, #F00); /* Red as default dead link color */

/*** Set font and accent color
*/
color: var(--colorText);
accent-color: var(--colorAccent);
}

/* .t-color { */
/* :where( */
/* :is(&[data-theme=light],&.-forceLight:not([data-theme=light])) .-schemeLightAtelierCave), */
Expand Down Expand Up @@ -2255,3 +2317,4 @@
--hue02:rgb(180 147 104);
}
}
} /* end of @media screen */
16 changes: 12 additions & 4 deletions static/style/base/00-custom-reset.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
/* Heavily opinionated reset additions of pxl-theme */

/* Exception-based styling, opinionated */
*:not(html, body, div, header, nav, main, footer) {
/* Add animated scroll whenever redirected to hash link etc. */
@media (prefers-reduced-motion: no-preference) {
:root {
/* background: red !important; */
scroll-behavior: smooth;
}
}

/* Set maximum width to all elements with exception-based styling */
*:not(html, body, img, video, audio, object, iframe, div, header, nav, main, footer) {
max-inline-size: var(--maxTextWidth);
}

Expand Down Expand Up @@ -91,13 +99,13 @@ input:focus::-webkit-slider-thumb {
cursor: not-allowed;
}
/* Default Selection Styles */
::selection{
:root ::selection{
/* Inverted Color Selection Style */
/* background-color: var(--colorText); */
/* color: var(--colorBase); */

/* Light Color Selection Style */
background-color: var(--colorTextOpac20 );
background-color: var(--colorTextOpac20, initial);
color: inherit;
text-decoration: inherit;
/* color: var(--colorTextBolder); */
Expand Down
Loading

0 comments on commit 9c40bb4

Please sign in to comment.