mirror of
https://github.com/Kozea/Radicale.git
synced 2025-07-02 16:58:30 +00:00
Use Sass instead of Scss
This commit is contained in:
Guillaume Ayoub
parent
c3a50507a2
commit
c16fac4a5c
2 changed files with 174 additions and 191 deletions
174
css/main.sass
Normal file
174
css/main.sass
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
---
|
||||
# Sass for Radicale
|
||||
---
|
||||
|
||||
@charset "utf-8"
|
||||
@import url(https:\/\/fonts.googleapis.com/css?family=Oxygen:400,300)
|
||||
|
||||
body
|
||||
background: #e4e9f6
|
||||
color: #424247
|
||||
display: flex
|
||||
flex-direction: column
|
||||
font-family: Oxygen, sans
|
||||
font-size: 14pt
|
||||
line-height: 160%
|
||||
margin: 0
|
||||
min-height: 100vh
|
||||
|
||||
a
|
||||
color: inherit
|
||||
|
||||
nav, footer
|
||||
background: #a40000
|
||||
color: white
|
||||
padding: 0 20%
|
||||
|
||||
ul
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
li
|
||||
display: block
|
||||
padding: 0 1em 0 0
|
||||
|
||||
a
|
||||
color: inherit
|
||||
display: block
|
||||
padding: 1em 0.5em 1em 0
|
||||
text-decoration: inherit
|
||||
transition: 0.2s
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
color: black
|
||||
outline: none
|
||||
|
||||
header
|
||||
background: url(logo.svg), linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1))
|
||||
background-position: 22% 45%
|
||||
background-repeat: no-repeat
|
||||
color: #efdddd
|
||||
font-size: 1.5em
|
||||
min-height: 250px
|
||||
overflow: auto
|
||||
padding: 3em 22%
|
||||
text-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5)
|
||||
|
||||
& > *
|
||||
padding-left: 220px
|
||||
|
||||
h1
|
||||
font-size: 2.5em
|
||||
font-weight: lighter
|
||||
margin: 0.5em 0
|
||||
|
||||
main
|
||||
flex: 1
|
||||
|
||||
section
|
||||
padding: 0 20% 2em
|
||||
|
||||
&:not(:last-child)
|
||||
border-bottom: 1px dashed #ccc
|
||||
|
||||
h1
|
||||
background: linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1))
|
||||
color: #e5dddd
|
||||
font-size: 2.5em
|
||||
margin: 0 -33.33% 1em
|
||||
padding: 1em 33.33%
|
||||
|
||||
h2, h3, h4
|
||||
font-weight: lighter
|
||||
margin: 1.5em 0 1em
|
||||
|
||||
article
|
||||
border-top: 1px solid transparent
|
||||
position: relative
|
||||
margin: 3em 0
|
||||
|
||||
aside
|
||||
box-sizing: border-box
|
||||
color: #aaa
|
||||
font-size: 0.8em
|
||||
right: -30%
|
||||
top: 0.5em
|
||||
position: absolute
|
||||
|
||||
&:before
|
||||
border-top: 1px dashed #ccc
|
||||
content: ''
|
||||
display: block
|
||||
left: -33.33%
|
||||
position: absolute
|
||||
right: -33.33%
|
||||
|
||||
pre
|
||||
border-radius: 3px
|
||||
background: black
|
||||
color: #d3d5db
|
||||
margin: 0 -1em
|
||||
overflow-x: auto
|
||||
padding: 1em
|
||||
|
||||
table
|
||||
border-collapse: collapse
|
||||
font-size: 0.8em
|
||||
margin: auto
|
||||
|
||||
td
|
||||
border: 1px solid #ccc
|
||||
padding: 0.5em
|
||||
|
||||
dl
|
||||
dt
|
||||
margin-bottom: 0.5em
|
||||
margin-top: 1em
|
||||
|
||||
@media (max-width: 800px)
|
||||
body
|
||||
font-size: 12pt
|
||||
|
||||
header, section
|
||||
padding-left: 2em
|
||||
padding-right: 2em
|
||||
|
||||
nav, footer
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
|
||||
ul
|
||||
justify-content: center
|
||||
|
||||
li
|
||||
padding: 0 0.5em
|
||||
|
||||
a
|
||||
padding: 1em 0
|
||||
|
||||
header
|
||||
background-position: 50% 30px, 0 0
|
||||
padding-bottom: 0
|
||||
padding-top: 330px
|
||||
text-align: center
|
||||
|
||||
& > *
|
||||
margin: 0
|
||||
padding-left: 0
|
||||
|
||||
section h1
|
||||
margin: 0 -0.8em 1.3em
|
||||
padding: 0.5em 0
|
||||
text-align: center
|
||||
|
||||
article
|
||||
aside
|
||||
top: 0.5em
|
||||
right: -1.5em
|
||||
|
||||
&:before
|
||||
left: -2em
|
||||
right: -2em
|
||||
191
css/main.scss
191
css/main.scss
|
|
@ -1,191 +0,0 @@
|
|||
---
|
||||
# Scss for Radicale
|
||||
---
|
||||
|
||||
@charset "utf-8";
|
||||
@import url(https:\/\/fonts.googleapis.com/css?family=Oxygen:400,300);
|
||||
|
||||
body {
|
||||
background: #e4e9f6;
|
||||
color: #424247;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Oxygen, sans;
|
||||
font-size: 14pt;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
nav, footer {
|
||||
background: #a40000;
|
||||
color: white;
|
||||
padding: 0 20%;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
padding: 0 1em 0 0;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
display: block;
|
||||
padding: 1em 0.5em 1em 0;
|
||||
text-decoration: inherit;
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: black;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
background: url(logo.svg), linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1));
|
||||
background-position: 22% 45%;
|
||||
background-repeat: no-repeat;
|
||||
color: #efdddd;
|
||||
font-size: 1.5em;
|
||||
min-height: 250px;
|
||||
overflow: auto;
|
||||
padding: 3em 22%;
|
||||
text-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5);
|
||||
|
||||
& > * {
|
||||
padding-left: 220px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
font-weight: lighter;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 0 20% 2em;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px dashed #ccc;
|
||||
}
|
||||
|
||||
h1 {
|
||||
background: linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1));
|
||||
color: #e5dddd;
|
||||
font-size: 2.5em;
|
||||
margin: 0 -33.33% 1em;
|
||||
padding: 1em 33.33%;
|
||||
}
|
||||
|
||||
h2, h3, h4 {
|
||||
font-weight: lighter;
|
||||
margin: 1.5em 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
border-top: 1px solid transparent;
|
||||
position: relative;
|
||||
margin: 3em 0;
|
||||
|
||||
aside {
|
||||
box-sizing: border-box;
|
||||
color: #aaa;
|
||||
font-size: 0.8em;
|
||||
right: -30%;
|
||||
top: 0.5em;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top: 1px dashed #ccc;
|
||||
content: '';
|
||||
display: block;
|
||||
left: -33.33%;
|
||||
position: absolute;
|
||||
right: -33.33%;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
border-radius: 3px;
|
||||
background: black;
|
||||
color: #d3d5db;
|
||||
margin: 0 -1em;
|
||||
overflow-x: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
body {
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
header, section {
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
nav, footer {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
ul {
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
padding: 0 0.5em;
|
||||
|
||||
a {
|
||||
padding: 1em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
background-position: 50% 30px, 0 0;
|
||||
padding-bottom: 0;
|
||||
padding-top: 330px;
|
||||
text-align: center;
|
||||
|
||||
& > * {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
section h1 {
|
||||
margin: 0 -0.8em 1.3em;
|
||||
padding: 0.5em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
article {
|
||||
aside {
|
||||
top: 0.5em;
|
||||
right: -1.5em;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: -2em;
|
||||
right: -2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue