fcc-challenges/lmde-3-disk-encryption/lmde-3-disk-encryption.css

229 lines
3.0 KiB
CSS

html {
font-family: 'Roboto', sans-serif;
scrollbar-color: #40916b #914066;
scrollbar-width: thin;
}
html::-webkit-scrollbar {
background-color: #40916b;
border-radius: 50%;
width: 4px;
}
html::-webkit-scrollbar-thumb {
background-color: #914066;
border-radius: 50%;
width: 4px;
}
.nav-container {
position: fixed;
text-align: left;
overflow-y: scroll;
top: 0;
bottom: 0;
margin-top: 4rem;
min-width: 350px;
width: 34%;
display: flex;
justify-content: center;
scrollbar-color: #914066 #40916b;
scrollbar-width: thin;
direction: rtl;
}
.nav-container::-webkit-scrollbar {
background-color: #40916b;
border-radius: 50%;
width: 4px;
}
.nav-container::-webkit-scrollbar-thumb {
background-color: #914066;
border-radius: 50%;
width: 4px;
}
.main-container {
position: relative;
margin-left: 38%;
padding-left: 2%;
}
main {
position: absolute;
top: 0;
left: 0;
max-width: 750px;
}
nav a{
color: black;
}
.main-left-indent {
margin-left: 1rem;
}
code {
white-space: pre-wrap;
}
pre,code {
font-family: 'Ubuntu Mono', monospace;
font-size: 1em;
}
.nowrap {
white-space: nowrap;
overflow-x: scroll;
}
h1 {
font-size: 175%;
color: #914066;
}
h2 {
font-size: 150%;
color: #40916b;
}
h3 {
font-size: 125%;
}
button {
margin-left: 4%;
margin-top: 1%;
margin-bottom: 2%;
background: #40916b;
color: white;
border-radius: 10px;
border-color: black;
font-weight: bold;
}
button:active {
background: #914066;
}
.attachment-full {
position: absolute;
right: 0px;
height: 149px;
width: 149px;
}
.githubLabel {
background-color: #00293C;
border: none;
width: 149px;
height: 0px;
position: absolute;
right: 0px;
}
@media only screen and (max-width: 1100px) {
body {
display: flex;
flex-direction: column;
}
.main-container {
width: 80%;
max-width: unset;
margin: auto;
}
main {
width: 100%;
left: unset;
}
.nav-container {
position: static;
overflow-y: unset;
top: unset;
bottom: unset;
justify-content: flex-start;
width: 80%;
min-width: unset;
margin-left: auto;
margin-right: auto;
}
}
@media only screen and (max-width: 768px) {
body {
display: flex;
flex-direction: column;
}
h1 {
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
h2 {
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
h3 {
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
}
@media only screen and (max-width: 400px) {
.main-container {
width: 75%;
}
.nav-container {
width: 75%;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 138%;
}
h3 {
font-size: 114%;
}
}
@media (orientation: portrait) {
.attachment-full {
height: 99px;
width: 99px;
}
.githubLabel {
width: 99px;
}
}
@media (orientation: landscape) and (max-height: 400px) {
.attachment-full {
height: 99px;
width: 99px;
}
.githubLabel {
width: 99px;
}
}