Skip to content
This repository was archived by the owner on Sep 9, 2022. It is now read-only.

First responsive pass #88

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

First responsive pass #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion inc/config.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
'page_title_color' => '#000',
'link_color_hover' => '#003c70',
// Top
'top_background_image_position' => '0 -80px', // x, y
'top_background_image_position' => '0 -50px', // x, y
'top_text_color' => '#567',
'top_screenname_color' => '#456',
'top_realname_color' => '#234',
Expand Down
9 changes: 6 additions & 3 deletions inc/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<head>
<title><?php echo $headTitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An archive of all tweets written by <?php echo s(rtrim($author['realname'], ".")); ?>." />
<meta name="author" content="<?php echo s($author['realname']); ?>" />
<link rel="stylesheet" href="<?php echo s($styleFile); ?>" type="text/css" />
Expand All @@ -28,11 +29,13 @@
</div>
<div id="info">
<p>The below is an off-site archive of <strong><a href="<?php echo $path; ?>/">all tweets posted by @<?php echo s($config['twitter_screenname']); ?></a></strong> ever</p>
<?php if($config['follow_me_button']){ ?> <p class="follow"><a href="//twitter.com/<?php echo s($config['twitter_screenname']); ?>">Follow me on Twitter</a></p><?php echo "\n"; } ?>
<?php if($config['follow_me_button']){ ?> <a href="//twitter.com/<?php echo s($config['twitter_screenname']); ?>" class="follow">Follow me on Twitter</a><?php echo "\n"; } ?>
</div>
</div>
<div id="content">
<h1><?php echo $pageHeader ? p(s($pageHeader, ENT_NOQUOTES), 3, true) : p(s($pageTitle, ENT_NOQUOTES), 3, true); ?></h1>
<form id="search" action="<?php echo $path; ?>/search" method="get"><div><input type="text" name="q" value="<?php if($searchQuery){ echo s($searchQuery); } ?>" /></div></form>
<div class="content-header">
<h1 class="content-title"><?php echo $pageHeader ? p(s($pageHeader, ENT_NOQUOTES), 3, true) : p(s($pageTitle, ENT_NOQUOTES), 3, true); ?></h1>
<form id="search" action="<?php echo $path; ?>/search" method="get"><input type="text" name="q" value="<?php if($searchQuery){ echo s($searchQuery); } ?>" /></form>
</div>
<?php if($preBody){ echo "\t\t\t" . $preBody . "\n"; } ?>
<div id="c"><div id="primary">
138 changes: 101 additions & 37 deletions styles/streamlined/styles.css.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@
font-size: 117%;
}

#c {
display: flex;
flex-wrap: wrap;
}

strong { font-weight: bold; }
em { font-style: italic; }

Expand All @@ -48,9 +53,7 @@
}

#content {
position: relative;
margin: 30px 46px;
overflow: hidden;
margin: 15px 7%;
}

#top #author {
Expand Down Expand Up @@ -96,20 +99,24 @@
background-color: <?php echo css("top_image_border_color"); ?>;
}

#top #info {
position: relative;
#info {
display: flex;
padding: 10px 46px;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
font-size: 85%;
background-color: <?php echo css("top_bar_background_color"); ?>;
color: <?php echo css("top_bar_text_color"); ?>;
overflow: hidden;
}

#top #info a, #top #info strong {
color: <?php echo css("top_bar_highlight_color"); ?>;
}

#top #info p {
margin: 10px 46px;
margin: 0;
flex-grow: 1;
}

#top #info strong a {
Expand All @@ -120,16 +127,9 @@
text-decoration: underline;
}

#top #info p.follow {
position: absolute;
top: 5px;
right: 46px;
text-align: right;
margin: 0;
}

#top #info p.follow a {
#top #info .follow {
display: block;
margin-left: 20px;
background-color: <?php echo css("top_follow_background_color"); ?>;
color: <?php echo css("top_follow_text_color"); ?>;
font-weight: bold;
Expand All @@ -142,23 +142,36 @@
padding: 5px 12px;
}

#top #info p.follow a:hover {
.follow:hover {
background-color: <?php echo css("top_follow_background_color_hover"); ?>;
}

.content-header {
display: flex;
padding: 20px 0;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

#primary {
width: 74%;
float: left;
position: relative;
position: relative;
flex: 7;
}

#primary,
#sorter {
padding-right: 2%;
}

#secondary {
margin-left: 76%;
width: 25%;
flex-grow: 1;
font-size: 85%;
}

#primary h1, #content h1 {
margin-top: 0;
.content-title {
margin: 0;
}

.tweet {
Expand Down Expand Up @@ -233,13 +246,6 @@
border-color: <?php echo css("tweet_image_border_color_hover"); ?>;
}<?php echo "\n"; } ?>

#search {
position: absolute;
top: .5em;
right: 0;
text-align: right;
}

#search input {
border: 1px solid <?php echo css("search_border_color"); ?>;
background: <?php echo css("search_background_color"); ?> url(search.png) no-repeat 7px 5px;
Expand All @@ -259,6 +265,7 @@

#sorter {
position: absolute;
margin: 0 0 20px;
top: -45px;
right: 0;
text-align: right;
Expand Down Expand Up @@ -337,13 +344,14 @@
}

ul#months, #months ul {
margin: 0;
padding: 0;
list-style-type: none;
border-top: 1px solid <?php echo css("months_border_color"); ?>;
}

#months li a {
display: block;
display: flex;
position: relative;
border-bottom: 1px solid <?php echo css("months_border_color"); ?>;
margin: 0;
Expand All @@ -363,10 +371,9 @@
}

#months li a .n {
position: absolute;
right: 10px;
flex-grow: 1;
color: <?php echo css("months_number_color"); ?>;
z-index: 2;
text-align: right;
}

#months li a .n strong {
Expand Down Expand Up @@ -420,7 +427,6 @@
#months li.selected a {
background-color: <?php echo css("months_selected_background_color"); ?>;
border-bottom-width: 0;
padding-bottom: 6px;
color: <?php echo css("months_selected_text_color"); ?>;
}

Expand All @@ -436,7 +442,7 @@
color: <?php echo css("months_selected_number_color"); ?>;
}

#months li.selected {
#months .selected {
margin-left: -8px;
padding-left: 8px;
background: <?php echo css("months_selected_graph_color"); ?> url(pointmask.png) no-repeat left center;
Expand Down Expand Up @@ -481,6 +487,7 @@
vertical-align: bottom;
text-align: center;
position: relative;
min-width: 20px;
}

#days .d a {
Expand Down Expand Up @@ -561,8 +568,65 @@
color: <?php echo css("footer_link_color"); ?>;
text-decoration: underline;
}

@media(max-width: 650px) {
.content-header {
padding-top: 0;
}

.content-header,
#c {
flex-direction: column;
}

.content-title {
margin-bottom: 20px;
text-align: center;
}

#primary {
padding: 0;
}

#secondary {
width: 100%;
}

#months li a {
padding-top: 15px;
padding-bottom: 15px;
}

#months .selected {
padding-left: 14px;
}

#top #info .follow {
margin-top: 10px;
margin-left: 0;
padding: 13px 20px;
width: 100%;
text-align: center;
}

#days {
display: block;
overflow-y: scroll;
}
}

@media(max-width: 970px) {
#sorter {
position: initial;
padding: 0;
}

#sorter a {
padding: 10px 40px;
}
}
<?php
if($returnCSS){
$css = ob_get_clean();
}
?>
?>