diff --git a/Makefile b/Makefile index 986036f8c..a08200ad6 100644 --- a/Makefile +++ b/Makefile @@ -1,4 +1,4 @@ build: hugo server: - hugo server --baseUrl=http://127.0.0.1:1313 --buildDrafts --buildFuture + hugo server --baseURL=http://127.0.0.1:1313 --buildDrafts --buildFuture diff --git a/assets/css/master.css b/assets/css/master.css index 8bc78bc7a..f0090907c 100644 --- a/assets/css/master.css +++ b/assets/css/master.css @@ -30,66 +30,188 @@ pre, code { /* ================================================================== */ /* Document structure */ -footer { - background-color: rgb(0, 44, 75); - color: #fff; - font-size: 14px; - font-family: "Fira Sans", sans-serif; +.layout { + display: flex; + min-height: 100vh; + flex-direction: column; } -.footer-section-title { - font-weight: bold; +.content { + flex: 1; } -footer a { + +/* Header */ + +.navbar { + background-color: #0588cb; color: #fff; - opacity: 0.5; + padding: 8px 0; + z-index: 6; + position: relative; +} + +.nav-menu-brand a { display: block; - padding: 2px 0; - margin: 2px 0; + width: 92px; + height: 26px; + transition: 0.1s ease-in-out; } -footer a:hover { + +.nav-menu-brand a:hover { + opacity: 0.8; +} + +.nav-menu-btn { + background: transparent; + border: none; +} + +.nav-menu-btn-icon { + display: block; + width: 32px; + height: 32px; +} + +.navbar_opened .nav-menu-btn-icon_open { + display: none; +} + +.nav-menu-btn-icon_close { + display: none; +} + +.navbar_opened .nav-menu-btn-icon_close { + display: block; +} + +.nav-menu { + display: none; + margin-top: 16px; + flex: 1; + justify-content: space-between; +} + +.navbar_opened .nav-menu{ + display: flex !important; + flex-direction: column; + align-content: flex-start; +} + +@media (min-width: 992px) { + .nav-menu { + display: flex; + flex-direction: row; + align-items: center; + margin-top: 0; + margin-left: 24px; + } + + .navbar_opened .nav-menu{ + flex-direction: row; + } +} + + +.nav-menu-item a { + font-size: 16px; + font-weight: normal; + text-align: right; color: #fff; - opacity: 1; + display: block; + margin: 4px 0; + padding: 0 8px; + border-left: 3px solid transparent; text-decoration: none; + transition: .1s ease-in-out; } -.footer-links-social { - margin: 0; - padding: 0; + +.nav-menu-item a.active, +.nav-menu-item a:hover { + border-left: 3px solid #fff; } -.footer-links-social li { - display: inline-block; - padding: 0; - margin: 0 10px 0 0; + +@media (min-width: 992px) { + .nav-menu-item a { + font-size: 14px; + text-align: center; + padding: 6px 8px 0; + margin: 0 4px; + border-bottom: 3px solid transparent; + border-left: 0; + } + + .nav-menu-item a.active, + .nav-menu-item a:hover { + border-bottom: 3px solid #fff; + border-left: 0; + } } -.footer-links-social a { - overflow: hidden; - text-indent: 120%; - display: block; - background-repeat: no-repeat; - height: 16px; - width: 16px; +.nav-menu-install { + font-size: 16px; + text-align: center; +} + +@media (min-width: 992px) { + .nav-menu-install { + font-size: 14px; + } +} + +/* Footer */ + +footer { + background-color: rgb(0, 44, 75); + color: #fff; + font-size: 14px; + font-family: "Fira Sans", sans-serif; } -.footer-links-social a.twitter { - background-image: url('/images/logos/twitter.png'); +footer a { + color: #fff; + opacity: 0.6; + text-decoration: none; + transition: .1s ease-in-out; +} + +footer a:hover { + color: inherit; + opacity: 1; + text-decoration: inherit; } -.footer-links-social a.youtube { - background-image: url('/images/logos/youtube.png'); + +.footer-section-title { + font-weight: bold; + margin-bottom: 4px; } -.footer-links-social a.facebook { - background-image: url('/images/logos/facebook.png'); + +.footer-link { + display: block; + padding: 4px 0 2px; + margin: 2px 0; + } + +.footer-social-links { + margin: 0; + padding: 0; } -.footer-links-social a.instagram { - background-image: url('/images/logos/instagram.png'); + +.footer-social-links li { + display: inline-block; + padding: 0; + margin: 6px 10px 0 0; } -.footer-links-social a.mastodon { - background-image: url('/images/logos/mastodon-brands.png'); + +.footer-copyright { + font-size: 0.875em; } +.footer-copyright a { + display: inline; +} /* ================================================================== */ /* Rows */ @@ -390,142 +512,6 @@ td:last-child { border-right: 0px; } -/* ================================================================== */ -/* Navigation */ - -.navbar { - background-color: #0588cb; - color: #fff; - padding: 8px 0; - z-index: 6; - position: relative; -} - -.nav-menu-brand a { - display: block; - width: 92px; - height: 26px; - transition: 0.1s ease-in-out; -} - -.nav-menu-brand a:hover { - opacity: 0.8; -} - -.nav-menu-btn { - background: transparent; - border: none; -} - -.nav-menu-btn-icon { - display: block; - width: 32px; - height: 32px; -} - -.navbar_opened .nav-menu-btn-icon_open { - display: none; -} - -.nav-menu-btn-icon_close { - display: none; -} - -.navbar_opened .nav-menu-btn-icon_close { - display: block; -} - -.nav-menu { - display: none; - margin-top: 16px; - flex: 1; - justify-content: space-between; -} - -.navbar_opened .nav-menu{ - display: flex !important; - flex-direction: column; - align-content: flex-start; -} - -@media (min-width: 992px) { - .nav-menu { - display: flex; - flex-direction: row; - align-items: center; - margin-top: 0; - margin-left: 24px; - } - - .navbar_opened .nav-menu{ - flex-direction: row; - } -} - - -.nav-menu-item a { - font-size: 16px; - font-weight: normal; - text-align: right; - color: #fff; - display: block; - margin: 4px 0; - padding: 0 8px; - border-left: 3px solid transparent; - text-decoration: none; - transition: .1s ease-in-out; -} - - -.nav-menu-item a.active, -.nav-menu-item a:hover { - border-left: 3px solid #fff; -} - - -@media (min-width: 992px) { - .nav-menu-item a { - font-size: 14px; - text-align: center; - padding: 6px 8px 0; - margin: 0 4px; - border-bottom: 3px solid transparent; - border-left: 0; - } - - .nav-menu-item a.active, - .nav-menu-item a:hover { - border-bottom: 3px solid #fff; - border-left: 0; - } -} - -.nav-menu-install { - font-size: 16px; - text-align: center; -} - -@media (min-width: 992px) { - .nav-menu-install { - font-size: 14px; - } -} - -/* ================================================================== */ -/* Header */ - -header .logo svg { - height: 180px; - margin: auto; - display: block; -} - -header .wordmark { - height: 2.6rem; - margin: 1.4rem 0 1.2rem; -} - - /* ================================================================== */ /* How it works */ .homepage .ooni-explorer { @@ -756,13 +742,6 @@ div.ooni-team-member { vertical-align: middle; } -/* ================================================================== */ -/* Content pages */ - -.content { - padding-top: 60px; -} - /* ================================================================== */ /* Article pages */ @@ -869,8 +848,6 @@ nav#TableOfContents li, nav#TableOfContents ul { .blog-post { font-family: "Source Serif Pro", serif; - /* hotfix to make the footer sticky in short blog posts */ - min-height: calc(100vh - 225px - 52px); } .blog-post img { diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 68e0cc3dc..e73751852 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -53,131 +53,138 @@ - + {{ block "navbar" . }} - + + {{ end }} +
{{ block "main" . }} {{ end }} +
{{ block "footer" . }}