diff options
Diffstat (limited to 'assets/sass/layout.scss')
| -rw-r--r-- | assets/sass/layout.scss | 176 |
1 files changed, 176 insertions, 0 deletions
diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss new file mode 100644 index 0000000..004dce3 --- /dev/null +++ b/assets/sass/layout.scss @@ -0,0 +1,176 @@ +body {
+ header {
+
+
+ }
+
+ article aside {
+ transition: max-height .2s ease-out;
+
+ &.responsive{
+ display: block;
+ width: 100%;
+ max-width: 20em;
+ z-index: 100;
+ }
+ }
+
+}
+
+
+
+body {
+ margin:0px;
+
+ header {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ height: 3.5rem;
+ line-height: 3.5rem;
+ margin-bottom: .35rem;
+ padding: 0 2rem;
+ position: fixed;
+ left: 0; right: 0; top: 0;
+ z-index: 1;
+ div.burger {
+ display: none;
+ }
+ }
+ article {
+ padding-top: 3.5rem;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ width: 100%;
+ align-items: flex-start;
+ min-height: calc(100vh - 3.5rem);
+
+ aside {
+ margin-top: 3.5rem;
+ position: fixed;
+ top: 0; left: 0; right: 0; bottom: 0;
+ width: 20em;
+ overflow-y: auto; overflow-x: hidden;
+
+ /*transition: transform .5s ease-out;*/
+ &.full{
+ display: none;
+ }
+
+ }
+
+ section.page{
+ padding-left: 1.5rem!important;
+ padding-right: 1.5rem!important;
+ margin-left: 20em;
+ width:calc(100% - 20em - 15em - 1.1em);
+
+ &.simple{
+ width:calc(100% - 20em - 1.1em);
+ }
+ &.full{
+ width: 100%;
+ margin-left: 0em;
+ }
+
+ }
+
+ section.right-menu{
+ position: fixed;
+ width: 15em;
+ top: 3.5rem;
+ right: 0px;
+ bottom: 0px;
+ overflow-y: auto;
+ overflow-x: hidden;
+
+ transition: transform .5s ease-in-out;
+ &.simple,&.full,{
+ display: none;
+ }
+ }
+ }
+ footer {
+ display: table-row;
+ position: relative;
+ overflow: auto;
+ display: block;
+ z-index: 100;
+ }
+}
+
+@media(max-width:1200px) {
+ body{
+ header {
+ div.burger {
+ display: inline;
+ &.full{
+ display: none ;
+ }
+ }
+ }
+ article {
+ aside {
+ /*transform: translate(100vw,0);*/
+ display: none;
+ }
+
+ section.page{
+ margin-left: 0px;
+ width:calc(100% - 15em - 1.1em);
+ &.simple{
+ width:100%;
+ }
+ }
+
+ section.right-menu{
+
+ }
+ }
+ }
+}
+
+@media(max-width:930px) {
+ body{
+ header {
+ nav.shortcuts li{
+
+ display: none;
+ }
+ }
+
+ article {
+ aside {
+ /*transform: translate(-100vw,0);*/
+ display: none;
+ }
+
+ section.page{
+ width: 100%;
+ margin-left: 0px;
+ }
+
+ section.right-menu{
+ /*transform: translate(100vw,0);*/
+ display: none;
+ }
+ }
+ }
+}
+
+@media(max-width:600px) {
+ body{
+ article {
+ section.page{
+ width: 100%;
+ margin-left: 0px;
+ }
+ aside.responsive{
+ width: 100%;
+ max-width: 100%;
+
+ }
+ }
+ }
+}
\ No newline at end of file |