diff --git a/css/style.css b/css/style.css index e69de29..c7cc15a 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,70 @@ +body, html { + margin: 0; + padding: 0; + height: 100%; +} + +nav { + border-bottom: 2px solid #ccc; + margin: 0; + grid-area: nav; +} + +ul { + margin: 0; + padding-left: 10pt; + list-style: none; +} + +ul:nth-child(1) { + padding: 1em 1em; +} + +li::before { + content: ''; + margin-right: 5pt; + width: 1em; + height: 1em; + display: inline-block; +} +li[style]::before { + content: ''; + display: inline-block; + background-image: url('../img/arrow-down.svg'); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + width: 0.7em; + height: 0.7em; + margin-right: 3pt; +} + +.container { + display: grid; + grid-template-columns: max-content auto; + grid-template-rows: 3em auto auto; + height: 100%; + grid-template-areas: + "nav nav" + "aside section" + "footer footer"; +} +section { + grid-area: section; +} + +aside { + margin: 0; + height: 100%; + grid-area: aside; + overflow-y: scroll; + margin-right: 2px solid #ccc; +} + +footer { + border-top: 2px solid #ccc; + grid-area: footer; + text-align: right; + padding: 0.3em 2em; + +} \ No newline at end of file diff --git a/img/arrow-down.svg b/img/arrow-down.svg new file mode 100644 index 0000000..f2feed0 --- /dev/null +++ b/img/arrow-down.svg @@ -0,0 +1,114 @@ + + diff --git a/index.php b/index.php index a6d0267..6180e07 100644 --- a/index.php +++ b/index.php @@ -4,20 +4,42 @@
-