Browse Source

made the nav section more responsive

master
Vincent Truchseß 8 months ago
parent
commit
60e28c1a64
2 changed files with 67 additions and 4 deletions
  1. +66
    -3
      site/css/default.css
  2. +1
    -1
      templates/custom/default.clj

+ 66
- 3
site/css/default.css View File

@@ -1,5 +1,6 @@
html {
font-size:62.5%
font-size:62.5%;
font-family: Sans;
}
body {
font-size:1.6rem;
@@ -9,7 +10,9 @@ body {
header {
border-bottom:0.3rem solid #000;
min-height:56px;
line-height:56px
line-height:56px;
display: grid;
grid-template-columns: auto auto;
}
nav {
text-align:right
@@ -81,12 +84,18 @@ code {

.tagline {
margin-bottom: 12px;
display: grid;
}

.postlist {
margin-bottom: 25px;
}

.ulist p{
margin-bottom: 0px;
margin-top: 0px;
}

h1 {
font-size:2.4rem
}
@@ -118,6 +127,8 @@ article .header {
color:#000;
text-decoration:none
}


@media (max-width:319px) {
body {
width:90%;
@@ -146,6 +157,7 @@ article .header {
line-height:1.6
}
}

@media (min-width:320px) {
body {
width:90%;
@@ -174,7 +186,58 @@ article .header {
margin:0 0.6rem
}
}
@media (min-width:950px) {

@media (max-width:1199px) {
#navbox {
display: grid;
grid-template-columns: auto auto auto;
}
.tagline {
display: inline-block;
}
}

@media (max-width:740px) {
header {
grid-template-columns: auto;
}
#navbox {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
}
.tagline {
margin-bottom: 12px;
display: grid;
grid-template-columns: auto auto auto auto auto auto auto auto auto;
}
}

@media (max-width:615px) {
#navbox {
grid-template-columns: auto auto auto;
}
.tagline {
margin-bottom: 12px;
display: grid;
grid-template-columns: auto auto auto auto auto auto auto;
}
}

@media (max-width:350px) {
#navbox {
grid-template-columns: auto;
}
.tagline {
margin-bottom: 12px;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
}

@media (min-width:1200px) {
.tagline {
display: inline-block;
}
body {
width:75%;
max-width:110rem;


+ 1
- 1
templates/custom/default.clj View File

@@ -17,7 +17,7 @@
[:div {:class "logo"}
[:a {:href (str (:base-url extras) "index.html")}
[:img {:src (str (:base-url extras) "logo.png")}]]]
(into [:nav]
(into [:nav {:id "navbox", :display "grid"}]
(map (fn [[url label]]
[:a {:href (str (:base-url extras) url)} label])
[["index.html" "Home"]


Loading…
Cancel
Save