1
0
Fork 0
isopod.cool/style.css

376 lines
7.3 KiB
CSS
Raw Normal View History

2023-01-09 21:30:45 +00:00
:root {
--stdfont: mono, monospace;
--bgcolor: #222222;
--fontcolor: gainsboro;
--linkcolor: #df1955;
--linkhover: #00ffd5;
make it work on phones tm - Rearranged navigation significantly - Navbar is now unlimited width on desktop - Navbar is now always on top of the screen, even on the landing page - Navbar has been replaced with hamburger menu on mobile - Significant styling alterations to look good on phones tm - Most of the credit goes to a certain meta tag. - (Appearance on desktop is mostly unchanged) - The background on mobile is now 100% image, but darkened to improve contrast - Table pages such as /links/ and /stats/ now rearrange on mobile: column a column a column b column b vs column a column b column a column a column b column b column a column b - font size on landing page scales with device width on tall displays - guestbook posts use CSS grid now - Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though - Updated /stats/ - Added some new stats - Updated CD collection size - Updated /about/uses/ - I now use Nextcloud News instead of Yarr - My phone runs Graphene - I use Fennec browser on mobile instead of standard Firefox - New background as the old one was horrible for contrast - Added Waxlimbs - For Science! to /about/music/ - The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site - Corrected various markup issues with the help of validator.w3.org/nu/ - Added alt text to a ton of images - todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered - /stuff/ remains unchanged. I'll get to it - Hopefully that's everything lol
2023-02-26 11:22:38 +00:00
--bodywidth: min(90vw, 43rem);
2023-01-09 21:30:45 +00:00
--stddropshadow: 4px 4px 8px black;
make it work on phones tm - Rearranged navigation significantly - Navbar is now unlimited width on desktop - Navbar is now always on top of the screen, even on the landing page - Navbar has been replaced with hamburger menu on mobile - Significant styling alterations to look good on phones tm - Most of the credit goes to a certain meta tag. - (Appearance on desktop is mostly unchanged) - The background on mobile is now 100% image, but darkened to improve contrast - Table pages such as /links/ and /stats/ now rearrange on mobile: column a column a column b column b vs column a column b column a column a column b column b column a column b - font size on landing page scales with device width on tall displays - guestbook posts use CSS grid now - Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though - Updated /stats/ - Added some new stats - Updated CD collection size - Updated /about/uses/ - I now use Nextcloud News instead of Yarr - My phone runs Graphene - I use Fennec browser on mobile instead of standard Firefox - New background as the old one was horrible for contrast - Added Waxlimbs - For Science! to /about/music/ - The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site - Corrected various markup issues with the help of validator.w3.org/nu/ - Added alt text to a ton of images - todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered - /stuff/ remains unchanged. I'll get to it - Hopefully that's everything lol
2023-02-26 11:22:38 +00:00
--navbarheight: 2.5rem;
2023-01-09 21:30:45 +00:00
}
html, body {
height: 100%;
}
2023-01-09 21:30:45 +00:00
body {
font-family: var(--stdfont);
background-color: var(--bgcolor);
color: var(--fontcolor);
2023-01-09 21:30:45 +00:00
max-width: var(--bodywidth);
margin: auto;
make it work on phones tm - Rearranged navigation significantly - Navbar is now unlimited width on desktop - Navbar is now always on top of the screen, even on the landing page - Navbar has been replaced with hamburger menu on mobile - Significant styling alterations to look good on phones tm - Most of the credit goes to a certain meta tag. - (Appearance on desktop is mostly unchanged) - The background on mobile is now 100% image, but darkened to improve contrast - Table pages such as /links/ and /stats/ now rearrange on mobile: column a column a column b column b vs column a column b column a column a column b column b column a column b - font size on landing page scales with device width on tall displays - guestbook posts use CSS grid now - Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though - Updated /stats/ - Added some new stats - Updated CD collection size - Updated /about/uses/ - I now use Nextcloud News instead of Yarr - My phone runs Graphene - I use Fennec browser on mobile instead of standard Firefox - New background as the old one was horrible for contrast - Added Waxlimbs - For Science! to /about/music/ - The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site - Corrected various markup issues with the help of validator.w3.org/nu/ - Added alt text to a ton of images - todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered - /stuff/ remains unchanged. I'll get to it - Hopefully that's everything lol
2023-02-26 11:22:38 +00:00
padding-top: var(--navbarheight);
padding-bottom: 1rem;
2023-01-09 21:30:45 +00:00
overflow-x: hidden;
text-shadow: 1px 1px 3px black;
make it work on phones tm - Rearranged navigation significantly - Navbar is now unlimited width on desktop - Navbar is now always on top of the screen, even on the landing page - Navbar has been replaced with hamburger menu on mobile - Significant styling alterations to look good on phones tm - Most of the credit goes to a certain meta tag. - (Appearance on desktop is mostly unchanged) - The background on mobile is now 100% image, but darkened to improve contrast - Table pages such as /links/ and /stats/ now rearrange on mobile: column a column a column b column b vs column a column b column a column a column b column b column a column b - font size on landing page scales with device width on tall displays - guestbook posts use CSS grid now - Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though - Updated /stats/ - Added some new stats - Updated CD collection size - Updated /about/uses/ - I now use Nextcloud News instead of Yarr - My phone runs Graphene - I use Fennec browser on mobile instead of standard Firefox - New background as the old one was horrible for contrast - Added Waxlimbs - For Science! to /about/music/ - The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site - Corrected various markup issues with the help of validator.w3.org/nu/ - Added alt text to a ton of images - todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered - /stuff/ remains unchanged. I'll get to it - Hopefully that's everything lol
2023-02-26 11:22:38 +00:00
box-sizing: border-box;
2023-01-09 21:30:45 +00:00
}
header {
width: 100%;
}
#leftsidebg, #rightsidebg {
position: fixed;
z-index: -10;
bottom: 0;
top: 0;
background-position: center;
background-size: cover;
--shadowsize: 3rem;
--distancefromcenter: calc((var(--bodywidth) / -2) - 2rem);
}
#leftsidebg {
right: calc(50% - var(--distancefromcenter));
left: 0;
box-shadow: calc(0rem - var(--shadowsize)) 0 var(--shadowsize) calc(0rem - var(--shadowsize)) black inset;
}
#rightsidebg {
right: 0;
left: calc(50% - var(--distancefromcenter));
box-shadow: var(--shadowsize) 0 var(--shadowsize) calc(0rem - var(--shadowsize)) black inset;
}
h1 {
font-size: 4.3em;
2023-01-09 21:30:45 +00:00
margin: 0;
padding: 0 3rem 3rem 3rem;
background-image: url(images/isopod.php);
background-repeat: no-repeat;
background-size: contain;
text-shadow: 2px 2px 5px black;
text-align: center;
font-weight: bold;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.85em;
2023-01-09 21:30:45 +00:00
}
h1 > a {
color: inherit;
text-decoration: inherit;
}
h1 > a:hover {
color: inherit;
}
h1 + h2#caption {
font-weight: 500;
margin-top: -4.2rem;
margin-right: -20rem;
text-align: center;
font-size: 1.2em;
2023-01-09 21:30:45 +00:00
z-index: 2;
text-shadow: 1px 1px 3px black;
}
h2#caption + * {
margin-top: 3rem;
}
h2#caption + nav {
margin-top: 0;
}
h2 + h5, h3 + h5 {
margin-top: -1.5rem;
}
nav {
display: flex;
flex-wrap: wrap;
max-width: 100%;
align-items: center;
justify-content: center;
make it work on phones tm - Rearranged navigation significantly - Navbar is now unlimited width on desktop - Navbar is now always on top of the screen, even on the landing page - Navbar has been replaced with hamburger menu on mobile - Significant styling alterations to look good on phones tm - Most of the credit goes to a certain meta tag. - (Appearance on desktop is mostly unchanged) - The background on mobile is now 100% image, but darkened to improve contrast - Table pages such as /links/ and /stats/ now rearrange on mobile: column a column a column b column b vs column a column b column a column a column b column b column a column b - font size on landing page scales with device width on tall displays - guestbook posts use CSS grid now - Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though - Updated /stats/ - Added some new stats - Updated CD collection size - Updated /about/uses/ - I now use Nextcloud News instead of Yarr - My phone runs Graphene - I use Fennec browser on mobile instead of standard Firefox - New background as the old one was horrible for contrast - Added Waxlimbs - For Science! to /about/music/ - The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site - Corrected various markup issues with the help of validator.w3.org/nu/ - Added alt text to a ton of images - todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered - /stuff/ remains unchanged. I'll get to it - Hopefully that's everything lol
2023-02-26 11:22:38 +00:00
margin-bottom: 1rem;
2023-01-09 21:30:45 +00:00
}
make it work on phones tm - Rearranged navigation significantly - Navbar is now unlimited width on desktop - Navbar is now always on top of the screen, even on the landing page - Navbar has been replaced with hamburger menu on mobile - Significant styling alterations to look good on phones tm - Most of the credit goes to a certain meta tag. - (Appearance on desktop is mostly unchanged) - The background on mobile is now 100% image, but darkened to improve contrast - Table pages such as /links/ and /stats/ now rearrange on mobile: column a column a column b column b vs column a column b column a column a column b column b column a column b - font size on landing page scales with device width on tall displays - guestbook posts use CSS grid now - Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though - Updated /stats/ - Added some new stats - Updated CD collection size - Updated /about/uses/ - I now use Nextcloud News instead of Yarr - My phone runs Graphene - I use Fennec browser on mobile instead of standard Firefox - New background as the old one was horrible for contrast - Added Waxlimbs - For Science! to /about/music/ - The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site - Corrected various markup issues with the help of validator.w3.org/nu/ - Added alt text to a ton of images - todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered - /stuff/ remains unchanged. I'll get to it - Hopefully that's everything lol
2023-02-26 11:22:38 +00:00
nav > * {
margin: 0;
padding: 0 .5em;
2023-01-09 21:30:45 +00:00
}
a {
color: var(--linkcolor);
2023-01-09 21:30:45 +00:00
}
a:hover {
color: var(--linkhover);
2023-01-09 21:30:45 +00:00
}
make it work on phones tm - Rearranged navigation significantly - Navbar is now unlimited width on desktop - Navbar is now always on top of the screen, even on the landing page - Navbar has been replaced with hamburger menu on mobile - Significant styling alterations to look good on phones tm - Most of the credit goes to a certain meta tag. - (Appearance on desktop is mostly unchanged) - The background on mobile is now 100% image, but darkened to improve contrast - Table pages such as /links/ and /stats/ now rearrange on mobile: column a column a column b column b vs column a column b column a column a column b column b column a column b - font size on landing page scales with device width on tall displays - guestbook posts use CSS grid now - Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though - Updated /stats/ - Added some new stats - Updated CD collection size - Updated /about/uses/ - I now use Nextcloud News instead of Yarr - My phone runs Graphene - I use Fennec browser on mobile instead of standard Firefox - New background as the old one was horrible for contrast - Added Waxlimbs - For Science! to /about/music/ - The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site - Corrected various markup issues with the help of validator.w3.org/nu/ - Added alt text to a ton of images - todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered - /stuff/ remains unchanged. I'll get to it - Hopefully that's everything lol
2023-02-26 11:22:38 +00:00
input#navtoggle {
display: none;
}
label[for='navtoggle'] {
display: none;
}
#main-nav {
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--navbarheight);
}
#main-nav > div {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
#main-nav > div > * {
padding: 0 1em;
}
2023-01-09 21:30:45 +00:00
.buttons {
text-align: center;
font-size: 0;
}
.buttons > * {
display: inline-block;
margin: 0.1rem;
font-size: 0;
}
.buttons > a > img {
transition-duration: .5s;
box-shadow: none;
display: inline-block;
transform: translate(0, 0);
}
.buttons > a > img:hover {
box-shadow: 2px 2px 4px black;
z-index: 5;
transform: translate(-2px, -2px);
}
.embed {
display: block;
width: 100%;
border: none;
}
img {
max-width: 100%;
}
summary:hover {
cursor: pointer;
}
[title] {
text-decoration: underline;
}
[title]:hover {
cursor: help;
}
code {
background-color: black;
padding: 0.15rem;
}
:is(main,body) > code {
2023-01-09 21:30:45 +00:00
display: block;
width: 75%;
2023-01-09 21:30:45 +00:00
margin: auto;
margin-bottom: 1rem;
2023-01-09 21:30:45 +00:00
padding: 0.7rem;
border: 1px solid #00ffd5;
}
make it work on phones tm - Rearranged navigation significantly - Navbar is now unlimited width on desktop - Navbar is now always on top of the screen, even on the landing page - Navbar has been replaced with hamburger menu on mobile - Significant styling alterations to look good on phones tm - Most of the credit goes to a certain meta tag. - (Appearance on desktop is mostly unchanged) - The background on mobile is now 100% image, but darkened to improve contrast - Table pages such as /links/ and /stats/ now rearrange on mobile: column a column a column b column b vs column a column b column a column a column b column b column a column b - font size on landing page scales with device width on tall displays - guestbook posts use CSS grid now - Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though - Updated /stats/ - Added some new stats - Updated CD collection size - Updated /about/uses/ - I now use Nextcloud News instead of Yarr - My phone runs Graphene - I use Fennec browser on mobile instead of standard Firefox - New background as the old one was horrible for contrast - Added Waxlimbs - For Science! to /about/music/ - The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site - Corrected various markup issues with the help of validator.w3.org/nu/ - Added alt text to a ton of images - todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered - /stuff/ remains unchanged. I'll get to it - Hopefully that's everything lol
2023-02-26 11:22:38 +00:00
:is(main,body) > code > span.codetitle {
margin: -0.7rem;
margin-top: -0.4rem;
margin-bottom: 0.7rem;
padding-bottom: 0.2rem;
font-weight: normal;
top: 0;
left: 0;
right: 0;
text-align: center;
border-bottom: 1px solid #00ffd5;
2023-02-26 20:09:13 +00:00
display: block;
}
2023-01-09 21:30:45 +00:00
tr:hover {
background-color: #2222227c;
}
table.highlightrows tr:nth-child(2n+1) {
background-color: #ffffff11;
}
table.highlightrows tr:nth-child(2n+1):hover {
background-color: #ffffff11;
}
blockquote {
padding: 1rem 1.5rem;
margin: 0;
border-left: 3px solid white;
background-color: #fff1;
margin-bottom: 1rem;
}
blockquote .attr {
display: block;
margin-left: 3rem;
margin-top: 1rem;
}
2023-01-09 21:30:45 +00:00
.CboxOpenBtn img {
opacity: 0;
transition-duration: 0.2s;
}
.CboxOpenBtn:hover img {
opacity: 1;
}
.emph {
font-style: italic;
}
.serif {
font-family: serif;
}
.flipped {
display: inline-block;
transform: rotate(180deg);
}
.rainbowtext {
animation-name: rainbow-text;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.blinking {
animation-name: opacityblink;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.minecraftsplash {
animation-name: growshrink;
animation-duration: 1.5s;
animation-iteration-count: infinite;
color: yellow;
display: inline-block;
}
@keyframes growshrink {
0%, 100% { transform: scale(1) rotate(-10deg); }
50% { transform: scale(1.2) rotate(-10deg); }
}
@keyframes opacityblink {
0%, 50% {opacity: 0;}
50.001%, 100% {opacity: 1;}
}
@keyframes rainbow-text {
100%,0%{color: rgb(255,0,0); text-shadow: 0 0 4px rgb(216, 1, 1);}
8%{color: rgb(255,127,0); text-shadow: 0 0 4px rgb(211, 105, 0);}
16%{color: rgb(255,255,0); text-shadow: 0 0 4px rgb(214, 214, 0);}
25%{color: rgb(127,255,0); text-shadow: 0 0 4px rgb(105, 211, 0);}
33%{color: rgb(0,255,0); text-shadow: 0 0 4px rgb(0, 204, 0);}
41%{color: rgb(0,255,127); text-shadow: 0 0 4px rgb(0, 209, 105);}
50%{color: rgb(0,255,255); text-shadow: 0 0 4px rgb(0, 202, 202);}
58%{color: rgb(0,127,255); text-shadow: 0 0 4px rgb(0, 103, 206);}
66%{color: rgb(0,0,255); text-shadow: 0 0 4px rgb(0, 0, 206);}
75%{color: rgb(127,0,255); text-shadow: 0 0 4px rgb(103, 0, 206);}
83%{color: rgb(255,0,255); text-shadow: 0 0 4px rgb(211, 0, 211);}
91%{color: rgb(255,0,127); text-shadow: 0 0 4px rgb(211, 0, 105);}
}
@media only screen and (hover: none) {
make it work on phones tm - Rearranged navigation significantly - Navbar is now unlimited width on desktop - Navbar is now always on top of the screen, even on the landing page - Navbar has been replaced with hamburger menu on mobile - Significant styling alterations to look good on phones tm - Most of the credit goes to a certain meta tag. - (Appearance on desktop is mostly unchanged) - The background on mobile is now 100% image, but darkened to improve contrast - Table pages such as /links/ and /stats/ now rearrange on mobile: column a column a column b column b vs column a column b column a column a column b column b column a column b - font size on landing page scales with device width on tall displays - guestbook posts use CSS grid now - Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though - Updated /stats/ - Added some new stats - Updated CD collection size - Updated /about/uses/ - I now use Nextcloud News instead of Yarr - My phone runs Graphene - I use Fennec browser on mobile instead of standard Firefox - New background as the old one was horrible for contrast - Added Waxlimbs - For Science! to /about/music/ - The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site - Corrected various markup issues with the help of validator.w3.org/nu/ - Added alt text to a ton of images - todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered - /stuff/ remains unchanged. I'll get to it - Hopefully that's everything lol
2023-02-26 11:22:38 +00:00
:root {
font-size: 1rem;
}
h1 {
make it work on phones tm - Rearranged navigation significantly - Navbar is now unlimited width on desktop - Navbar is now always on top of the screen, even on the landing page - Navbar has been replaced with hamburger menu on mobile - Significant styling alterations to look good on phones tm - Most of the credit goes to a certain meta tag. - (Appearance on desktop is mostly unchanged) - The background on mobile is now 100% image, but darkened to improve contrast - Table pages such as /links/ and /stats/ now rearrange on mobile: column a column a column b column b vs column a column b column a column a column b column b column a column b - font size on landing page scales with device width on tall displays - guestbook posts use CSS grid now - Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though - Updated /stats/ - Added some new stats - Updated CD collection size - Updated /about/uses/ - I now use Nextcloud News instead of Yarr - My phone runs Graphene - I use Fennec browser on mobile instead of standard Firefox - New background as the old one was horrible for contrast - Added Waxlimbs - For Science! to /about/music/ - The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site - Corrected various markup issues with the help of validator.w3.org/nu/ - Added alt text to a ton of images - todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered - /stuff/ remains unchanged. I'll get to it - Hopefully that's everything lol
2023-02-26 11:22:38 +00:00
font-size: 4em;
padding-left: unset;
padding-right: unset;
}
h1 + h2#caption {
margin-right: unset;
margin-top: -3.5rem;
}
:is(main,body) > code {
border-width: .1rem;
}
make it work on phones tm - Rearranged navigation significantly - Navbar is now unlimited width on desktop - Navbar is now always on top of the screen, even on the landing page - Navbar has been replaced with hamburger menu on mobile - Significant styling alterations to look good on phones tm - Most of the credit goes to a certain meta tag. - (Appearance on desktop is mostly unchanged) - The background on mobile is now 100% image, but darkened to improve contrast - Table pages such as /links/ and /stats/ now rearrange on mobile: column a column a column b column b vs column a column b column a column a column b column b column a column b - font size on landing page scales with device width on tall displays - guestbook posts use CSS grid now - Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though - Updated /stats/ - Added some new stats - Updated CD collection size - Updated /about/uses/ - I now use Nextcloud News instead of Yarr - My phone runs Graphene - I use Fennec browser on mobile instead of standard Firefox - New background as the old one was horrible for contrast - Added Waxlimbs - For Science! to /about/music/ - The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site - Corrected various markup issues with the help of validator.w3.org/nu/ - Added alt text to a ton of images - todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered - /stuff/ remains unchanged. I'll get to it - Hopefully that's everything lol
2023-02-26 11:22:38 +00:00
@media (max-width: 43rem) {
.buttons > * {
width: 24%;
}
.buttons > a > img {
width: 100%;
}
}
code {
font-size: 0.8em;
}
#leftsidebg, #rightsidebg {
top: 0; left: 0; right: 0; bottom: 0;
make it work on phones tm - Rearranged navigation significantly - Navbar is now unlimited width on desktop - Navbar is now always on top of the screen, even on the landing page - Navbar has been replaced with hamburger menu on mobile - Significant styling alterations to look good on phones tm - Most of the credit goes to a certain meta tag. - (Appearance on desktop is mostly unchanged) - The background on mobile is now 100% image, but darkened to improve contrast - Table pages such as /links/ and /stats/ now rearrange on mobile: column a column a column b column b vs column a column b column a column a column b column b column a column b - font size on landing page scales with device width on tall displays - guestbook posts use CSS grid now - Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though - Updated /stats/ - Added some new stats - Updated CD collection size - Updated /about/uses/ - I now use Nextcloud News instead of Yarr - My phone runs Graphene - I use Fennec browser on mobile instead of standard Firefox - New background as the old one was horrible for contrast - Added Waxlimbs - For Science! to /about/music/ - The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site - Corrected various markup issues with the help of validator.w3.org/nu/ - Added alt text to a ton of images - todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered - /stuff/ remains unchanged. I'll get to it - Hopefully that's everything lol
2023-02-26 11:22:38 +00:00
box-shadow: 100vw 0 0 #000000bb inset;
}
tr:hover {
background-color: initial;
}
make it work on phones tm - Rearranged navigation significantly - Navbar is now unlimited width on desktop - Navbar is now always on top of the screen, even on the landing page - Navbar has been replaced with hamburger menu on mobile - Significant styling alterations to look good on phones tm - Most of the credit goes to a certain meta tag. - (Appearance on desktop is mostly unchanged) - The background on mobile is now 100% image, but darkened to improve contrast - Table pages such as /links/ and /stats/ now rearrange on mobile: column a column a column b column b vs column a column b column a column a column b column b column a column b - font size on landing page scales with device width on tall displays - guestbook posts use CSS grid now - Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though - Updated /stats/ - Added some new stats - Updated CD collection size - Updated /about/uses/ - I now use Nextcloud News instead of Yarr - My phone runs Graphene - I use Fennec browser on mobile instead of standard Firefox - New background as the old one was horrible for contrast - Added Waxlimbs - For Science! to /about/music/ - The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site - Corrected various markup issues with the help of validator.w3.org/nu/ - Added alt text to a ton of images - todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered - /stuff/ remains unchanged. I'll get to it - Hopefully that's everything lol
2023-02-26 11:22:38 +00:00
td {
display: block;
}
#main-nav {
position: fixed;
left: 0;
right: 0;
top: calc(-.2rem - (3rem * var(--rowcount)));
z-index: 75;
background-color: var(--bgcolor);
make it work on phones tm - Rearranged navigation significantly - Navbar is now unlimited width on desktop - Navbar is now always on top of the screen, even on the landing page - Navbar has been replaced with hamburger menu on mobile - Significant styling alterations to look good on phones tm - Most of the credit goes to a certain meta tag. - (Appearance on desktop is mostly unchanged) - The background on mobile is now 100% image, but darkened to improve contrast - Table pages such as /links/ and /stats/ now rearrange on mobile: column a column a column b column b vs column a column b column a column a column b column b column a column b - font size on landing page scales with device width on tall displays - guestbook posts use CSS grid now - Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though - Updated /stats/ - Added some new stats - Updated CD collection size - Updated /about/uses/ - I now use Nextcloud News instead of Yarr - My phone runs Graphene - I use Fennec browser on mobile instead of standard Firefox - New background as the old one was horrible for contrast - Added Waxlimbs - For Science! to /about/music/ - The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site - Corrected various markup issues with the help of validator.w3.org/nu/ - Added alt text to a ton of images - todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered - /stuff/ remains unchanged. I'll get to it - Hopefully that's everything lol
2023-02-26 11:22:38 +00:00
transition-duration: .5s;
box-shadow: none;
height: fit-content;
}
#main-nav > * {
height: 3rem;
width: 100%;
border-bottom: 1px solid #ffffff22;
}
#main-nav > *:last-child {
border-bottom: none;
}
label[for='navtoggle'] {
display: block;
z-index: 100;
filter: drop-shadow(2px 2px 6px black);
position: fixed;
top: 0;
left: 0;
padding: .5em;
}
#navtoggle:checked ~ #main-nav {
top: 0;
box-shadow: 0 0 5rem 1rem black;
}
#navtoggle ~ label[for='navtoggle'] > svg {
transition-duration: .5s;
}
#navtoggle:checked ~ label[for='navtoggle'] > svg {
transform: rotate(90deg);
}
#greenhouselink {
display: none;
}
@media (prefers-contrast: more) {
#leftsidebg, #rightsidebg {
display: none;
}
}
}
@media (prefers-contrast: more) {
body {
color: white;
background-color:#111111;
}
#leftsidebg, #rightsidebg {
display: none;
/*box-shadow: 100vw 0 0 #000000ee inset;*/
}
a {
color: #00ffd5;
}
2023-01-09 21:30:45 +00:00
}