Responsiveness enhancements

master
Özcan Oğuz 4 years ago
parent cedc561a5b
commit 9cc6fdbce3
Signed by untrusted user: ooguz
GPG Key ID: 2D33E2BD3D975818
  1. 32
      layouts/partials/footer.html
  2. 93
      static/css/style.css
  3. BIN
      static/images/by-nd-mobile.png
  4. BIN
      static/images/by-sa-mobile.png

@ -1,15 +1,27 @@
<footer>
<div class="container">
<div class="copyright">
&copy; 2019-2020 Özgür Yazılım Derneği. | <a href="https://git.oyd.org.tr/oyd/oyd-web" target="_blank" style="color: white;">{{ i18n "kaynak" }}</a>
<table cellspacing="1" cellpadding="0" style="border: none; float: right;">
<tr>
<td class="first"><a href="https://www.gnu.org/licenses/license-list.html#OpinionLicenses" target="_blank"><img src="/images/cc-by-nd.svg" alt="CC BY-ND 4.0" height="35px" /></a></td>
<td class="second"><a href="https://git.oyd.org.tr/oyd/oyd-web/src/branch/master/LICENSE.md" target="_blank"><img src="/images/cc-by-sa.svg" alt="CC BY-SA 4.0" height="35px" /></a></td>
</tr>
<tr>
<td class="second"><center>{{ i18n "yazilar" }}</center></td>
<td class="second"><center>{{ i18n "tasarim" }}</center></td>
</tr>
</table>
</div>
<table class="license" cellspacing="1" cellpadding="0">
<tr>
<td class="first"><a href="https://www.gnu.org/licenses/license-list.html#OpinionLicenses" target="_blank"><img src="/images/cc-by-nd.svg" alt="CC BY-ND 4.0" height="35px" /></a></td>
<td class="second"><a href="https://git.oyd.org.tr/oyd/oyd-web/src/branch/master/LICENSE.md" target="_blank"><img src="/images/cc-by-sa.svg" alt="CC BY-SA 4.0" height="35px" /></a></td>
</tr>
<tr>
<td class="second"><center>{{ i18n "yazilar" }}</center></td>
<td class="second"><center>{{ i18n "tasarim" }}</center></td>
</tr>
</table>
<div class="license-mobile">
Yazılar: <a href="https://www.gnu.org/licenses/license-list.html#OpinionLicenses" target="_blank">
<img src="/images/by-nd-mobile.png" alt="CC BY-ND 4.0" />
</a>
</div>
<div class="license-mobile">
Tasarım: <a href="https://git.oyd.org.tr/oyd/oyd-web/src/branch/master/LICENSE.md" target="_blank">
<img src="/images/by-sa-mobile.png" alt="CC BY-SA 4.0" />
</a>
</div>
</div>
</footer>

@ -18,6 +18,12 @@ body {
font-family: 'Liberation Serif', serif;
}
@media only screen and (max-width: 600px) {
h1 {
font-size: 2rem !important;
}
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1.1;
@ -71,13 +77,24 @@ a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
}
/* Grid */
.container {
max-width: 1200px;
max-width: 60%;
padding: 0 2rem;
margin: auto;
}
@media only screen and (max-width: 600px) {
.container {
max-width: 100%;
margin: auto;
}
}
.row {
display: flex;
flex-flow: row wrap;
@ -196,6 +213,19 @@ article hr:last-child {
align-items: center;
}
@media only screen and (max-width: 600px) {
.navbar-container {
max-width: 100%;
margin: 0 auto;
padding: 0 2rem;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.navbar h1 {
font-size: 1.4rem;
margin: 0;
@ -239,6 +269,17 @@ article hr:last-child {
justify-content: space-between;
}
@media only screen and (max-width: 600px) {
.page {
max-width: 100%;
margin: auto;
margin-top: 80px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
}
.article-list > article {
display: flex;
margin-bottom: 2rem;
@ -261,7 +302,7 @@ article hr:last-child {
.article-img {
margin-right: 1rem;
width: 150px;
max-width: 150px;
}
.article-body {
@ -273,6 +314,7 @@ article hr:last-child {
flex-basis: 0;
width: 75%;
padding-right: 2rem;
max-width: 100%;
}
.article-list {
@ -356,7 +398,7 @@ body > footer {
.member img,
.project img {
width: 120px;
max-width: 120px;
}
.member-name {
@ -395,6 +437,12 @@ body > footer {
margin-top: 80px;
}
@media only screen and (max-width: 600px) {
.band:first-child {
margin-top: 0px;
}
}
.band .column:first-child {
margin-right: 3rem;
}
@ -528,6 +576,10 @@ body > footer {
.article-title {
margin-top: 0px; }
.article-header {
max-width: 100%;
}
.article-header .photo {
width: 100%;
height: 120px;
@ -829,4 +881,39 @@ table {
background-color: rgba(255, 255, 255, 0.075);
}
.license {
border: none;
float: right;
}
.license-mobile {
display: flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.license-mobile img {
padding-left: 5px;
vertical-align: middle;
}
@media only screen and (max-width: 600px) {
.license {
display: none;
}
.copyright {
display: flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.copyright a {
padding-left: 5px;
}
}
@media only screen and (min-width: 601px) {
.license-mobile {
display: none;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 449 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 446 B

Loading…
Cancel
Save