diff --git a/dist/skel.css b/dist/ratfe10.css similarity index 73% rename from dist/skel.css rename to dist/ratfe10.css index 1b70219..d0c14b0 100644 --- a/dist/skel.css +++ b/dist/ratfe10.css @@ -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 diff --git a/dist/ratfe20.css b/dist/ratfe20.css index 2d5782d..23aeb30 100644 --- a/dist/ratfe20.css +++ b/dist/ratfe20.css @@ -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; +} + diff --git a/src/base_page.c b/src/base_page.c index 70bca65..c0989ca 100644 --- a/src/base_page.c +++ b/src/base_page.c @@ -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); diff --git a/src/login.c b/src/login.c index 4fa4cab..fe835f3 100644 --- a/src/login.c +++ b/src/login.c @@ -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); } } diff --git a/src/main.c b/src/main.c index 05d297e..6c5360f 100644 --- a/src/main.c +++ b/src/main.c @@ -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(); diff --git a/src/status.c b/src/status.c index 2ffa017..f0fc3ec 100644 --- a/src/status.c +++ b/src/status.c @@ -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 : "/"); } diff --git a/static/config.html b/static/config.html index 25bee32..d7f017f 100644 --- a/static/config.html +++ b/static/config.html @@ -26,6 +26,7 @@ diff --git a/static/emoji_reaction.html b/static/emoji_reaction.html index a5ef493..5159a4c 100644 --- a/static/emoji_reaction.html +++ b/static/emoji_reaction.html @@ -1,3 +1,4 @@ +