Skip to content

Instantly share code, notes, and snippets.

@punkish
Last active Mar 14, 2020
Embed
What would you like to do?
/* uglyduck.ca */
*{box-sizing:border-box;}body{font:16px/1.5 "Georgia",serif;margin:0 auto;max-width:66ch;padding:1rem;}h1,h2,h3,h4,h5,h6{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;margin:2.5rem 0 1rem;}ul li, ol li{margin-top:0.5rem;}a,a:visited{color:black;}a:hover{color:dodgerblue;}img{height:auto;max-width:100%;}pre{border: 1px solid lightgrey;overflow:auto;}code{color:orangered;display:inline-block;}pre code{padding:1rem;}blockquote{border-left:5px solid lightgrey;font-size:120%;font-style:italic;margin:2rem 0;padding:1rem;}table{border-collapse:collapse;margin:2rem 0;text-align:left;width:100%;}tr{border-bottom:1px solid lightgrey;}th,td{padding:0.5rem;}hr{background:lightgrey;border:0;height:1px;margin:2rem 0;}
/* mods to uglyduck */
body {font: 21px}
blockquote {font-size: 100%; padding: 0; padding-left: 1rem;}
h1.title {margin-bottom: -3px; font-family: serif; font-size: 180%;}
a { color: blue !important; }
/********* barebones for buttons and form fields *********/
html {
/* default theme: light background, dark text, blue accent */
/* white */
--theme-hue: 0;
/* blue */
--accent-hue: 194;
/* #555555 button color; button:hover border */
--text-color-softer: hsl(var(--theme-hue), 0%, 33%);
/* #22222 text color; button:hover:focus color */
--text-color-normal: hsl(var(--theme-hue), 0%, 13%);
/* #bbbbbb button border */
--border-color: hsl(var(--theme-hue), 0%, 73%);
/* transparent body background; textarea,select background */
--background-color: white;
/* #d1d1d1 textarea,select,code,td,hr border */
--border-color-softer: hsl(var(--theme-hue), 0%, 82%);
/* blue */
--accent-hue: 194;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
height: 38px;
padding: 0 30px;
color: var(--text-color-softer);
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid var(--border-color);
cursor: pointer;
box-sizing: border-box; }
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
color: var(--text-color-normal);
border-color: var(--text-color-softer);
outline: 0; }
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
height: 38px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: var(--background-color);
border: 1px solid var(--border-color-softer);
border-radius: 4px;
box-shadow: none;
box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="button"],
input[type="submit"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid var(--accent-color);
outline: 0; }
/**********************************/
/* tweaks to sqlite forum classes ***************/
.title {
text-align: center;
float: unset;
line-height: 1rem;
}
.title h1 {
display:block;
color: darkblue;
}
.title h1:after {
content: " ";
color: #777;
font-weight: normal;
}
.status {
font-family: sans-serif;
position: absolute;
top: 0;
right: 25px;
}
.mainmenu {
border: none;
border-top: 1px solid;
border-bottom: 1px solid;
border-radius: 0;
background: unset !important;
}
.content p {
line-height: 2rem;
}
.forumHierRoot {
padding: 2rem;
}
div.forumHier, div.forumTime {
border: none;
border-left: 1px solid grey;
border-bottom: 1px solid grey;
border-radius: 0 10px;
padding: 10px;
background-color: #f5f5f5;
}
pre {
padding: 1rem;
background-color: lightgrey;
font-family: menlo, consolas, monospace;
font-size: 12px;
}
/* Spacing for mobile */
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 900px) {
}
/* Spacing for desktop */
@media screen and (min-width: 1024px) {
body { width: 75%; }
}
/* Special declarations for narrow desktop or wide mobile */
@media screen and (min-width: 1200px) {
body { width: 50%; }
}
@punkish
Copy link
Author

punkish commented Mar 13, 2020

Firefox instructions:

  1. Install Man in the Middle add-on https://github.com/dangkyokhoang/Man-in-the-Middle

  2. Add a content script (the last item in MITM settings)

/www\.sqlite\.org\/forum\/forummain.*/
/www\.sqlite\.org\/forum\/forumpost.*/
  • enable the rule

That's it.

Safari instructions:

  1. Buy Cascadea and install it
  2. Create a rule
  3. Add the css

That's it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment