mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-25 22:46:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Finish responsive layout; several bug fixes

Browse source
This commit is contained in:
Matthew Holt 2023-05-31 15:53:49 -06:00 • committed by Francis Lavoie
parent d14c449e6c
commit ad74208595
No known key found for this signature in database
GPG key ID: C5204D4F28147FC8
6 changed files with 232 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

43
new/resources/css/common.css
View file

@ -4,6 +4,8 @@
--text-color: #222;
--header-bg: rgba(118, 179, 194, 0.11);
--header-border-color: #ebf0f2;
--topbar-link-color-hover: black;
--topbar-link-bg-hover: rgb(244, 249, 251);
--main-nav-link-color: #546c75;
--main-nav-link-hover-color: #01324b;
--link-color: #0097f2;
@ -27,6 +29,8 @@
--text-color: #cbe2e4; /* #a4c0c2 */
--header-bg: rgba(44, 130, 164, 0.11);
--header-border-color: transparent;
--topbar-link-color-hover: white;
--topbar-link-bg-hover: rgb(255 255 255 / .1);
--main-nav-link-color: #86a7b1;
--main-nav-link-hover-color: #e2e9ec;
--link-color: #34a1e4;
@ -168,8 +172,8 @@ header nav>ul {
}
.topbar a:hover {
background: rgb(0 0 0 / .05);
color: black;
background: var(--topbar-link-bg-hover);
color: var(--topbar-link-color-hover);
}
.navbar {
@ -479,3 +483,38 @@ header nav ul {
padding-right: 20px;
}
}
@media (max-width: 950px) {
header nav ul {
justify-content: space-evenly;
}
.topbar .wrapper {
justify-content: center;
flex-wrap: wrap;
gap: 0;
}
.logo {
height: 3em;
}
.navbar {
flex-direction: column;
gap: 0;
padding: 1em 0;
}
.navbar nav {
margin: .5em 0;
}
.navbar .actions {
margin: 0 auto;
}
.navbar nav > ul > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}

50
new/resources/css/docs.css
View file

@ -11,6 +11,7 @@
--pagenav-hover-bg: #f4f7f9;
--cmd-bg: #333;
--tip-color: #5c50bb;
--menu-toggle-bg: #e4f1f2;
}
.dark {
@ -26,6 +27,7 @@
--pagenav-hover-bg: #18262f;
--cmd-bg: black;
--tip-color: #a6b2f7;
--menu-toggle-bg: #274d5c;
}
@ -89,7 +91,12 @@ main {
min-width: 250px;
}
#docs-menu {
background: var(--menu-toggle-bg);
padding: 1em;
cursor: pointer;
display: none;
}
@ -189,7 +196,7 @@ main nav .heading {
letter-spacing: 1px;
}
main nav .heading:not(:first-child) {
main nav ul:not(:first-child) > .heading {
margin-top: 2.5em;
}
@ -359,9 +366,9 @@ article h5 {
font-size: .6em;
border-radius: 10px;
padding: .3em .5em;
margin-left: .25em;
position: absolute;
top: 5px;
left: 0;
text-decoration: none;
}
@ -579,7 +586,7 @@ td code {
#autonav {
position: absolute;
visibility: hidden;
display: none;
left: 80%;
top: 0;
background: var(--autonav-bg);
@ -597,8 +604,8 @@ td code {
font-size: 14px;
}
main nav > ul > li:hover #autonav {
visibility: visible;
main nav ul > li:hover #autonav {
display: block;
}
#autonav .heading {
@ -655,3 +662,34 @@ main nav > ul > li:hover #autonav {
display: none;
}
}
@media (max-width: 950px) {
#autonav {
display: none !important;
}
.docs {
flex-direction: column;
}
#docs-menu {
display: block;
}
#docs-menu-container {
height: 0;
overflow: hidden;
transition: height 250ms ease-out;
display: flex;
flex-wrap: wrap;
}
.docs nav ul {
min-width: 250px;
flex: 1;
}
main nav ul .heading {
margin-top: 2.5em !important;
}
}