Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mobile responsiveness added and adjusted for blog-post html #159

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

mobile responsiveness added and adjusted for blog-post html #159

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
10 changes: 5 additions & 5 deletions specimen/contexts/blog-post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,9 +126,9 @@ <h1>What are the barriers to open culture? Here's what the CC community has to s

<p>In search of answers, we looked at past research, notably Andrea Wallace's Barriers to Open Access &mdash; Open GLAM, and asked more than 30 experts in the open culture movement. You can watch what they told us in our CC Open Culture VOICES vlog series. Here's a small sample of what we heard:</p>

<h2>Let's Try This Again</h2>
<h2 class="title">Let's Try This Again</h2>

<h3>Along The Way We Try</h3>
<h3 class="title">Along The Way We Try</h3>


<p>Along with 600 million people, nine-year-old Chris Hadfield is glued to his television&mdash;watching intently as American astronaut Neil Armstrong glides down the ladder of the Lunar Module, and in one swift pounce, touches the dust of a familiar yet alien world. His words forever immortalized, "That's one small step for man, one giant leap for mankind."</p>
Expand Down Expand Up @@ -160,11 +160,11 @@ <h3>Along The Way We Try</h3>

<p>Footage and audio of the <a href="#">Apollo 11 Commander Neil Armstrong</a> and lunar module pilot Buzz Aldrin hopping on the Moon's surface in 1969 have been remixed, remastered, and reshared countless times—inspiring generations of everyday citizens, like Hadfield and Harrison, to engage <em>with</em> space science and exploration. In fact, the use of materials created by the National Aeronautics and Space Administration (NASA) to create new works for the public doesn't end with Armstrong's history-making first steps.</p>

<h3>Steps to launch</h3>
<h3 class="title">Steps to launch</h3>
<ol>
<li>Assemble module</li>
<li>Launch aircraft</li>
<li>Land safely</li>
<li>Land safely</li> vjuv
</ol>

<figure>
Expand All @@ -182,7 +182,7 @@ <h3>Steps to launch</h3>
<span class="pub-date">Posted 22 July 2023</span>

<article class="tags">
<h2>Tags</h2>
<h2 class="title">Tags</h2>

<ul>
<li><a href="#">open culture</a></li>
Expand Down
45 changes: 45 additions & 0 deletions specimen/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,47 @@
@import '../src/css/vocabulary.css' layer(vocabulary);
@import '../specimen/tests/grid-test.css' layer(vocabulary);

/* Media query for mobile devices (screens smaller than 768px) */
@media (max-width: 768px) {
main article.posts.related ul {
grid-template-columns: 1fr 1fr;
gap: 1em;
}
main{
padding: 0;
margin: 0 ;
}
main > header h1{
font-size: 2em;
}
main p{
font-size: 1.2em;
padding: 0 1em;
}
main aside{
padding: 0;
}
.title,
ul > li,
ol > li,
span
{
margin-left: 16px;
margin-right: 16px;
width: 80%;
}


figure{
margin: 0 1em;
}
}

/* Media query for very small screens (screens smaller than 480px) */
@media (max-width: 480px) {
main article.posts.related ul {
grid-template-columns: 1fr ;
gap: 1em;
}

}