Lots of theming, switch to tables, 1.0 theme (kind of broken)

FossilOrigin-Name: 85a54793932f8c64100306d0256946770b89396afb9f603bb11de8398a1c4337
This commit is contained in:
me@ow.nekobit.net 2022-03-01 20:36:20 +00:00
parent 82795daf9c
commit 2e7d660001
9 changed files with 262 additions and 138 deletions

View file

@ -1,43 +1,32 @@
/* Basic elements */
body
{
font-family: Arial, Helvetica, sans-serif;
background-color: #f6f6f6;
padding: 0;
margin: 0;
}
/* Divs and wrappers */
#display-wrapper
{
display: flex;
justify-content: center;
}
.center
{
margin-left: auto;
margin-right: auto;
}
.center-text
{
text-align: center;
}
.bold-text
{
font-weight: bold;
}
#display
{
display: block;
overflow: hidden;
width: 1000px;
width: 100%;
background-color: #ffffff;
}
#navbar
{
display: flex;
align-items: center;
background-color: #fcfcfc;
display: block;
padding: 0 5px;
border-bottom: 2px solid #cacaca;
text-align: center;
align-items: center;
}
#navbar img
@ -48,13 +37,18 @@ body
#navbar span.info
{
display: inline-block;
margin-left: 15px;
color: #202020;
font-variant: small-caps;
margin-top: 10px;
font-size: 28px;
margin-right: 30px;
}
#navbar-right
{
display: inline-block;
padding-right: 8px;
flex: 1;
flex-direction: row;
@ -76,23 +70,27 @@ body
align-items: flex-end;
}
div#content
{
display: flex;
}
div#content main
{
flex: 1;
position: relative;
min-width: 0;
min-height: 600px;
left: 180px;
}
div#content aside
{
display: block;
background-color: #fcfcfc;
}
#leftbar
{
position: absolute;
left: 0;
top: 50px;
width: 180px;
max-width: 180px;
min-width: 180px;
border-right: 1px solid #cacaca;
}
#leftbar ul
@ -102,56 +100,34 @@ div#content aside
}
#leftbar ul li
{
list-style-type: none;
}
/*************************************************
* LISTS *
*************************************************/
ul.large-list
{
width: 500px;
border-radius: 15px;
background-color: #f8f8f8;
border: 1px solid #cacaca;
padding: 0;
overflow: hidden;
}
ul.large-list li
{
list-style-type: none;
margin: 0;
}
ul.large-list li a
{
display: block;
padding: 15px;
list-style-type: none;
}
/*************************************************
* BUTTONS *
*************************************************/
input[type=button], input[type=submit], .sidebarbtn, .btn
{
background: #fafafa;
background-color: #f7f7f7;
color: #000;
text-decoration: none;
}
input[type=button]:hover, input[type=submit]:hover, .sidebarbtn:hover, .btn:hover
{
background: #eaeaea;
{
background-color: #aa0000;
border-color: #400000;
color: #fff;
cursor: pointer;
}
input[type=button]:active, input[type=submit]:active, .sidebarbtn:active, .btn:active
{
background: #eaeaea;
{
background-color: #600000;
border-color: #400000;
color: #fff;
cursor: pointer;
}
@ -161,10 +137,24 @@ input[type=button], input[type=submit]
padding: 3px 15px;
}
/* Make first button glue to header */
#leftbar ul:first-child .sidebarbtn
{
border-top: 0;
}
.sidebarbtn
{
border-bottom: 1px solid #dadada;
display: block;
padding: 4px;
padding: 8px;
text-align: center;
border-right: 1px solid #dadada;
}
ul li:first-child a.sidebarbtn
{
border-top: 1px solid #dadada;
}
#rightbar
@ -172,12 +162,6 @@ input[type=button], input[type=submit]
border-left: 1px solid #cacaca;
}
ul li:not(:last-child) .split,
.status:not(:last-child)
{
border-bottom: 1px solid #cacaca;
}
/***************************
* Statuses *
**************************/
@ -185,6 +169,7 @@ ul li:not(:last-child) .split,
{
display: flex;
margin: 7px;
border-bottom: 1px solid #cacaca !important;
}
.status .profile-picture
@ -204,7 +189,7 @@ ul li:not(:last-child) .split,
{
flex: 1;
display: flex;
margin: 0 5px 5px;
margin: 0 5px 0px;
min-width: 0;
flex-direction: column;
}
@ -247,10 +232,25 @@ ul li:not(:last-child) .split,
.status-interact
{
margin: 8px 0 2px 0;
margin: 8px 0 0 0;
display: flex;
}
.status-interact ul
{
display: flex;
padding: 0;
margin: 0;
}
.status-interact ul li
{
display: inline-block;
margin: 0;
padding: 0;
list-style-type: none;
}
/***************************
* Element Grouping *
@ -272,9 +272,43 @@ ul li:not(:last-child) .split,
height: 26px;
}
.group-left
{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.group-right
{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
/*************************
* Config *
************************/
#config-page
{
padding: 0 12px;
}
#config-page h1
{
padding-left: 12px;
padding-bottom: 6px;
border-bottom: 1px solid #cacaca;
}
#config-page h3
{
margin-left: 15px;
}
#config-page ul
{
list-style-type: none;
padding-left: 15px;
}
/**********************
@ -385,10 +419,7 @@ ul li:not(:last-child) .split,
.statusbox textarea
{
background-color: #fff;
display: block;
margin-bottom: 5px;
z-index: 3;
}
.statusbox .statusfooter
@ -406,23 +437,42 @@ ul li:not(:last-child) .split,
/* Special cases */
.nobutton
{
background: #eaeaea !important;
display: block !important;
background: none !important;
background-color: transparent !important;
color: #aa0000 !important;
padding: 0 7px !important;
margin: 0 5px;
padding: 4px 9px !important;
margin: 0 !important;
text-decoration: none;
cursor: pointer !important;
outline: inherit !important;
font-size: 14px;
border: 1px solid #dadada !important;
border: 0 !important;
}
.status-interact ul li:not(:last-child) .nobutton
{
border-right: 1px solid #cacaca !important;
}
.status-interact .nobutton-active,
.nobutton:hover
.nobutton:hover,
.nobutton:active,
.nobutton:focus
{
background-color: #aa0000 !important;
color: #eaeaea !important;
border: 1px solid #770000 !important;
background: linear-gradient(#fff, #aa3333, #aa2222, #aa0000) !important;
border: 0 !important;
border-right: 1px solid #cacaca !important;
color: #fff !important;
text-shadow: 0px 0px 5px #cc4444cc !important;
}
/* Emoji reacts */
.emoji-react-box
{
border-radius: 4px;
border: 1px solid #cacaca;
}
.form-group

109
dist/ratfe20.css vendored
View file

@ -1,18 +1,14 @@
body
{
font-family: Arial, Helvetica, sans-serif;
background-color: #f6f6f6;
}
/* Divs and wrappers */
#display-wrapper
{
display: flex;
justify-content: center;
}
#display
{
margin-left: auto;
margin-right: auto;
overflow: hidden;
background-color: #ffffff;
width: 1000px;
@ -67,19 +63,26 @@ body
align-items: flex-end;
}
div#content
#main
{
display: flex;
}
div#content main
{
flex: 1;
min-width: 0;
width: 640px;
max-width: 640px;
min-width: 640px;
overflow: hidden;
min-height: 600px;
}
div#content aside
#content, tr, td
{
border-collapse: collapse !important;
}
td
{
vertical-align: top;
}
.sidebar
{
width: 180px;
max-width: 180px;
@ -470,3 +473,77 @@ ul li:first-child a.sidebarbtn
border-radius: 4px;
border: 1px solid #cacaca;
}
.form-group
{
padding: 5px;
display: block;
}
/* Simple page layout */
.simple-page
{
padding: 0 12px;
}
.simple-page h1
{
padding-left: 12px;
padding-bottom: 6px;
border-bottom: 1px solid #cacaca;
}
.simple-page h3
{
margin-left: 15px;
}
.simple-page ul
{
list-style-type: none;
padding-left: 15px;
}
/* Attachments */
.attachments img
{
min-width: 100px;
max-width: 300px;
min-height: 100px;
max-height: 300px;
}
.attachments
{
margin: 10px 0 3px 0;
}
.zoom
{
transition: transform .1s;
transition-timing-function: cubic-bezier(0, 1, 1, 1);
}
.zoom:hover
{
transform: scaleX(1.8) scaleY(1.8);
}
.statusbox textarea
{
border: 1px solid #cacaca;
}
/* Emoji reacts */
.emoji-reactions
{
display: flex;
margin-top: 8px;
}
.emoji-react-box
{
padding: 3px 7px;
margin: 0 4px;
}

View file

@ -72,7 +72,8 @@ void render_base_page(struct base_page* page)
perror("malloc");
return;
}
fputs("Content-type: text/html\r\n", stdout);
printf("Content-Length: %d\r\n\r\n", len + 1);
puts(data);

View file

@ -67,8 +67,9 @@ void content_login(mastodont_t* api, char** data, size_t data_size)
}
else {
// TODO checking, also ^ returns non-zero
printf("Set-Cookie: access_token=%s; HttpOnly; SameSite=Strict;\r\n", token.access_token);
printf("Set-Cookie: logged_in=t; SameSite=Strict\r\n");
fputs("Status: 302 Found\r\n", stdout);
printf("Set-Cookie: access_token=%s; Path=/; Max-Age=31536000\r\n", token.access_token);
printf("Set-Cookie: logged_in=t; Path=/; Max-Age=31536000\r\n");
printf("Location: %s/\r\n", config_url_prefix);
}
}

View file

@ -36,7 +36,6 @@
int main(void)
{
// Content type is always HTML
fputs("Content-type: text/html\r\n", stdout);
// Global init
mastodont_global_curl_init();

View file

@ -56,7 +56,7 @@ int try_post_status(mastodont_t* api)
.status = post.content,
.visibility = "public",
};
mastodont_create_status(api, &args, &storage);
// TODO cleanup when errors are properly implemented
@ -156,6 +156,7 @@ void status_interact(mastodont_t* api, char** data, size_t data_size)
try_interact_status(api, data[0]);
fputs("Status: 302 Found\r\n", stdout);
printf("Location: %s\r\n\r\nRedirecting...",
referer ? referer : "/");
}

View file

@ -26,6 +26,7 @@
<select name="theme" id="cfgthemevar">
<option value="ratfe20">RatFE 2.0 - Default, simple theme</option>
<option value="ratfe30">RatFE 3.0 - Flat, modern theme</option>
<option value="ratfe10">RatFE Minimal - For netsurf, old browsers, minimal styling</option>
</select>
</li>
</ul>

View file

@ -1,3 +1,4 @@
<div class="emoji-react-box btn">
<span class="emoji">%s</span> %u
</div>

View file

@ -4,55 +4,48 @@
<meta charset="utf-8">
<title>%s</title>
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="stylesheet" type="text/css" href="/skel.css">
<link rel="stylesheet" type="text/css" href="/%s.css">
<!-- <link rel="stylesheet" type="text/css" href="../dist/ratfe.css"> -->
</head>
<body>
<div id="display-wrapper">
<div id="display">
<header id="navbar">
<a href="%s/"><img src="/ratfe_logo.png" height="42"></a>
<span class="info">%s</span>
<div id="navbar-right" class="alignend">
%s
<!-- Searchbox -->
<form action="%s/search" method="get">
<input type="textbox" class="group group-left group-inputbox" placeholder="%s" id="searchbox" name="q"><!-- i hate HTML
--><input type="submit" class="group group-right" value="%s">
</form>
</div>
</header>
<div id="content">
<!-- Navigation -->
<aside id="leftbar">
<div id="display">
<header id="navbar">
<a href="%s/"><img src="/ratfe_logo.png" height="42"></a>
<span class="info">%s</span>
<div id="navbar-right" class="alignend">
%s
<!-- Searchbox -->
<form action="%s/search" method="get">
<input type="textbox" class="group group-left group-inputbox" placeholder="%s" id="searchbox" name="q"><!-- i hate HTML
--><input type="submit" class="group group-right" value="%s">
</form>
</div>
</header>
<table id="content">
<!-- Navigation -->
<tr>
<td id="leftbar" class="sidebar">
<ul>
<li><a class="sidebarbtn" href="%s/">%s</a></li>
<li><a class="sidebarbtn" href="%s/local/">%s</a></li>
<li><a class="sidebarbtn" href="%s/federated/">%s</a></li>
</ul>
<ul>
<li><a class="sidebarbtn" href="%s/notifications">%s</a></li>
<li><a class="sidebarbtn" href="%s/lists">%s</a></li>
<li><a class="sidebarbtn" href="%s/direct">%s</a></li>
<li><a class="sidebarbtn" href="%s/direct">%s</a></li> <li><a class="sidebarbtn" href="%s/config">%s</a></li>
</ul>
<ul>
<li><a class="sidebarbtn" href="%s/config">%s</a></li>
</ul>
</aside>
<!-- Display for posts -->
<main>
</td>
<!-- Display for posts -->
<td id="main">
%s
</main>
</td>
<!-- Notifications and such -->
<aside id="rightbar">
</aside>
</div>
</div>
<td id="rightbar" class="sidebar">
Sidebar
</td>
</tr>
</table>
</div>
</body>
</html>