mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-03-21 17:24:28 -05:00
[blog] Fix navbar on mobile, add aspect-ratio fallback, minor changes and formatting fixes
This commit is contained in:
Monty
parent
4043a82dcf
commit
3bf8dfd110
|
|
@ -126,7 +126,9 @@ console.log(trueOrFalseJSON);
|
|||
|
||||
<cite>Adapted from [blockquote: The Block Quotation element, from MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)</cite>
|
||||
|
||||
<iframe src="https://www.youtube.com/embed/HGoCNOFpWpo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<div class="aspectratio-fallback">
|
||||
<iframe src="https://www.youtube.com/embed/HGoCNOFpWpo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -11,4 +11,4 @@ A todo list (delete file when done)
|
|||
- [ ] Redesign by the one true design god jvs
|
||||
- [x] Add mobile support
|
||||
- [x] Add css styling for all elements supported by markdown
|
||||
- [ ] Fix navbar
|
||||
- [X] Fix navbar
|
||||
|
|
@ -1,96 +1,79 @@
|
|||
.blog-card {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
max-width: 1100px;
|
||||
margin-bottom: 30px;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
max-width: 1000px;
|
||||
margin-bottom: 30px;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blog-card .post-info {
|
||||
flex: 2 0 45%;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
color: var(--text-secondary);
|
||||
flex: 50%;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.blog-card .post-info .title {
|
||||
color: white;
|
||||
margin: 0;
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.blog-card .post-info .caption {
|
||||
margin: 4px 0 32px 0;
|
||||
margin: 4px 0 32px 0;
|
||||
}
|
||||
|
||||
.blog-card .pub-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.blog-card .pub-info .date {
|
||||
font-weight: bold;
|
||||
color: var(--text);
|
||||
font-weight: bold;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.blog-card .pub-info > * {
|
||||
margin-right: .5em;
|
||||
margin-top: .2em;
|
||||
margin-right: 0.5em;
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
.blog-card .profile {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 30px auto;
|
||||
grid-gap: 10px;
|
||||
font-weight: bold;
|
||||
color: var(--text);
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 30px auto;
|
||||
grid-gap: 10px;
|
||||
font-weight: bold;
|
||||
color: var(--text);
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
}
|
||||
.blog-card .profile img {
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
max-width: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.blog-card .cover {
|
||||
flex: 45%;
|
||||
flex: 50%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.blog-card {
|
||||
flex-flow: column;
|
||||
}
|
||||
.blog-card .post-info {
|
||||
padding: 30px;
|
||||
}
|
||||
.blog-card .cover {
|
||||
order: -1;
|
||||
min-height: 200px;
|
||||
}
|
||||
.blog-card {
|
||||
flex-flow: column;
|
||||
}
|
||||
.blog-card .post-info {
|
||||
padding: 30px;
|
||||
}
|
||||
.blog-card .cover {
|
||||
order: -1;
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.blog-card {
|
||||
|
||||
max-width: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 90%;
|
||||
margin: 35px auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -20,20 +20,44 @@
|
|||
|
||||
.blog-card .title {
|
||||
margin: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.blog-card .pub-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
margin-top: auto;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.blog-card .pub-info .date {
|
||||
font-weight: bold;
|
||||
color: var(--text);
|
||||
}
|
||||
.blog-card .pub-info > * {
|
||||
margin-right: 0.5em;
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
.blog-card .profile {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 30px auto;
|
||||
grid-gap: 10px;
|
||||
font-weight: bold;
|
||||
color: var(--text);
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
}
|
||||
.blog-card .profile img {
|
||||
margin: 0;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.blog-card p,
|
||||
.post-info {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.blog a {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.blog-card .date {
|
||||
margin-bottom: 0;
|
||||
font-weight: bold;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.blog-card img {
|
||||
|
|
@ -62,18 +86,34 @@
|
|||
border-radius: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
/* Fallback for aspect-ratio since it's unsupported by some browsers (looking at you Safari) */
|
||||
@supports not (aspect-ratio: 16/9) {
|
||||
.blog-card .aspectratio-fallback {
|
||||
position: relative;
|
||||
height: 0;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
.blog-card iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-card table {
|
||||
border-radius: 4px;
|
||||
border-collapse: collapse;
|
||||
background: #31375E;
|
||||
background: #31375e;
|
||||
margin-bottom: 30px;
|
||||
overflow: hidden;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.blog-card table th {
|
||||
padding: 8px 12px;
|
||||
background: #3F4778;
|
||||
background: #3f4778;
|
||||
color: white;
|
||||
}
|
||||
.blog-card table td {
|
||||
|
|
@ -82,7 +122,7 @@
|
|||
border-radius: inherit;
|
||||
}
|
||||
.blog-card table tr:nth-child(even) {
|
||||
background: #2A2F50;
|
||||
background: #2a2f50;
|
||||
}
|
||||
|
||||
.blog-card pre code {
|
||||
|
|
@ -92,17 +132,18 @@
|
|||
|
||||
.blog-card input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: inline-block;
|
||||
background: var(--btn-secondary);
|
||||
padding: 12px;
|
||||
background: var(--btn-secondary);
|
||||
padding: 12px;
|
||||
margin: 4px;
|
||||
border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
vertical-align: -60%;
|
||||
}
|
||||
.blog-card input[type="checkbox"]:checked {
|
||||
content: 'checkboxtest';
|
||||
background: no-repeat center/contain url(../images/check.svg), var(--btn-secondary);
|
||||
content: "checkboxtest";
|
||||
background: no-repeat center/contain url(../images/check.svg),
|
||||
var(--btn-secondary);
|
||||
}
|
||||
|
||||
.blog-card hr {
|
||||
|
|
@ -117,32 +158,13 @@
|
|||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.blog-card .post-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.blog-card .post-info > * + * {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.blog-card .profile {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 30px auto;
|
||||
grid-gap: 10px;
|
||||
font-weight: bold;
|
||||
color: var(--text);
|
||||
align-items: center;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.blog-card {
|
||||
padding: 60px;
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
border-radius: 0;
|
||||
padding: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -151,10 +173,9 @@
|
|||
width: 90%;
|
||||
margin: 35px auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.blog-card {
|
||||
padding: 40px 5vw;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -571,6 +571,10 @@ footer {
|
|||
display: none;
|
||||
}
|
||||
|
||||
header .logo-link {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
|
@ -659,7 +663,7 @@ footer {
|
|||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
@media screen and (max-width: 580px) {
|
||||
.selected-locale .locale-names {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -674,17 +678,36 @@ footer {
|
|||
width: fit-content;
|
||||
}
|
||||
|
||||
.select-box .options-container {
|
||||
width: 150px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.select-box .options-container {
|
||||
width: 125px;
|
||||
right: 12px;
|
||||
@media screen and (max-width: 480px) {
|
||||
header .logo-link svg text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header .logo-link svg {
|
||||
width: 39.876px;
|
||||
}
|
||||
|
||||
header .logo-link {
|
||||
margin-right: 10px;
|
||||
}
|
||||
header nav a {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 330px) {
|
||||
.locale-dropdown {
|
||||
.locale-dropdown .selected-locale {
|
||||
width: 50px;
|
||||
}
|
||||
.locale-dropdown .selected-locale::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -23,8 +23,9 @@
|
|||
<img class="profile-picture" src="{{{ this.postInfo.author_image }}}" alt>
|
||||
<span>{{{ this.postInfo.author }}}</span>
|
||||
</div>
|
||||
<span>on</span>
|
||||
<span class="date">{{{ this.postInfo.date }}}</span>
|
||||
<span>on
|
||||
<span class="date">{{{ this.postInfo.date }}}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cover" style="background: no-repeat center/cover url({{this.postInfo.cover_image}}">
|
||||
|
|
|
|||
|
|
@ -7,14 +7,15 @@
|
|||
<div class="purple-card blog-card">
|
||||
|
||||
<h1 class="title">{{{ postInfo.title }}}</h1>
|
||||
<div class="post-info">
|
||||
<div class="pub-info">
|
||||
<span>Published by</span>
|
||||
<div class="profile">
|
||||
<img class="profile-picture" src="{{ postInfo.author_image }}" alt="{{ postInfo.author }}">
|
||||
<span>{{{ postInfo.author }}}</span>
|
||||
</div>
|
||||
<span>on</span>
|
||||
<span class="date">{{{ postInfo.date }}}</span>
|
||||
<span>on
|
||||
<span class="date">{{{ postInfo.date }}}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{{ htmlPost }}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<header>
|
||||
<a href="/" class="logo-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876" viewBox="0 0 120 39.876">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
|
||||
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
|
||||
<g id="logo" transform="translate(553 467)">
|
||||
<rect id="XMLID_158_" width="39.876" height="39.876" fill="#9d6ff3" opacity="0" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user