indymedia
/
indymedia-reboot
13
5
Fork 0
Code Issues 15 Pull Requests Releases Wiki Activity

First pass mockup 

Trying to keep a simple and clear page structure, while beginning to
stress test responsive layout.

I'm not a web designer (clearly) so I'm sure there's much room for
improvement, some of which I'm aware of and probably a lot I'm not.
update
mj-saunders 2023-03-19 22:37:27 +04:00
parent 374b91f456
commit a9512f64ee
2 changed files with 792 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

397
mockup.html 100644
View File

@ -0,0 +1,397 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Indymedia Layout Test</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<base href='/' />
<body>
<header>
<h1>Snafu IMC</h1>
<div id='menu'>
<input type='checkbox' id='nav-check' />
<label id='nav-toggle' for='nav-check'>
<span id='nav-icon' />
</label>
<nav>
<li><a href='/'>Editorial</a></li>
<li><a href='/'>Mission</a></li>
<li><a href='/'>About</a></li>
<li><a href='/'>Contact</a></li>
<li><a href='/'>Help</a></li>
<li><a href='/'>Support Us</a></li>
</nav>
</div>
</header>
<div id='main-wrapper'>
<main id='feature'>
<article class='feature-item'>
<header>
<a href='#link-to-feature-article'>
<h2>An editorial feature piece</h2>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</a>
</header>
<section class='feature-description'>
<img class='feature-image' src='' />
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Interdum
consectetur libero id faucibus nisl. Ut eu sem
integer vitae justo eget magna fermentum iaculis.
Amet justo donec enim diam. Fusce id velit ut
tortor pretium viverra suspendisse potenti.
Dignissim suspendisse in est ante in nibh. Urna
porttitor rhoncus dolor purus. Turpis cursus in
hac habitasse platea dictumst quisque sagittis.
Diam ut venenatis tellus in metus vulputate.
Pharetra magna ac placerat vestibulum.
</p>
</section>
<footer>
<section class='feature-links'>
<h4>Newswire Source(s):</h4>
<ul class='horizontal-list'>
<li>
<div class='source-document'>
<a href='#newswire-source-link'>Source 1</a>
</div>
</li>
<li>
<div class='source-video'>
<a href='#newswire-source-link'>Source 2</a>
</div>
</li>
<li>
<div class='source-photo'>
<a href='#newswire-source-link'>Source 3</a>
</div>
</li>
<li>
<div class='source-video'>
<a href='#newswire-source-link'>Source 4</a>
</div>
</li>
<li>
<div class='source-photo'>
<a href='#newswire-source-link'>Source 5</a>
</div>
</li>
</ul>
</section>
<section class='feature-links'>
<h4>Other Source(s):</h4>
<ul class='horizontal-list'>
<li>
<div class='source-document'>
<a href='#other-source-link'>Other 1</a>
</div>
</li>
<li>
<div class='source-photo'>
<a href='#other-source-link'>Other 2</a>
</div>
</li>
</ul>
</section>
<section class='feature-links'>
<h4>Tag(s):</h4>
<ul class='horizontal-list'>
<li>
<div class='hashtag'>
<a href='#some-hashtag-link'>#some-tag</a>
</div>
</li>
<li>
<div class='hashtag'>
<a href='#another-hashtag-link'>#another-tag</a>
</div>
</li>
</ul>
</section>
</footer>
</article>
<article class='feature-item'>
<header>
<a href='#link-to-feature-article'>
<h2>An editorial feature piece</h2>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</a>
</header>
<section class='feature-description'>
<img class='feature-image' src='' />
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Interdum
consectetur libero id faucibus nisl. Ut eu sem
integer vitae justo eget magna fermentum iaculis.
Amet justo donec enim diam. Fusce id velit ut
tortor pretium viverra suspendisse potenti.
Dignissim suspendisse in est ante in nibh. Urna
porttitor rhoncus dolor purus. Turpis cursus in
hac habitasse platea dictumst quisque sagittis.
Diam ut venenatis tellus in metus vulputate.
Pharetra magna ac placerat vestibulum.
</p>
</section>
<footer>
<section class='feature-links'>
<h4>Newswire Source(s):</h4>
<ul class='horizontal-list'>
<li>
<div class='source-document'>
<a href='#newswire-source-link'>Source 1</a>
</div>
</li>
<li>
<div class='source-video'>
<a href='#newswire-source-link'>Source 2</a>
</div>
</li>
<li>
<div class='source-photo'>
<a href='#newswire-source-link'>A long link to Source 3</a>
</div>
</li>
<li>
<div class='source-video'>
<a href='#newswire-source-link'>Source 4</a>
</div>
</li>
<li>
<div class='source-photo'>
<a href='#newswire-source-link'>Source 5</a>
</div>
</li>
</ul>
</section>
<section class='feature-links'>
<h4>Other Source(s):</h4>
<ul class='horizontal-list'>
<li>
<div class='source-document'>
<a href='#other-source-link'>Other 1</a>
</div>
</li>
<li>
<div class='source-photo'>
<a href='#other-source-link'>Other 2</a>
</div>
</li>
</ul>
</section>
<section class='feature-links'>
<h4>Tag(s):</h4>
<ul class='horizontal-list'>
<li>
<div class='hashtag'>
<a href='#some-hashtag-link'>#some-tag</a>
</div>
</li>
<li>
<div class='hashtag'>
<a href='#another-hashtag-link'>#another-tag</a>
</div>
</li>
</ul>
</section>
</footer>
</article>
</main>
<aside id='link' class='clippable'>
<section class='link-section'>
<h3>Some links</h3>
<ul>
<li><a title='Foo' href='#foo'>Foo</a></li>
<li><a title='Bar' href='#bar'>Bar</a></li>
<li><a title='Baz' href='#baz'>Baz</a></li>
<li><a title='Foo' href='#foo'>Foo</a></li>
<li><a title='Bar' href='#bar'>Bar</a></li>
<li><a title='Baz' href='#baz'>Baz</a></li>
<li><a title='Foo' href='#foo'>Foo</a></li>
<li><a title='Bar' href='#bar'>Bar</a></li>
<li><a title='Baz' href='#baz'>Baz</a></li>
<li><a title='Foo' href='#foo'>Foo</a></li>
<li><a title='Bar' href='#bar'>Bar</a></li>
<li><a title='Baz' href='#baz'>Baz</a></li>
</ul>
</section>
<section class='link-section'>
<h3>Other links</h3>
<ul>
<li><a title='Foo' href='#foo'>A really very unnecessarily long link to Foo</a></li>
<li><a title='Bar' href='#bar'>Bar</a></li>
<li><a title='Baz' href='#baz'>Baz</a></li>
<li><a title='Foo' href='#foo'>Foo</a></li>
<li><a title='Bar' href='#bar'>Bar</a></li>
<li><a title='Baz' href='#baz'>Baz</a></li>
<li><a title='Foo' href='#foo'>Foo</a></li>
<li><a title='Bar' href='#bar'>Bar</a></li>
<li><a title='Baz' href='#baz'>Baz</a></li>
<li><a title='Foo' href='#foo'>Foo</a></li>
<li><a title='Bar' href='#bar'>Bar</a></li>
<li><a title='Baz' href='#baz'>Baz</a></li>
<li><a title='Foo' href='#foo'>Foo</a></li>
<li><a title='Bar' href='#bar'>Bar</a></li>
<li><a title='Baz' href='#baz'>Baz</a></li>
</ul>
</section>
</aside> <!-- link -->
<aside id='newswire' class='clippable'>
<h2>Newswire</h2>
<div class='newswire-item'>
<a href='#link-back-to-source-photo'>
<h3>Some news photograph</h3>
<div class='newswire-meta source-photo'>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</div>
</a>
</div>
<div class='newswire-item'>
<a href='#link-back-to-source-text'>
<h3>Some news text piece</h3>
<div class='newswire-meta source-document'>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</div>
</a>
</div>
<div class='newswire-item'>
<a href='#link-back-to-source-photo'>
<h3>Some news photograph</h3>
<div class='newswire-meta source-photo'>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</div>
</a>
</div>
<div class='newswire-item'>
<a href='#link-back-to-source-text'>
<h3>Some news text piece</h3>
<div class='newswire-meta source-document'>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</div>
</a>
</div>
<div class='newswire-item'>
<a href='#link-back-to-source-photo'>
<h3>Some news photograph</h3>
<div class='newswire-meta source-photo'>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</div>
</a>
</div>
<div class='newswire-item'>
<a href='#link-back-to-source-text'>
<h3>Some news text piece</h3>
<div class='newswire-meta source-document'>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</div>
</a>
</div>
<div class='newswire-item'>
<a href='#link-back-to-source-photo'>
<h3>Some news photograph</h3>
<div class='newswire-meta source-photo'>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</div>
</a>
</div>
<div class='newswire-item'>
<a href='#link-back-to-source-text'>
<h3>Some news text piece</h3>
<div class='newswire-meta source-document'>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</div>
</a>
</div>
<div class='newswire-item'>
<a href='#link-back-to-source-photo'>
<h3>Some news photograph</h3>
<div class='newswire-meta source-photo'>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</div>
</a>
</div>
<div class='newswire-item'>
<a href='#link-back-to-source-text'>
<h3>Some news text piece</h3>
<div class='newswire-meta source-document'>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</div>
</a>
</div>
<div class='newswire-item'>
<a href='#link-back-to-source-photo'>
<h3>Some news photograph</h3>
<div class='newswire-meta source-photo'>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</div>
</a>
</div>
<div class='newswire-item'>
<a href='#link-back-to-source-text'>
<h3>Some news text piece</h3>
<div class='newswire-meta source-document'>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</div>
</a>
</div>
<div class='newswire-item'>
<a href='#link-back-to-source-photo'>
<h3>Some news photograph</h3>
<div class='newswire-meta source-photo'>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</div>
</a>
</div>
<div class='newswire-item'>
<a href='#link-back-to-source-text'>
<h3>Some news text piece</h3>
<div class='newswire-meta source-document'>
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
</div>
</a>
</div>
</aside> <!-- newswire -->
</div> <!-- main-wrapper -->
</body>
</html>

395
styles.css 100644
View File

@ -0,0 +1,395 @@
/* Global variables */
:root {
--shade0: #dddddd;
--shade1: #bbbbbb;
--shade2: #999999;
--shade3: #777777;
--shade4: #555555;
--shade5: #333333;
--shade6: #111111;
--primary: var(--shade1);
--primary_background: var(--shade4);
--secondary: var(--shade2);
--secondary_background: var(--shade5);
--tertiary: var(--shade1);
--tertiary_background: var(--shade3);
/* TODO: Replace colours with variables */
--nav_bg: var(--secondary_background);
--link_bg: green;
--newswire_bg: red;
--feature_bg: yellow;
--newswire_border: var(--shade1);
--h1_size: 2em;
--icon_sml: 32px;
--icon_tiny: 16px;
--space_default: 0.5em;
--line_height: 1.3em;
--image_feature: calc(4 * var(--line_height) - .2em);
--header_height: 4em;
--container_height: calc(100vh - var(--header_height));
--nav_width: 65%;
--nav-width-tablet: 40%;
--font-size-default: 18px;
--font-family-default: "Georgia", serif;
/* DEBUG TMP */
--debug-border: 0px solid black;
}
/* Base defaults */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: var(--primary);
font-size: var(--font-size-default);
font-family: var(--font-family-default);
text-decoration: none;
line-height: var(--line_height);
}
/* Legacy Tweaks */
main, nav, aside, article, section, header, footer {
display: block;
}
/* Universal */
h1 {
font-size: var(--h1_size);
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.2em;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica", "Arial", sans-serif;
}
li {
list-style-type: none;
}
body > header {
display: flex;
justify-content: space-between;
align-items: baseline;
position: sticky;
top: 0;
width: 100%;
height: var(--header_height);
padding: 1em;
background-color: var(--secondary_background);
}
body > header h1 {
white-space: nowrap;
overflow: hidden;
}
#main-wrapper {
display: flex;
width: 100%;
min-height: var(--container_height);
background-color: var(--primary_background);
}
#nav-check {
display: none;
}
nav a,
#link a {
display: block;
}
#feature > article:not(:last-child) {
margin-bottom: calc(var(--space_default) * 2);
border-bottom: 1px solid var(--primary);
}
#newswire {
padding: var(--space_default);
}
#newswire .newswire-item:not(:last-child) {
margin-bottom: var(--space_default);
}
.feature-image {
float: left;
margin-right: var(--space_default);
width: var(--image_feature);
height: var(--image_feature);
}
.feature-description {
margin-top: var(--space_default);
}
.feature-links {
margin-top: var(--space_default);
}
.horizontal-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: var(--space_default);
row-gap: calc(var(--space_default) / 2);
}
.horizontal-list li {
width: calc(33% - var(--space_default));
padding: calc(var(--space_default) / 2) var(--space_default);
background-color: var(--tertiary_background);
}
.horizontal-list li div {
display: flex;
flex: initial;
align-items: center;
}
.horizontal-list li a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--tertiary);
}
.feature-item,
.newswire-item,
.link-section {
padding: var(--space_default);
}
.newswire-item,
.link-section ul {
padding: var(--space_default);
background-color: var(--tertiary_background);
}
.newswire-item *,
.link-section ul * {
color: var(--tertiary);
}
.source-document,
.source-photo,
.source-video {
display: flex;
align-items: center;
}
.source-document::before,
.source-photo::before,
.source-video::before {
content: '';
display: flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
margin-right: calc(var(--space_default) / 2);
/* DEBUG TMP */
border: 1px solid black;
background-color: var(--secondary_background);
color: var(--shade0);
font-size: calc(var(--font-size-default) * 0.75);
font-family: var(--font-family-default);
font-weight: normal;
}
/* DEBUG TMP */
.source-document::before {
content: 'T';
}
.source-photo::before {
content: 'P';
}
.source-video::before {
content: 'V';
}
/* Mobile and Tablet */
@media only screen and (max-width: 960px) {
#main-wrapper {
justify-content: flex-start;
flex-direction: column;
}
menu {
overflow: hidden;
}
#nav-toggle {
display: block;
z-index: 99;
width: var(--icon_sml);
height: var(--icon_sml);
/* DEBUG TMP */
background-color: orange;
}
#nav-check:not(:checked) ~ nav {
right: calc(-1 * var(--nav_width));
}
nav {
display: block;
position: fixed;
z-index: 99;
top: var(--header_height);
right: 0;
width: var(--nav_width);
padding: var(--space_default);
height: calc(100vh - var(--header_height));
background-color: var(--nav_bg);
transition: right .3s ease;
}
nav li:not(:last-child) {
margin-bottom: var(--space_default);
}
#link,
#newswire,
#feature {
display: flex;
flex-direction: column;
width: 100%;
}
#link {
order: 3;
border: var(--debug-border);
border-color: var(--link_bg);
}
#newswire {
order: 2;
border: var(--debug-border);
border-color: var(--newswire_bg);
}
#feature {
order: 1;
border: var(--debug-border);
border-color: var(--feature_bg);
}
}
/* Tablet */
@media only screen and (min-width: 401px) and (max-width: 960px) {
nav {
width: var(--nav-width-tablet);
}
.horizontal-list li {
width: calc(25% - var(--space_default));
}
}
@media only screen and (min-width: 640px) and (max-width: 960px) {
#link,
#newswire ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#link section,
#newswire li {
width: 50%;
}
#newswire li {
padding: var(--space_default);
}
}
/* Desktop */
@media only screen and (min-width: 961px) {
#main-wrapper {
flex-direction: row;
justify-content: flex-start;
}
nav {
display: flex;
flex-direction: row;
}
nav li {
padding: 0 var(--space_default);
}
nav li:not(:last-child) {
border-right: 1px solid var(--secondary);
}
aside {
overflow: scroll;
}
#link {
order: 1;
width: 15%;
}
#newswire {
order: 3;
width: 30%;
}
#feature {
order: 2;
width: 55%;
}
#link,
#newswire {
position: sticky;
top: var(--header_height);
overflow: auto;
height: fit-content;
max-height: calc(100vh - var(--header_height));
}
.horizontal-list li {
width: calc(20% - var(--space_default));
}
}
.clippable * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}