FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add notes layout (#263)

Browse source 
* Add note layout

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Fix note organization

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* WIP: need help adding above 6 sections doesnt fit navbar

* Add note layout

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Add Translation

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

Co-authored-by: HenzelMoras <henzelmoras@gmail.com>
This commit is contained in:
Emruz Hossain 2021-03-28 01:52:18 +06:00 • committed by GitHub
parent 5c95132b1e
commit 25e4e9e3d0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 519 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

231
static/css/layouts/notes.css Normal file
View file

@ -0,0 +1,231 @@
.wrapper {
display: flex;
padding: 0;
margin: 0;
width: 100%;
}
.content-section {
flex: 80%;
max-width: 80%;
order: 2;
/* background-color: lightseagreen; */
padding: 0;
position: relative;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.content {
padding: 0;
position: relative;
padding-top: 2rem;
min-height: 130vh;
}
.note-card-holder{
padding-top: 2rem;
}
.note-collection {
display: flex;
flex-wrap: wrap;
}
.note-card {
align-self: flex-start;
}
.note-card .card{
margin: 0.5rem;
}
.note-title{
font-weight: 800;
}
.note-card .card-body{
padding: 1rem;
}
.note-card pre {
margin: 0;
border-radius: 3px;
}
.small-note{
max-width: 15rem;
}
.medium-note{
max-width: 25rem;
}
.large-note{
max-width: 40rem;
}
.huge-note{}
.note-badge{
font-size: 10pt;
}
/* ============= Device specific fixes ======= */
/* Large screens such as TV */
@media only screen and (min-width: 1824px) {
.content-section {
padding-left: 1rem;
padding-right: 1rem;
flex: 85%;
max-width: 85%;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1400px) {
.note-card-holder {
margin-left: 0px;
}
}
@media (max-width: 1200px) {
}
/* IPad Pro */
@media (max-width: 1024px) {
.wrapper {
padding-left: 0px;
padding-right: 0px;
}
.content-section {
padding: 0;
max-width: 100%;
order: 2;
padding-bottom: 0.5rem;
transition: all ease-out 0.3s;
}
.content-section.hide {
max-width: 60%;
transition: all ease-out 0.3s;
}
.content {
overflow: hidden;
}
.container {
max-width: 100%;
}
.navbar-toggler {
display: block;
}
#toc-toggler {
visibility: hidden;
}
.navbar-collapse.lang-selector {
display: block !important;
position: absolute;
right: 0;
top: 0.5rem;
}
.note-card-holder {
margin: 0;
margin-top: 1.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
position: relative;
transition: all ease-out 0.3s;
}
.content-section.hide .note-card-holder .note-card {
max-width: 100%;
transition: all ease-out 0.3s;
}
}
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
.note-card-holder .note-card {
max-width: 100%;
min-width: 50%;
transition: all ease-out 0.3s;
}
.content-section.hide .note-card-holder .note-card {
max-width: 100%;
min-width: 100%;
transition: all ease-out 0.3s;
}
}
/* Medium devices (tablets, 768px and up) */
@media only screen and (max-width: 768px) {
}
/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) {
.wrapper {
padding-left: 0px;
padding-right: 0px;
flex-flow: column;
overflow: hidden;
}
.content-section, .content-section.hide {
flex: 100%;
max-width: 100%;
padding-left: 0;
width: 100%;
transition: all ease-out 0.3s;
}
.content {
width: 100%;
padding-left: 0;
padding-right: 0;
transition: all ease-out 0.3s;
}
.content-section.hide .content {
margin-top: 0;
padding-top: 0;
transition: all ease-out 0.3s;
}
.content-section.hide .note-card-holder {
margin-top: 0.5rem;
transition: all ease-out 0.3s;
}
.note-card-holder .note-card, .content-section.hide .note-card-holder .note-card {
margin-left: 1%;
margin-right: 1%;
max-width: 98%;
min-width: 98%;
transition: all ease-out 0.3s;
}
}
/* iPhoneX, iPhone 6,7,8 */
@media only screen and (max-width: 375px) {
}
/* Galaxy S5, Moto G4 */
@media only screen and (max-width: 360px) {
}
/* iPhone 5 or before */
@media only screen and (max-width: 320px) {
}