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
parent
374b91f456
commit
a9512f64ee
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue