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

399 lines
18 KiB
HTML
Raw Normal View History

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.
2023-03-19 18:37:27 +00:00
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Indymedia Layout Test</title>
Add viewport meta tag Apparently mobile devise may lie about their screen size and this is the proposed solution. Reference: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design#the_viewport_meta_tag
2023-03-20 10:30:40 +00:00
<meta charset='UTF-8'/>
<meta name="viewport" content="width=device-width,initial-scale=1" />
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.
2023-03-19 18:37:27 +00:00
<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='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 -->
Position newswire before links When the page is viewed without CSS the newswire should come before links.
2023-03-19 18:46:51 +00:00
<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 -->
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.
2023-03-19 18:37:27 +00:00
</div> <!-- main-wrapper -->
</body>
</html>