diff --git a/styles/main.scss b/styles/main.scss index 72fa241..c290751 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -1,3 +1,5 @@ +$small: 600px; + $accent-dark: #66BB6A; $accent-light: #33691E; @@ -97,6 +99,12 @@ header { border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); object-fit: cover; + + @media screen and (max-width: $small) { + height: 15vh; + width: 90vw; + margin-left: 5vw; + } } // -------------------------------------------------- @@ -108,8 +116,18 @@ header { display: flex; justify-content: space-between; + @media screen and (max-width: $small) { + width: 90vw; + margin-left: 5vw; + flex-direction: column; + } + #content { width: calc(80% - 20px); + + @media screen and (max-width: $small) { + width: 100%; + } } #sidebar { @@ -117,6 +135,11 @@ header { border-left: 1px solid #bbb; padding-left: 10px; + @media screen and (max-width: $small) { + width: 90vw; + border: none; + } + #tags { display: flex; flex-wrap: wrap; @@ -139,6 +162,7 @@ header { .highlight { pre { padding: 10px; + overflow-x: scroll; } } } diff --git a/templates/layout.html b/templates/layout.html index 793ca06..e84787c 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -19,7 +19,7 @@ {{ if .ShowSidebar }}