Skip to content

Commit a371e83

Browse files
saundefinedsaundefined
committed
redesign news & conferences
1 parent 7b0fd87 commit a371e83

4 files changed

Lines changed: 115 additions & 73 deletions

File tree

‎conferences/index.php‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,17 @@
1919
$link = preg_replace('~^(http://php.net/|https://www.php.net/)~', '', $entry["id"]);
2020
$id = parse_url($entry["id"], PHP_URL_FRAGMENT);
2121
$date = date_format(date_create($entry["updated"]), 'Y-m-d');
22-
$content .= '<div class="newsentry">';
23-
$content .= '<h3 class="newstitle title"><a href="' . $MYSITE . $link . '" id="' . $id . '">' . $entry["title"] . '</a></h3>';
24-
$content .= '<div class="newsimage">';
25-
26-
if (isset($entry["newsImage"])) {
27-
$content .= sprintf('<a href="%s"><img src="/images/news/%s"></a>', $entry["newsImage"]["link"], $entry["newsImage"]["content"]);
28-
}
2922

23+
$content .= '<div class="news__item">';
24+
$content .= '<div class="news__content">';
25+
$content .= '<div class="news__date">' . $date . '</div>';
26+
$content .= '<div class="news__title"><a href="' . $MYSITE . $link . '" id="' . $id . '">' . $entry["title"] . '</a></div>';
27+
$content .= '<div class="news__text">' . $entry["content"] . '</div>';
3028
$content .= '</div>';
31-
$content .= '<div class="newscontent">';
32-
$content .= $entry["content"];
29+
$content .= '<div class="news__image">';
30+
$content .= sprintf('<a href="%s"><img src="/images/news/%s"></a>', $entry["newsImage"]["link"], $entry["newsImage"]["content"]);
3331
$content .= '</div>';
3432
$content .= '</div>';
35-
36-
$panels .= sprintf('<p class="panel"><a href="%s">%s</a></p>', $entry["newsImage"]["link"], $entry["title"]);
3733
}
3834
$content .= "</div>";
3935

‎include/layout.inc‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -423,18 +423,26 @@ function print_news($news, $dog, $max = 5, $return = false) {
423423
continue;
424424
}
425425

426-
echo <<<EOT
427-
<article class="newsItem">
428-
<header class="title">
429-
<time class="newsdate" datetime="{$item["published"]}">{$newsdate}</time>
430-
<h2 class="newstitle"><a id="{$id}" href="{$permlink}" rel="bookmark" class="bookmark">{$item["title"]}</a></h2>
431-
</header>
432-
<div class="newscontent">
433-
<div class="newsImage">{$image}</div>
434-
{$item["content"]}
435-
</div>
436-
</article>
426+
$imageBlock = '';
427+
if ($image) {
428+
$imageBlock = <<<EOT
429+
<div class="news__image">
430+
{$image}
431+
</div>
432+
EOT;
433+
}
437434

435+
echo <<<EOT
436+
<div class="news__item">
437+
<div class="news__content">
438+
<div class="news__date"><time datetime="{$item["published"]}">{$newsdate}</time></div>
439+
<div class="news__title">
440+
<a href="{$permlink}" id="{$id}" rel="bookmark">{$item["title"]}</a>
441+
</div>
442+
<div class="news__text">{$item["content"]}</div>
443+
</div>
444+
{$imageBlock}
445+
</div>
438446
EOT;
439447
}
440448

‎index.php‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -65,17 +65,15 @@
6565
$date_human = date_format($date, 'd M Y');
6666
$date_w3c = date_format($date, DATE_W3C);
6767
$content .= <<<NEWSENTRY
68-
<article class="newsentry">
69-
<div class="title">
70-
<time datetime="$date_w3c">$date_human</time>
71-
<h2 class="newstitle">
72-
<a href="{$MYSITE}{$link}" id="{$id}">{$entry["title"]}</a>
73-
</h2>
74-
</div>
75-
<div class="newscontent">
76-
{$entry["content"]}
77-
</div>
78-
</article>
68+
<div class="news__item">
69+
<div class="news__content">
70+
<div class="news__date"><time datetime="$date_w3c">$date_human</time></div>
71+
<div class="news__title">
72+
<a href="{$MYSITE}{$link}" id="{$id}">{$entry["title"]}</a>
73+
</div>
74+
<div class="news__text">{$entry["content"]}</div>
75+
</div>
76+
</div>
7977
NEWSENTRY;
8078
}
8179
$content .= '<p class="archive"><a href="/archive/">Older News Entries</a></p>';

‎styles/theme-base.css‎

Lines changed: 80 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1385,46 +1385,6 @@ aside.tips div.inner {
13851385
}
13861386
/* }}} */
13871387

1388-
/* {{{ News */
1389-
.newsentry header h2,
1390-
.newsItem header h2 {
1391-
margin:0;
1392-
}
1393-
.newsentry {
1394-
margin: 0 0 3rem;
1395-
position: relative;
1396-
}
1397-
.newsentry h2 {
1398-
font-weight:normal;
1399-
border-bottom: 1px dotted #000;
1400-
}
1401-
.newsentry h2 .release-state {
1402-
float: right;
1403-
opacity: 0.8;
1404-
}
1405-
.newsentry header time,
1406-
.newsItem header time {
1407-
float:right;
1408-
line-height:3rem;
1409-
}
1410-
1411-
.newsentry p {
1412-
line-height: 1.7rem;
1413-
}
1414-
1415-
.newsentry .newsimage a,
1416-
.newsItem .newsImage a {
1417-
float: right;
1418-
border: 0;
1419-
padding: 10px;
1420-
}
1421-
1422-
.newsentry .newsimage img,
1423-
.newsItem .newsImage img {
1424-
max-width: 350px;
1425-
}
1426-
/* }}} */
1427-
14281388
/* {{{ Logo Downloads */
14291389

14301390
.logo-list ul{
@@ -1451,6 +1411,72 @@ td {
14511411
word-wrap: break-word;
14521412
}
14531413

1414+
.news {
1415+
flex-direction: row;
1416+
}
1417+
1418+
.news__item {
1419+
display: flex;
1420+
flex-direction: row;
1421+
justify-content: space-between;
1422+
gap: calc(var(--spacing) * 10);
1423+
padding-bottom: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
1424+
margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
1425+
margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
1426+
border-color: color-mix(in oklab, var(--color-gray-900) 10%, transparent);
1427+
border-width: 0 0 1px 0;
1428+
border-style: solid;
1429+
}
1430+
1431+
.news__item:last-child {
1432+
border-width: 0;
1433+
}
1434+
1435+
.news__content {
1436+
}
1437+
1438+
.news__date {
1439+
color: var(--color-gray-500);
1440+
font-size: var(--text-base);
1441+
line-height: var(--tw-leading, var(--text-base--line-height));
1442+
}
1443+
1444+
.news__title {
1445+
margin-top: calc(var(--spacing) * 3);
1446+
}
1447+
1448+
#layout-content .news__title a,
1449+
#layout-content .news__title a:link,
1450+
#layout-content .news__title a:visited {
1451+
color: var(--color-gray-900);
1452+
font-weight: var(--font-weight-medium);
1453+
font-size: var(--text-2xl);
1454+
line-height: calc(var(--spacing) * 6);
1455+
text-decoration: none;
1456+
border: 0;
1457+
}
1458+
1459+
.news__text {
1460+
color: var(--color-gray-600);
1461+
font-size: var(--text-base);
1462+
line-height: calc(var(--spacing) * 6);
1463+
margin-top: calc(var(--spacing) * 5);
1464+
}
1465+
1466+
.news__image {
1467+
width: calc(var(--spacing) * 64);
1468+
flex-shrink: 0;
1469+
}
1470+
1471+
.news__image a {
1472+
border: 0;
1473+
}
1474+
1475+
.news__image img {
1476+
max-width: 100%;
1477+
background-color: var(--color-gray-100);
1478+
}
1479+
14541480
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
14551481
/* Make table elements block for stacking */
14561482
table, thead, tbody, th, td, tr {
@@ -1487,4 +1513,18 @@ td {
14871513
unicode-bidi: isolate;
14881514
content: attr(data-label);
14891515
}
1516+
1517+
.news__item {
1518+
flex-direction: column;
1519+
gap: calc(var(--spacing) * 5);
1520+
}
1521+
1522+
.news__image {
1523+
order: 1;
1524+
width: 100%;
1525+
}
1526+
1527+
.news__content {
1528+
order: 2;
1529+
}
14901530
}

0 commit comments

Comments
 (0)