al-quran.reflectslight.io/src/css/_layout.scss

134 lines
2 KiB
SCSS
Raw Normal View History

2023-02-27 23:28:37 +01:00
$black: #454545;
$max-width: 1024px;
2023-02-27 23:28:37 +01:00
2023-10-22 02:17:41 +02:00
html[lang="en"] {
font-family: "Kanit Regular";
}
2023-10-22 02:17:41 +02:00
html[lang="ar"] {
font-family: "Amiri Quran Regular";
2023-10-13 21:05:46 +02:00
}
2023-02-27 23:28:37 +01:00
html {
height: 100%;
}
html body {
color: $black;
2023-10-26 14:39:20 +02:00
height: 100%;
2023-10-26 14:48:22 +02:00
margin: 0;
2023-02-27 23:28:37 +01:00
}
body .root {
height: 100%;
}
body .root .content.theme {
2023-02-27 23:28:37 +01:00
margin: 0 auto;
2023-10-26 14:39:20 +02:00
height: 100%;
width: 85%;
2023-10-20 22:39:09 +02:00
max-width: $max-width;
2023-10-26 14:39:20 +02:00
header {
h1 {
display: flex;
align-items: center;
flex-direction: column;
font-size: xx-large;
margin: 0;
line-height: 1.5;
a {
text-decoration: none;
}
}
2023-10-25 08:11:54 +02:00
nav, div {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
nav {
.react-select {
display: flex;
flex-direction: row;
align-items: center;
}
.react-select.theme {
justify-content: flex-start;
}
.react-select.language {
justify-content: flex-end;
min-width: 70px;
text-align: right;
ul li {
align-items: flex-start;
font-family: "Kanit Regular";
}
}
.br {
width: 100%;
}
2023-10-25 08:11:54 +02:00
}
2023-10-22 02:17:41 +02:00
}
2023-02-27 23:28:37 +01:00
2023-10-22 02:17:41 +02:00
ul.body {
clear: both;
list-style-type: none;
padding: 0;
2023-10-26 14:39:20 +02:00
margin: 0;
overflow: auto;
height: 73%;
padding: 0 0 30px 0;
2023-10-21 22:47:46 +02:00
}
2023-10-26 14:39:20 +02:00
footer {
display: flex;
2023-10-28 11:08:37 +02:00
flex-wrap: wrap;
2023-10-26 14:39:20 +02:00
justify-content: space-between;
align-items: flex-end;
width: 100%;
2023-10-28 11:08:37 +02:00
.br {
width: 100%;
}
2023-10-26 14:39:20 +02:00
}
2023-10-22 02:17:41 +02:00
}
2023-10-25 09:25:42 +02:00
body .root .content.en {
h1 {
font-size: x-large;
}
header {
nav, div {
}
}
2023-10-25 09:25:42 +02:00
}
2023-10-22 02:17:41 +02:00
body .root .content.ar {
header {
nav, div {
direction: ltr;
.localized-name {
display: flex;
font-size: x-large;
justify-content: flex-end;
align-items: flex-end;
width: 100%;
}
.transliterated-name {
display: none;
}
}
}
2023-10-26 14:39:20 +02:00
footer {
flex-direction: row-reverse;
}
}
.invisible {
display: none !important;
}