133 lines
2.6 KiB
Sass
133 lines
2.6 KiB
Sass
|
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@500&display=swap")
|
||
|
|
|
||
|
|
@import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap")
|
||
|
|
|
||
|
|
\:root
|
||
|
|
--color-bg:#fffff4
|
||
|
|
--color-text:#000
|
||
|
|
--gap-l:2.5rem
|
||
|
|
|
||
|
|
body
|
||
|
|
margin: var(--gap-l) auto
|
||
|
|
max-width: 610px
|
||
|
|
line-height: 1.6
|
||
|
|
background: var(--color-bg)
|
||
|
|
color: var(--color-text)
|
||
|
|
padding: 0 10px
|
||
|
|
line-height: 28px
|
||
|
|
font-family: "Lora"
|
||
|
|
font-weight: 500
|
||
|
|
box-sizing: border-box
|
||
|
|
|
||
|
|
/* Smooth the font a little bit, it's a
|
||
|
|
*bit too bold on retina screens
|
||
|
|
-webkit-font-smoothing: antialiased
|
||
|
|
|
||
|
|
/* ---------------------------------------------------
|
||
|
|
/* Make a nice input form with rounded corners and hover
|
||
|
|
*animations
|
||
|
|
/* ---------------------------------------------------
|
||
|
|
|
||
|
|
input
|
||
|
|
padding: 10px 16px
|
||
|
|
margin: 2px 0
|
||
|
|
box-sizing: border-box
|
||
|
|
border: 2px solid #dabebe
|
||
|
|
border-radius: 6px
|
||
|
|
background: #fffff4
|
||
|
|
color: #3a1616
|
||
|
|
font-size: 16px
|
||
|
|
-webkit-transition: 0.5s
|
||
|
|
transition: 0.5s
|
||
|
|
outline: none
|
||
|
|
|
||
|
|
&:focus
|
||
|
|
border: 2px solid #3a1616
|
||
|
|
|
||
|
|
/* ---------------------------------------
|
||
|
|
/* The button is very similar to the input
|
||
|
|
/* ---------------------------------------
|
||
|
|
|
||
|
|
.button
|
||
|
|
background-color: #fffff4
|
||
|
|
border: none
|
||
|
|
color: black
|
||
|
|
padding: 6px 14px
|
||
|
|
text-align: center
|
||
|
|
text-decoration: none
|
||
|
|
display: inline-block
|
||
|
|
font-size: 16px
|
||
|
|
margin: 4px 2px
|
||
|
|
transition-duration: 0.4s
|
||
|
|
cursor: pointer
|
||
|
|
border: 2px solid #3a1616
|
||
|
|
border-radius: 6px
|
||
|
|
|
||
|
|
&:hover
|
||
|
|
background-color: #3a1616
|
||
|
|
color: white
|
||
|
|
|
||
|
|
/* -----------------------------------------------
|
||
|
|
/* Various classes for messages of different kinds
|
||
|
|
/* -----------------------------------------------
|
||
|
|
|
||
|
|
.isa_info, .isa_success, .isa_warning, .isa_error
|
||
|
|
width: 90%
|
||
|
|
margin: 10px 0px
|
||
|
|
padding: 12px
|
||
|
|
|
||
|
|
.isa_info
|
||
|
|
color: #00529b
|
||
|
|
background-color: #bde5f8
|
||
|
|
|
||
|
|
.isa_success
|
||
|
|
color: #4f8a10
|
||
|
|
background-color: #dff2bf
|
||
|
|
|
||
|
|
.isa_warning
|
||
|
|
color: #9f6000
|
||
|
|
background-color: #feefb3
|
||
|
|
|
||
|
|
.isa_error
|
||
|
|
color: #d8000c
|
||
|
|
background-color: #ffd2d2
|
||
|
|
|
||
|
|
h1, h2, h3
|
||
|
|
line-height: 1.2
|
||
|
|
font-family: "Lora"
|
||
|
|
|
||
|
|
img
|
||
|
|
width: 500px
|
||
|
|
max-width: 100%
|
||
|
|
border-radius: 10px
|
||
|
|
text-align: center
|
||
|
|
|
||
|
|
/* ---------------------------------------------
|
||
|
|
/* Bold hover animations on links and clickables
|
||
|
|
/* ---------------------------------------------
|
||
|
|
|
||
|
|
a
|
||
|
|
cursor: pointer
|
||
|
|
color: #217ab7
|
||
|
|
line-height: inherit
|
||
|
|
transition: .14s
|
||
|
|
|
||
|
|
&:hover
|
||
|
|
color: white
|
||
|
|
background-color: #3297d3
|
||
|
|
|
||
|
|
&:visited
|
||
|
|
color: #43458b
|
||
|
|
border-color: #43458b
|
||
|
|
|
||
|
|
&:hover
|
||
|
|
color: white
|
||
|
|
background-color: #9251ac
|
||
|
|
|
||
|
|
pre
|
||
|
|
font-family: "Inconsolata", monospace
|
||
|
|
|
||
|
|
\::selection
|
||
|
|
color: white
|
||
|
|
background: #ff4081
|