diff --git a/css/style.css b/css/style.css index 17f597f..ff13a8f 100644 --- a/css/style.css +++ b/css/style.css @@ -14,7 +14,7 @@ body { margin: auto; - padding: 1em; + padding: .5em; max-width: 1024px; font-family: 'Liberation Monospace', 'Courier New', monospace, sans-serif; color: #fb5; @@ -37,18 +37,6 @@ hr { border-color: #fb5; } -.text-center { - text-align: center -} - -.advisory { - background: #fc4; - color: #222; - font-weight: bold; - padding: 1em; - border-radius: 0.25em; -} - h1 { font-size:1.6rem; text-transform: uppercase; @@ -57,206 +45,22 @@ h1 { padding-top:.5rem; } -.grid { - border-collapse: collapse; -} -.col { - border: 6px double #fb5; - padding: 1em; - flex-grow: 1; -} - -/* THEGOODS */ -#fancyboi::before { - content: "$ "; -} - -@media (prefers-reduced-motion: no-preference) { - @keyframes flash { - 50% { opacity: 0; } - } - - @keyframes reveal { - from { max-width: 2em; } /* Width of ::before */ - to { max-width: 100%; } - } - - #fancyboi { - overflow: hidden; - white-space: nowrap; - animation: reveal 4s linear; - text-overflow: "█"; - } - - #fancyboi::after { - content: "█"; - animation: flash 0.5s step-end infinite; - position: relative; - top: -2px; - margin-left: 3px; - } -} -/* SDOOGEHT */ - -.sourceCode { - color:#008000; -} - code > span.fl { color: #008000; } - /* Style the navbar */ -#navbar { - overflow: hidden; - background-color: #fb5; - color: #222; - z-index: 99; - position: relative; - top: 0; - left: 0; - width: 100%; - border-radius: 0.25em; -} - -#navbar a:hover { - background-color: #f93; -} - -/* Navbar linkss */ -#navbar a { - float: left; - display: block; - color: black; - text-align: center; - padding: 14px; - text-decoration: none; -} - -/* RSS Icon Styles */ -.rss-icon { - float: right; - margin-top:5px; -} - -/* Page content */ -.user-list { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); -} - -.user-list a { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: 10em; -} - - .user-list a:before { - content:"~"; - } - - [data-op="5"] { opacity:5%; } - [data-op="10"] { opacity:10%; } - [data-op="15"] { opacity:15%; } - [data-op="20"] { opacity:20%; } - [data-op="25"] { opacity:25%; } - [data-op="30"] { opacity:30%; } - [data-op="35"] { opacity:35%; } - [data-op="40"] { opacity:40%; } - [data-op="45"] { opacity:45%; } - [data-op="50"] { opacity:50%; } - [data-op="55"] { opacity:55%; } - [data-op="60"] { opacity:60%; } - [data-op="65"] { opacity:65%; } - [data-op="70"] { opacity:70%; } - [data-op="75"] { opacity:75%; } - [data-op="80"] { opacity:80%; } - [data-op="85"] { opacity:85%; } - [data-op="90"] { opacity:90%; } - [data-op="95"] { opacity:95%; } - [data-op="100"] { opacity:100%; } - - .user-list a:hover { - text-decoration:underline; - color:#f70; - } - -.user-list b { - background-color: #fb5; - color:#000; -} - input[type="text"], textarea { background-color: #333; color: darkorange; } -div.alert-warning { - background-color: darkred; -} -div.alert-success { - background-color: darkgreen; -} - -.notice-message { - background-color: #f93; - color: #222; - font-weight: bold; - padding: 0.75em; - border-radius: 0.25em; - margin: 1em 0; - text-align: center; - border: 2px solid #fb5; - box-shadow: 0 0 10px rgba(255, 187, 85, 0.5); -} - blockquote { border-left: 2px solid #fb5; background-color: rgba(255, 187, 85, 5%); padding: 0.5em; } -@media (min-width: 768px) { - .row { - display: flex; - flex-wrap: nowrap; - flex-direction: row-reverse; - } -} - -@media (max-width: 768px) { - td { - display: block; - } -} - -/* Ensure the user-list displays items in a single column */ -.single-column { - display: block; -} -.single-column li { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Style for the article content */ -.article-headers { - background-color: #333; - color: #fb5; - padding: 1em; - border: 1px solid #fb5; - border-radius: 0.25em; - margin-bottom: 1em; -} - -.article-headers p { - margin: 0.5em 0; -} - pre { background-color: #333; color: #fb5; @@ -265,109 +69,3 @@ pre { border-radius: 0.25em; } -/* Style for error messages */ -.alert-warning { - background-color: darkred; - color: #fb5; - padding: 1em; - border-radius: 0.25em; - font-weight: bold; -} -/* Ensure the user-list displays items in a single column */ -.single-column { - display: block; -} -.single-column li { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Tree structure styles */ -.tree, .tree ul { - padding: 0; - list-style: none; - position: relative; -} - -.tree ul { - margin-left: 1em; /* indentation for nested lists */ -} - -.tree ul:before { - content: ""; - display: block; - width: 0; - position: absolute; - top: 0; - bottom: 0; - left: 0; - border-left: 1px solid #fb5; -} - -.tree li { - margin: 0; - padding: 0.5em 0 0.5em 1em; /* space between items */ - position: relative; -} - -.tree li:before { - content: ""; - display: inline-block; - width: 1em; /* horizontal space for the branch line */ - height: 0; - border-top: 1px solid #fb5; - position: absolute; - top: 1.2em; /* adjust as needed */ - left: 0; -} - -.tree li:after { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: -0.5em; /* adjust to align with the branch */ - border-left: 1px solid #fb5; -} - -.tree li:last-child:after { - display: none; /* hide the line for the last child */ -} - -/* Style for timestamps */ -.timestamp { - color: #999; - font-size: 0.9em; - margin-left: 0.5em; -} -/* Highlighted item */ -.highlighted { - background-color: #333; /* Dark background to fit the page colorscheme */ - border: 1px solid #fb5; /* Matching border color */ - border-radius: 0.25em; /* Slight border radius for better appearance */ - padding: 0.5em; /* Padding for better readability */ -} - -#active-users { - margin-top: 20px; - display: flex; - align-items: center; - gap:10px; -} - - #active-users h2 { - flex-shrink:0; - font-size: 1.25rem; - } - - #active-users a { - color: #fb5; - text-decoration: none; - } - - #active-users a:hover { - color: #f70; - } -