clacks/assets/css/clacks.scss

189 lines
2.7 KiB
SCSS

$sans-serif: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
$serif: "Times New Roman", serif;
$tint-color: #4b43e0;
// $link-color: blue;
$link-color: $tint-color;
$hr-color: darkgray;
body {
font-family: $sans-serif;
// always show scrollbar so effective page width doesn't change
overflow-y: scroll;
}
.container {
max-width: 720px;
margin: 0 auto;
}
a,
button.btn-link {
background: none;
border: none;
color: $link-color;
text-decoration: none;
padding: 0;
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
input, button:not(.btn-link) {
box-sizing: border-box;
height: 1.75rem;
}
button[type=submit]:not(.btn-link) {
padding: 0 2rem;
font-family: $sans-serif;
background-color: $tint-color;
border: 1px solid darken($tint-color, 20%);
color: white;
&:hover {
cursor: pointer;
background-color: darken($tint-color, 10%);
}
}
hr {
border: 1px solid $hr-color;
margin: 0.75rem 0;
}
input:focus, textarea:focus {
outline: none;
border: 2px solid $tint-color;
}
h1, h2, h3 {
margin: 0.5rem 0;
}
.flash-info {
padding: 0.5rem;
background-color: lighten(blue, 35%);
border: 1px solid darken(blue, 20%);
color: darken(blue, 35%);
}
.flash-error {
padding: 0.5rem;
background-color: lighten(red, 30%);
border: 1px solid darken(red, 20%);
color: darken(red, 35%);
}
header {
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
ul {
display: flex;
padding: 0;
li {
display: inline;
list-style: none;
&:not(:last-child) {
margin-right: 1rem;
}
}
}
}
}
ul.status-list {
padding: 0;
margin: 0;
li {
list-style: none;
margin-bottom: 1rem;
}
}
.pagination-link {
text-align: center;
}
.status {
padding: 0.5rem;
border: 1px solid #ddd;
background-color: #f2f2f2;
.status-meta {
display: flex;
flex-direction: row;
align-items: flex-start;
.status-author-nickname,
.status-author-username,
.status-meta-right {
display: inline;
margin: 0;
margin-right: 1rem;
font-size: 1rem;
}
.status-author-username {
font-weight: normal;
}
.status-meta-right {
flex-grow: 1;
text-align: right;
}
}
.status-content {
font-family: $serif;
font-size: 1.2rem;
margin: 1rem 0;
a {
text-decoration: underline;
}
}
}
.compose-status {
textarea {
display: block;
min-width: 100%;
max-width: 100%;
min-height: 4rem;
margin-bottom: 0.75rem;
padding: 0.5rem;
// we want 100% width to include the border
box-sizing: border-box;
}
}
.search-form {
width: 100%;
display: flex;
input[type=text] {
flex-grow: 1;
margin-right: 1rem;
}
}
.login-form {
.input-group {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
label {
width: 100px;
}
}
}